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。