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。