Skip to content

HTML

HTMLはDokkaのデフォルトで推奨される出力形式です。現在ベータ版であり、Stable版のリリースが近づいています。

kotlinx.coroutinesのドキュメントを閲覧することで、出力例を確認できます。

HTMLドキュメントの生成

HTMLは出力形式としてすべてのランナーでサポートされています。HTMLドキュメントを生成するには、使用するビルドツールやランナーに応じて、以下の手順に従ってください。

  • Gradleの場合、dokkaHtmlまたはdokkaHtmlMultiModuleタスクを実行します。
  • Mavenの場合、dokka:dokkaゴールを実行します。
  • CLIランナーの場合、HTMLの依存関係を設定して実行します。

この形式で生成されたHTMLページは、すべてを正しくレンダリングするためにWebサーバーでホストする必要があります。

GitHub Pagesのような、任意の無料の静的サイトホスティングサービスを使用できます。

ローカルでは、IntelliJの組み込みWebサーバーを使用できます。

設定

HTML形式はDokkaの基本フォーマットであるため、DokkaBaseおよびDokkaBaseConfigurationクラスを通じて設定可能です。

型安全なKotlin DSLを使用:

kotlin
import org.jetbrains.dokka.base.DokkaBase
import org.jetbrains.dokka.gradle.DokkaTask
import org.jetbrains.dokka.base.DokkaBaseConfiguration

buildscript {
    dependencies {
        classpath("org.jetbrains.dokka:dokka-base:2.0.0")
    }
}

tasks.withType<DokkaTask>().configureEach {
    pluginConfiguration<DokkaBase, DokkaBaseConfiguration> {
        customAssets = listOf(file("my-image.png"))
        customStyleSheets = listOf(file("my-styles.css"))
        footerMessage = "(c) 2022 MyOrg"
        separateInheritedMembers = false
        templatesDir = file("dokka/templates")
        mergeImplicitExpectActualDeclarations = false
    }
}

JSONを使用:

kotlin
import org.jetbrains.dokka.gradle.DokkaTask

tasks.withType<DokkaTask>().configureEach {
    val dokkaBaseConfiguration = """
    {
      "customAssets": ["${file("assets/my-image.png")}"],
      "customStyleSheets": ["${file("assets/my-styles.css")}"],
      "footerMessage": "(c) 2022 MyOrg",
      "separateInheritedMembers": false,
      "templatesDir": "${file("dokka/templates")}",
      "mergeImplicitExpectActualDeclarations": false
    }
    """
    pluginsMapConfiguration.set(
        mapOf(
            // fully qualified plugin name to json configuration
            "org.jetbrains.dokka.base.DokkaBase" to dokkaBaseConfiguration
        )
    )
}
groovy
import org.jetbrains.dokka.gradle.DokkaTask

tasks.withType(DokkaTask.class) {
    String dokkaBaseConfiguration = """
    {
      "customAssets": ["${file("assets/my-image.png")}"],
      "customStyleSheets": ["${file("assets/my-styles.css")}"],
      "footerMessage": "(c) 2022 MyOrg"
      "separateInheritedMembers": false,
      "templatesDir": "${file("dokka/templates")}",
      "mergeImplicitExpectActualDeclarations": false
    }
    """
    pluginsMapConfiguration.set(
            // fully qualified plugin name to json configuration
            ["org.jetbrains.dokka.base.DokkaBase": dokkaBaseConfiguration]
    )
}
xml
<plugin>
    <groupId>org.jetbrains.dokka</groupId>
    <artifactId>dokka-maven-plugin</artifactId>
    ...
    <configuration>
        <pluginsConfiguration>
            <!-- Fully qualified plugin name -->
            <org.jetbrains.dokka.base.DokkaBase>
                <!-- Options by name -->
                <customAssets>
                    <asset>${project.basedir}/my-image.png</asset>
                </customAssets>
                <customStyleSheets>
                    <stylesheet>${project.basedir}/my-styles.css</stylesheet>
                </customStyleSheets>
                <footerMessage>(c) MyOrg 2022 Maven</footerMessage>
                <separateInheritedMembers>false</separateInheritedMembers>
                <templatesDir>${project.basedir}/dokka/templates</templatesDir>
                <mergeImplicitExpectActualDeclarations>false</mergeImplicitExpectActualDeclarations>
            </org.jetbrains.dokka.base.DokkaBase>
        </pluginsConfiguration>
    </configuration>
</plugin>

コマンドラインオプションを使用:

Bash
java -jar dokka-cli-2.0.0.jar \
     ...
     -pluginsConfiguration "org.jetbrains.dokka.base.DokkaBase={\"customAssets\": [\"my-image.png\"], \"customStyleSheets\": [\"my-styles.css\"], \"footerMessage\": \"(c) 2022 MyOrg\", \"separateInheritedMembers\": false, \"templatesDir\": \"dokka/templates\", \"mergeImplicitExpectActualDeclarations\": false}
"

JSON設定を使用:

json
{
  "moduleName": "Dokka Example",
  "pluginsConfiguration": [
    {
      "fqPluginName": "org.jetbrains.dokka.base.DokkaBase",
      "serializationFormat": "JSON",
      "values": "{\"customAssets\": [\"my-image.png\"], \"customStyleSheets\": [\"my-styles.css\"], \"footerMessage\": \"(c) 2022 MyOrg\", \"separateInheritedMembers\": false, \"templatesDir\": \"dokka/templates\", \"mergeImplicitExpectActualDeclarations\": false}"
    }
  ]
}

設定オプション

