Hugo(kayal)のブログ構成をカスタマイズする
Table of Contents
Hugoをもう少しカスタマイズしてみる。
ブログの基本設定をカスタマイズする
config_default\params.toml
- logo
- copyright: 左下に表示されるコピーライト
- mainSections: 投稿記事として扱われるメインセクション
- homepage: 最近の投稿を表示するかどうか。表示数。showmoreを表示するか等。
- article: 記事の表示形式。登校日を表示するか、タグを表示するか等。
メニューをカスタマイズする
config_default\menus.toml
デフォルトでコメントされているので、コメントを外して編集する。
[[main]]
name = "tags"
title = "Tags"
url = "/tags/"
weight = 2
ブログのディレクトリ構成をカスタマイズする
デフォルトだとcontent\posts以下に記事が配置されるが、content/posts/year/のように年ごとに分割したい。
config_default\params.toml
mainSections = ["posts"]
groupByYear = true
mainSectionsがpostsのままでサブディレクトリたんで処理する。
年ごとの投稿をグループ化する。
groupByYearは２箇所ある。
themes/kayal/layouts/partials/list/main.html
を以下にコピー。
layouts\partials\list\main.html
編集することで/postsへアクセスしたときに表示される項目を変更できる。
{{ $groupByYear := .args.groupByYear }}
{{ $cardView := .args.cardView }}
{{ $showBreadcrumbs := .args.showBreadcrumbs }}
{{ $showRSS := .args.showRSS }}
{{ $partial := "list/basic.html" }}
{{ $class := "lst-basic" }}
{{ if $cardView }}
{{ $partial = "list/card.html" }}
{{ $class = "lst-card" }}
{{ end }}
{{ with .context }}
{{/* Breadcrumbs */}}
{{ if $showBreadcrumbs }}
{{ partial "breadcrumbs.html" . }}
{{ end }}
<h1 class="pg-title">
{{ .Title | emojify }}
{{ if $showRSS }}
{{ with .OutputFormats.Get "rss" }}
<a href="{{ .RelPermalink }}" title="RSS" aria-label="RSS">
{{ partial "icon.html" "rss" }}
</a>
{{ end }}
{{ end }}
</h1>
{{ .Content }}
<section class="lst-content">
{{ if $groupByYear }}
<!-- このあたりを変更 -->
{{ $pageGroups := .Pages.GroupByDate "2006" }}
{{ $paginator := .Paginate $pageGroups }}
{{ range $paginator.PageGroups }}
<h2 class="lst-year">{{ .Key }}</h2>
<ul class="{{ $class }}">
{{ range .Pages.ByWeight }}
{{ partial $partial (dict "page" . "lvl" "3") }}
{{ end }}
</ul>
{{ end }}
{{ else }}
<ul class="{{ $class }}">
{{ range (.Paginate .Pages).Pages }}
{{ partial $partial (dict "page" . "lvl" "2") }}
{{ end }}
</ul>
{{ end }}
{{ template "_internal/pagination.html" . }}
</section>
{{ end }}