HugoをMainroadをベースにカスタマイズ

SSG
Page content

このページについて

自分用（このページ）のカスタマイズ用のメモ。公式ドキュメント及び下記サイト等を参考にさせてもらった。

Hugo によるブログ作成と mainroad テーマのカスタマイズ

HUGOのテーマ「Mainroad」の設定方法を紹介

自分なりの理解ポイント

公式サイトや解説サイト等にも言及されているのかもしれないが、最初理解しにくかったところや、勘違いしたところを下記に羅列する。

  • QuickStartの例では、content/posts配下に記事格納するように説明されているが、あくまでも一例でありContent直下、または任意のディレクトリをつくって利用可能
  • Content直下に_index.mdを作成すると、それがトップページになる（逆にPosts等、サブディレクトリ上に_index.mdを作成してもトップページにはならない）
  • themeの動作を変更したい場合は、themes内のlayoutがテンプレート相当のファイルなので、同じものを直下のlayout上に作成して変更すると、こちらで上書きすることが可能。
    • themeの構成ファイルを直接編集するのに比べてgit pullとかしても変更が保持される
  • config.tomlはhugo.tomlに変更された（が、config.tomlに書いても有効のようである）

partitalsとshortcodes

カスタマイズをする上でpartitalsとshortcodesという用語が飛び交うのだが、これらの違いが最初わかりにくかった。

  • partitalsはテーマにおけるtemplateの部品。
  • partitalsはテンプレート内からは呼び出せるが、コンテンツ(markdown)からは呼び出せない
  • shortcodesはテンプレート、コンテンツの両方で呼び出せる
  • コンテンツ(markdown)から機能を呼び出す→shortcodesを利用
  • テンプレート内で共通的な部品を呼び出す→Partialを利用
  • partital内でshortcodesを呼ぶこともできる
  • トップページのみに最新記事を掲載(shortcodesで登録し、markdown内から呼び出す)
  • すべてのページに関連記事を掲載(partialで作成し、_default/layout/single.htmlから呼び出し）

partialsでやったこと

関連記事の表示は下記のサイトを参考にした。

Hugoで関連記事を表示する方法

hugo_dir/layouts/_default/single.html

    {{ partial "related.html" . }}

hugo_dir/layouts/partials/related.html

余白用のクラスをいれておいて、カスタムCSS側で調整できるようにした。

{{ $related := .Site.RegularPages.Related . | first 5 }}
{{ with $related }}

<div class="spacer"></div>

<h2>関連記事</h2>

<div class="related">
  <ul>
    {{ range . }}
      <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
    {{ end }}
  </ul>
</div>

<div class="spacer"></div>

{{ end }}

カスタムCSSでやったこと


.container {
    max-width: 1800px; 
    width: 100%;
}

全体の最大幅の拡張。

h1 {
	font-size:1.75em;
	text-shadow: 2px 2px 2px silver;
	margin-top:1em;
	margin-bottom: 0.25em;
}

h2 {
	margin-top:1em;
	margin-left:0em;
	font-size:1.5em;
	text-shadow: 2px 2px 2px silver;
}

h3 {
	margin-left:0.5em;
	font-size:1.25em;
	text-shadow: 2px 2px 2px silver;
	margin-bottom: 0.25em;
}

h4 {
	margin-left:1em;	
	font-size:1.1em;
	margin-botom:0.1em;
	text-shadow: 1px 1px 1px #feded6;
}

各ヘッダのサイズ調整

pre {
	White-space: pre-wrap; /*　折り返す */
	margin-left :1.5em;
	margin-bottom:2em;
    background: linear-gradient(180deg, #22354a 30%, #0F0F2A);
    color: #EFFAFF; 
	padding-top: 0.75em;
	padding-left:1em;
	padding-bottom :0.75em;
	border-color: #0F0F2A;
	border-radius: 8px;
	box-shadow: 8px 8px 4px #888F9A;
}

pre code {
    background: none; /* codeタグの背景をリセット */
    display: block;
}

code-block等の設定。折り返し、背景色や角丸等の指定。 後は細々と細かな見た目の設定をおこなっている。

関連記事