以下の表には、利用可能なすべての設定オプションとその目的が含まれています。

オプション説明
customAssetsドキュメントにバンドルされる画像アセットのパスのリスト。画像アセットは任意のファイル拡張子を持つことができます。詳細については、「アセットのカスタマイズ」を参照してください。
customStyleSheetsドキュメントにバンドルされ、レンダリングに使用される.cssスタイルシートのパスのリスト。詳細については、「スタイルのカスタマイズ」を参照してください。
templatesDirカスタムHTMLテンプレートを含むディレクトリへのパス。詳細については、「テンプレート」を参照してください。
footerMessageフッターに表示されるテキスト。
separateInheritedMembersこれは真偽値オプションです。trueに設定すると、Dokkaはプロパティ/関数と継承されたプロパティ/関数を個別にレンダリングします。これはデフォルトで無効になっています。
mergeImplicitExpectActualDeclarationsこれは真偽値オプションです。trueに設定すると、Dokkaはexpect/actualとして宣言されていないが、同じ完全修飾名を持つ宣言を結合します。これはレガシーコードベースで役立つ場合があります。これはデフォルトで無効になっています。

Dokkaプラグインの設定に関する詳細については、「Dokkaプラグインの設定」を参照してください。

カスタマイズ

ドキュメントに独自の見た目と雰囲気を追加できるように、HTML形式はいくつかのカスタマイズオプションをサポートしています。

スタイルのカスタマイズ

customStyleSheets 設定オプションを使用することで、独自のスタイルシートを使用できます。これらはすべてのページに適用されます。

Dokkaのデフォルトスタイルシートは、同じ名前のファイルを提供することで上書きすることも可能です。

スタイルシート名説明
style.cssメインスタイルシート。すべてのページで使用されるスタイルの大部分が含まれています。
logo-styles.cssヘッダーロゴのスタイル設定。
prism.cssPrismJS構文ハイライターのスタイル。

DokkaのすべてのスタイルシートのソースコードはGitHubで入手可能です。

アセットのカスタマイズ

customAssets 設定オプションを使用することで、ドキュメントにバンドルされる独自の画像を提供できます。

これらのファイルは<output>/imagesディレクトリにコピーされます。

Dokkaの画像やアイコンは、同じ名前のファイルを提供することで上書きすることが可能です。最も有用で関連性の高いものはlogo-icon.svgで、これはヘッダーで使用される画像です。残りはほとんどアイコンです。

Dokkaで使用されるすべての画像はGitHubで確認できます。

ロゴの変更

ロゴをカスタマイズするには、まずlogo-icon.svg用の独自のアセットを提供することから始められます。

見た目が気に入らない場合や、デフォルトの.svgファイルの代わりに.pngファイルを使用したい場合は、logo-styles.cssスタイルシートを上書きしてカスタマイズできます。

その方法の例については、弊社のカスタムフォーマットサンプルプロジェクトを参照してください。

サポートされるロゴの最大寸法は幅120ピクセル、高さ36ピクセルです。より大きな画像を使用すると、自動的にサイズ変更されます。

フッターの変更

footerMessage 設定オプションを使用することで、フッターのテキストを変更できます。

テンプレート

Dokkaは、ドキュメントページを生成するために使用されるFreeMarkerテンプレートを変更する機能を提供します。

ヘッダーを完全に変更したり、独自のバナー/メニュー/検索を追加したり、アナリティクスを読み込んだり、ボディのスタイルを変更したりできます。

Dokkaは以下のテンプレートを使用します。

テンプレート説明
base.ftlレンダリングされるすべてのページの一般的なデザインを定義します。
includes/header.ftlデフォルトでロゴ、バージョン、ソースセットセレクター、ライト/ダークテーマスイッチ、検索を含むページヘッダー。
includes/footer.ftlfooterMessage 設定オプションと著作権情報を含むページフッター。
includes/page_metadata.ftl<head>コンテナ内で使用されるメタデータ。
includes/source_set_selector.ftlヘッダー内のソースセットセレクター。

ベーステンプレートはbase.ftlであり、残りのリストされたすべてのテンプレートを含みます。DokkaのすべてのテンプレートのソースコードはGitHubで入手可能です。

templatesDir 設定オプションを使用することで、任意のテンプレートを上書きできます。Dokkaは指定されたディレクトリ内で正確なテンプレート名を検索します。ユーザー定義のテンプレートが見つからない場合、デフォルトのテンプレートを使用します。

変数

以下の変数は、すべてのテンプレート内で利用可能です。

変数説明
${pageName}ページ名。
${footerMessage}footerMessage 設定オプションによって設定されるテキスト。
${sourceSets}マルチプラットフォームページ用のソースセットのnullableなリスト。各項目には、nameplatformfilterプロパティがあります。
${projectName}プロジェクト名。template_cmdディレクティブ内でのみ利用可能です。
${pathToRoot}現在のページからのルートへのパス。アセットを見つけるのに役立ち、template_cmdディレクティブ内でのみ利用可能です。

変数projectNamepathToRootは、より多くのコンテキストを必要とし、MultiModuleタスクによって後の段階で解決される必要があるため、template_cmdディレクティブ内でのみ利用可能です。

html
<@template_cmd name="projectName">
   <span>${projectName}</span>
</@template_cmd>

ディレクティブ

以下のDokka定義ディレクティブも使用できます。

変数説明
<@content/>メインページコンテンツ。
<@resources/>スクリプトやスタイルシートなどのリソース。
<@version/>設定から取得したモジュールバージョン。バージョン管理プラグインが適用されている場合、バージョンナビゲーターに置き換えられます。