Emit HTML with a DSL

预计阅读时间: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方法,并可选地定义PlaceholderTemplatePlaceholder属性,如示例中所示.

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

by  ICOPY.SITE