Emit HTML with a DSL

    Edit Page

    预计阅读时间：2分钟

    此功能与kotlinx.html集成在一起，可使用分块传输编码直接发出HTML，而不必为整个HTML保留内存.

    此功能定义在类io.ktor.html.HtmlContent在神器io.ktor:ktor-html-builder:$ktor_version .
    dependencies { implementation "io.ktor:ktor-html-builder:$ktor_version" }
    dependencies { implementation("io.ktor:ktor-html-builder:$ktor_version") }
    <project> ... <dependencies> <dependency> <groupId>io.ktor</groupId> <artifactId>ktor-html-builder</artifactId> <version>${ktor.version}</version> <scope>compile</scope> </dependency> </dependencies> </project>

    Installing

    此功能不需要安装.

    Basic Usage

    当生成的响应，而不是调用respond / respondText方法，你必须调用ApplicationCall.respondHtml ：

    call.respondHtml {
    head {
        title { +"Async World" }
    }
    body {
        h1(id = "title") {
            +"Title"
        }
    }
}

    有关使用kotlinx.html生成HTML的文档，请检查其wiki .

    Templates & Layouts

    除了使用DSL生成纯HTML之外，ktor还公开了一个简单的类型化模板引擎. 您可以使用它以键入的方式生成复杂的布局. 它非常简单，但功能强大：

    call.respondHtmlTemplate(MulticolumnTemplate()) {
    column1 {
        +"Hello, $name"
    }
    column2 {
        +"col2"
    }
}

class MulticolumnTemplate(val main: MainTemplate = MainTemplate()) : Template<HTML> {
    val column1 = Placeholder<FlowContent>()
    val column2 = Placeholder<FlowContent>()
    override fun HTML.apply() {
        insert(main) {
            menu {
                item { +"One" }
                item { +"Two" }
            }
            content {
                div("column") {
                    insert(column1)
                }
                div("column") {
                    insert(column2)
                }
            }
        }
    }
}

class MainTemplate : Template<HTML> {
    val content = Placeholder<HtmlBlockTag>()
    val menu = TemplatePlaceholder<MenuTemplate>()
    override fun HTML.apply() {
        head {
            title { +"Template" }
        }
        body {
            h1 {
                insert(content)
            }
            insert(MenuTemplate(), menu)
        }
    }
}

class MenuTemplate : Template<FlowContent> {
    val item = PlaceholderList<UL, FlowContent>()
    override fun FlowContent.apply() {
        if (!item.isEmpty()) {
            ul {
                each(item) {
                    li {
                        if (it.first) b {
                            insert(it)
                        } else {
                            insert(it)
                        }
                    }
                }
            }
        }
    }
}

    您必须定义实现Template<TFlowContent> ，重写TFlowContent.apply方法，并可选地定义Placeholder或TemplatePlaceholder属性，如示例中所示.

    使用call.respondHtmlTemplate(MulticolumnTemplate()) { }生成模板时，您将获得模板作为接收者，并能够以类型化方式访问定义为属性的占位符.

    by  ICOPY.SITE