💻Hugo の theme をさわっていく

レンダラ

2024-09-11: mermaid.js を導入する

仕事でも使い始めたのと、画像をコピって貼り付けるよりも図で説明したい、特に現状まともな執筆ツールを使っていない状況だと画像貼り付けるのが異様にシンドイので、ブログに mermaid.js を使えるように仕込む。

stateDiagram-v2
direction LR
A --> B
B --> C
C --> A

こんな図を

A --> B
B --> C
C --> A

と書ける。これはステート図（めんどうくさくてこればっかりつかってる）だけど、このほかにもいろいろ書けるの便利。というわけで Hugo に適用していく。

参考：mermaidチート表｜ききよ https://note.com/_kikiyo_/n/n67ca638d8c5c

render-codeblock-mermaid.html

<pre class="mermaid">
	{{- .Inner | safeHTML }}
</pre>
{{ .Page.Store.Set "hasMermaid" true }}

この内容のファイルを themes/mainroad/layouts/_default/ の配下に _markup/ を作って、その下にファイルを配置する。

baseof.html

このファイル名で themes/mainroad/layouts/_default/baseof.html の内容に追記。

{{ if .Store.Get "hasMermaid" }}
<script type="module">
	import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
	mermaid.initialize({ startOnLoad: true });
</script>
{{ end }}

</body> の手前に差し込めばよい。

参考：静的サイトジェネレーターHugoでMermaid記法を使うための設定方法 - RemoteRoom https://remoteroom.jp/diary/2024-06-28/

テーマ・スタイル

archetypes/default.md

まずは記事やレイアウトのディレクティブから探る

---
# [1]:Common-Defined params

# title 記事タイトル
title: '{{ replace .File.ContentBaseName "-" " " | title }}'

# 日付やね
date: {{ .Date }}

# 下書きフラグ
draft = true

# 概要
description: "Example article description"

# 種類・カテゴリ。 techknow とか politics とか news, misc., etc...
categories:
  - "Category 1"
  - "Category 2"

# タグ。 Hugo とか、 Raspberry Pi5 みたいなカテゴリよりは粒度の小さい分類
tags:
  - "Test"
  - "Another test"

# Optional, add page to a menu. Options: main, side, footer
menu:
  - "main"
  - "side"
  - "footer"

# [2]Theme-Defined params

# Thumbnail image
thumbnail: "img/placeholder.png"

# Lead text
lead: "Example lead - highlighted near the title"

# Enable Disqus comments for specific page
comments: false

# Enable authorbox for specific page
authorbox: true

# Enable pager navigation (prev/next) for specific page
pager: true

# Enable Table of Contents for specific page
toc: true

# Enable MathJax for specific page
mathjax: true

# Enable sidebar (on the right side) per page
sidebar: "right"

# Enable sidebar widgets in given order per page
widgets:
  - "search"
  - "recent"
  - "taglist"
---

とりあえずサイドバー（左に配置した）、ウイジェットは検索がグーグルに遷移するからカットして

sidebar: "left"
widgets:
  - "recent"
  - "categories"
  - "taglist"
  - "social"

authorbox, Thumbnail image は置いてみたけど何も反応がなかった

フォントや幅なんかを治そうとしたら

結局 submodule でつっこんだテーマを我がブログの一部としてしまった。

# バックアップ
$ cp -r themes/sampleTheme ../../

# 実行すると themes/sampleTheme 以下のファイルが消えて sampleTheme だけ残るのでお掃除
$ git submodule deinit -f themes/sampleTheme
Cleared directory 'themes/sampleTheme'
Submodule 'themes/sampleTheme' (https://github.com/themeauthor/sampleTheme.git) unregistered for path 'themes/sampleTheme'
$ rm -rf ./themes/sampleTheme

# .gitmodule から消したい奴を見つけ出す
$ git config -f .gitmodules -l
submodule.themes/sampleTheme.path=themes/sampleTheme
submodule.themes/sampleTheme.url=https://github.com/themeauthor/sampleTheme.git

# .gitmodule から消す
$ git config -f .gitmodules --remove-section submodule.themes/sampleTheme

# 状態保存
$ git add .; git commit -m "remove theme submodule(s)."

# レストア
cp ../../sampleTheme themes/
rm -rf ../../sampleTheme
cd themes/
rm .git
rm -rf .github/
rm .gitignore

# ビルド
hugo

# プッシュ
$ git add .; git commit -m "reload theme."; git push -u origin main

CSS 職人の朝は早い…

ぶちこわしたテーマ作者に配慮して、といっても見る人が見ればすぐわかるだろうけれど、細かい修正ポイントは晒さない。

まあ hugo.toml に設定しても反映されないんで（たぶん –disableFastBuild してなかったのかもとか言っておく）、キレた俺が傍若無人になっただけなんですけどもね。