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

Thu, 19 Dec 2024 00:00:00 +0900

いろいろテーマを探してみましたが、多機能かつドキュメントが充実していたのでこれにしてみました。

以下の記事で作成した環境に対して適用します。

https://kuttsun.blogspot.com/2024/09/jekyll-docker.html

尚、デモページ、およびドキュメントは以下です。

テーマの適用

Gemfile に以下を追加します。

gem "minimal-mistakes-jekyll"

_cofig.yml でテーマを指定します。

theme: minimal-mistakes-jekyll

必要に応じて各記事のレイアウトを変更します。

layout: single

選択できるレイアウトについては以下を参照してください。

https://mmistakes.github.io/minimal-mistakes/docs/layouts/

テーマを適用するだけならこれだけで OK でした。

その他の設定

公式のドキュメントに詳しく書かれているので、ここでは個人的に必要なものだけ抜粋して記載します。

スキンを変更する

https://mmistakes.github.io/minimal-mistakes/docs/configuration/#skin

_config.yml に以下のように記述します。

minimal_mistakes_skin: "default"

記事内の目次を作成する

https://mmistakes.github.io/minimal-mistakes/docs/layouts/#table-of-contents

フロントマターで以下のように設定します。

---
toc: true
toc_label: "My Table of Contents"
toc_icon: "cog"
---

記事を広げる

https://mmistakes.github.io/minimal-mistakes/docs/layouts/#wide-page

記事を目次のスペースまで広げるには、フロントマターで以下を設定します。

classes: wide

ページの作成

_pages というフォルダを作成し、そこに記事を追加します。
_config.yml に以下を追加し、_pages フォルダのドキュメントを変換対象に指定します。

collections:
 pages:
 output: true

カテゴリごとの記事一覧ページを作成

https://mmistakes.github.io/minimal-mistakes/docs/layouts/#archive-layout

_pages に category-archive.md というファイルを作成し、以下のような内容を記述します。

---
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 というファイルを作成し、以下のような内容を記述します。

---
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 というファイルを作成し、以下のような内容を記述します。

---
title: "Posts by Year"
permalink: /year-archive/
layout: posts
author_profile: true
---

サイドバーを作成する

_data/navigation.yml を作成し、以下のような内容を記述します。

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/

サイドバーを表示させたい記事のフロントマターに以下を追加します。

sidebar:
 nav: "docs"

全ての記事に表示したい場合は、_config.yml で以下のようにデフォルト値を設定します。

defaults:
 - scope:
 path: ""
 values:
 sidebar:
 nav: "docs"
 show_date: true

画面上部にナビゲーションを作成する

https://mmistakes.github.io/minimal-mistakes/docs/navigation/

_data/navigation.yml を作成し、以下のような内容を記述します。

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 に以下を設定します。

defaults:
 - scope:
 path: ""
 type: posts
 values:
 show_date: true

投稿日のフォーマットを指定

https://mmistakes.github.io/minimal-mistakes/docs/configuration/#post-dates

_config.yml で以下のように設定します。

date_format: "%Y-%m-%d"

コードブロックにコピーボタンを付ける

https://mmistakes.github.io/minimal-mistakes/docs/configuration/#code-block-copy-button