HUGO ja 非公式

  • ニュース
  • ドキュメント
  • テーマ
  • コミュニティ
  • GitHub
gohugoio Star づけ
  暫定公開中 2024/09/16 (94d7f576a 対応, 2024/09/15)
  • Hugo について
    • 本節
    • Introduction
    • Hugo の機能
    • Privacy
    • セキュリティ
    • ライセンス
  • インストール
    • 本節
    • macOS
    • Linux
    • Windows
    • BSD
  • はじめよう
    • 本節
    • クイックスタート
    • ディレクトリ構造
    • 基本操作
    • 設定
    • Configure markup
    • 用語集
    • 本書以外の学習リソース
  • クイックリファレンス
    • 本節
    • Emojis
    • Functions
    • Methods
    • Page collections
  • コンテント管理
    • 本節
    • コンテントの構成
    • ページバンドル
    • コンテントフォーマット
    • フロントマター
    • ビルドオプション
    • ページリソース
    • イメージ処理
    • ショートコード
    • 関連コンテント
    • Sections
    • Content types
    • アーキタイプ
    • 分類
    • Summaries
    • Links and cross references
    • URL 管理
    • メニュー
    • コメント
    • マルチ言語
    • Markdown attributes
    • シンタックスハイライト
    • Diagrams
    • Mathematics
    • Data sources
    • Content adapters
  • テンプレート
    • 本節
    • はじめに
    • Template types
    • Lookup order
    • 基本テンプレート
    • Home templates
    • Single templates
    • Section templates
    • Taxonomy templates
    • Term templates
    • 部分テンプレート
    • コンテントビューテンプレート
    • ショートコードテンプレート
    • サイトマップテンプレート
    • RSS テンプレート
    • 404 テンプレート
    • robots.txt templates
    • メニュー
    • ページネーション
    • Embedded templates
    • Custom output formats
  • 関数
    • 本節
    • cast
    • collections
    • compare
    • crypto
    • css
    • data
    • debug
    • diagrams
    • encoding
    • fmt
    • global
    • go template
    • hash
    • hugo
    • images
    • inflect
    • js
    • lang
    • math
    • openapi3
    • os
    • partials
    • path
    • reflect
    • resources
    • safe
    • strings
    • templates
    • time
    • transform
    • urls
  • メソッド
    • 本節
    • Duration
    • Menu
    • Menu entry
    • Page
    • Pager
    • Pages
    • Resource
    • Shortcode
    • Site
    • Taxonomy
    • Time
  • レンダーフック
    • 本節
    • Introduction
    • Blockquotes
    • Code blocks
    • Headings
    • Images
    • Links
    • Passthrough
    • Tables
  • Hugo モジュール
    • In this section
    • Configure Hugo modules
    • Use Hugo Modules
    • Theme components
  • Hugo パイプ
    • 本節
    • Introduction
    • Transpile Sass to CSS
    • PostCSS
    • PostProcess
    • JavaScript building
    • Babel
    • Asset minification
    • Concatenating assets
    • Fingerprinting and SRI hashing
    • Resource from string
    • Resource from template
  • CLI
  • トラブルシューティング
    • 本節
    • Logging
    • Inspection
    • Deprecation
    • Performance
    • FAQs
  • 開発ツール
    • 本節
    • Editor plugins
    • Front-ends
    • 検索
    • Migrations
    • Other projects
  • ホスティングと開発
    • 本節
    • Hugo Deploy
    • Deploy with Rclone
    • Deploy with Rsync
    • Host on 21YunBox
    • Host on AWS Amplify
    • Host on Azure Static Web Apps
    • Host on Cloudflare Pages
    • Host on Firebase
    • Host on GitHub Pages
    • Host on GitLab Pages
    • Host on KeyCDN
    • Host on Netlify
    • Host on Render
  • 貢献
    • 本節
    • Development
    • ドキュメント
    • Themes
  • メンテナンス
テンプレート

コンテントビューテンプレート

Hugo can render alternative views of your content, useful in list and summary views.

The following are common use cases for content views:

  • You want content of every type to be shown on the home page but only with limited summary views.
  • You only want a bulleted list of your content in a taxonomy template. Views make this very straightforward by delegating the rendering of each different type of content to the content itself.

Create a content view

To create a new view, create a template in each of your different content type directories with the view name. The following example contains an “li” view and a “summary” view for the posts and project content types. As you can see, these sit next to the single template, single.html. You can even provide a specific view for a given type and continue to use the _default/single.html for the primary view.

  ▾ layouts/
    ▾ posts/
        li.html
        single.html
        summary.html
    ▾ project/
        li.html
        single.html
      summary.html

Which template will be rendered?

The following is the lookup order for content views ordered by specificity.

  1. /layouts/<TYPE>/<VIEW>.html
  2. /layouts/<SECTION>/<VIEW>.html
  3. /layouts/_default/<VIEW>.html
  4. /themes/<THEME>/layouts/<TYPE>/<VIEW>.html
  5. /themes/<THEME>/layouts/<SECTION>/<VIEW>.html
  6. /themes/<THEME>/layouts/_default/<VIEW>.html

Example: content view inside a list

list.html

In this example, .Render is passed into the template to call the render function. .Render is a special function that instructs content to render itself with the view template provided as the first argument. In this case, the template is going to render the summary.html view that follows:

layouts/_default/list.html
<main id="main">
  <div>
    <h1 id="title">{{ .Title }}</h1>
    {{ range .Pages }}
      {{ .Render "summary" }}
    {{ end }}
  </div>
</main>

summary.html

Hugo passes the Page object to the following summary.html view template.

layouts/_default/summary.html
<article class="post">
  <header>
    <h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
    <div class="post-meta">{{ .Date.Format "Mon, Jan 2, 2006" }} - {{ .FuzzyWordCount }} Words </div>
  </header>
  {{ .Summary }}
  <footer>
  <a href='{{ .RelPermalink }}'>Read&nbsp;more&nbsp;&raquo;</a>
  </footer>
</article>

li.html

Continuing on the previous example, we can change our render function to use a smaller li.html view by changing the argument in the call to the .Render function (i.e., {{ .Render "li" }}).

layouts/_default/li.html
<li>
  <a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
  <div class="meta">{{ .Date.Format "Mon, Jan 2, 2006" }}</div>
</li>

このページ内

  • Create a content view
  • Which template will be rendered?
  • Example: content view inside a list
最終更新日付: 0001/01/01
ページの変更
Hugo 作者より
Hugo Logo
  • Issue 報告
  • ヘルプ
  • @GoHugoIO
  • @spf13
  • @bepsays
 

Hugo Sponsors

Route4Me
Your Company?
 

The Hugo logos are copyright © Steve Francia 2013–2024.

The Hugo Gopher is based on an original work by Renée French.

  • ニュース
  • ドキュメント
  • テーマ
  • コミュニティ
  • GitHub
  • Hugo について
  • インストール
  • はじめよう
  • クイックリファレンス
  • コンテント管理
  • テンプレート
  • 関数
  • メソッド
  • レンダーフック
  • Hugo モジュール
  • Hugo パイプ
  • CLI
  • トラブルシューティング
  • 開発ツール
  • ホスティングと開発
  • 貢献
  • メンテナンス