layouts/_partials/terms.html

Hugoのlayouts/_partials/terms.html の解説

% cat themes/my-theme/layouts/_partials/terms.html
{{- /*
For a given taxonomy, renders a list of terms assigned to the page.

@context {page} page The current page.
@context {string} taxonomy The taxonomy.

@example: {{ partial "terms.html" (dict "taxonomy" "tags" "page" .) }}
*/}}

{{- $page := .page }}
{{- $taxonomy := .taxonomy }}

{{- with $page.GetTerms $taxonomy }}
  {{- $label := (index . 0).Parent.LinkTitle }}
  <div>
    <div>{{ $label }}:</div>
    <ul>
      {{- range . }}
        <li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
      {{- end }}
    </ul>
  </div>
{{- end }}

このテンプレートは、指定されたタクソノミー（カテゴリーやタグなど）に基づいて、現在のページに割り当てられた用語のリストをレンダリングするためのパーシャルテンプレートです。

もっと読む

layouts/_partials/menu.html

% cat themes/my-theme/layouts/_partials/menu.html                                                                    21:45:32 [9/198]
{{- /*                     
Renders a menu for the given menu ID.
                                                                                
@context {page} page The current page.                                                                                                                           
@context {string} menuID The menu ID.                                           
                                                                                                                                                                 
@example: {{ partial "menu.html" (dict "menuID" "main" "page" .) }}
*/}}                     
                                        
{{- $page := .page }}
{{- $menuID := .menuID }}
                                        
{{- with index site.Menus $menuID }}
  <nav> 
    <ul>
      {{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }} 
    </ul>               
  </nav>                                                                        
{{- end }}          
                                        
{{- define "_partials/inline/menu/walk.html" }}
  {{- $page := .page }}    
  {{- range .menuEntries }}
    {{- $attrs := dict "href" .URL }}                                                                                                                            
    {{- if $page.IsMenuCurrent .Menu . }}
      {{- $attrs = merge $attrs (dict "class" "active" "aria-current" "page") }} 
    {{- else if $page.HasMenuCurrent .Menu .}}
      {{- $attrs = merge $attrs (dict "class" "ancestor" "aria-current" "true") }}
    {{- end }}
    {{- $name := .Name }}     
    {{- with .Identifier }}
      {{- with T . }}
        {{- $name = . }}
      {{- end }}
    {{- end }}
    <li>
      <a
        {{- range $k, $v := $attrs }}
          {{- with $v }}
            {{- printf " %s=%q" $k $v | safeHTMLAttr }}
          {{- end }}
        {{- end -}}
      >{{ $name }}</a>
      {{- with .Children }}
        <ul>
          {{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
        </ul>
      {{- end }}
    </li>
  {{- end }}
{{- end }}

このコードは、Hugoの部分テンプレート (partial) で、指定されたメニューIDに基づいてナビゲーションメニューをレンダリングするものです。以下に詳細な解説をします：

もっと読む

layouts/term.html

Hugoのlayouts/term.htmlコードの解説

$ cat themes/my-theme/layouts/term.html 
{{ define "main" }}
  <h1>{{ .Title }}</h1>
  {{ .Content }}
  {{ range .Pages }}
    <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
  {{ end }}
{{ end }}

このコードはHugo（静的サイトジェネレーター）のテンプレートで、term.htmlというテンプレートファイルの内容です。これはタクソノミーのタームページ（カテゴリーやタグのページなど）を表示するためのものです。

  1. {{ define "main" }} … {{ end }}: これは「main」という名前のブロックを定義しています。このブロックは通常、基本レイアウト（baseof.html）内の{{ block "main" . }}部分に挿入されます。

  2. <h1>{{ .Title }}</h1>: 現在のタームのタイトルを表示します。例えば、「Technology」カテゴリーや「golang」タグの名前などです。

  3. {{ .Content }}: タームに関連付けられたコンテンツを表示します。多くの場合、タームページに対応するMarkdownファイルがある場合、その内容がここに表示されます。

  4. {{ range .Pages }} ... {{ end }}: このタームに属するすべてのページをループ処理します。

  5. <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>:

    • 各ページへのリンクをh2見出しとして表示
    • .RelPermalink: そのページの相対URLを提供します
    • .LinkTitle: そのページのリンク用タイトル（通常は.Titleと同じですが、front matterでlinkTitleが指定されていればそれが優先されます）

使用例

例えば、あなたのサイトに「Technology」というカテゴリーがあり、それに複数の記事が含まれている場合、このテンプレートは以下のようなHTMLを生成します：

もっと読む

他の記事も確認する

layouts/taxonomy.html

layouts/section.html

layouts/home.html

layouts/page.html