Jul 1, 2022 (Updated: May 12, 2023)
Memo, Jekyll,
Jekyll関連で役に立ちそうな個人的メモです。
$ jekyll new <name>
{name}は任意のプロジェクト名
ローカルでサーバーを立ち上げる時
$ jekyll server
サイトをプロダクションとして生成する時
$ jekyll build
起動後のURL：http://127.0.0.1:4000/
_siteディレクトリへ移動する
$ cd _site
いつものgit操作
$ git add .
$ git commit -m "Comment"
$ git push
元のプロジェクトとサイト用のプロジェクトに対してgit操作するの面倒だったので自動化するbashを作成しました
引数にコミットメッセージ入れれます
`で囲む (Shift + @)
```で囲む
参考：sverrirs/jekyll-paginate-v2
gemfileを作成
bundle init
gemfileを編集
vim gemfile
以下を追加する
group :jekyll_plugins do
gem "jekyll-paginate-v2"
gem "jekyll-feed"
end
一括インストール
bundle install
参考：理解必須！gemsのインストール方法とインストール場所
_config.ymlに以下を追加する
gems:
- jekyll-paginate-v2
# Pagination Settings
pagination:
enabled: true
per_page: 8 # 一つのページに表示するPostの数
permalink: '/:num/'
title: ' Title - :num'
limit: 0
sort_field: 'date'
sort_reverse: true
表示させたいページのマークダウンの頭に以下を追加
---
permalink: '/link/' # ページのURL末尾を設定してください
pagination:
enabled: true
---
表示させたいページのhtmlをコチラを参考に記述
ここにコードを載せると誤認識するので無理でした…
Gemfileに以下を追加する
gem 'jekyll-toc'
インストール
bundle install
_config.ymlに以下を追加する
gems:
- jekyll-toc
表示させたいページのマークダウンの頭に以下を追加
---
toc: true
---
html内の目次を追加したい箇所に
{ { content | toc_only } }
を追加（中括弧はくっつけてください）
.section-nav {
background-color: #e8e8e8;
margin: 0px 5%;
padding: 15px 1%;
border: 0px solid #e8e8e8;
border-radius: 3px;
}
_config.ymlを編集
toc:
min_level: 1
max_level: 6
ordered_list: false
no_toc_section_class: no_toc_section
list_id: toc
list_class: section-nav
sublist_class: ''
item_class: toc-entry
item_prefix: toc-
Gemfileに以下を追加する
gem 'jekyll-sitemap'
インストール
bundle install
_config.ymlに以下を追加する
gems:
- jekyll-sitemap
url: サイトのURL
sitemap:
file: "/sitemap.xml"
change_frequency_name: "always"
priority_name: "0.8"
jekyll build
jekyll serverでは更新されません
参考：jekyllでサイトマップ(sitemap.xml)を生成する
ダークモードには「メディアクエリ，クラス指定，CSS変数」の3つが存在しますが，
本ホームページではJavaScriptを利用したクラス指定により，ダークモードを実現しています．
cssとJavaScriptは以下のようになります．
他のページへ移動するとダークモードが戻ってしまうバグを修正しました（2023/02/10）