Open AIDoc

简体中文

繁體中文
日本語
한국어

简体中文

繁體中文
日本語
한국어

Appearance

HTML DSL ​

所需依赖项: io.ktor:ktor-server-html-builder

代码示例: html

原生服务器
Ktor supports Kotlin/Native and allows you to run a server without an additional runtime or virtual machine.
支持: ✅

HTML DSL 将 kotlinx.html 库集成到 Ktor 中，并允许您向客户端响应 HTML 块。通过 HTML DSL，您可以使用 Kotlin 编写纯 HTML，将变量插入视图，甚至可以使用模板构建复杂的 HTML 布局。

添加依赖项 ​

HTML DSL 不需要安装，但需要 ktor-server-html-builder 构件。您可以按照以下方式将其包含在构建脚本中：

Kotlin
Groovy
XML

发送 HTML 响应 ​

要发送 HTML 响应，请在所需的路由中调用 respondHtml 方法。 下面的示例展示了一个 HTML DSL 示例以及发送给客户端的对应 HTML：

kotlin
import io.ktor.server.application.*
import io.ktor.server.html.*
import io.ktor.http.*
import io.ktor.server.routing.*
import kotlinx.html.*

fun Application.module() {
    routing {
        get("/") {
            val name = "Ktor"
            call.respondHtml(HttpStatusCode.OK) {
                head {
                    title {
                        +name
                    }
                }
                body {
                    h1 {
                        +"Hello from $name!"
                    }
                }
            }
        }
    }
}
html
<html>
<head>
    <title>Ktor</title>
</head>
<body>
<h1>Hello from Ktor!</h1>
</body>
</html>

以下示例展示了如何响应用于从用户收集凭据信息的 HTML 表单：

kotlin
get("/login") {
    call.respondHtml {
        body {
            form(action = "/login", encType = FormEncType.applicationXWwwFormUrlEncoded, method = FormMethod.post) {
                p {
                    +"Username:"
                    textInput(name = "username")
                }
                p {
                    +"Password:"
                    passwordInput(name = "password")
                }
                p {
                    submitInput() { value = "Login" }
                }
            }
        }
    }
}
html
<html>
<body>
<form action="/login" enctype="application/x-www-form-urlencoded" method="post">
    <p>Username:<input type="text" name="username"></p>
    <p>Password:<input type="password" name="password"></p>
    <p><input type="submit" value="Login"></p>
</form>
</body>
</html>

有关完整示例，请参阅 auth-form-html-dsl。

要了解更多关于在服务器端接收表单参数的信息，请参阅表单参数。

要了解更多关于使用 kotlinx.html 生成 HTML 的信息，请参阅 kotlinx.html wiki。

发送部分 HTML ​

除了生成完整的 HTML 文档外，您还可以使用 .respondHtmlFragment() 函数响应 HTML 代码片段。

当返回不需要完整 <html> 文档的部分标记（例如 HTMX 等库使用的动态更新）时，HTML 代码片段非常有用。

kotlin
import io.ktor.server.application.*
import io.ktor.server.html.*
import io.ktor.http.*
import io.ktor.server.routing.*
import kotlinx.html.*

fun Application.module() {
    routing {
        get("/fragment") {
            call.respondHtmlFragment(HttpStatusCode.Created) {
                div("fragment") {
                    span { +"Created!" }
                }
            }
        }
    }
}
html
<div class="fragment">
    <span>
        Created!
    </span>
</div>

该函数的工作方式与 .respondHtml() 类似，但它仅渲染您在构建器中定义的内容，而不会添加根 HTML 元素。

模板 ​

除了生成纯 HTML 之外，Ktor 还提供了一个可用于构建复杂布局的模板引擎。您可以为 HTML 页面的不同部分创建模板层次结构，例如，整个页面的根模板、页眉和页脚的子模板等。Ktor 公开了以下用于处理模板的 API：

  1. 要向客户端响应基于指定模板构建的 HTML，请调用 respondHtmlTemplate 方法。
  2. 要创建模板，您需要实现 Template 接口并重写提供 HTML 的 Template.apply 方法。
  3. 在创建的模板类中，您可以为不同的内容类型定义占位符：

示例 ​

让我们通过示例来看看如何使用模板创建分层布局。假设我们有以下 HTML：

html
<body>
<h1>Ktor</h1>
<article>
    <h2>Hello from Ktor!</h2>
    <p>Kotlin Framework for creating connected systems.</p>
    <ul>
       <li><b>One</b></li>
       <li>Two</li>
    </ul>
</article>
</body>

我们可以将此页面的布局分为两个部分：

  • 用于页眉的根布局模板和用于文章的子模板。
  • 用于文章内容的子模板。

让我们逐步实现这些布局：

  1. 调用 respondHtmlTemplate 方法并将模板类作为参数传递。在我们的示例中，这就是应该实现 Template 接口的 LayoutTemplate 类：

    kotlin
    get("/") {
    call.respondHtmlTemplate(LayoutTemplate()) {
        // ...
    }
}

    在该块内部，我们将能够访问模板并指定其属性值。这些值将替换模板类中指定的占位符。我们将在下一步中创建 LayoutTemplate 并定义其属性。

  2. 根布局模板如下所示：

    kotlin
    class LayoutTemplate: Template<HTML> {
    val header = Placeholder<FlowContent>()
    val content = TemplatePlaceholder<ArticleTemplate>()
    override fun HTML.apply() {
        body {
            h1 {
                insert(header)
            }
            insert(ArticleTemplate(), content)
        }
    }
}

    该类公开了两个属性：

    • header 属性指定在 h1 标记内插入的内容。
    • content 属性指定文章内容的子模板。

  3. 子模板如下所示：

    kotlin
    class ArticleTemplate : Template<FlowContent> {
    val articleTitle = Placeholder<FlowContent>()
    val articleText = Placeholder<FlowContent>()
    val list = TemplatePlaceholder<ListTemplate>()
    override fun FlowContent.apply() {
        article {
            h2 {
                insert(articleTitle)
            }
            p {
                insert(articleText)
            }
            insert(ListTemplate(), list)
        }
    }
}

    此模板公开了 articleTitle、articleText 和 list 属性，它们的值将被插入到 article 内部。

  4. 要提供值列表作为模板，请创建以下新类：

    kotlin
    class ListTemplate : 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)
                        }
                    }
                }
            }
        }
    }
}

    此模板使用 PlaceholderList 类从提供的项生成无序列表 (UL)。 它还将第一项包装在 <b> 元素中以进行强调。

  5. 现在我们准备发送使用指定属性值构建的 HTML：

    kotlin
    get("/") {
    call.respondHtmlTemplate(LayoutTemplate()) {
        header {
            +"Ktor"
        }
        content {
            articleTitle {
                +"Hello from Ktor!"
            }
            articleText {
                +"Kotlin Framework for creating connected systems."
            }
            list {
                item { +"One" }
                item { +"Two" }
            }
        }
    }
}

您可以在此处找到完整示例：html-templates。

Copyright © 2026 Open AIDoc.