Jekyll で Minimal Mistakes のテーマを適用する

いろいろテーマを探してみましたが、多機能かつドキュメントが充実していたのでこれにしてみました。 以下の記事で作成した環境に対して適用します。 - https://kuttsun.blogspot.com/2024/09/jekyll-docker.html 尚、デモページ、およびドキュメントは以下です。 - https://mmistakes.github.io/minimal-mistakes/ - https://github.com/mmistakes/minimal-mistakes ## テーマの適用 `Gemfile` に以下を追加します。 ```ruby gem "minimal-mistakes-jekyll" ``` `_cofig.yml` でテーマを指定します。 ```yaml theme: minimal-mistakes-jekyll ``` 必要に応じて各記事のレイアウトを変更します。 ```yaml layout: single ``` 選択できるレイアウトについては以下を参照してください。 - https://mmistakes.github.io/minimal-mistakes/docs/layouts/ テーマを適用するだけならこれだけで OK でした。 ## その他の設定 公式のドキュメントに詳しく書かれているので、ここでは個人的に必要なものだけ抜粋して記載します。 ### スキンを変更する - https://mmistakes.github.io/minimal-mistakes/docs/configuration/#skin `_config.yml` に以下のように記述します。 ```yaml minimal_mistakes_skin: "default" ``` ### 記事内の目次を作成する - https://mmistakes.github.io/minimal-mistakes/docs/layouts/#table-of-contents フロントマターで以下のように設定します。 ```yaml --- toc: true toc_label: "My Table of Contents" toc_icon: "cog" --- ``` ### ページの作成 `_pages` というフォルダを作成し、そこに記事を追加します。 `_config.yml` に以下を追加し、`_pages` フォルダのドキュメントを変換対象に指定します。 ```yaml collections: pages: output: true ``` ### カテゴリごとの記事一覧ページを作成 - https://mmistakes.github.io/minimal-mistakes/docs/layouts/#archive-layout `_pages` に `category-archive.md` というファイルを作成し、以下のような内容を記述します。 ```yaml --- title: "Posts by Category" layout: categories permalink: /categories/ author_profile: true --- ``` ### タグごとの記事一覧ページを作成 カテゴリとほぼ同じです。 - https://mmistakes.github.io/minimal-mistakes/docs/layouts/#archive-layout `_pages` に `tag-archive.md` というファイルを作成し、以下のような内容を記述します。 ```yaml --- title: "Posts by Tag" permalink: /tags/ layout: tags author_profile: true --- ``` ### 年ごとの記事一覧ページを作成 カテゴリとほぼ同じです。 - https://mmistakes.github.io/minimal-mistakes/docs/layouts/#archive-layout `_pages` に `year-achive.md` というファイルを作成し、以下のような内容を記述します。 ```yaml --- title: "Posts by Year" permalink: /year-archive/ layout: posts author_profile: true --- ``` ### サイドバーを作成する - https://mmistakes.github.io/minimal-mistakes/docs/layouts/#custom-sidebar-navigation-menu - https://mmistakes.github.io/minimal-mistakes/layout-sidebar-nav-list/ - https://mmistakes.github.io/minimal-mistakes/layout-sidebar-custom/ `_data/navigation.yml` を作成し、以下のような内容を記述します。 ```yaml docs: - title: Getting Started children: - title: "Quick-Start Guide" url: /docs/quick-start-guide/ - title: "Structure" url: /docs/structure/ - title: "Installation" url: /docs/installation/ - title: "Upgrading" url: /docs/upgrading/ - title: Customization children: - title: "Configuration" url: /docs/configuration/ - title: "Navigation" url: /docs/navigation/ - title: "UI Text" url: /docs/ui-text/ - title: "Authors" url: /docs/authors/ - title: "Layouts" url: /docs/layouts/ - title: Content children: - title: "Working with Posts" url: /docs/posts/ - title: "Working with Pages" url: /docs/pages/ - title: "Working with Collections" url: /docs/collections/ - title: "Helpers" url: /docs/helpers/ - title: "Utility Classes" url: /docs/utility-classes/ - title: Extras children: - title: "Stylesheets" url: /docs/stylesheets/ - title: "JavaScript" url: /docs/javascript/ ``` サイドバーを表示させたい記事のフロントマターに以下を追加します。 ```yaml sidebar: nav: "docs" ``` 全ての記事に表示したい場合は、`_config.yml` で以下のようにデフォルト値を設定します。 ```yaml defaults: - scope: path: "" values: sidebar: nav: "docs" show_date: true ``` ### 画面上部にナビゲーションを作成する - https://mmistakes.github.io/minimal-mistakes/docs/navigation/ `_data/navigation.yml` を作成し、以下のような内容を記述します。 ```yaml main: - title: "Quick-Start Guide" url: /docs/quick-start-guide/ - title: "Posts" url: /year-archive/ - title: "Categories" url: /categories/ - title: "Tags" url: /tags/ - title: "Pages" url: /page-archive/ - title: "Collections" url: /collection-archive/ - title: "External Link" url: https://google.com target: _blank ``` ### 記事に投稿日を表示 - https://mmistakes.github.io/minimal-mistakes/docs/configuration/#post-dates `_config.yml` に以下を設定します。 ```yaml defaults: - scope: path: "" type: posts values: show_date: true ``` ### 投稿日のフォーマットを指定 - https://mmistakes.github.io/minimal-mistakes/docs/configuration/#post-dates `_config.yml` で以下のように設定します。 ```yaml date_format: "%Y-%m-%d" ``` ### コードブロックにコピーボタンを付ける - https://mmistakes.github.io/minimal-mistakes/docs/configuration/#code-block-copy-button `_config.yml` に以下を設定します。 ```yaml enable_copy_code_button: true ``` ### サイト内検索を有効にする - https://mmistakes.github.io/minimal-mistakes/docs/configuration/#site-search `_config.yml` に以下を追加します。 ```yaml search: true ``` 検索エンジンは変更できるようです（上記リンク参照）。 ### パンくずリストの作成 - https://mmistakes.github.io/minimal-mistakes/docs/configuration/#breadcrumb-navigation-beta - https://mmistakes.github.io/minimal-mistakes/docs/configuration/#archive-settings ## 参考 URL