blogs/hugo
1
0
Fork 0
mirror of https://github.com/gohugoio/hugo.git synced 2026-08-25 07:48:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make first round of updates for lists explanations and content views

Browse Source
This commit is contained in:
Ryan Watters
2017-02-27 02:34:50 -06:00
parent c41585f83f
commit 770d3e96b3
6 changed files with 92 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files
content/templates/content-view-templates.md
+5 -6
View File
@@ -43,7 +43,7 @@ provide a specific view for a given type and continue to use the
summary.html
```
Hugo also has support for a default content template to be used in the event that a specific template has not been provided for that type. The default type works the same as the other types, but the directory must be called "_default". Content views can also be defined in the "_default" directory.
Hugo also has support for a default content template to be used in the event that a specific template has not been provided for that type. Content views can also be defined in the `_default` directory and will work the same as layouts for other types who eventually fall trickle down to this directory.
```bash
@@ -56,9 +56,7 @@ Hugo also has support for a default content template to be used in the event tha
## Which Template Will be Rendered?
Hugo uses a set of rules to figure out which template to use when rendering a specific page.
Hugo will use the following prioritized list. If a file isn’t present, then the next one in the list will be used. This enables you to craft specific layouts when you want to without creating more templates than necessary. For most sites only the \_default file at the end of the list will be needed.
The following is the [lookup order][lookup] for content views:
* `/layouts/<TYPE>/<VIEW>.html`
* `/layouts/\_default/<VIEW>.html`
@@ -71,7 +69,7 @@ The following example demonstrates how to use content views inside of your [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 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.
This `list.html` content view template is part of a larger `section.html` default template used for [spf13.com][spf]. ([See source on GitHub][spfsourcesection].)
@@ -128,8 +126,9 @@ This `li.html` content view template is used for [spf13.com][spf]. ([See source
{{% /code %}}
[listtemplates]: /templates/lists/
[lookup]: /templates/lookup-order/
[pagevars]: /variables/page-variables/
[render function]: /functions/render/
[render]: /functions/render/
[singletemplates]: /templates/single-page-templates/
[spf]: http://spf13.com
[spfsourceli]: https://github.com/spf13/spf13.com/blob/master/layouts/_default/li.html
content/templates/lists.md
+10 -10
View File
@@ -9,7 +9,7 @@ categories: [templates]
tags: [lists,sections,rss,taxonomies,terms]
weight: 22
draft: false
aliases: [/templates/lists-in-hugo/]
aliases: [/templates/list/,/layout/indexes/]
toc: true
needsreview: true
---
@@ -20,10 +20,10 @@ A list page template is a template used to render multiple pieces of content in
Hugo uses the term *list* in its truest sense; i.e. a sequential arrangement of material, especially in alphabetical or numerical order. Hugo uses list templates on any output HTML page where content is traditionally listed:
* [Taxonomy terms pages][taxonomy terms]
* [Taxonomy list pages][taxonomy lists]
* [Section list pages][section templates]
* [RSS][]
* [Taxonomy terms pages][taxterms]
* [Taxonomy list pages][taxlists]
* [Section list pages][sectiontemps]
* [RSS][rss]
The idea of a list page comes from the [hierarchical mental model of the web][mentalmodel] and is best demonstrated visually:
@@ -33,7 +33,7 @@ The idea of a list page comes from the [hierarchical mental model of the web][me
### Default Templates
Since section lists and taxonomy lists (N.B., *not* [taxonomy terms lists][]) are both *lists* with regards to their templates, both have the same terminating default of `_default/list.html`---or `themes/<THEME>/layouts/_default/list.html` in the case of a themed project---in their *lookup orders*. In addition, both [section lists][sectiontemplates] and [taxonomy lists][taxonomies] have their own default list templates in `_default`:
Since section lists and taxonomy lists (N.B., *not* [taxonomy terms lists][taxterms]) are both *lists* with regards to their templates, both have the same terminating default of `_default/list.html`---or `themes/<THEME>/layouts/_default/list.html` in the case of a themed project---in their *lookup orders*. In addition, both [section lists][sectiontemplates] and [taxonomy lists][taxonomies] have their own default list templates in `_default`:
#### Default Section Templates
@@ -82,8 +82,8 @@ If `where` or `first` receives invalid input or a field name that doesn’t exis
[mentalmodel]: http://webstyleguide.com/wsg3/3-information-architecture/3-site-structure.html
[partials]: /templates/partials/
[RSS 2.0]: http://cyber.law.harvard.edu/rss/rss.html "RSS 2.0 Specification"
[RSS]: /templates/rss-templates/
[rss]: /templates/rss-templates/
[sections]: /content-management/sections/
[section templates]: /templates/section-templates
[taxonomy lists]: /templates/taxonomy-templates/#taxonomy-list-templates/
[taxonomy terms]: /templates/taxonomy-templates/#taxonomy-terms-templates/
[sectiontemps]: /templates/section-templates
[taxlists]: /templates/taxonomy-templates/#taxonomy-list-templates/
[taxterms]: /templates/taxonomy-templates/#taxonomy-terms-templates/
content/templates/taxonomy-templates.md
+30 -22
View File
@@ -22,7 +22,7 @@ Hugo provides multiple ways to use taxonomies throughout your project:
* Order the way the terms for a taxonomy are displayed in a [taxonomy terms template](#taxonomy-terms-template)
* Order the way content associated with a taxonomy term are display in a [taxonomy list template](#taxonomy-list-template)
* List a single content's taxonomy terms within a [single page template][taxinotherpage]
* List a single content's taxonomy terms within a [single page template]()
## Taxonomy List Templates
@@ -32,20 +32,20 @@ Taxonomy list page templates are lists and therefore have all the variables and
A Taxonomy will be rendered at /`PLURAL`/`TERM`/ (e.g.&nbsp;http://spf13.com/topics/golang/) from:
* /layouts/taxonomy/`SINGULAR`.html (e.g.&nbsp;`/layouts/taxonomy/topic.html`)
* /layouts/\_default/taxonomy.html
* /layouts/\_default/list.html
* /themes/`THEME`/layouts/taxonomy/`SINGULAR`.html
* /themes/`THEME`/layouts/\_default/taxonomy.html
* /themes/`THEME`/layouts/\_default/list.html
* `/layouts/taxonomy/<SINGULAR>.html`
* /layouts/_default/taxonomy.html
* /layouts/_default/list.html
* /themes/<THEME>/layouts/taxonomy/<SINGULAR>.html
* /themes/<THEME>/layouts/_default/taxonomy.html
* /themes/`THEME`/layouts/_default/list.html
## Taxonomy Terms Template
### Taxonomy Terms Templates Lookup Order
{{% note "The Taxonomy Terms Template has a Unique Lookup Order" %}}
Compared to taxonomy list pages and [other list templates](/templates/section-templates/), a terms template lookup has only two options. If Hugo does not find a terms template in `layout/` or `/themes/<yourchosentheme>/layouts/`, Hugo will *not* render a taxonomy terms page.,
{{% /note %}}
{{% warning "The Taxonomy Terms Template has a Unique Lookup Order" %}}
Compared to taxonomy list pages and other list templates such as [sections](/templates/section-templates/), a terms template lookup has only two options. If Hugo does not find a terms template in `layout/` or `/themes/<THEME>/layouts/`, Hugo will *not* render a taxonomy terms page.
{{% /warning %}}
<!-- Begin /taxonomies/methods/ -->
Hugo makes a set of values and methods available on the various Taxonomy structures.
@@ -89,7 +89,7 @@ Each element of the slice has:
: The number of pieces of content assigned to this term.
.Pages
: All Pages assigned to this term. All [list methods](/templates/list/) are available to this.
: All Pages assigned to this term. All [list methods][renderlists] are available to this.
## WeightedPages
@@ -103,7 +103,7 @@ type WeightedPages []WeightedPage
: The number of pieces of content assigned to this term.
.Pages
: Returns a slice of pages, which then can be ordered using any of the [list methods](/templates/list/).
: Returns a slice of pages, which then can be ordered using any of the [list methods][renderlists].
<!-- Begin /taxonomies/ordering/ -->
@@ -217,11 +217,11 @@ To list such taxonomies, use the following:
```html
{{ if .Params.directors }}
<strong>Director{{ if gt (len .Params.directors) 1 }}s{{ end }}:</strong>
{{ range $index, $director := .Params.directors }}{{ if gt $index 0 }}, {{ end }}<a href="{{ "/directors/" | relURL }}{{ . | urlize }}">{{ . }}</a>{{ end }}
{{ range $index, $director := .Params.directors }}{{ if gt $index 0 }}, {{ end }}<a href="{{ "directors/" | relURL }}{{ . | urlize }}">{{ . }}</a>{{ end }}
{{ end }}
```
Alternatively, you may use the [delimit](/functions/delimit/) template function as a shortcut if the taxonomies should just be listed with a separator. See {{< gh 2143 >}} on GitHub for discussion.
Alternatively, you may use the [delimit template function][delimit] as a shortcut if the taxonomies should just be listed with a separator. See {{< gh 2143 >}} on GitHub for discussion.
## 2. Listing content with the Same Taxonomy Term
@@ -260,13 +260,13 @@ This would be very useful in a sidebar as “featured content”. You could even
## 4. Rendering a Site's Taxonomies
If you wish to display the list of all keys for a taxonomy, you can find retrieve them from the `.Site` variable which is available on every page.
If you wish to display the list of all keys for your site's taxonomy, you can retrieve them from the [`.Site` variable][sitevars] available on every page.
This may take the form of a tag cloud, a menu or simply a list.
This may take the form of a tag cloud, a menu, or simply a list.
The following example displays all tag keys:
The following example displays all terms in a site's tags taxonomy:
### Example
### Example: List All Tags
```html
<ul id="all-tags">
@@ -276,12 +276,14 @@ The following example displays all tag keys:
</ul>
```
### Complete Example
This example will list all taxonomies, each of their keys and all the content assigned to each key.
### Example: List All Taxonomies, Keys, and Assigned Content
This example will list all taxonomies, each of their keys, and all the content assigned to each key.
{{% code file="layouts/partials/all-taxonomies.html" download="all-taxonomies.html" %}}
```html
<section>
<ul>
<ul id="all-taxonomies">
{{ range $taxonomyname, $taxonomy := .Site.Taxonomies }}
<li><a href="{{ "/" | relLangURL}}{{ $taxonomyname | urlize }}">{{ $taxonomyname }}</a>
<ul>
@@ -299,9 +301,15 @@ This example will list all taxonomies, each of their keys and all the content as
</ul>
</section>
```
{{% /code %}}
## `.Site.GetPage` for Taxonomies
### `.Site.GetPage` Taxonomy List Example
### `.Site.GetPage` Taxonomy Terms Example
### `.Site.GetPage` Taxonomy Terms Example
[delimit]: /functions/delimit/
[renderlists]: /templates/lists/
[sitevars]: /variables/site-variables/
static/css/style.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
themes/hugodocs/layouts/partials/site-footer.html
+1 -1
View File
@@ -9,7 +9,7 @@
<ul class="footer-list">
<li><a href="{{.Site.Params.ghrepo}}" target="_blank"><i class="icon-github"></i> Project Source</a></li>
<li><a href="{{.Site.Params.discuss}}" target="_blank"><i class="icon-forum"></i> Discuss Hugo</a></li>
<li><a href="{{.Site.Params.gitter}}" target="_blank"><i class="icon-gitter"></i> Gitter (Dev Chat Only)</a></li>
<li><a href="{{.Site.Params.gitter}}" target="_blank"><i class="icon-gitter"></i> Gitter (Dev Only)</a></li>
</ul>
<ul class="footer-list">
<li><a href="https://twitter.com/gohugoio" target="_blank"><i class="icon-twitter"></i> @GoHugoIO</a></li>
themes/hugodocs/pipeline/scss/layout/_site-footer.scss
+45 -96
View File
@@ -5,104 +5,9 @@
align-items: center;
height: auto;
padding-bottom: 1em;
// min-height: 500px;
.footer-content {
width: 90%;
margin-left: auto;
margin-right: auto;
color: $hugo-white;
display: flex;
flex-direction: column;
span {
text-align: center;
width: 100%;
display: block;
margin-top: 1em;
}
img {
max-width: 200px;
margin-left: auto;
margin-right: auto;
display: block;
}
.footer-lists {
display: flex;
justify-content: space-around;
margin-right: 1em;
margin-top: 1em;
.footer-list {
max-width: 45%;
}
}
@include MQ(M) {
flex-direction: row;
justify-content: space-between;
align-items: center;
div {
min-width: 50%;
width: 50%;
max-width: 50%;
}
.footer-lists {
display: flex;
justify-content: center;
align-items: center;
.footer-list {
// margin-top: 1em;
max-width: auto;
margin-right: 2em;
@include MQ(L) {
min-width: 150px;
}
}
}
}
}
@include MQ(M) {
flex-direction: row;
}
// .footer-content {
// display: flex;
// flex-direction: column;
// align-items: center;
// justify-content: space-around;
// width: 90%;
// color: $hugo-white;
// transition: transform .3s ease-in-out;
// @include MQ(M) {
// min-height: $site-footer-height;
// max-height: $site-footer-height;
// }
// div {
// display: flex;
// flex-direction: column;
// justify-content: center;
// align-items: center;
// font-size: 14px;
// max-height: 100px;
// margin: 0px;
// img {
// max-width: 120px;
// }
// }
// div.footer-lists {
// display:flex;
// width:100vw;
// }
// &.navigation-open {
// transition: transform .3s ease-in-out;
// transform: translateX($site-navigation-width);
// @include MQ(L) {
// transform: translateX(0);
// }
// }
// i.icon-heart:before {
// color: $hugo-pink;
// }
// @include MQ(L) {
// margin-left: 2em;
// }
// }
@include MQ(L) {
width:calc(100% - #{$site-navigation-width});
margin-left: $site-navigation-width;
@@ -114,11 +19,52 @@
}
}
ul.footer-list {
.footer-content {
width: 90%;
margin-left: auto;
margin-right: auto;
color: $hugo-white;
display: flex;
flex-direction: column;
span {
text-align: center;
width: 100%;
display: block;
margin-top: 1em;
font-size: .9em;
}
img {
max-width: 140px;
margin-left: auto;
margin-right: auto;
display: block;
}
@include MQ(M) {
flex-direction: row;
justify-content: space-between;
align-items: center;
div {
min-width: 50%;
width: 50%;
max-width: 50%;
}
}
}
.footer-lists {
display: flex;
justify-content: space-around;
margin-right: 1em;
margin-top: 1em;
}
.footer-list {
color: $hugo-white;
list-style: none;
margin-left: 0px;
padding-left: 0px;
max-width: auto;
margin-right: 2em;
margin: 0px;
flex-wrap: wrap;
li a {
@@ -141,4 +87,7 @@ ul.footer-list {
color: $hugo-pink;
}
}
@include MQ(L) {
min-width: 150px;
}
}