Skip to content

HTML

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

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

HTMLドキュメントの生成

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

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

NOTE

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

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

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

設定

HTMLフォーマットはDokkaの基本フォーマットです。そのため、DokkaBaseおよびDokkaBaseConfigurationクラスを介して設定可能です。

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
    }
}
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}
"

設定オプション

下の表は、利用可能なすべての設定オプションとその目的を示しています。

オプション説明
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/>設定から取得したモジュールのバージョンです。バージョニングプラグインが適用されている場合、バージョンナビゲーターに置き換えられます。