CSS DSL

所需依赖项: io.ktor:ktor-server-html-builder, org.jetbrains.kotlin-wrappers:kotlin-css

代码示例: css-dsl

CSS DSL 扩展了 HTML DSL，并允许你使用 kotlin-css 包装器在 Kotlin 中编写样式表。

关于如何将样式表作为静态内容提供服务，请参见 提供静态内容。

添加依赖项

CSS DSL 无需安装，但需要在构建脚本中包含以下构件：

1. 用于 HTML DSL 的 ktor-server-html-builder 构件：

   Gradle (Kotlin)Gradle (Groovy)Maven

2. 用于构建 CSS 的 kotlin-css-jvm 构件：

   Gradle (Kotlin)Gradle (Groovy)Maven

   你可以将 $kotlin_css_version 替换为 kotlin-css 构件的所需版本，例如 1.0.0-pre.625。

提供 CSS

要发送 CSS 响应，你需要通过添加 respondCss 方法来扩展 ApplicationCall，以将样式表序列化为字符串并使用 CSS 内容类型将其发送给客户端：

suspend inline fun ApplicationCall.respondCss(builder: CssBuilder.() -> Unit) {
    this.respondText(CssBuilder().apply(builder).toString(), ContentType.Text.CSS)
}

然后，你可以在所需的 路由 内提供 CSS：

get("/styles.css") {
    call.respondCss {
        body {
            backgroundColor = Color.darkBlue
            margin = Margin(0.px)
        }
        rule("h1.page-title") {
            color = Color.white
        }
    }
}

最后，你可以将指定的 CSS 用于使用 HTML DSL 创建的 HTML 文档：

get("/html-dsl") {
    call.respondHtml {
        head {
            link(rel = "stylesheet", href = "/styles.css", type = "text/css")
        }
        body {
            h1(classes = "page-title") {
                +"Hello from Ktor!"
            }
        }
    }
}

完整的示例可以在此处找到：css-dsl。