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

Update AddDate functions and make navigation more narrow

Browse Source
This commit is contained in:
Ryan Watters
2017-03-06 18:26:18 -06:00
parent 2f3fd84e7b
commit 3dfb2961b7
9 changed files with 41 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
content/content-management/urls.md
+1 -1
View File
@@ -134,7 +134,7 @@ The `http-equiv="refresh"` line is what performs the redirect, in 0 seconds in t
### Customizing
You may customize this alias page by creating an alias.html template in the
You may customize this alias page by creating an `alias.html` template in the
layouts folder of your site (i.e., `layouts/alias.html`). In this case, the data passed to the template is
`Permalink`
content/functions/adddate.md
+13 -13
View File
@@ -19,7 +19,7 @@ aliases: []
The `AddDate` function takes three arguments in logical order of `years`, `months`, and `days`.
## Example `AddDate`: Randomized Tweets from the Last 2 Years
## Example: Randomized Tweets from the Last 2 Years
Let's assume you have a filed at `data/tweets.toml` that contains a long list of Tweets you've been collecting to display on your site's homepage. This file is filled with hundreds of `[[tweet]]` blocks; e.g.---
@@ -36,18 +36,18 @@ Let's assume you want to grab Tweets from the last two years and present them in
{{% code file="partials/templates/random-tweets.html" download="tweets.html" %}}
```html
{{ range where $.Site.Data.tweets.tweet "date" "ge" (now.AddDate -2 0 0) | shuffle }}
<div class="item">
<blockquote>
<p>
{{ .quote | safeHTML }}
</p>
&mdash; {{ .name }} ({{ .twitter_handle }}) <a href="{{ .link }}">
{{ dateFormat "January 2, 2006" .date }}
</a>
</blockquote>
</div>
{{ end }}
{{ range where $.Site.Data.tweets.tweet "date" "ge" (now.AddDate -2 0 0) | shuffle }}
<div class="item">
<blockquote>
<p>
{{ .quote | safeHTML }}
</p>
&mdash; {{ .name }} ({{ .twitter_handle }}) <a href="{{ .link }}">
{{ dateFormat "January 2, 2006" .date }}
</a>
</blockquote>
</div>
{{ end }}
```
{{% /code %}}
content/templates/single-page-templates.md
+1 -1
View File
@@ -164,7 +164,7 @@ Here is the way Hugo's traverses the single-page lookup order for `my-first-even
10. <span class="na">`/themes/<THEME>/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.
`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/) 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 %}}
## Example Single Page Templates
content/themes/creating.md
+6 -10
View File
@@ -15,22 +15,18 @@ wip: true
---
{{% warning "Use Relative Links" %}}
If you're creating a them with plans to share it with the community, it is not always safe to assume that the end user of the theme is working from the root of their published website. This is especially important for assets such as stylesheets. See [relURL](/functions/relurl) and [absURL](/functions/absurl).
If you're creating a theme with plans to share it with the community, use relative URLs since users of your theme may not publish from the root of their website. See [relURL](/functions/relurl) and [absURL](/functions/absurl).
{{% /warning %}}
Hugo has the ability to create a new theme in your themes directory for you
using the `hugo new` command.
Hugo can initialize a new blank theme directory within your existing `themes` using the `hugo new` command:
`hugo new theme [name]`
This command will initialize all of the files and directories a basic theme
would need.
```bash
hugo new theme [name]
```
## Theme Components
A theme consists of templates and static assets such as javascript and css
files. Themes can also optionally provide [archetypes](/content/archetypes/),
which are archetypal content types used by the `hugo new` command to scaffold new conte files with preconfigured front matter.
A theme consists of templates and static assets such as javascript and css files. Themes can also provide [archetypes][], which are archetypal content types used by the `hugo new` command to scaffold new conte files with preconfigured front matter.
{{% note "Use the Hugo Generator Tag" %}}
content/themes/customizing.md
+15 -15
View File
@@ -14,44 +14,40 @@ toc: true
wip: true
---
## Introduction
The following are key concepts for Hugo site customization with themes. Hugo permits you to supplement *or* override any theme template or static file with files in your working directory.
{{% note %}}
When you use a theme cloned from its git repository, do not edit the theme's files directly. Instead, theme customization in Hugo is a matter of *overriding* the templates made available to you in a theme. This provides the added flexibility of tweaking a theme to meet your needs while staying current with a theme's upstream.
{{% /note %}}
## Replacing Static Files
## Overriding Static Files
There are times where you want to include static assets that differ from versions of the same asset that ships with a theme. For example, if you would like to use a more recent version of jQuery than what the theme happens to include, simply place an identically-named file in the same relative location but in your working directory.
There are times where you want to include static assets that differ from versions of the same asset that ships with a theme.
Let's assume the theme you are using has jQuery 1.8 in the following location:
For example, a theme may use jQuery 1.8 in the following location:
```bash
/themes/<THEME>/static/js/jquery.min.js
```
You want to replace jQuery with jQuery 1.7. The easiest way to do this is to replace the file *with a file of the same name* in the same relative path in your project's root.
So, to replace jQuery 1.7 from the theme, take your version of jQuery (e.g., `jquery-3.1.1.js`), change the file name so that it is *identical* to the theme file you are trying to use (`jquery.min.js`) and place it here:
You want to replace the version of jQuery that ships with the theme with the newer `jquery-3.1.1.js`. The easiest way to do this is to replace the file *with a file of the same name* in the same relative path in your project's root. Therefore, change `jquery-3.1.1.js` to `jquery.min.js` so that it is *identical* to the theme's version and place the file here:
```bash
/static/js/jquery.min.js
```
## Replacing Template Files
## Overriding Template Files
Anytime Hugo looks for a matching template, it will first check the working directory before looking in the theme directory. If you would like to modify a template, simply create that template in your local `layouts` directory.
In the [template documentation](/templates/overview/) _each different template type explains the rules it uses to determine which template to use_. Read and understand these rules carefully.
The [template lookup order][lookup] explains the rules Hugo uses to determine which template to use for a given piece of content. Read and understand these rules carefully.
This is especially helpful when the theme creator used [partial templates](/templates/partials/). These partial templates are perfect for easy injection into the theme with minimal maintenance to ensure future compatibility.
This is especially helpful when the theme creator used [partial templates][partials]. These partial templates are perfect for easy injection into the theme with minimal maintenance to ensure future compatibility.
For example:
```bash
/themes/themename/layouts/_default/single.html
/themes/<THEME>/layouts/_default/single.html
```
Would be overwritten by
@@ -64,12 +60,16 @@ Would be overwritten by
This only works for templates that Hugo "knows about" (i.e., that follow its convention for folder structure and naming). If a theme imports template files in a creatively named directory, Hugo won’t know to look for the local `/layouts` first.
{{% /warning %}}
## Replace an Archetype
## Overriding Archetypes
If the archetype that ships with the theme for a given content type (or all content types) doesn’t fit with how you are using the theme, feel free to copy it to your `/archetypes` directory and make modifications as you see fit.
{{% warning "Beware of `layouts/_default`" %}}
The `_default` directory is a very powerful force in Hugo, especially as it pertains to overwriting theme files. If a default file is located in the local [archetype](/content-management/archetypes/) or layout directory (i.e., `archetypes/default.md` or `/layouts/_default/*.html`, respectively), it will override the file of the same name in the corresponding theme directory (i.e., `themes/<THEME>/archetypes/default.md` or `themes/<THEME>/layout/_defaults/*.html`, respectively).
The `_default` directory is a very powerful force in Hugo, especially as it pertains to overwriting theme files. If a default file is located in the local [archetypes][] or layout directory (i.e., `archetypes/default.md` or `/layouts/_default/*.html`, respectively), it will override the file of the same name in the corresponding theme directory (i.e., `themes/<THEME>/archetypes/default.md` or `themes/<THEME>/layout/_defaults/*.html`, respectively).
It is usually better to override specific files; i.e. rather than using `layouts/_default/*.html` in your working directory.
{{% /warning %}}
{{% /warning %}}
[archetypes]: /content-management/archetypes/
[lookup]: /templates/lookup-order/
[partials]: /templates/partials/
content/themes/installing-and-using-themes.md
+1 -1
View File
@@ -97,7 +97,7 @@ theme: themename
The `themename` in the above examples must match the name of the specific theme directory inside `/themes`; i.e., the directory name (likely lowercase and urlized) rather than the name of the theme displayed in the [Themes Showcase site](http://themes.gohugo.io).
{{% /note %}}
[customizethemes]: /themes/customizing-a-theme/
[customizethemes]: /themes/customizing/
[flag]: /getting-started/usage/ "See the full list of flags in Hugo's basic usage."
[config]: /getting-started/configuration/ "Learn how to customize your Hugo website configuration file in yaml, toml, or json."
[themesrepo]: https://github.com/spf13/hugoThemes
content/tutorials/creating-a-multilingual-site.md
+1
View File
@@ -11,6 +11,7 @@ tags: [internationalization,multilingual,i18n,tutorials]
authors: ["Rick Cogley"]
aliases: [/tutorials/create-a-multilingual-site/]
draft: false
toc: true
hugoversion: 16
---
pipeline/scss/_variables.scss
+2 -2
View File
@@ -77,8 +77,8 @@ $inline-code-background-color:darken($hugo-gray-ultra-light,1%);
$code-block-background-color: $inline-code-background-color;
//Sidebar & Breadcrumb
$site-navigation-width: 280px;
$content-max-width: 32em;
$site-navigation-width: 250px;
$content-max-width: 34em;
$site-navigation-bg-color:$hugo-gray-ultra-light;
$breadcrumb-navigation-bg-color:$hugo-blue-ultra-light;
$breadcrumb-navigation-bg-color-active:$hugo-blue;
static/css/style.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long