つちのこです！ tranquilpeakの設定についてまとめました。

基本設定
プロフィールの設定
背景画像の設定
ファビコンの設定
サイドバーの設定
- 表示形式
- ボタン周り
サムネイルの設定
その他設定
外部サービス連携
注意
- Hugo v0.60.0以上の方
- config.tomlを編集しても、サイトに反映されない

基本設定

言語

languageCodeとdefaultContentLanguage変数を編集し、サイトに表示される言語を設定します。（themes/hugo-tranquilpeak-theme/i18n/{code}.yml内の{code}に対応）

languageCode = 'ja'
defaultContentLanguage = "ja"

デフォルトでは、以下の.ymlファイルが存在しています。

言語	Code
中国語	zh-cn
中国語繁体字	zh-tw
英語(デフォルト)	en-us
ドイツ語	de-de
フランス語	fr-fr
日本語	ja
ポルトガル語	pt-br
ロシア語	ru
スペイン語	es-es
ベトナム語	vi
オランダ語	nl-nl
スウェーデン語	sv-se

もし、上記の設定で反映されない場合は、以下の手順で手動設定も可能です。

config.tomlのdefaultContentLanguage="ja"と修正
themes/hugo-tranquilpeak-theme/i18nにja.ymlを作成
themes/hugo-tranquilpeak-theme/i18n/en-us.yml内容をja.ymlにコピー
英語の文字列を日本語に置き換え

ベースURL

Netlifyで設定したサブドメインや購入した独自ドメインをbaseURLに設定します。こちらが設定されていない場合、ホスティングが上手くいきません。

baseURL = "https://tsuchinoko-blog.netlify.app/"

ホスティングの方法に関しては、前回の記事をご参考ください。

また、canonifyurlsを編集することで、相対URLをbaseURL基点で正規化するかを設定します。 true:baseURL基点で正規化する、false:正規化しない

canonifyurls = true

[公式]Canonicalizationに正規化について記載があります。

タイトル

ブログのタイトルを設定します。トップページではタブにtitleが表示されます。

title = "つちのこブログ"

また、ブログの説明を設定しておくと、HTMLのmetaタグとして生成されます。

[params]
  description = "ブログの説明"

テーマ

theme変数を編集し、参照するテーマを変更します。（該当テーマが格納されているフォルダ名に設定する必要があります）

theme = "hugo-tranquilpeak-theme"

日付フォーマット

dateFormat変数をGO言語のtimeの形式に則って設定します。月の略語(jan, feb等)はサポートされていません。

[params]
   dateFormat = "2006/01/02(Mon) 15:04 MST"

ここでは、曜日の設定とタイムゾーンの設定をします。

プロフィールの設定

プロフィールはautor部分で設定します。

[author]
  name = "Thibaud Leprêtre"
  bio = "Super bio with markdown support **COOL**"
  job = "Java backend developer"
  location = "France"
  # Your Gravatar email. Overwrite `author.picture` everywhere in the blog
  gravatarEmail = "thibaud.lepretre@gmail.com"
  # Your profile picture
  # Overwritten by your gravatar image if `author.gravatarEmail` is filled
  picture = "https://cdn1.iconfinder.com/data/icons/ninja-things-1/1772/ninja-simple-512.png"
  # Your Twitter username without the @. E.g : tranquilpeak
  twitter = "thibaudlepretre"
  # Your google plus profile id. E.g : +ThibaudLepretre or 114625208755123718311
  googlePlus = "+ThibaudLepretre"

各変数の説明は以下の通りです。

変数	説明
name	名前
bio	経歴(markdown形式やHTML対応)
job	職業
location	生息地
picture	プロフィール画像画像のURLやパスを指定例：“images/xxx.jpg”
gravatarEmail	Gravatar使用しているなら、設定すればブログ内の`autor.picture`を上書き使用していなければ`picture`から指定
twitter	Twitter名の@以降を入力 Twitterカード設定に使用
googlePlus	Google+はサービス終了しています設定不要

上図は、各変数が対応する場所を示しています。抜け漏れはあるかもしれません。

