今回、Hugo + Netlify で本ブログを作成しましたが、最初サイトの見栄えがよくなかったので、各種設定をしました。
Hugoはconfig.tomlを修正すれば、簡単にサイトの表示を変えることができます。
今回は僕が行った修正を記載します。
config.toml設定
現在の本ブログのconfig.tomlはこんな感じになっています。
baseURL = "https://yuyagishita.com/"
languageCode = "en-us"
title = "YAGI BLOG"
theme = "beautifulhugo"
summarylength = 100
HasCJKLanguage = true
[Params]
readingTime = true
wordCount = true
socialShare = true
[Author]
github = "yuyagishita"
twitter = "yuyagishita"
[taxonomies]
category = "categories"
tag = "tags"
[[menu.main]]
name = "Home"
url = "/"
weight = 1
[[menu.main]]
name = "Tags"
url = "tags"
weight = 2
[[menu.main]]
name = "Categories"
url = "categories"
weight = 3
[blackfriday]
hrefTargetBlank = true
１つずつ解説していきます。
summarylength
summary（TOPページなどで表示されている記事の概要）のテキスト文字数を決めることができます。
HasCJKLanguage
中国語、日本語、韓国語で記事を作成している場合は、HasCJKLanguage = trueにすることで、summarylengthが正常に動きます。
[Params]
readingTime
この記事を読むのに何分程度かかるのか表示してくれます。
wordCount
記事の文字数を表示してくれます。
socialShare
記事をSNSに連携するためのアイコンが表示されます。
[Author]
github
指定したgithubのアカウントページに遷移するアイコンが表示されます。 beautifulhugoの場合はフッター部分に表示されます。
twitter
githubと同様です。
[taxonomies]
category
カテゴリー設定ができます。 各記事に以下のように追加すれば、カテゴリーに反映されます。
---
title: "Hugoで作成したサイトのconfig.toml設定について"
date: 2020-03-24T16:36:43+09:00
draft: flase
categories: [ "tech" ]
---
tag
カテゴリーのようにタグの設定ができます。 以下のように追加をします。
tags: [ "Hugo", "go" ] ←複数設定したいときはこのように書きます。
[[menu.main]]
メインで使われるメニューです。 本ブログだと右上に表示されているやつです。
name
メニューに表示される名前です。
url
クリックした際に遷移するURLです。
weight
表示する順番を設定することができます。 少ない数字の方がメニューの先頭に表示されます。
[blackfriday]
hrefTargetBlank
リンクをクリックした際に新しいタブを開いてくれます。 影響範囲が限られているので、全体に適用したいときはカスタマイズが必要な感じです。
まとめ
Hugoはサイトの簡単な表示設定をconfig.tomlですぐに修正することができて、楽です！！
凝った表示は自分でカスタマイズする必要があるので、Hugoに慣れてきたら、挑戦しようかなと思います！！
参考資料
https://gohugo.io/getting-started/configuration/#all-configuration-settings