目次
ブログ移行日記(その3)です。その他の記事はこちら。
今回は、Hugoの設定とテーマの一部変更した点について記載します。
設定ファイル(config.toml)
Hugoの設定ファイルはconfig.toml
になります。hogo new site
コマンドで生成したディレクトリの中にデフォルトで含まれていますが、こちらではなく、テーマの作者が用意してくれたconfig.toml
を元に変更を加えました。
ちなみにテーマの作者の方が設定とコンテンツを含めたサンプルも公開してくれています。設定やディレクトリの構成はこちらを参考にしました。
設定ファイルで変更した項目は以下のとおりです。
サイトのタイトルや説明など
特記することはありません。好きなように変えました。
- baseurl
- title
- SEOTitle
- description
- keyword
- slogan
- sidebar_about_descrption
画像関連(ヘッダーや著者近影)
画像の置き場はstatic/images/
ディレクトリですが、設定ファイルには
images/
から設定します。
- header_image : ブログのヘッダー背景
- sidebar_avatar : 著者近影
言語周り(特に多言語対応する予定は無いのですが)
- languageCode = “ja”
- defaultContentLanguage = “ja”
オフにした機能、削除した項目
- freands = false
- bookmarks = false
上記の設定変更以外に、[[params.bookmark_link]]
や[[params.friend_link]]
も削除。
中国のサービスや、特化した設定など。
- Baidu Analytics関連
- Disqus proxy関連
- Reward(wechat pay & alipay関連)
params.social関連
- rss = true
- github
ほかはすべてコメントアウト。
外部サービス関連
- disqusShortname : Disqusのショートネーム
- googleAnalytics : Gooogle AnalyticsのトラッキングID
- algolia関連 : 別のブログ記事として、設定方法などを書きます。
追加した設定(昨日のブログで説明済み)
- Octopressと同じ形のパーマリンク
[permalinks]
post = "/blog/:year/:month/:day/:slug"
- Markdownファイル中のHTMLタグ表示
[markup.goldmark.renderer]
unsafe = true
以上が設定ファイル関連です。
テーマの変更点
テーマそのままでは問題があったり、独自に変更したいという点があったので、いくつか変更をしています。
フォントの変更
そのままテーマを適用するだけでうまく行けばよかったのですが、フォントの問題が発生しました。テーマの作者の方が中国の方だから?かどうかはわかりませんが、デフォルトのままだと中華フォントになってしまいました。
あー、中華フォントだな。 pic.twitter.com/OvHpY4LSp1
— Jun Ohtani (@johtani) January 16, 2020
config.toml
にcustom_css
という設定があり、こちらで指定したCSSのファイルがテーマのlayouts/partials/head.html
から読み込まれる仕組みがあるようなので、フォントに関するCSSをこの機能を使用して指定するようにしました。
config.toml
の設定は次のとおりです(リスト)になっているので、複数のファイルに分割して、読み込ませることも可能なのかな?。
custom_css = ["css/custom-font.css"]
cssファイルについては、static/css/custom-font.css
というファイルを作成し、次のような記載になっています。
フォントの指定と右側サイドバーの自己紹介の部分の文字色を変更するためのものです。
body, h1, h2, h3, h4, h5, h6, .navbar-custom {
font-family: Helvetica,"Sawarabi Gothic",Meiryo,"メイリオ","Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN",YuGothic,"游ゴシック",Arial,sans-serif;
}
.sidebar-container {
color: #404040;
font-size: 14px;
}
faviconの変更
テーマにfavicon.ico
が含まれていたのですが、せっかくなので独自のものに変えてみようかと。
ただ、残念ながら、こちらはパスおよびファイル名がlayouts/partials/head.html
に直書きされていました。
画像はimages
配下にと思っていたのですが、このパスだけを変更するためにhead.html
を自分の配下にコピーしてカスタマイズするのもどうかと思った(テーマに変更やバグ修正が入るたびに手動でコピーするのはなぁと思った)ので、static/img/favicon.ico
ファイルを作成しました。
テーマよりもHugoのプロジェクトにあるファイルを優先するようなので、ファイルだけをプロジェクトに作成しました。
記事一覧のテンプレート
記事の一覧で表示される、作成者と作成日時が英語表記でかつ、冗長な感じがしたので、スッキリさせるために、layouts/partials/post_list.html
をテーマからコピーして、次のように変更しました。
- 元の形式は :
Posted by author Monday, January 2, 2006
- 現在の形式 :
2006-01-02 by author
記事のテンプレート
今回採用したテーマでは、記事の先頭に記事のセクションを元に目次を生成してくれるものでした。
目次をコンテンツから自動で作ってくれるの便利だな。 pic.twitter.com/9bU3sLnUrm
— Jun Ohtani (@johtani) January 16, 2020
とても便利です。ただ、表示が「TOC」なんです。
英語でしかも「ToC」という表記ならまだ気にならなかったかもですが、大文字だと流石に気になったので、プロジェクトのlayouts/_default/single.html
にコピーして「目次」という日本語に書き換えました。
このHTMLにテーマで修正が入った場合はどうしようかなぁ。。。というのが目下の悩みです。。。
Archetypeテンプレートの追加
最後は新規記事を書くときに生成されるMarkdownのメタデータの追加です。 HugoにはArchetypesというのが存在します。
Hugoではhugo new 記事
としたときに、記事の種類(content/ディレクトリ名=記事のタイプ
)によって、作成するmarkdownファイルをテンプレートから生成する機能があります。この生成時に使われるのがarchetypes
というディレクトリにあるファイルです。
私のブログサイトでは、今のところcontent/post
というブログの記事だけを書く予定ですので、archetypes/post.md
というファイルを作って以下のようなメタデータをhugo new
したときに自動で生成するようにしました(テーマにあったpost.md
ファイルの代わり)。
---
layout: post
title: "{{ replace .Name "-" " " | title }}"
slug: "{{ substr .Name 11 }}"
author: johtani
date: {{ .Date }}
comments: true
tags: []
draft: true
---
- タイトルはファイル名のハイフンを空白に変換したもの(実際にはファイル名は英語にしているので、使いませんが。。。)
slug
はファイル名の先頭からYYYY-MM-DD-
という11文字を除いたもの。これは、OctopressのURLに合わせるために使用するURLの一部の文字列です。author: johtani
: 著者は私だけだから固定文字列comments: true
: ブログ記事にはDisqusのコメント機能を利用tags: []
: 各内容によってタグを付けるが、生成時には空draft: true
: 明示的にこの行を消すまではドラフト記事としたいため
という感じです。ほかにどのよなメタデータがあるのかまではまだ調べていないので、今後また適宜変更していくと思います。
まとめ
Hugoの設定や、テーマそのままではなく独自の変更を加えた部分を思い出して書き出してみました。
これで、Algoliaに関する部分以外はだいたい思い出して書いたと思います。 次は、Algoliaの使い方と設定について書き残す予定です。
comments powered by Disqus
See Also by Hugo
- ブログ移行日記(その4) - 検索機能(Algolia)の導入
- ブログ移行日記(その1) - Hugoとテーマ
- ブログ移行日記(その5) - Jugemのブログを移行
- ブログ移行日記(その2) - Markdownファイルの変換
- OctopressからHugoへ移行中(まだ途中)