いろいろテーマを探してみましたが、多機能かつドキュメントが充実していたのでこれにしてみました。
以下の記事で作成した環境に対して適用します。
尚、デモページ、およびドキュメントは以下です。
テーマの適用
Gemfile に以下を追加します。
gem "minimal-mistakes-jekyll"
_cofig.yml でテーマを指定します。
theme: minimal-mistakes-jekyll
必要に応じて各記事のレイアウトを変更します。
layout: single
選択できるレイアウトについては以下を参照してください。
テーマを適用するだけならこれだけで OK でした。
その他の設定
公式のドキュメントに詳しく書かれているので、ここでは個人的に必要なものだけ抜粋して記載します。
スキンを変更する
_config.yml に以下のように記述します。
minimal_mistakes_skin: "default"
記事内の目次を作成する
フロントマターで以下のように設定します。
---
toc: true
toc_label: "My Table of Contents"
toc_icon: "cog"
---
記事を広げる
記事を目次のスペースまで広げるには、フロントマターで以下を設定します。
classes: wide
ページの作成
_pages というフォルダを作成し、そこに記事を追加します。_config.yml に以下を追加し、_pages フォルダのドキュメントを変換対象に指定します。
collections:
pages:
output: true
カテゴリごとの記事一覧ページを作成
_pages に category-archive.md というファイルを作成し、以下のような内容を記述します。
---
title: "Posts by Category"
layout: categories
permalink: /categories/
author_profile: true
---
タグごとの記事一覧ページを作成
カテゴリとほぼ同じです。
_pages に tag-archive.md というファイルを作成し、以下のような内容を記述します。
---
title: "Posts by Tag"
permalink: /tags/
layout: tags
author_profile: true
---
年ごとの記事一覧ページを作成
カテゴリとほぼ同じです。
_pages に year-achive.md というファイルを作成し、以下のような内容を記述します。
---
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 を作成し、以下のような内容を記述します。
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
画面上部にナビゲーションを作成する
_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
記事に投稿日を表示
_config.yml に以下を設定します。
defaults:
- scope:
path: ""
type: posts
values:
show_date: true
投稿日のフォーマットを指定
_config.yml で以下のように設定します。
date_format: "%Y-%m-%d"
コードブロックにコピーボタンを付ける
_config.yml に以下を設定します。
enable_copy_code_button: true
サイト内検索を有効にする
_config.yml に以下を追加します。
search: true
検索エンジンは変更できるようです（上記リンク参照）。
