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

Finalize single page template content

Browse Source
This commit is contained in:
Ryan Watters
2017-02-22 02:47:39 -06:00
parent ed22a83f89
commit 691544f430
14 changed files with 351 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files
content-changes.md
+1 -1
View File
@@ -286,7 +286,7 @@ The following is a list of weights for the newly restructure site architecture
│   ├── data-templates.md
│   ├── go-template-primer.md
│   ├── homepage-template.md
│   ├── list-and-section-templates.md
│   ├── section-and-listtemplates.md
│   ├── local-file-templates.md
│   ├── menu-templates.md
│   ├── pagination.md
content/content-management/content-summaries.md
+1 -1
View File
@@ -72,4 +72,4 @@ Note how the `.Truncated` boolean valuable may be used to hide the "Read More...
[org]: /content-management/supported-content-formats/
[pagevariables]: /variables-and-params/page-variables/
[section's list page template]: /templates/list-and-section-templates/
[section's list page template]: /templates/section-and-list-templates/
content/content-management/content-types.md
+1 -1
View File
@@ -62,6 +62,6 @@ More details about archetypes can be found in the [archetypes documentation][].
[archetypes documentation]: /content-management/archetypes/
[sections]: /content-management/sections/
[front matter]: /content-management/front-matter/
[list of contents on a single page]: /templates/list-and-section-templates/
[list of contents on a single page]: /templates/section-and-list-templates/
[template]: /templates/
[Tumblr]: https://www.tumblr.com/
content/content-management/sections.md
+2 -2
View File
@@ -49,7 +49,7 @@ Hugo will automatically create pages for each section root that list all of the
As of Hugo v0.18, section pages can also have a content file and front matter. These section content files must be placed in their corresponding section folder and named `_index.md` in order for Hugo to correctly render the front matter and content.
{{% warning "`index.md` vs `_index.md`" %}}
Hugo themes developed before v0.18 often used an `index.md` in a content section as a hack to emulate the behavior of `_index.md`. The hack may work...*sometimes*; however, the order of page rendering can be unpredictable in Hugo. What works now may fail to render appropriately as your site grows. It is **strongly advised** to use `_index.md` as the *preferred* content section index page. **Note:** `_index.md`'s layout, as representative of a section, is a [list template](/templates/list-and-section-templates/) and *not* a [single template](/templates/single-page-templates/).
Hugo themes developed before v0.18 often used an `index.md` in a content section as a hack to emulate the behavior of `_index.md`. The hack may work...*sometimes*; however, the order of page rendering can be unpredictable in Hugo. What works now may fail to render appropriately as your site grows. It is **strongly advised** to use `_index.md` as the *preferred* content section index page. **Note:** `_index.md`'s layout, as representative of a section, is a [list template](/templates/section-and-list-templates/) and *not* a [single template](/templates/single-page-templates/).
{{% /warning %}}
## Content *Section* vs Content *Type*
@@ -60,6 +60,6 @@ By default, everything created within a section will use the [content type][] th
[content type]: /content-management/content-types/
[example site]: /getting-started/using-the-hugo-docs/
[directory structure]: /getting-started/directory-structure/
[listsandsectiontemplatespage]: /templates/list-and-section-page-templates/
[listsandsectiontemplatespage]: /templates/section-and-list-templates/
content/developer-tools/syntax-highlighting.md
+8 -8
View File
@@ -19,7 +19,7 @@ Hugo provides the ability for you to highlight source code in _two different way
## Server-side
For the pre-processed approach, highlighting is performed by an external Python-based program called [Pygments](http://pygments.org/) and is triggered via an embedded Hugo shortcode (see example below). If Pygments is absent from the path, it will silently simply pass the content along unhighlighted.
For the pre-processed approach, highlighting is performed by an external Python-based program called [Pygments](http://pygments.org/) and is triggered via an embedded Hugo shortcode (see [example](#example-highlight-shortcode-input) below). If Pygments is absent from the path, it will silently simply pass the content along withou highlighting.
### Server-side Advantages
@@ -30,16 +30,16 @@ The advantages of server-side syntax highlighting are that it doesn’t depend o
If you have never worked with Pygments before, here is a brief primer:
+ Install Python from [python.org](https://www.python.org/downloads/). Version 2.7.x is already sufficient.
+ Run `pip install Pygments` in order to install Pygments. Once installed, Pygments gives you a command `pygmentize`. Make sure it sits in your PATH, otherwise Hugo cannot find it.
+ Run `pip install Pygments` in order to install Pygments. Once installed, Pygments gives you a command `pygmentize`. Make sure it sits in your PATH; otherwise, Hugo will not be able to find and use it.
On Debian and Ubuntu systems, you may also install Pygments by running `sudo apt-get install python3-pygments`.
Hugo gives you two options that you can set with the variable `pygmentsuseclasses` (default `false`) in `config.toml` (or `config.yaml`).
Hugo gives you two options that you can set with the variable `pygmentsuseclasses` (default `false`) in your [site configuration](/getting-started/configuration/).
1. Color-codes for highlighting keywords are directly inserted if `pygmentsuseclasses = false` (default). See in the example below. The color-codes depend on your choice of the `pygmentsstyle` (default `"monokai"`). You can explore the different color styles on [pygments.org](http://pygments.org/) after inserting some example code.
2. If you choose `pygmentsuseclasses = true`, Hugo includes class names in your code instead of color-codes. For class-names to be meaningful, you need to include a `.css`-file in your website representing your color-scheme. You can either generate this `.css`-files according to this [description](http://pygments.org/docs/cmdline/) or download the standard ones from the [GitHub pygments-css repository](https://github.com/richleland/pygments-css).
1. Color codes for highlighting keywords are directly inserted if `pygmentsuseclasses = false` (default). The color codes depend on your choice of the `pygmentsstyle` (default = `"monokai"`). You can explore the different color styles on [pygments.org](http://pygments.org/) after inserting some example code.
2. If you choose `pygmentsuseclasses = true`, Hugo includes class names in your code instead of color codes. For class-names to be meaningful, you need to include a `.css` file in your website representing your color scheme. You can either generate this `.css` files according to the [description from the Pygments documentation](http://pygments.org/docs/cmdline/) or download the one of the many pre-built color schemes from [Pygment's GitHub css repository](https://github.com/richleland/pygments-css).
### Usage
### Server-side Usage
Highlighting is carried out via the [built-in shortcode](/content-management/shortcodes/) `highlight`. `highlight` takes exactly one required parameter for the programming language to be highlighted and requires a closing shortcode. Note that `highlight` is _not_ used for client-side javascript highlighting.
@@ -140,7 +140,7 @@ a library and a corresponding theme. Some popular libraries are:
The advantages of client-side syntax highlighting are that it doesn’t cost anything when building your site, and some of the highlighting scripts available cover more languages than Pygments does.
### Highlight.js example
### Highlight.js Example
This example uses the popular [Highlight.js] library, hosted by [Yandex], a popular Russian search engine.
@@ -176,7 +176,7 @@ Add `prism.js` near the bottom of your `<body>` tag in whatever Hugo partial tem
In this example, the local paths indicate that your downloaded copy of these files are being added to the site, typically under `./static/css/` and `./static/js/`, respectively.
### Using Client-side Highlighting
### Client-side Usage
To use client-side highlighting, most of these javascript libraries expect your code to be wrapped in semantically correct `<code>` elements with language-specific class attributes. For example, a code block for HTML would have `class="language-html"`.
content/getting-started/quick-start.md
+1 -1
View File
@@ -594,7 +594,7 @@ git push
[frontmatter]: /content-management/front-matter/
[hugodirectories]: /getting-started/directory-structure/
[installhugo]: /getting-started/install-hugo/
[listsectiontemplates]: /templates/list-and-section-templates/
[listsectiontemplates]: /templates/section-and-list-templates/
[partialtemplates]: /templates/partial-templates/
[quickinstall]: /getting-started/install-hugo/#quick-install
[releases]: https://github.com/spf13/hugo/releases
content/templates/list-and-section-templates.md → content/templates/section-and-list-templates.md
+3 -3
View File
@@ -1,6 +1,6 @@
---
title: List and Section Page Templates
linktitle: List and Section Page Templates
title: Section and List Page Templates
linktitle: Section and List Page Templates
description:
date: 2017-02-01
publishdate: 2017-02-01
@@ -20,7 +20,7 @@ dedicated template).
We are using the term *list* in its truest sense, a sequential arrangement of material, especially in alphabetical or numerical order. Hugo uses list templates to render anyplace where content is being listed such as taxonomies and sections.
## List and Section Template Lookup Order
## Lookup Order for List and Section Page Templates
Hugo uses a set of rules to figure out which template to use when
rendering a specific page.
content/templates/single-page-templates.md
+260 -124
View File
@@ -10,149 +10,285 @@ tags: [page]
weight: 60
draft: false
aliases: [/layout/content/]
toc: false
needsreview: true
toc: true
---
The primary view of content in Hugo is the single view. Hugo, for every
Markdown file provided, will render it with a single template.
The primary view of content in Hugo is the single view. Hugo will render every Markdown file provided with a corresponding single template.
## Lookup Order for Single Page Templates
## Which Template Will be Rendered?
Hugo uses a set of rules to figure out which template to use when
rendering a specific page.
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.
Hugo will use the following prioritized list. This list is an inverted cascade: if a file isn’t present, Hugo will look to the next file. If that next file isn't present, Hugo will look to the file after that, and so on until it reaches the `_default` layout directory for the project and then the theme.
Users can specify the `type` and `layout` in the [front-matter](/content/front-matter/). `Section`
is determined based on the content file’s location. If `type` is provided,
it will be used instead of `section`.
The template lookup order enables you to craft specific layouts as needed without creating more templating than necessary. For most sites, only the `_default/*html` files at the end of the list will be needed.
### Single Page
You can specify `type` (i.e., [content type][]) and `layout` in a content file's [front matter][]. However, you cannot specify `section` because this is determined based on file location (i.e. it's content [section][]).
* /layouts/`TYPE`/`LAYOUT`.html
* /layouts/`SECTION`/`LAYOUT`.html
* /layouts/`TYPE`/single.html
* /layouts/`SECTION`/single.html
* /layouts/_default/single.html
* /themes/`THEME`/layouts/`TYPE`/`LAYOUT`.html
* /themes/`THEME`/layouts/`SECTION`/`LAYOUT`.html
* /themes/`THEME`/layouts/`TYPE`/single.html
* /themes/`THEME`/layouts/`SECTION`/single.html
* /themes/`THEME`/layouts/_default/single.html
{{% note "Hugo Makes Assumptions" %}}
Hugo assumes your content section and content type are the same unless you tell Hugo otherwise by providing a `type` directly in the front matter of a content file.
{{% /note %}}
## Example Single Template File
This is why #1 and #3 come before #2 and #4, respectively. Values in angle brackets (`<>`) are variables.
Content pages are of the type "page" and have all the [page variables](/layout/variables/) and [site variables](/templates/variables/) available to use in the templates.
### Lookup Order for Single Page Templates
In the following examples we have created two different content types as well as a default content type.
1. `/layouts/<TYPE>/<LAYOUT>.html`
2. `/layouts/<SECTION>/<LAYOUT>.html`
3. `/layouts/<TYPE>/single.html`
4. `/layouts/<SECTION>/single.html`
5. `/layouts/_default/single.html`
6. `/themes/<THEME>/layouts/<TYPE>/<LAYOUT.html`
7. `/themes/<THEME>/layouts/<SECTION/LAYOUT.html`
8. `/themes/<THEME>/layouts/<TYPE>/single.html`
9. `/themes/<THEME>/layouts/<SECTION>/single.html`
10. `/themes/<THEME>/layouts/_default/single.html`
The 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".
### Single Page Template Lookup Order Examples
▾ layouts/
▾ _default/
single.html
▾ post/
single.html
▾ project/
single.html
The following examples assume two things:
1. The project is using the theme `mytheme`, which would be specified as `theme: mytheme` or `theme = "mytheme` in the project's [`config.toml` or `config.yaml`][config], respectively:
2. The layouts and content directories for the project are as follows:
```bash
.
├── content
│   ├── events
│   │   ├── _index.md
│   │   └── my-first-event.md
│   └── posts
│   ├── my-first-post.md
│   └── my-second-post.md
├── layouts
│   ├── _default
│   │   └── single.html
│   ├── posts
│   │   └── single.html
│   └── reviews
│   └── reviewarticle.html
└── themes
└── mytheme
└── layouts
├── _default
│   ├── list.html
│   └── single.html
└── posts
├── list.html
└── single.html
```
### post/single.html
This content template is used for [spf13.com](http://spf13.com/). It makes use of [partial templates](/templates/partials/)
Now we can look at the front matter for the three single-page content (i.e.`.md`) files.
{{ partial "header.html" . }}
{{ partial "subheader.html" . }}
{{ $baseURL := .Site.BaseURL }}
{{% note "Three Content Pages but *Four* Markdown Files?" %}}
`_index.md` may seem like a single page of content but is actually a specific `kind` in Hugo. Whereas `my-first-post.md`, `my-second-post.md`, and `my-first-event.md` are all of kind `page`, all `_index.md` files in a Hugo project are of kind `section` and therefore do not submit themselves to the ***single*** page template lookup. Instead, `events/_index.md` will render according to the lookup order of [section and list templates](templates/section-and-list-templates/).
{{% /note %}}
<section id="main">
<h1 id="title">{{ .Title }}</h1>
<div>
<article id="content">
{{ .Content }}
</article>
</div>
#### `my-first-post.md`
{{% input "content/posts/my-first-post.md" %}}
```yaml
---
title: My First Post
date: 2017-02-19
description: This is my first post.
---
```
{{% /input %}}
When it comes time for Hugo to render the content to the page, it will go through the single page template lookup order until it finds what it needs for `my-first-post.md`:
1. <span class="no">`/layouts/UNSPECIFIED/UNSPECIFIED.html`</span>
2. <span class="no">`/layouts/posts/UNSPECIFIED.html`</span>
3. <span class="no">`/layouts/UNSPECIFIED/single.html`</span>
4. <span class="yes">`/layouts/posts/single.html`</span>
<br>**BREAK**
5. <span class="na">`/layouts/_default/single.html`</span>
6. <span class="na">`/themes/mytheme/layouts/UNSPECIFIED/UNSPECIFIED.html`</span>
7. <span class="na">`/themes/mytheme/layouts/posts/UNSPECIFIED.html`</span>
8. <span class="na">`/themes/mytheme/layouts/UNSPECIFIED/single.html`</span>
9. <span class="na">`/themes/mytheme/layouts/posts/single.html`</span>
10. <span class="na">`/themes/mytheme/layouts/_default/single.html`</span>
Notice the term `UNSPECIFIED` rather than `UNDEFINED`. If you don't tell Hugo the specific type and layout, it makes inferences based on sane defaults. `my-first-post.md` does not specify a content `type` in its front matter. Therefore, Hugo assumes the content `type` and `section` (i.e. `posts`, which is defined by file location) are one in the same. The `layout` also is not specified in the front matter. Hugo assumes that `my-first-post.md`, which is of type `page` and a *single* piece of content, should default to the next occurrence of a `single.html` template in the lookup.
#### `my-second-post.md`
{{% input "content/posts/my-second-post.md" %}}
```yaml
---
title: My Second Post
date: 2017-02-21
description: This is my second post.
type: review
layout: reviewarticle
---
```
{{% /input %}}
Here is the lookup order for `my-second-post.md`:
1. <span class="yes">`/layouts/review/reviewarticle.html`</span>
<br>**BREAK**
2. <span class="na">`/layouts/posts/reviewarticle.html`</span>
3. <span class="na">`/layouts/review/single.html`</span>
4. <span class="na">`/layouts/posts/single.html`</span>
5. <span class="na">`/layouts/_default/single.html`</span>
6. <span class="na">`/themes/mytheme/layouts/review/reviewarticle.html`</span>
7. <span class="na">`/themes/mytheme/layouts/posts/reviewarticle.html`</span>
8. <span class="na">`/themes/mytheme/layouts/review/single.html`</span>
9. <span class="na">`/themes/mytheme/layouts/posts/single.html`</span>
10. <span class="na">`/themes/mytheme/layouts/_default/single.html`</span>
In the case of `my-second-post.md`, the front matter specifies the content `type` as well as the `layout`. Hugo finds the layout it needs at the top level of the lookup and does not continue to search through the other templates.
{{% note "Type and not Types" %}}
Notice that the directory for the template for `my-second-post.md` is `review` and not `reviews`. This is because *type is always singular*.
{{% /note%}}
#### `my-first-event.md`
{{% input "content/events/my-first-event.md" %}}
```yaml
---
title: My First
date: 2017-02-21
description: This is an upcoming event..
---
```
{{% /input %}}
Here is the lookup order for `my-first-event.md`:
1. <span class="no">`/layouts/UNSPECIFIED/UNSPECIFIED.html`</span>
2. <span class="no">`/layouts/events/UNSPECIFIED.html`</span>
3. <span class="no">`/layouts/UNSPECIFIED/single.html`</span>
4. <span class="no">`/layouts/events/single.html`</span>
5. <span class="yes">`/layouts/_default/single.html`</span>
<br>**BREAK**
6. <span class="na">`/themes/mytheme/layouts/UNSPECIFIED/UNSPECIFIED.html`</span>
7. <span class="na">`/themes/mytheme/layouts/events/UNSPECIFIED.html`</span>
8. <span class="na">`/themes/mytheme/layouts/UNSPECIFIED/single.html`</span>
9. <span class="na">`/themes/mytheme/layouts/events/single.html`</span>
10. <span class="na">`/themes/mytheme/layouts/_default/single.html`</span>
{{% note %}}
`my-first-event.md` is significant because it demonstrates the role of the lookup order in Hugo themes. Both the root project directory *and* the `mytheme` themes directory have a file at `_default/single.html`. Understanding this order allows you to [customize Hugo themes](/themes/customizing-a-theme/) by creating template files with identical names in your project directory that step in front of theme template files in the lookup. This allows you to customize the look and feel of your website while maintaining compatibility with the theme's upstream.
{{% /note %}}
## Single-Page Template Files Examples
Content pages are of the type `page` and will therefore have all the [page variables][] and [site variables][] available to use in their templates.
### Example: `post/single.html`
This content template is used for [spf13.com][spf13]. It makes use of [partial templates][partials]:
{{% input "layouts/post/single.html" %}}
```html
{{ partial "header.html" . }}
{{ partial "subheader.html" . }}
{{ $baseURL := .Site.BaseURL }}
<section id="main">
<h1 id="title">{{ .Title }}</h1>
<div>
<article id="content">
{{ .Content }}
</article>
</div>
</section>
<aside id="meta">
<div>
<section>
<h4 id="date"> {{ .Date.Format "Mon Jan 2, 2006" }} </h4>
<h5 id="wc"> {{ .FuzzyWordCount }} Words </h5>
</section>
<aside id="meta">
<div>
<section>
<h4 id="date"> {{ .Date.Format "Mon Jan 2, 2006" }} </h4>
<h5 id="wc"> {{ .FuzzyWordCount }} Words </h5>
</section>
<ul id="categories">
{{ range .Params.topics }}
<li><a href="{{ $baseURL }}/topics/{{ . | urlize }}">{{ . }}</a> </li>
{{ end }}
</ul>
<ul id="tags">
{{ range .Params.tags }}
<li> <a href="{{ $baseURL }}/tags/{{ . | urlize }}">{{ . }}</a> </li>
{{ end }}
</ul>
</div>
<div>
{{ if .Prev }}
<a class="previous" href="{{.Prev.Permalink}}"> {{.Prev.Title}}</a>
{{ end }}
{{ if .Next }}
<a class="next" href="{{.Next.Permalink}}"> {{.Next.Title}}</a>
{{ end }}
</div>
</aside>
{{ partial "disqus.html" . }}
{{ partial "footer.html" . }}
### project/single.html
This content template is used for [spf13.com](http://spf13.com/). It makes use of [partial templates](/templates/partials/)
{{ partial "header.html" . }}
{{ partial "subheader.html" . }}
{{ $baseURL := .Site.BaseURL }}
<section id="main">
<h1 id="title">{{ .Title }}</h1>
<div>
<article id="content">
{{ .Content }}
</article>
</div>
</section>
<aside id="meta">
<div>
<section>
<h4 id="date"> {{ .Date.Format "Mon Jan 2, 2006" }} </h4>
<h5 id="wc"> {{ .FuzzyWordCount }} Words </h5>
</section>
<ul id="categories">
{{ range .Params.topics }}
<li><a href="{{ $baseURL }}/topics/{{ . | urlize }}">{{ . }}</a> </li>
{{ end }}
</ul>
<ul id="tags">
{{ range .Params.tags }}
<li> <a href="{{ $baseURL }}/tags/{{ . | urlize }}">{{ . }}</a> </li>
{{ end }}
</ul>
</div>
</aside>
{{if isset .Params "project_url" }}
<div id="ribbon">
<a href="{{ index .Params "project_url" }}" rel="me">Fork me on GitHub</a>
<ul id="categories">
{{ range .Params.topics }}
<li><a href="{{ $baseURL }}/topics/{{ . | urlize }}">{{ . }}</a> </li>
{{ end }}
</ul>
<ul id="tags">
{{ range .Params.tags }}
<li> <a href="{{ $baseURL }}/tags/{{ . | urlize }}">{{ . }}</a> </li>
{{ end }}
</ul>
</div>
{{ end }}
<div>
{{ if .Prev }}
<a class="previous" href="{{.Prev.Permalink}}"> {{.Prev.Title}}</a>
{{ end }}
{{ if .Next }}
<a class="next" href="{{.Next.Permalink}}"> {{.Next.Title}}</a>
{{ end }}
</div>
</aside>
{{ partial "disqus.html" . }}
{{ partial "footer.html" . }}
```
{{% /input %}}
{{ partial "footer.html" . }}
### Example: `project/single.html`
Notice how the project/single.html template uses an additional parameter unique to this template. This doesn't need to be defined ahead of time. If the key is present in the front matter than it can be used in the template. To easily generate new content of this type with these keys ready use [content archetypes](/content/archetypes/).
This content template is also used for [spf13.com][spf13] and makes use of [partial templates][partials]:
{{% input "project/single.html" %}}
```html
{{ partial "header.html" . }}
{{ partial "subheader.html" . }}
{{ $baseURL := .Site.BaseURL }}
<section id="main">
<h1 id="title">{{ .Title }}</h1>
<div>
<article id="content">
{{ .Content }}
</article>
</div>
</section>
<aside id="meta">
<div>
<section>
<h4 id="date"> {{ .Date.Format "Mon Jan 2, 2006" }} </h4>
<h5 id="wc"> {{ .FuzzyWordCount }} Words </h5>
</section>
<ul id="categories">
{{ range .Params.topics }}
<li><a href="{{ $baseURL }}/topics/{{ . | urlize }}">{{ . }}</a> </li>
{{ end }}
</ul>
<ul id="tags">
{{ range .Params.tags }}
<li> <a href="{{ $baseURL }}/tags/{{ . | urlize }}">{{ . }}</a> </li>
{{ end }}
</ul>
</div>
</aside>
{{if isset .Params "project_url" }}
<div id="ribbon">
<a href="{{ index .Params "project_url" }}" rel="me">Fork me on GitHub</a>
</div>
{{ end }}
{{ partial "footer.html" . }}
```
{{% /input %}}
Notice how `project/single.html` uses an additional parameter unique to this template. This doesn't need to be defined ahead of time. The key can wait to be used in the template if present in the content file's front matter.
To easily generate new instances of this content type (e.g., new `.md` files in `project/`) with preconfigured front matter, use [content archetypes][archetypes].
[archetypes]: /content-management/archetypes/
[config]: /getting-started/configuration/
[content type]: /content-management/content-types/
[directory structure]: /getting-started/directory-structure/
[front matter]: /content-management/front-matter/
[page variables]: /variables-and-parms/page-variables/
[partials]: /templates/partial-templates/
[section]: /content-management/content-sections/
[site variables]: /variables-and-params/site-variables/
[spf13]: http://spf13.com/
content/tutorials/creating-a-new-theme.md
+1
View File
@@ -11,6 +11,7 @@ authors: ["Michael Henderson"]
aliases: []
draft: false
needsreview: true
outdated: true
---
## Introduction
static/css/style.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
themes/hugodocs/layouts/_default/single.html
+4 -1
View File
@@ -8,7 +8,10 @@
{{partial "content-header-links.html" . }}
{{partial "tags.html" . }}
{{if .Params.needsreview }}
<div id="beingreviewed">WORK IN PROGRESS</div>
<div id="beingreviewed">WIP</div>
{{end}}
{{if .Params.outdated}}
<div id="outdated">OUTDATED</div>
{{end}}
</header>
<div class="body-copy">
themes/hugodocs/pipeline/scss/_temp.scss
+19 -1
View File
@@ -7,7 +7,25 @@
transform:rotate(-10deg);
font-weight:bold;
width:200px;
font-size:24px;
font-size:36px;
padding:6px;
z-index:9999;
overflow:visible;
text-align:center;
border-radius:15px;
@include card(5);
}
#outdated{
background-color: $hugo-blue;
color:white;
position:absolute;
right:40px;
top:20px;
transform:rotate(10deg);
font-weight:bold;
width:200px;
font-size:32px;
padding:6px;
z-index:9999;
overflow:visible;
themes/hugodocs/pipeline/scss/components/_admonitions.scss
+1 -1
View File
@@ -48,7 +48,7 @@
display: block;
margin: 0px;
font-size: 1em;
padding: 8px 0px 8px;
padding: 8px;
margin-left: 12px;
color: lighten($base-font-color, 20%);
p:last-child {
themes/hugodocs/pipeline/scss/components/_icons.scss
+48 -8
View File
@@ -1,15 +1,55 @@
svg.svg-icon {
max-width: 60px;
}
.icon-freebsd:before {
@include size(1em);
content: '';
display:inline-block;
margin-left:-.15em;
margin-right: 0em;
background-image: url(/images/hugo-icons/freebsd.svg);
background-size: contain;
background-repeat: no-repeat;
@include size(1em);
content: '';
display: inline-block;
margin-left: -.15em;
margin-right: 0em;
background-image: url(/images/hugo-icons/freebsd.svg);
background-size: contain;
background-repeat: no-repeat;
}
span.no {
code {
background-color: $hugo-pink;
color:$hugo-white;
}
&:after {
display: inline-block;
@include size(1em);
font-family:'FontAwesome';
content: '\f165';
margin-left: .5em;
font-size: 1.2em;
color:$hugo-pink;
}
}
span.yes {
code {
color:$hugo-white;
background-color: $hugo-green;
}
&:after {
display:inline-block;
@include size(1em);
font-family:'FontAwesome';
content: '\f164';
color: $hugo-green;
margin-left: .5em;
font-size:1.2em;
}
}
span.na {
code {
background-color:transparent;
color:lighten($base-font-color,60%);
}
}
//for lists that show good and bad examples