背景画像の設定

coverImageを編集し、背景画像を設定します。

[params]
  coverImage = "images/cover.jpg"

ただし、ページ読み込みを高速化するためには、CDN(Content Delivery Network)を利用することが推奨されています。(CloudinaryやGoogle Photos、AWS CloudFront等を利用してもOKです)

私はアカウント登録が面倒だったのでGoogle Photosを使用していますが、Cloudinaryも色々なことができてよさそうです。参考：Cloudinaryを使って画像の変換をやってみる

Google Photosを利用する方法は、こちらのように共有フォルダにコンテンツを配置し、リンクをcoverImageに設定することで対応できます。

ファビコンの設定

ブログのシンボルマークとであるファビコン。設定は任意ですが、ファビコンがあったほうが馴染みやすく、個人的には良いと思います。

[params]
　favicon = /favicon.png

私はまず普通の大きさで画像を作成し、ファビコン favicon.icoを作ろう!を用いて画像を変換しました。あとは、画像の置き場所をfabiconに設定するだけでOKです。他にもファビコンを作成するサイトはありますので、そちらも参考に作成してみてください。

参考：ファビコンとは〜設置すべき理由と無料で簡単に作成できるツールを紹介

サイドバーの設定

表示形式

sidebarBehavior変数を変更することで、サイドバーの表示形式を設定できます。

[params]
  sidebarBehavior = 1

設定番号によって、画面サイズ（特大、大、中、小）に応じてサイドバーの振る舞いが変化します。

	初期	特大	大	中	小
1	常に表示	特大サイドバー	大サイドバー	中サイドバー	ヘッダー
2	常に表示	大サイドバー	大サイドバー	中サイドバー	ヘッダー
3	常に表示	中サイドバー	中サイドバー	中サイドバー	ヘッダー
4	全画面 (ヘッダー)	展開後特大サイドバー	展開後大サイドバー	展開後大サイドバー	展開後大サイドバー
5	全画面 (ヘッダー)	展開後大サイドバー	展開後大サイドバー	展開後大サイドバー	展開後大サイドバー
6	全画面 (ヘッダー)	展開後中サイドバー	展開後中サイドバー	展開後中サイドバー	展開後中サイドバー

上図は、特大画面の時の状態を示しています。

また、clearReadingを変更することで、site.Params.mainSectionsのページにて、ヘッダー状態になるようですが、私はどこが変わったのかよくわかりませんでした。

[params]
  clearReading = ture

ボタン周り

サイドバーの設定には、main, links, miscの3種類存在します。主には以下のような使い分けがされています。

main ：サイト内遷移用
links ：外部サイトへのリンク用
misc ：その他

[[menu.main]]
  weight = 1
  identifier = "home"
  name = "Home"
  pre = "<i class=\"sidebar-button-icon fas fa-lg fa-home\" aria-hidden=\"true\"></i>"
  url = "/"

[[menu.links]]
  weight = 0
  identifier = "github"
  name = "GitHub"
  pre = "<i class=\"sidebar-button-icon fab fa-lg fa-github\" aria-hidden=\"true\"></i>"
  url = "https://github.com/kakawait"

[[menu.misc]]
  weight = 0
  identifier = "rss"
  name = "RSS"
  pre = "<i class=\"sidebar-button-icon fas fa-lg fa-rss\" aria-hidden=\"true\"></i>"
  url = "/index.xml"

設定項目は[公式]メニューに倣って作成されています。

項目	説明	型
weight	重み重み順に表示されます	int
identifier	一意のid `themes/hugo-tranquilpeak-theme/i18n/ja.yml`内の`id`はこれに対応	string
name	表示名	string
pre	nameの左に表示されるアイコンここではfontawesomeから取得	template.HTML
url	遷移先URL	string

サムネイルの設定

表示/非表示

サムネイルを表示させるかを設定します。

[params]
  thumbnailImage = true

位置

タイトルの右right、左left、下bottomのどこに画像を表示させるかを設定します。

[params]
  thumbnailImagePosition = "right"

