【Hugo】　テーマのカスタマイズ

　前回のHugoのカスタマイズに続いてテーマのカスタマイズ。

【Hugo】　Hugoのカスタマイズ

以前、静的サイトジェネレーター　Hugoにてマークダウン中のHTMLを反映させる方法について書いたが、他にもカスタマイズしないと使いづらい部分があった。カスタマイズ覚え書き

目　次

テーマ「learn」の場合
1. data-vocabulary.orgからschema.orgへ

テーマ「learn」の場合

　テーマのインストールについては、下のページにまとめた。

【Hugo】　続・静的サイトジェネレーター　Hugo導入

ヒューゴなのかユーゴーなのか、たぶんヒューゴーなんだろうけどHugoを使ってみることにした。Go言語ベースの静的サイトジェネレーター。いじったことのない言語なのでちょっと躊躇したが、……

　いろいろテーマがある中で、「learn」（learn.netlify.app/）を選んだ最たる理由は、ドキュメント形式で検索窓が付いていたから。
　Googleカスタム検索でも良いのだが、オフラインで私的に使いたかったので、試してみた。
　ところが、思っていたものと違っていて、「CTRL＋F」で文字列検索するのと大差なかった。

　lunr.js（lunrjs.com/）という検索エンジンを使っている、とのことで、いろいろ改変できるのかもしれないが……。

　どうしようか迷っていたところ、以下のページを発見。

まくまくHugo／Goノート　全文検索（インクリメンタルサーチ）の機能を付ける　　　→

　このページの説明どおり、コピー＆ペーストして使わせてもらった。サイト内検索　searchの部分。
　おいおい中身の理解に努めようと思う。

　入れ代わりで、デフォルトの検索窓を非表示にする。
　設定ファイル　config.tomlに

[params]
disableSearch = true

で無効化。
　テーマ　themesの中のlayouts　－　partial　－　menu.htmlに「サイト内検索　search」等書き加えたり、削ったり……。

　使っているうちにページ送りが邪魔に思えてきたので、
　config.tomlの[params]の下に

disableNextPrev = true

で無効化。

　ページ上に表示されるパンくずリストが、アンカーリンクでジャンプした時に重なってしまうので、どうにかしないと……。
　config.tomlの[params]の下に

disableBreadcrumb = true

で無効化。
　ついでにテーマの中のstatic　－　css　－　theme.cssの

top-bar {

min-height: 3rem;
}

のバーの幅　min-heightを2remに変更。

　見出し（h2～h6）の後ろに表示されるクリックボードにコピーするボタン（Copy to clipboard）も要らないかな。
　テーマの中のstatic　－　css　－　hugo-theme.cssの

h2:hover .anchor, h3:hover .anchor, h4:hover .anchor, h5:hover .anchor, h6:hover .anchor {
　visibility:visible;
}

のvisibleをhiddenに変更。

　テーマによって違いはあるが、

　設定ファイル　config.toml
　cssファイル（スタイルシート）

をいじることでカスタマイズできる。

　（「learn」の場合、）layouts　－　partialsにcustom-header.htmlを置いてスタイル設定するとページに反映される。

　いずれ一から（テーマ無しから）作れるようになるであろう。

data-vocabulary.orgからschema.orgへ

　Googleサーチコンソールで「パンくずリスト」関連の問題が検出された。

　『data-vocabulary.org スキーマのサポートは終了します』という警告。

　意味不明だったが、テーマ「learn」がdata-vocabulary.orgにリンクしていて、それが使えなくなる、ということらしい。

　テーマの中のlayouts　－　partials　－　header.htmlの中の

<div id="breadcrumbs" itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">

を

<div id="breadcrumbs" itemscope="" itemtype="https://schema.org/Breadcrumb">

に変更。
　「修正を検証」で問題解消。

　（パンくずリストを無効にしていなければ）サイトのパンくずリストがschema.org（schema.org/）の仕様でデータ化され、その情報をGoogle等が拾ってくれるようだ。