Hugo~テーマのカスタマイズ

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

 ---テーマ「learn」(learn.netlify.app/)の場合---。
 テーマのインストールについては、下のページにまとめた。

 いろいろテーマがある中で、「learn」を選んだ最たる理由は、ドキュメント形式で検索窓が付いていたから。
 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;
}

visiblehiddenに変更。

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

  •  設定ファイル 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等が拾ってくれるようだ。
 パンくずリストを無効にしていなければ。

タイトルとURLをコピーしました