技術資料

authorや最終更新について各ページに書き込むためにfooterを変更しました。
公式ドキュメントのOverrideの章を読むと_includesフォルダの中で色々カスタムできると書いてあります。
ドキュメントの通り_includesにfooter_custom.htmlを作成し、

{%- if page.author -%}
  {% assign person = site.data.authors[page.author] -%}
  <p class="text-small text-grey-dk-100 mb-0">
	作成者: 
	{{ person.name | default: page.author }}
	/ {{ person.year | default: }}
	/ {{ person.unit | default: }}
  </p>
{%- endif -%}

を書き込みました。
これにより、page.authorを書くと作成者についてのfooterを、各ページごとに書くことができるようになりました。
authorの情報をすべて書くのは大変です。そこで、_data/authors.yamlを作成し、その中に

hibiki: 
  name: "丸山響輝"
  year: "23"
  unit: "HR・レスキュー"

のようにして各作成者の情報をまとめておけるようにしました。これで、author: hibikiと書くだけですべての情報をフッターに入れられるようになります。

last modified at

最終更新を書いておきたいなと思い作成しました。jekyllにgitと連携するライブラリが存在していたので、Gemfileに

gem "jekyll-last-modified-at"

を追加し、さらに_config.yamlでpluginとして読み込みました。

plugins:
  - jekyll-last-modified-at

last_modified_at:
  enabled: true
  date_format: "%Y-%m-%d"

あとはfooterとして出力するだけです。footer-custom.htmlに

<p class="text-small text-grey-dk-100 mb-0">
  最終更新: {{ page.last_modified_at | date: "%Y年 %m/%d" }}
</p>

を追加しておしまい。

search

Just the Docsテンプレートはもともと英語向けなので、日本語は検索対象に入っていませんでした。調べてみたところ、テンプレートはもともとlunrというシステムを使っており、lunrには日本語対応機能もあったので、これを導入しました。
ここで、ドキュメントにsearchセクションのカスタマイズについて乗っていたのですがこれでは足りなかったので、assets/js/just-the-docs.jsと_layouts/default.htmlを直接編集することになりました。
まずassets/js/lunr-languagesにlunr.ja.js、lunr.setmmer.support.js、tinyseg.jsを公式サイトからダウンロードし、default.htmlに

<script src="/Robo-MECS/assets/js/lunr-languages/lunr.setmmer.support.js"></script>
<script src="/Robo-MECS/assets/js/lunr-languages/tinyseg.js"></script>
<script src="/Robo-MECS/assets/js/lunr-languages/lunr.ja.js"></script>

を追加しました。
つづいてlunr.jaを使ってもらうため、just-the-docs.jsのlunr関数の設定に

 var index = lunr(function(){
		// add plugin for Japanese
		this.use(lunr.ja);

        this.ref('id');
		...

のように書き加えました。
これにより、日本語検索機能を実装しました。

さらに、作成者や編集者での検索を可能にするため、_includes/lunrの中に以下の2つのファイルを作成しました。
custom-data.json

{%- capture newline %}
{% endcapture -%}
"author": {{ include.page.author | markdownify | replace:newline,' ' | strip_html | normalize_whitespace | strip | jsonify }},
"edit": {{ include.page.edit | markdownify | replace:newline,' ' | strip_html | normalize_whitespace | strip | jsonify }},

custom-index.json

const content_to_merge = [docs[i].content, docs[i].author, docs[i].edit];
docs[i].content = content_to_merge.join(' ');

これにより、author,editの中に書かれている名前を検索することができます。

Build and Deploy

BuildとDeployについては、.github/workflowsの中に入っているyamlファイルに従って行われます。
設定はTemplateをコピーしたときから変えていません。
mainブランチをbuild,deployすることになっており、pushされたタイミングでjobを実行します。
ciがbuild、pagesがdeployについて書かれているもの(らしい)ので、うまくいかなかったら参照してください。
Githubのsetting/pagesでGithubActionを選ぶとjekyll.yamlを作らせようとしてきますが、すでにworkflowは存在するので新しいものは作らないでください。
pushするとしばらく時間はかかりますがjobがおわり、urlが表示される(または内容が更新される)ようになりますので、しばらく待ちましょう。

state

各ページごとに編集stateが欲しいと思い作りました。stateはnavigationバーに表示されます。
どうやらnavに関するhtml変換は_includes/components/navに入っているようなので、ここをあさります。
開発者ツールを使ってnavigationバーを見てみたところ、タイトルはnav-list-linkというclassになっているようです。もっとよく見てみると、
side-bar -> site-header -> nav:Main -> ul:nav-list -> li:nav-list-item -> a:class:nav-list-item(書き方あってるかは知らない)
のような構造になっていたので、構造をたどりながら調べた。
すると、_includes/componetns/nav/links.htmlに対称のaタグを見つけたので次のように編集

<li class="nav-list-item">
	{%- if nav_children.size >= 1 -%}
	<button class="nav-list-expander btn-reset" aria-label="toggle items in {{ node.title }} category" aria-pressed="false">
	<svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg>
	</button>
	{%- endif -%}
	<a href="{{ node.url | relative_url }}" class="nav-list-link">
	{{ node.title }} 
	<!-- show page state after title -->
	{%-if node.state -%}
		[
		<span style="font-size: 0.5em; margin-left: -0.3em; vertical-align: middle">
		{{ site.data.states[node.state] }}
		</span>
		]
	{%- endif -%}
	</a>
	{%- if nav_children.size >= 1 -%}
	{%- if node.child_nav_order == 'desc' or node.child_nav_order == 'reversed' -%}
		{%- assign nav_children = nav_children | reverse -%}
	{%- endif -%}
	{%- assign nav_ancestors = include.ancestors | push: node.title -%}
	{%- include components/nav/links.html pages=nav_children ancestors=nav_ancestors all=include.all -%}
	{%- endif -%}
</li>

このとき、後でstateを追加しやすいように、_data/states.yamlを書いた。

notyet: " "
editing: "○"
done: "●"

技術資料

目次

custom footer

last modified at

search

Build and Deploy

state