自動設定

サムネイルがない場合に、記事のギャラリーから背景画像や最初の投稿画像を自動的にサムネイル画像にするかを設定します。 true:自動設定する、false:自動設定しない

[params]
  autoThumbnailImage = true

その他設定

ギャラリー

記事の最後にギャラリーを表示するか設定します。 true:表示するfalse:表示しない

[params]
  imageGallery = true

ただし、記事の上部にgallery設定を行っている必要があります。

---
title: "タイトル"
date: 日時
…
gallery:
- 画像URL [サムネイル画像URL] [注釈]
# E.g : https://example.com/original.jpg https://example.com/thumbnail.jpg "New York"
---

記事本文

カテゴリ階層

カテゴリの表示方法を設定します。 true:階層化する、false:階層化しない（フラット）

[params]
  hierarchicalCategories = true

シンタックスハイライト

シンタックスハイライトとして、highlight.jsかprism.jsを選択できます。

[params]
  syntaxHighlighter = 'highlight.js'

ただし、使用するためにはJavasvriptファイルを別途設定する必要があります(下記参照)。

ここでは、highlight.jsを読み込んでいます。（hugo serverコマンドからはエラーを吐くため、こちらは今後試す予定です）

  [[params.customJS]]
    src = "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.1.0/languages/apache.min.js"
    integrity = "sha512-gE8KAQyFIzV1C9+GZ8TKJHZS2s+n7EjNtC+IMRn1l5+WYJTHOODUM6JSjZhFhqXmc7bG8Av6XXpckA4tYhflnw=="
    crossorigin = "anonymous"
    async = true
    defer = true

  [[params.customJS]]
    src = "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.1.0/languages/go.min.js"
    integrity = "sha512-EWROca+bote+7Oaaar1F6y74iZj1r1F9rm/ly7o+/FwJopbBaWtsFDmaKoZDd3QiGU2pGacBirHJNivmGLYrow=="
    crossorigin = "anonymous"
    async = true
    defer = true

  [[params.customJS]]
    src = "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.1.0/languages/http.min.js"
    integrity = "sha512-GDVzAn0wpx1yVtQsRWmFc6PhJiLBPdUic+h4GWgljBh904O3JU10fk9EKNpVyIoPqkFn54rgL2QBG4BmUTMpiQ=="
    crossorigin = "anonymous"
    async = true
    defer = true

  [[params.customJS]]
    src = "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.1.0/languages/less.min.js"
    integrity = "sha512-UgZlma8NzkrDb/NWgmLIcTrH7i/CSnLLDRFqCSNF5NGPpjKmzyM25qcoXGOup8+cDakKyaiTDd7N4dyH4YT+IA=="
    crossorigin = "anonymous"
    async = true
    defer = true

  [[params.customJS]]
    src = "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.1.0/languages/nginx.min.js"
    integrity = "sha512-lot9koe73sfXIrUvIPM/UEhuMciN56RPyBdOyZgfO53P2lkWyyXN7J+njcxIIBRV+nVDQeiWtiXg+bLAJZDTfg=="
    crossorigin = "anonymous"
    async = true
    defer = true

  [[params.customJS]]
    src = "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.1.0/languages/puppet.min.js"
    integrity = "sha512-Zd3e7XxHP00TD0Imr0PIfeM0fl0v95kMWuhyAS3Wn1UTSXTkz0OhtRgBAr4JlmADRgiXr4x7lpeUdqaGN8xIog=="
    crossorigin = "anonymous"
    async = true
    defer = true

  [[params.customJS]]
    src = "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.1.0/languages/scss.min.js"
    integrity = "sha512-qtqDO052iXMSP+5d/aE/jMtL9vIIGvONgTJziC2K/ZIB1yEGa55WVxGE9/08rSQ62EoDifS9SWVGZ7ihSLhzMA=="
    crossorigin = "anonymous"
    async = true
    defer = true

  [[params.customJS]]
    src = "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.1.0/languages/stylus.min.js"
    integrity = "sha512-1NmkjnEDnwwwcu28KoQF8vs3oaPFokQHbmbtwGhFfeDsQZtVFI8zW2aE9O8yMYdpdyKV/5blE4pSWw4Z/Sv97w=="
    crossorigin = "anonymous"
    async = true
    defer = true

  [[params.customJS]]
    src = "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.1.0/languages/swift.min.js"
    integrity = "sha512-B2wSfruPjr8EJL6IIzQr1eAuDwrsfIfccNf/LCEdxELCgC/S/ZMt/Uvk80aD79m7IqOqW+Sw8nbkvha20yZpzg=="
    crossorigin = "anonymous"
    async = true
    defer = true

  [[params.customJS]]
    src = "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.1.0/languages/yaml.min.js"
    integrity = "sha512-28oDiQZGKUVN6wQ7PSLPNipOcmkCALXKwOi7bnkyFf8QiMZQxG9EQoy/iiNx6Zxj2cG2SbVa4dXKigQhu7GiFw=="
    crossorigin = "anonymous"
    async = true
    defer = true

