Preface
Feeding Data in Hugo, and Process in a Loop with Go html/template.
Again, consider continue have a look at templating engine
that we never use before.
We are going to use go html/template
example,
using SSG (static site generator),
called hugo
.
Official Documentation
Source Examples
You can obtain source examples here:
Go html/template Case
The Go html/template
case is the same,
with the one utilizing grunt
in previous article
with a few differences.
-
hugo
configuration -
Using data to provide hyperlink in both
navbar
andsidebar
.
Directory Structure
Consider an hugo
structure with Go html/template
views.
❯ tree
.
├── config.toml
├── content
│ ├── css.md
│ ├── html.md
│ ├── _index.md
│ ├── javascript.md
│ └── php.md
├── resources
│ └── _gen
│ ├── assets
│ └── images
├── static
│ ├── css
│ │ └── w3.css
│ ├── favicon.ico
│ └── js
│ └── script.js
└── themes
└── tutor
├── archetypes
│ └── default.md
├── layouts
│ ├── _default
│ │ ├── baseof.html
│ │ ├── list.html
│ │ └── single.html
│ ├── index.html
│ └── partials
│ ├── head.html
│ ├── navbar.html
│ └── sidebar.html
├── LICENSE
└── theme.toml
14 directories, 19 files
.
config.toml
You also need to a write a configuration in _config.yml
.
# An example of Hugo site using Bulma for personal learning purpose.
baseURL = "http://example/"
languageCode = "en-us"
title = "Yet Another Example."
theme = "tutor"
Global configuration is a must have in SSG world.
Hyperlink Data
In hugo
, data can be express in yaml
, toml
or json
.
To provide hyperlink in both navbar
and sidebar
,
we need to setup the data in pages.yml
as below:
# Helper for related links
- link : "/"
short: "Home"
long : "Home"
- link : "/html.html"
short: "HTML"
long : "HTML Link"
- link : "/css.html"
short: "CSS"
long : "CSS Link"
- link : "/php.html"
short: "PHP"
long : "PHP Link"
- link : "/javascript.html"
short: "Javascript"
long : "Javascript Link"
The sidebar
will use long
text,
and the navbar
will use short
one.
Router
Set automatically with SSG
Layout
<!DOCTYPE html>
<html lang="en">
<head>
{{- partial "head.html" . -}}
</head>
<body>
{{- partial "sidebar.html" . -}}
<div id="main">
{{- partial "navbar.html" . -}}
<div class="w3-container">
{{ .Content }}
</div>
</div>
</body>
</html>
As shown in order we have three partial
artefacts.
partial head.html
,partial sidebar.html
,partial navbar.html
,
And one eleventy specific tag content
.
<div class="w3-container">
{{ .Content }}
</div>
Head
It is a little bit different with the original head.
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ .Page.Title | default "Link Example - Default" }}</title>
<link rel="stylesheet" type="text/css"
href="{{ "css/w3.css" | relURL }}">
<script src="{{ "js/script.js" | relURL }}"></script>
Here we put the default title if we cannot find title
variable.
<title>{{ .Page.Title | default "Link Example - Default" }}</title>
Loop in Template
Very similar with previous example
This time, consider alter a bit,
both the sidebar
and the navbar
,
so we can render each data in loop.
<div class="w3-sidebar w3-bar-block w3-card w3-animate-left"
style="display:none" id="mySidebar">
<button class="w3-bar-item w3-button w3-large"
id="closeNav" >Close ×</button>
{{ range .Site.Data.pages }}
<a class="w3-bar-item w3-button"
href="{{ .link }}">{{ .long }}</a>
{{ end }}
</div>
<div class="w3-teal">
<button class="w3-button w3-teal w3-xlarge"
id="openNav">☰</button>
<div class="w3-container">
<h1>My Page</h1>
</div>
</div>
<div class="w3-bar w3-black">
{{ range .Site.Data.pages }}
<a class="w3-bar-item w3-button"
href="{{ .link }}">{{ .short }}</a>
{{ end }}
</div>
All you need to know is these lines:
{{ range .Site.Data.pages }}
<a class="w3-bar-item w3-button"
href="{{ .link }}">{{ .short }}</a>
{{ end }}
This will render a hyperlink, with result about the same with previous example.
Running Hugo
Running hugo
is as easy as this command below.
$ hugo server
hugo server --disableFastRender
| EN
-------------------+-----
Pages | 10
Paginator pages | 0
Non-page files | 0
Static files | 3
Processed images | 0
Aliases | 0
Sitemaps | 1
Cleaned | 0
Built in 22 ms
Watching for changes in /home/epsi/Documents/html-preprocessor/04-hugo/{content,data,static,themes}
Watching for config changes in /home/epsi/Documents/html-preprocessor/04-hugo/config.toml
Environment: "development"
Serving pages from memory
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop
You are ready to run a website,
with hugo
SSG, using Go html/template
.
What’s Next?
To be concluded, not anytime soon.