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

2026-05-28 21:26:15 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 »