Hugo テーマ 7. layouts/baseof.html をいじる

2026-06-15 00:11:30 Hugo

最終更新日から %s 以上が経過しています。
内容が古くなっている可能性があるのでご注意ください。

サイト全体に共通する、ページのレイアウト定義を編集します。

このレイアウトの方針

細かいこと (ここでは解説しません)
- ヘッダー・フッター
- ブロック main は左右中央に配置
- 左にはコンテンツ内の見出しの一覧 (Table of contents) コンテンツページ限定
- 右にはプロファイルや最近の更新
JS, SCSS→CSS

baseof.html

以下の役割を担っています。

ページの枠組みを決める
ページを構成する個々の部分は partial で他のテンプレートに任せる
ブロック main を定義し、Hugo 決めたページの内容を当てはめる

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html lang="{{ .Site.Language.Locale }}">
  <head>
    <meta charset="utf-8">
    <title>
      {{ block "title" . }}
        {{ if .Page.IsHome }}
          {{ .Site.Title }}
        {{ else }}
          {{ .Page.Title }} - {{ .Site.Title }}
        {{ end }}
      {{ end }}
    </title>
    {{ partial "meta.html" . }}
  </head>
    <body>
      {{ "<!-- Page.Kind=" | safeHTML }}{{ .Kind }}{{ " -->" | safeHTML }}
      {{ if not .Draft }}
        {{ partial "google_analytics.html" . }}
      {{ end }}

      <div class="header">
        {{ partial "header.html" . }}
      </div>

      <div class="main">
        <div class="toc-area">
          {{ .TableOfContents }}
        </div>
        <div class="main-area">
          {{ block "main" . }}{{ end }}
        </div>
        <div class="side-area">
          {{ partial "profile.html" . }}
          {{ partial "latest.html" . }}
          {{ partial "tags.html" . }}
        </div>
      </div>

      <div class="footer">
        {{ partial "footer.html" . }}
      </div>

      {{ partial "minjs.html" (dict "js" "js/derty.js" "static" "js/derty.js" "base" .Site.BaseURL) }}

    </body>
</html>
{{/* vim: set et ft=html sts=2 sw=2 ts=2 : */}}

多数のファイルを参照しているため、幾つかの話題に絞って解説していきます。

meta.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
{{ "<!-- META -->" | safeHTML }}
{{ hugo.Generator }}
<meta name="copyright" content="{{ .Site.Copyright }}">

{{- with .OutputFormats.Get "RSS" }}
<link rel="alternate" type="application/atom+xml" title="{{ $.Site.Title }}" href="{{ .RelPermalink }}" />
{{- end }}

{{ partial "opengraph.html" . }}
{{ partial "schema.html" . }}
{{ partial "twitter_cards.html" . }}

<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

{{ partial "mincss.html" (dict "sass" "sass/derty.scss" "css" "css/derty.css" "static" "css/derty.css" "base" .Site.BaseURL) }}

<!-- syntax highlighting -->
{{ $cssSyntax := resources.Get "css/syntax.css" }}
{{ $cssSyntaxDark := resources.Get "css/syntax_dark.css" }}
<style type="text/css" media="screen">
  @media (prefers-color-scheme: dark) { 
    {{ $cssSyntaxDark.Content | safeCSS }}
  }
  @media (prefers-color-scheme: light) { 
    {{ $cssSyntax.Content | safeCSS }}
  }
</style>
{{ "<!-- META -->" | safeHTML }}
{{/* vim: set et ft=html sts=2 sw=2 ts=2 : */}}

`{{-` や `-}}`

ハイフンが置いてある側の空白を削除することを意味します。

HTML の要素を記述する部分では、過度に意識して記述する必要はありません。
一方で、表示される文字列を構築する場合は適切にこの記述していかないと間延びした表示になってしまいます。

シンタックスハイライト

このテーマはライトモードとダークモードに対応しています。
配色が変わるため、シンタックスハイライトもそれに合わせて CSS ファイルを作っておきます。

> hugo gen chromastyles --style=github > assets/css/syntax.css
> hugo gen chromastyles --style=github-dark > assets/css/syntax_dark.css

`resource.Get.Content` による CSS ファイル内容の展開

{{ $cssSyntax := resources.Get FILE_PATH_IN_ASSETS}} で、assets ディレクトリー内にあるファイルを読み込み、その内容を {{ $cssSyntax.Content }} で展開しています。

ただしこのまままでは HTML として表示できるものではないため、 {{ $cssSyntax.Content | safeCSS }} で「HTML に直接出力しても問題ない CSS なのでそのまま出力する」ということをしています。

« Hugo テーマ 6. layouts/home.html をいじる «

» Hugo テーマ 8. Shortcodes と Render hooks »