フッター

  [params.footer]
    copyright = "<a href=\"https://github.com/kakawait\">kakawait</a>"

ページネーション

記事の表示最大数を設定します。下の場合、7記事が最大の表示数です。

paginate = 7

また、ページネーションの次へと前へが入れ替わります。

swapPaginator = true

この図では、2記事の時に設定を変更したので、各々で次へと前へが表示されていますが、本来は表示場所が逆になります。

外部サービス連携

Disqus

コメント機能をサイトに追加したい場合はDisqusを活用します。Disqus内で発行されるshort nameをdisqusShortnameに設定します。参考：Hexo にコメント欄の Disqus を設置

disqusShortname = 
[params.comment.disqus]
  enable = true

Google Analytics

サイトへのアクセスを分析するためにGoogle Analyticsを導入します。 Google Analyticsにサイトを登録した際に発行されるトラッキングIDをgoogleAnalyticsに設定します。 Google Analyticsのサイト登録方法は、とてもよくまとめられている記事がたくさんありますのでそちらを参考下さい。

googleAnalytics =
[params.googleAnalytics]
  async = true

共有オプション

記事の下にある共有機能を設定します。こちらは、facebookやtwitterに記事を共有できる機能です。

  [[params.sharingOptions]]
    name = "Facebook"
    icon = "fab fa-facebook-square"
    url = "https://www.facebook.com/sharer/sharer.php?u=%s"

  [[params.sharingOptions]]
    name = "Twitter"
    icon = "fab fa-twitter"
    url = "https://twitter.com/intent/tweet?text=%s"

注意

Hugo v0.60.0以上の方

Hugo v0.60.0 から Markdown パーサーとして Goldmark が採用されています。その影響で、.mdファイル内のHTMLが除去されたりと弊害があるようです。よって、unsafe=tureとしておくのが推奨されています。

  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true

config.tomlを編集しても、サイトに反映されない

config.tomlは、上位ディレクトリとthemes内に重複して存在します。 Hugoでは上位の同名ファイルを参照しますので、上位ディレクトリのconfig.tomlを修正してください。

{フォルダ名}
　├── config.toml --> サイト全体設定ファイル
　├── archetypes 
　　　　└── default.md --> 記事の共通設定ファイル
　├── content --> 記事格納用
　├── data    --> サイト生成データ格納用
　├── layouts --> HTML格納用
　├── static  --> 画像、CSS、Javascript格納用
　└── themes  --> テーマ格納用
<以下の構成はテーマによって異なります>
　　　 └── hugo-tranquilpeak-theme
　　　 　　　├── archetypes
　 　　　　　├── exampleSite
　　　　 　　　　　├── ・・・
　　　 　　　　　　└── config.toml
　 　　　　　├── layouts
　 　　　　　├── src
　 　　　　　├── static
　 　　　　　├── tasks
　 　　　　　├── ・・・
 　　　　　　└── README.md

カスタマイズした内容は、適宜追記していければと思います。

Hugo × GitLab × Netlify|tranquilpeakの設定まとめ

目次