mirror of
https://github.com/gohugoio/hugo.git
synced 2024-11-14 20:37:55 -05:00
5e078383a7
49809a03 Merge commit '20a631b4964fc0ab9137cce1e41774cbc17de044' 20a631b4 Squashed 'themes/gohugoioTheme/' changes from b8202f539..dafc91ff1 8b58f565 Re-generate CLI docs 4653a724 Add Netlify deployment badge 2d6246bc Remove some deprecated site variables e6777153 Improve Algolia Search Display Styling 1570999f Add missing "." in front of gitlab-ci.yaml example b922ae7d This adds documentation to the new configDir/Environment logic from .53 (#729) 7cff379f Correctly escape multi-word taxonomy terms in example 2dfeeda4 fix typo by removing stray paren 0870bd9a Fix typo in `paginate` description 91e8be85 Fixes https://github.com/gohugoio/hugo/issues/5609 c1db65ec Make the dummy URL more obvious b4589ff0 Fix a link b73dcb9a Consistently use "posts" as section name in examples 7a56abbc Format definitions a9c6fd9b Minor clarification over the last commit 5c86bdc8 Add alternative instructions for Quick Start for non-git users dafe7ee9 Add Visual Studio Code plug-ins 110ed19e Update HUGO_VERSION 2abd031a Update page.md b332f7b9 Update page.md f5a8c9d4 Update static-files.md 6d0c155c Add note about relative protocol URLs a13751ac Theme Warning: Remove note about unquoted URLs 4c8f7d68 Incorporate feedback 6f2b9cf0 Update Creating Themes Warning 40d88d98 Fix ToC example to use binary true/false 4a11f3f1 Fix typo 2dbfc0a4 Fix a typo in taxonomies d63790ef Do not mark UndocumentedFeature issues as stale d7aff095 Regenerate docs.json 71c0826f Update transform.Unmarshal.md git-subtree-dir: docs git-subtree-split: 49809a038b2691637bab7f3f2e385dde654a88b8
121 lines
4.3 KiB
Markdown
121 lines
4.3 KiB
Markdown
---
|
|
title: Content View Templates
|
|
# linktitle: Content Views
|
|
description: Hugo can render alternative views of your content, which is especially useful in list and summary views.
|
|
date: 2017-02-01
|
|
publishdate: 2017-02-01
|
|
lastmod: 2017-02-01
|
|
categories: [templates]
|
|
keywords: [views]
|
|
menu:
|
|
docs:
|
|
parent: "templates"
|
|
weight: 70
|
|
weight: 70
|
|
sections_weight: 70
|
|
draft: false
|
|
aliases: []
|
|
toc: true
|
|
---
|
|
|
|
These alternative **content views** are especially useful in [list templates][lists].
|
|
|
|
The following are common use cases for content views:
|
|
|
|
* You want content of every type to be shown on the homepage but only with limited [summary views][summaries].
|
|
* You only want a bulleted list of your content on a [taxonomy list page][taxonomylists]. 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 content view][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
|
|
```
|
|
|
|
Hugo also has support for a default content template to be used in the event that a specific content view template has not been provided for that type. Content views can also be defined in the `_default` directory and will work the same as list and single templates who eventually trickle down to the `_default` directory as a matter of the lookup order.
|
|
|
|
|
|
```
|
|
▾ layouts/
|
|
▾ _default/
|
|
li.html
|
|
single.html
|
|
summary.html
|
|
```
|
|
|
|
## Which Template Will be Rendered?
|
|
|
|
The following is the [lookup order][lookup] for content views:
|
|
|
|
1. `/layouts/<TYPE>/<VIEW>.html`
|
|
2. `/layouts/_default/<VIEW>.html`
|
|
3. `/themes/<THEME>/layouts/<TYPE>/<VIEW>.html`
|
|
4. `/themes/<THEME>/layouts/_default/<VIEW>.html`
|
|
|
|
## Example: Content View Inside a List
|
|
|
|
The following example demonstrates how to use content views inside of your [list templates][lists].
|
|
|
|
### `list.html`
|
|
|
|
In this example, `.Render` is passed into the template to call the [render function][render]. `.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:
|
|
|
|
{{< code file="layouts/_default/list.html" download="list.html" >}}
|
|
<main id="main">
|
|
<div>
|
|
<h1 id="title">{{ .Title }}</h1>
|
|
{{ range .Pages }}
|
|
{{ .Render "summary"}}
|
|
{{ end }}
|
|
</div>
|
|
</main>
|
|
{{< /code >}}
|
|
|
|
### `summary.html`
|
|
|
|
Hugo will pass the entire page object to the following `summary.html` view template. (See [Page Variables][pagevars] for a complete list.)
|
|
|
|
{{< code file="layouts/_default/summary.html" download="summary.html" >}}
|
|
<article class="post">
|
|
<header>
|
|
<h2><a href='{{ .Permalink }}'> {{ .Title }}</a> </h2>
|
|
<div class="post-meta">{{ .Date.Format "Mon, Jan 2, 2006" }} - {{ .FuzzyWordCount }} Words </div>
|
|
</header>
|
|
{{ .Summary }}
|
|
<footer>
|
|
<a href='{{ .Permalink }}'><nobr>Read more →</nobr></a>
|
|
</footer>
|
|
</article>
|
|
{{< /code >}}
|
|
|
|
### `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" }}`).
|
|
|
|
{{< code file="layouts/_default/li.html" download="li.html" >}}
|
|
<li>
|
|
<a href="{{ .Permalink }}">{{ .Title }}</a>
|
|
<div class="meta">{{ .Date.Format "Mon, Jan 2, 2006" }}</div>
|
|
</li>
|
|
{{< /code >}}
|
|
|
|
[lists]: /templates/lists/
|
|
[lookup]: /templates/lookup-order/
|
|
[pagevars]: /variables/page/
|
|
[render]: /functions/render/
|
|
[single]: /templates/single-page-templates/
|
|
[spf]: http://spf13.com
|
|
[spfsourceli]: https://github.com/spf13/spf13.com/blob/master/layouts/_default/li.html
|
|
[spfsourcesection]: https://github.com/spf13/spf13.com/blob/master/layouts/_default/section.html
|
|
[spfsourcesummary]: https://github.com/spf13/spf13.com/blob/master/layouts/_default/summary.html
|
|
[summaries]: /content-management/summaries/
|
|
[taxonomylists]: /templates/taxonomy-templates/
|