update example site

feature/cover-image
nodejh 8 years ago
parent 9d3d388cfa
commit 0cd7a78a81

@ -8,6 +8,7 @@ menu:
next: /tutorials/github-pages-blog
prev: /tutorials/automated-deployments
title: Creating a New Theme
description: This tutorial will show you how to create a simple theme in Hugo.
weight: 10
---
@ -31,7 +32,7 @@ func main() {
fmt.Print("Hello")
}
```
> There are a few concepts that you need to understand before creating a theme.
### Skins
@ -131,13 +132,13 @@ INFO: 2014/09/29 Using config file: config.toml
INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
WARN: 2014/09/29 Unable to locate layout: [index.html _default/list.html _default/single.html]
WARN: 2014/09/29 Unable to locate layout: [404.html]
0 draft content
0 future content
0 pages created
0 draft content
0 future content
0 pages created
0 tags created
0 categories created
in 2 ms
$
$
```
The "`--verbose`" flag gives extra information that will be helpful when we build the template. Every line of the output that starts with "INFO:" or "WARN:" is present because we used that flag. The lines that start with "WARN:" are warning messages. We'll go over them later.
@ -163,7 +164,7 @@ $ ls -l public
total 16
-rw-r--r-- 1 quoha staff 416 Sep 29 17:02 index.xml
-rw-r--r-- 1 quoha staff 262 Sep 29 17:02 sitemap.xml
$
$
```
Hugo created two XML files, which is standard, but there are no HTML files.
@ -180,9 +181,9 @@ INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
WARN: 2014/09/29 Unable to locate layout: [index.html _default/list.html _default/single.html]
WARN: 2014/09/29 Unable to locate layout: [404.html]
0 draft content
0 future content
0 pages created
0 draft content
0 future content
0 pages created
0 tags created
0 categories created
in 2 ms
@ -250,7 +251,7 @@ $ find themes -type f | xargs ls -l
-rw-r--r-- 1 quoha staff 0 Sep 29 17:31 themes/zafta/layouts/partials/footer.html
-rw-r--r-- 1 quoha staff 0 Sep 29 17:31 themes/zafta/layouts/partials/header.html
-rw-r--r-- 1 quoha staff 93 Sep 29 17:31 themes/zafta/theme.toml
$
$
```
The skeleton includes templates (the files ending in .html), license file, a description of your theme (the theme.toml file), and an empty archetype.
@ -313,9 +314,9 @@ INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/
INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
0 draft content
0 future content
0 pages created
0 draft content
0 future content
0 pages created
0 tags created
0 categories created
in 2 ms
@ -360,7 +361,7 @@ When Hugo created our theme, it created an empty home page template. Now, when w
$ find . -name index.html | xargs ls -l
-rw-r--r-- 1 quoha staff 0 Sep 29 20:21 ./public/index.html
-rw-r--r-- 1 quoha staff 0 Sep 29 17:31 ./themes/zafta/layouts/index.html
$
$
```
#### The Magic of Static
@ -379,7 +380,7 @@ drwxr-xr-x 4 quoha staff 136 Sep 29 17:31 themes/zafta/layouts/partials
drwxr-xr-x 4 quoha staff 136 Sep 29 17:31 themes/zafta/static
drwxr-xr-x 2 quoha staff 68 Sep 29 17:31 themes/zafta/static/css
drwxr-xr-x 2 quoha staff 68 Sep 29 17:31 themes/zafta/static/js
$
$
```
## The Theme Development Cycle
@ -435,9 +436,9 @@ INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/
INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
0 draft content
0 future content
0 pages created
0 draft content
0 future content
0 pages created
0 tags created
0 categories created
in 2 ms
@ -449,9 +450,9 @@ INFO: 2014/09/29 File System Event: ["/Users/quoha/Sites/zafta/themes/zafta/layo
Change detected, rebuilding site
WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
0 draft content
0 future content
0 pages created
0 draft content
0 future content
0 pages created
0 tags created
0 categories created
in 1 ms
@ -473,12 +474,12 @@ Right now, that page is empty because we don't have any content and we don't hav
```html
$ vi themes/zafta/layouts/index.html
<!DOCTYPE html>
<html>
<body>
<p>hugo says hello!</p>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<p>hugo says hello!</p>
</body>
</html>
:wq
$
@ -492,9 +493,9 @@ INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml
INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/
INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
0 draft content
0 future content
0 pages created
0 draft content
0 future content
0 pages created
0 tags created
0 categories created
in 2 ms
@ -502,11 +503,11 @@ in 2 ms
$ find public -type f -name '*.html' | xargs ls -l
-rw-r--r-- 1 quoha staff 78 Sep 29 21:26 public/index.html
$ cat public/index.html
<!DOCTYPE html>
<html>
<body>
<p>hugo says hello!</p>
$ cat public/index.html
<!DOCTYPE html>
<html>
<body>
<p>hugo says hello!</p>
</html>
```
@ -515,15 +516,15 @@ $ cat public/index.html
Note: If you're running the server with the `--watch` option, you'll see different content in the file:
```
$ cat public/index.html
<!DOCTYPE html>
<html>
<body>
<p>hugo says hello!</p>
<script>document.write('<script src="http://'
+ (location.host || 'localhost').split(':')[0]
+ ':1313/livereload.js?mindelay=10"></'
+ 'script>')</script></body>
$ cat public/index.html
<!DOCTYPE html>
<html>
<body>
<p>hugo says hello!</p>
<script>document.write('<script src="http://'
+ (location.host || 'localhost').split(':')[0]
+ ':1313/livereload.js?mindelay=10"></'
+ 'script>')</script></body>
</html>
```
@ -546,7 +547,7 @@ INFO: 2014/09/29 attempting to create post/first.md of post
INFO: 2014/09/29 curpath: /Users/quoha/Sites/zafta/themes/zafta/archetypes/default.md
ERROR: 2014/09/29 Unable to Cast <nil> to map[string]interface{}
$
$
```
That wasn't very nice, was it?
@ -585,7 +586,7 @@ total 16
-rw-r--r-- 1 quoha staff 104 Sep 29 21:54 first.md
-rw-r--r-- 1 quoha staff 105 Sep 29 21:57 second.md
$ cat content/post/first.md
$ cat content/post/first.md
+++
Categories = []
Description = ""
@ -596,7 +597,7 @@ title = "first"
+++
my first post
$ cat content/post/second.md
$ cat content/post/second.md
+++
Categories = []
Description = ""
@ -607,7 +608,7 @@ title = "second"
+++
my second post
$
$
```
Build the web site and then verify the results.
@ -620,9 +621,9 @@ INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /
INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
INFO: 2014/09/29 found taxonomies: map[string]string{"category":"categories", "tag":"tags"}
WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
0 draft content
0 future content
2 pages created
0 draft content
0 future content
2 pages created
0 tags created
0 categories created
in 4 ms
@ -655,7 +656,7 @@ There are three other types of templates: partials, content views, and terms. We
The home page will contain a list of posts. Let's update its template to add the posts that we just created. The logic in the template will run every time we build the site.
```
$ vi themes/zafta/layouts/index.html
$ vi themes/zafta/layouts/index.html
<!DOCTYPE html>
<html>
<body>
@ -693,26 +694,26 @@ INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /
INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
INFO: 2014/09/29 found taxonomies: map[string]string{"tag":"tags", "category":"categories"}
WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
0 draft content
0 future content
2 pages created
0 draft content
0 future content
2 pages created
0 tags created
0 categories created
in 4 ms
$ find public -type f -name '*.html' | xargs ls -l
$ find public -type f -name '*.html' | xargs ls -l
-rw-r--r-- 1 quoha staff 94 Sep 29 22:23 public/index.html
-rw-r--r-- 1 quoha staff 0 Sep 29 22:23 public/post/first/index.html
-rw-r--r-- 1 quoha staff 0 Sep 29 22:23 public/post/index.html
-rw-r--r-- 1 quoha staff 0 Sep 29 22:23 public/post/second/index.html
$ cat public/index.html
$ cat public/index.html
<!DOCTYPE html>
<html>
<body>
<h1>second</h1>
<h1>first</h1>
</body>
</html>
$
@ -744,7 +745,7 @@ Please see the Hugo documentation on template rendering for all the details on d
#### Update the Template File
```
$ vi themes/zafta/layouts/_default/single.html
$ vi themes/zafta/layouts/_default/single.html
<!DOCTYPE html>
<html>
<head>
@ -770,9 +771,9 @@ INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /
INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
INFO: 2014/09/29 found taxonomies: map[string]string{"tag":"tags", "category":"categories"}
WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
0 draft content
0 future content
2 pages created
0 draft content
0 future content
2 pages created
0 tags created
0 categories created
in 4 ms
@ -783,7 +784,7 @@ $ find public -type f -name '*.html' | xargs ls -l
-rw-r--r-- 1 quoha staff 0 Sep 29 22:40 public/post/index.html
-rw-r--r-- 1 quoha staff 128 Sep 29 22:40 public/post/second/index.html
$ cat public/post/first/index.html
$ cat public/post/first/index.html
<!DOCTYPE html>
<html>
<head>
@ -796,7 +797,7 @@ $ cat public/post/first/index.html
</body>
</html>
$ cat public/post/second/index.html
$ cat public/post/second/index.html
<!DOCTYPE html>
<html>
<head>
@ -839,9 +840,9 @@ INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /
INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/
INFO: 2014/09/29 found taxonomies: map[string]string{"tag":"tags", "category":"categories"}
WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html]
0 draft content
0 future content
2 pages created
0 draft content
0 future content
2 pages created
0 tags created
0 categories created
in 4 ms
@ -852,15 +853,15 @@ $ find public -type f -name '*.html' | xargs ls -l
-rw-r--r-- 1 quoha staff 0 Sep 29 22:44 public/post/index.html
-rw-r--r-- 1 quoha staff 128 Sep 29 22:44 public/post/second/index.html
$ cat public/index.html
$ cat public/index.html
<!DOCTYPE html>
<html>
<body>
<h1><a href="/post/second/">second</a></h1>
<h1><a href="/post/first/">first</a></h1>
</body>
</html>
@ -887,7 +888,7 @@ Let's add an "about" page and display it at the top level (as opposed to a sub-l
The default in Hugo is to use the directory structure of the content/ directory to guide the location of the generated html in the public/ directory. Let's verify that by creating an "about" page at the top level:
```
$ vi content/about.md
$ vi content/about.md
+++
title = "about"
description = "about this site"

@ -1,6 +1,6 @@
+++
title = "(Hu)go Template Primer"
description = ""
description = "Hugo uses the excellent go library for its template engine. "
tags = [
"go",
"golang",
@ -39,7 +39,7 @@ details can be found in the [go docs][gohtmltemplate].
## Basic Syntax
Go lang templates are html files with the addition of variables and
functions.
functions.
**Go variables and functions are accessible within {{ }}**
@ -111,7 +111,7 @@ the /layout/ directory within Hugo.
Go templates provide the most basic iteration and conditional logic.
### Iteration
### Iteration
Just like in go, the go templates make heavy use of range to iterate over
a map, array or slice. The following are different examples of how to use
@ -119,42 +119,42 @@ range.
**Example 1: Using Context**
{{ range array }}
{{ range array }}
{{ . }}
{{ end }}
**Example 2: Declaring value variable name**
{{range $element := array}}
{{ $element }}
{{range $element := array}}
{{ $element }}
{{ end }}
**Example 2: Declaring key and value variable name**
{{range $index, $element := array}}
{{ $index }}
{{ $element }}
{{ $index }}
{{ $element }}
{{ end }}
### Conditionals
### Conditionals
If, else, with, or, & and provide the framework for handling conditional
logic in Go Templates. Like range, each statement is closed with `end`.
Go Templates treat the following values as false:
Go Templates treat the following values as false:
* false
* 0
* 0
* any array, slice, map, or string of length zero
**Example 1: If**
{{ if isset .Params "title" }}<h4>{{ index .Params "title" }}</h4>{{ end }}
**Example 2: If -> Else**
**Example 2: If -> Else**
{{ if isset .Params "alt" }}
{{ if isset .Params "alt" }}
{{ index .Params "alt" }}
{{else}}
{{ index .Params "caption" }}
@ -174,9 +174,9 @@ The first example above could be simplified as:
{{ with .Params.title }}<h4>{{ . }}</h4>{{ end }}
**Example 5: If -> Else If**
**Example 5: If -> Else If**
{{ if isset .Params "alt" }}
{{ if isset .Params "alt" }}
{{ index .Params "alt" }}
{{ else if isset .Params "caption" }}
{{ index .Params "caption" }}
@ -187,12 +187,12 @@ The first example above could be simplified as:
One of the most powerful components of go templates is the ability to
stack actions one after another. This is done by using pipes. Borrowed
from unix pipes, the concept is simple, each pipeline's output becomes the
input of the following pipe.
input of the following pipe.
Because of the very simple syntax of go templates, the pipe is essential
to being able to chain together function calls. One limitation of the
pipes is that they only can work with a single value and that value
becomes the last parameter of the next pipeline.
becomes the last parameter of the next pipeline.
A few simple examples should help convey how to use the pipe.
@ -200,7 +200,7 @@ A few simple examples should help convey how to use the pipe.
{{ if eq 1 1 }} Same {{ end }}
is the same as
is the same as
{{ eq 1 1 | if }} Same {{ end }}
@ -219,10 +219,10 @@ Access the page parameter called "disqus_url" and escape the HTML.
Stuff Here
{{ end }}
Could be rewritten as
Could be rewritten as
{{ isset .Params "caption" | or isset .Params "title" | or isset .Params "attr" | if }}
Stuff Here
Stuff Here
{{ end }}
@ -247,24 +247,24 @@ Notice how once we have entered the loop the value of {{ . }} has changed. We
have defined a variable outside of the loop so we have access to it from within
the loop.
# Hugo Parameters
# Hugo Parameters
Hugo provides the option of passing values to the template language
through the site configuration (for sitewide values), or through the meta
data of each specific piece of content. You can define any values of any
type (supported by your front matter/config format) and use them however
you want to inside of your templates.
you want to inside of your templates.
## Using Content (page) Parameters
## Using Content (page) Parameters
In each piece of content you can provide variables to be used by the
templates. This happens in the [front matter](/content/front-matter).
templates. This happens in the [front matter](/content/front-matter).
An example of this is used in this documentation site. Most of the pages
benefit from having the table of contents provided. Sometimes the TOC just
doesn't make a lot of sense. We've defined a variable in our front matter
of some pages to turn off the TOC from being displayed.
of some pages to turn off the TOC from being displayed.
Here is the example front matter:

@ -1,6 +1,6 @@
+++
title = "Getting Started with Hugo"
description = ""
description = "Goto hugo releases and download the appropriate version for your os and architecture."
tags = [
"go",
"golang",

@ -6,6 +6,7 @@ menu:
parent: tutorials
prev: /tutorials/mathjax
title: Migrate to Hugo from Jekyll
description: Jekyll has a rule that any directory not starting with `_` will be copied as-is to the `_site` output.
weight: 10
---

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.7 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 76 KiB

After

Width:  |  Height:  |  Size: 5.7 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.7 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 80 KiB

After

Width:  |  Height:  |  Size: 2.1 MiB

Loading…
Cancel
Save