Skip to content

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 アーティファクト:

    Kotlin
    Groovy
    XML
  2. CSS作成用の kotlin-css-jvm アーティファクト:

    Kotlin
    Groovy
    XML

    $kotlin_css_version は、kotlin-css アーティファクトの必要なバージョン(例: 1.0.0-pre.625)に置き換えることができます。

CSSの配信

CSSレスポンスを送信するには、ApplicationCall を拡張して respondCss メソッドを追加し、スタイルシートを文字列にシリアライズして CSS コンテンツタイプでクライアントに送信する必要があります。

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

次に、必要なルート内でCSSを提供できます。

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

最後に、HTML DSLで作成されたHTMLドキュメントに対して、指定したCSSを使用できます。

kotlin
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