Libx mdBook ドキュメント

    index.hbs

    index.hbsは、本を出力するためのhandlebarsテンプレートです。MarkdownファイルをHTMLへ変換して、このテンプレートへ挿入します。

    本のレイアウトやスタイルを変える場合は、このテンプレートを少し変更する必要があるでしょう。必要な事項を以下に示します。

    データ

    多くのデータが、コンテキストを通じてhandlebarsテンプレートへ公開されます。テンプレート内では、次のようにアクセスできます。

    {{name_of_property}}

    公開されるプロパティは、次のとおりです。

    • language book.tomlで指定する本の言語です。enなどの形式で表します（未指定の場合はen）。たとえば、<html lang="{{ language }}">で使います。

    • title 現在のページで使うタイトルです。book_titleが設定されている場合は{{ chapter_title }} - {{ book_title }}と同じになり、未設定の場合はchapter_titleをそのまま使います。

    • book_title book.tomlで指定する本のタイトルです。

    • chapter_title SUMMARY.mdに記載された、現在の章のタイトルです。

    • path ソースディレクトリから、元のMarkdownファイルへの相対パスです。

    • content Markdownを表示用に変換した内容です。

    • path_to_root 現在のファイルから本のルートを指す、../だけからなるパスです。元のディレクトリ構成を保持するため、相対リンクの前にこのpath_to_rootを付けると便利です。

    • previousとnext 前の章と次の章へのリンクに使うオブジェクトです。対応する章のtitleとlinkプロパティを含みます。

    • chapters 次の形式の辞書の配列で、

      {"section": "1.2.1", "name": "name of this chapter", "path": "dir/markdown.md"}

      本のすべての章を含みます。たとえば、目次（サイドバー）を構築するために使います。

    Handlebarsヘルパー

    アクセスできるプロパティに加え、利用できるhandlebarsヘルパーもあります。

    toc

    tocヘルパーは、次のように使います。

    {{#toc}}{{/toc}}

    本の構成に応じて、次のような出力を生成します。

    <ul class="chapter">
    <li><a href="link/to/file.html">Some chapter</a></li>
    <li>
        <ul class="section">
            <li><a href="link/to/other_file.html">Some other Chapter</a></li>
        </ul>
    </li>
</ul>

    別の構成の目次を作りたい場合は、すべてのデータを含むchaptersプロパティを利用できます。ただし、現時点ではhandlebarsヘルパーで作ることはできず、JavaScriptを使う必要があります。

    <script>
var chapters = {{chapters}};
// Processing here
</script>

    resource

    静的ファイルへのパスです。path_to_rootを暗黙に含み、ファイル名にハッシュを付けて名前が変わったファイルにも対応します。

    <link rel="stylesheet" href="{{ resource "css/chrome.css" }}">

    fa

    mdBookは、Font Awesome FreeのMITライセンスのSVGファイルを同梱しています。位置引数を3つ受け取ります。

    1. 種類：“solid”、“regular”、“brands”のいずれか（lightとduotoneは現時点では未対応）
    2. アイコン：無料のアイコン集合から選択
    3. ID（省略可能）：指定すると、アイコンを囲む<span>タグへHTMLのID属性を追加

    たとえば、次のhandlebars構文は、このHTMLになります。

    {{fa "solid" "print" "print-button"}}

    <span class=fa-svg id="print-button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M448 192V77.25c0-8.49-3.37-16.62-9.37-22.63L393.37 9.37c-6-6-14.14-9.37-22.63-9.37H96C78.33 0 64 14.33 64 32v160c-35.35 0-64 28.65-64 64v112c0 8.84 7.16 16 16 16h48v96c0 17.67 14.33 32 32 32h320c17.67 0 32-14.33 32-32v-96h48c8.84 0 16-7.16 16-16V256c0-35.35-28.65-64-64-64zm-64 256H128v-96h256v96zm0-224H128V64h192v48c0 8.84 7.16 16 16 16h48v96zm48 72c-13.25 0-24-10.75-24-24 0-13.26 10.75-24 24-24s24 10.74 24 24c0 13.25-10.75 24-24 24z"/></svg></span>