gohugo-docs-ja

Hugo でサイト構築する方法に関連し、Hugo を記述した Go 言語やテーマ作成で利用する Bootstrap などの技術情報を提供するサイトです。

コンテンツ

• Hugo ドキュメント の日本語訳
  • Hugo ドキュメントの GitHub リポジトリ
  • GoHugo Sites Theme - Hugo ドキュメント用テーマ

利用技術

• Hugo
• Go 言語 - スクリプト作成 (WIP)
• Bootstrap v5.3.0 (正式版)
• Flexsearch.js + Kuromoji.js/kuromojin
• Couldflare Pages

参考テーマ

• Bootstrap v5.3.0 example - Bootstrap v5.3.1 のサンプル (ベース)
• hugo-theme-zen example - Hugo Zen テーマのサンプル (Flexsearch.js)
• GoHugo Sites Theme - Hugo ドキュメント用テーマ

参考記事

• [Gatsby] Flexsearch × Kuromoji による日本語フレンドリーなサイト内検索の追加
• Bootstrap 関連
  • Bootstrap v5.3 ドキュメント - 公式 (英語)
  • Bootstrap v5.0 ドキュメント - 日本語版 (LINE Corporation による翻訳)
  • Bootstrap5 設置ガイド - Bootstrap5 の使い方を日本語で解説 (v5.3.0-alpha版に対応)
• SVG アイコン関連
  • Bootstrap Icon - サイドメニュー等のアイコン
  • SVG Repo - Hugo 等、ブランド名のアイコン

日本語サイト用カスタマイズ

Hugo テーマの一部機能追加

1. ショートコードの修正

• layouts/shortcodes/code-toggle.html
• layouts/shortcodes/{note,warning}.html

2. Bootstrap のフォントの拡大

$font-size-root: 1.05em

Zen テーマの一部機能追加と Bootstrap テーマの修正

下記の hugo-theme-zen のカスタマイズ方法を参考にカスタマイズを行う。

1. Logo Place your logo at static/images/logo.png.

2. Favicons

Upload your image to RealFaviconGenerator then copy-paste the generated favicon files under static. Then set the "realfavicongenerator" param to true to add the needed meta tags. Also good to set the "themeColor" param to correct colour.

3. Menu and sidebar layouts

Topbar menu: layouts/partials/docs-navbar.html Sidebar menu: layouts/partials/docs-sidebar.html, data/sidebar_ja.yml

4. Render hook テンプレート

• Add anchor links to headers An example render hook template for templates will add anchor links to all headers. To activate it copy the file ~/theme/zen/layouts/_default/_markup/render-heading.html.example to layouts/_default/_markup/render-heading.html.

  Needed styles are in the _zen.scss file.

5. Katex に数式表示

Download the latest release from https://github.com/KaTeX/KaTeX/releases. Unpack and place the resulting "katex" directory in the root static directory. The resulting path should be static/katex. Then set the math param to "true" and write some math to be typeset.

日本語全文検索機能の追加

1. FlexSearch.js による全文検索

検索ページを作成するために必要な 3 つのステップ:

1. 設定ファイルに新しい出力形式を追加します。 yaml outputFormats: SearchIndex: mediaType: "application/json" baseName: "searchindex" isPlainText: true notAlternative: true
2. 新しい出力形式を "home" の出力設定に追加します。 yaml outputs: home: ["HTML", "SearchIndex", "[other formats you need]"]
3. 検索ページにショートコード {{< search >}} を追加します。 このショートコードを使用したページでは、search と flexsearch の js ファイルが自動的にロードされます。

検索ページには、サイトのすべての投稿を検索できる検索フィールドが表示されるようになります。 設定項目は "searchLimit" のみで、デフォルトは 20 です。

2. 日本語形態素解析ライブラリの利用

Kuromoji.js のラッパー kuromojin を利用し、日本語の検索精度を上げる予定であったが、当面は実装見送り。