418 lines
14 KiB
Markdown
418 lines
14 KiB
Markdown
# The Hugo Zen theme
|
||
|
||
**Zen** theme strives to be as clean and standard compliant as possible with some neat features. A solid base for your custom [Hugo](https://gohugo.io/) theme.
|
||
|
||
It uses HTML5 with a modern CSS grid and flex layout. Recent versions of all the mayor browsers support it, see [Can I use css grid](http://caniuse.com/#search=grid).
|
||
|
||
Sass is processed with Hugo pipes that was added in Hugo 0.46. To make using npm optional I have added the stylesheets from the excellent sass plugin [typey](https://www.npmjs.com/package/typey) to the theme directly.
|
||
|
||
This is originally a port of the [Zen](https://www.drupal.org/project/zen) theme by [JohnAlbin](https://www.drupal.org/u/johnalbin), a very popular base theme for Drupal.
|
||
|
||
|
||
## Features
|
||
|
||
* A mobile menu
|
||
* Analytics with Matamo (Piwik)
|
||
* Automatic linting of css and js
|
||
* Contact form (PHP)
|
||
* CSS grid and flex for layout
|
||
* Gulp.js (only for sass/js lint)
|
||
* HTML5
|
||
* Hugo Pipes for js and sass
|
||
* jQuery 3
|
||
* Micro.blog
|
||
* Minify css
|
||
* Meta tags and JSON-LD
|
||
* Multilingual (i18n)
|
||
* Normalize CSS
|
||
* Podcast
|
||
* Responsive design
|
||
* RSS and JSON feeds with full content
|
||
* Search with DuckDuckGo
|
||
* Sub theme support (Theme Components)
|
||
* Umbrella JS 3 (tiny jQuery replacement, 2.5kB when gzipped)
|
||
|
||
|
||
## Installation
|
||
|
||
You can download and unpack the theme manually from Github but it's easier to use git to clone the repo.
|
||
|
||
```
|
||
$ git clone https://github.com/frjo/hugo-theme-zen.git themes/zen
|
||
```
|
||
|
||
If you use git to version control your site, highly recommended, it's best to add the zen theme as a submodule.
|
||
|
||
```
|
||
git submodule add https://github.com/frjo/hugo-theme-zen.git themes/zen
|
||
```
|
||
|
||
|
||
## Performance
|
||
|
||
Performance should be excellent.
|
||
|
||
* Minimal and compliant HTML5
|
||
* Styles 17,7 kB (4,3 kB when gzipped)
|
||
* JavaScript 8,4 kB (2,7 kB when gzipped)
|
||
* All scripts loaded in head with "defer"
|
||
* Optimised for HTTP/2
|
||
|
||
Some performance tools will complain about to many files (js and css files are not concatenated) but with HTTP/2 that can be ignored.
|
||
|
||
|
||
## Sites using the Hugo Zen theme
|
||
|
||
* [Combonetwork development](https://combonet.se/) (multilingual)
|
||
* [Drejargården](https://www.drejargarden.se/)
|
||
* [Helmer Grundström](https://www.helmergrundstrom.se/)
|
||
* [xdeb.org](https://xdeb.org/)
|
||
* [xdeb.net](https://xdeb.net/)
|
||
|
||
|
||
## On the large screen
|
||
|
||
|
||
|
||
|
||
## On the small screen
|
||
|
||
|
||
|
||
|
||
## The mobile menu
|
||
|
||
|
||
|
||
|
||
## Customise layouts
|
||
|
||
To customise a layout included in the zen theme, copy it to the root layout directory and edit it there. Make sure to maintain the directory structure inside the layouts directory.
|
||
|
||
Add any new layouts to the root layout directory as well. This way they will not be overwritten when updating the theme.
|
||
|
||
|
||
## Customise styles and scripts
|
||
|
||
Styles and scripts are processed with Hugo pipes that was added in Hugo 0.46.
|
||
|
||
To customise a js or sass file, copy it to the root assets directory and edit it there. Make sure to maintain the directory structure inside the assets/sass directory.
|
||
|
||
The default styles in "_zen.scss" are boring but functional. You can easily overide them completely by placing an empty file named "_zen.scss" in root assets/sass directory.
|
||
|
||
By default the sass files are built for production, compressed with fingerprint. By setting the Hugo enviroment variable to "dev" they will instead be nested with sourcemaps.
|
||
|
||
```
|
||
§ hugo serve watch --environment=dev
|
||
```
|
||
|
||
|
||
## config.yaml example
|
||
|
||
All the "params" are optional.
|
||
|
||
```
|
||
baseurl: "https://example.org/"
|
||
title: "SiteTitle"
|
||
theme: "zen"
|
||
|
||
params:
|
||
contact: "info@example.org"
|
||
copyright: "This site is licensed under a
|
||
(https://creativecommons.org/licenses/by-sa/4.0/)."
|
||
[Creative Commons Attribution-ShareAlike 4.0 International License]
|
||
dateformat: "" # Set the date format, default to "2 January, 2006"
|
||
description: "" # Set site description, used in meta tags and JSON-LD
|
||
favicon: "" # Relative path to favicon in json feed, no leading slash.
|
||
feedlinks: true # Show feed links in the footer.
|
||
footer: "A [example.org](https://example.org/) production."
|
||
icon: "" # Relative path to icon in json feed, no leading slash.
|
||
image: "" # Relative path to site image in JSON-LD, no leading slash.
|
||
imageMaxWidth: "" # Max width for images added via figure shortcode.
|
||
jquery: true # Add jQuery
|
||
languageDir: "" # Set ltr or rtl, defaults to ltr.
|
||
logo: false # Turn off the logo.
|
||
microUsername: "" # Your micro.blog username.
|
||
mobileMenu: true # Turn on a mobile menu on small screens.
|
||
piwikSiteId: # Matamo site id
|
||
piwikTrackerUrl: "" # Matamo url, schemaless and no slash on end (example.org/matamo).
|
||
poweredby: true # Show powered by hugo in footer
|
||
search: true # Site search with DuckDuckGo.
|
||
searchSize: 20 # Search field size, default 20.
|
||
sidebar: true # Show a sidebar to the right
|
||
submitted: true # Show author and date information for a post.
|
||
|
||
podcast:
|
||
title: # * Feed title, defaults to site title (iTunes).
|
||
description: # * Feed description/summary, defaults to site description (iTunes).
|
||
image: # * Feed image, place inside assets directory (iTunes).
|
||
category:
|
||
name: # * Feed category (iTunes).
|
||
subcategories: [] # Feed sub category (iTunes).
|
||
explicit: false/true # Feed explicit settting, default to false (iTunes).
|
||
author: # Feed author (iTunes).
|
||
owner:
|
||
name: # Feed owner name (iTunes).
|
||
email: # Feed owner e-mail (iTunes).
|
||
lang: # Feed language, defaults to site language (iTunes).
|
||
block: no/yes # Block the feed from iTunes, default to no (iTunes).
|
||
complete: no/yes # Set the feed as complete, defaults to no (iTunes).
|
||
type: episodic/serial # Podcast type, defaults to episodic (iTunes).
|
||
newfeed: # Are you moving? Set the new feed url here (iTunes).
|
||
cdn: # CDN url, no slash on end (https://cdn.example.org).
|
||
preload: none/metadata/auto # Set on the HTML5 audio tag, defaults to "metadata".
|
||
```
|
||
|
||
The site will work without setting any of the podcast parameters but your podcast feed will not be accepted by iTunes. At a minimum you need to set the first four, title, description, image and category name. Read more in the podcast section below.
|
||
|
||
|
||
## Multilingual
|
||
|
||
English and Swedish translations are included and you can easily add more to the `i18n` site directory.
|
||
|
||
A language selector will be included on sites with more than one language. Add `languageName` to your language configuration, this is what will be displayed in the selector.
|
||
|
||
The language selector will link to a translation of the current page if it exist and to the front page if it does not.
|
||
|
||
```
|
||
languages:
|
||
sv:
|
||
weight: 1
|
||
languageName: "Svenska"
|
||
en:
|
||
weight: 2
|
||
languageName: "English"
|
||
```
|
||
|
||
|
||
## Contact form
|
||
|
||
If your server support php with the mail() command (very common) you can use the included contact form feature to get a contact form for your site.
|
||
|
||
1. Copy the file `themes/zen/php/contact.php.example` to `static/php/contact.php`.
|
||
2. Edit the contact.php file so it has your own e-mail address. You may also change the mail subject prefix.
|
||
3. Add the shortcode `{{< contact >}}` to a page. Also set `contactform: true` in the front matter for that page so the contact.js file gets loaded.
|
||
|
||
If you have a SPF record for your domain, make sure the web server is listed or other mail server may mark the mail as spam.
|
||
|
||
Two types of spam protection is implemented. The form can only be posted after the user have moved the mouse or pressed the tab or enter key. The form have a "honypot" field that is invisible to humans but not to most spam boots. If that field is filled in the mail will not be sent.
|
||
|
||
Form validation is handeld by HTML5 and there is some CSS to make it look nice.
|
||
|
||
Javascript is used for spam protection and to display error/success messages.
|
||
|
||
|
||
## Dates
|
||
|
||
If "lastmod" is set in the frontmatter on a post that value will be used in the "submitted" section. If not "date" is used.
|
||
|
||
With "lastmod" set a date section will also appear at the bottom of post telling the reader the created and modification dates.
|
||
|
||
|
||
## Podcast
|
||
|
||
The Zen theme supports podcasting.
|
||
|
||
* RSS feed with all the needed iTunes tags.
|
||
* Single and full layouts with HTML 5 audio player.
|
||
* Archetype with required parameters.
|
||
|
||
|
||
Here follow all the possible podcast frontmatter parameters. Only the first two is mandatory and are in the podcast archetype.
|
||
|
||
```
|
||
podcast:
|
||
mp3: # * The path to the mp3 file,
|
||
duration: # * Episode duration, e.g 1:04:02 (iTunes).
|
||
image:
|
||
src: # Episode image src, place inside the assets directory (iTunes).
|
||
alt: # Alt text for the image, explain what is on the image.
|
||
width: # Image width in the article, defaults to 250px.
|
||
class: # Image wrapper class.
|
||
explicit: true/false # Episode explicit setting, default to false (iTunes).
|
||
episode: # Episode number (iTunes).
|
||
episodeType: full/trailer/bonus # Episode type, defaults to full (iTunes).
|
||
season: # Episode season (iTunes).
|
||
block: # Block the episode from iTunes, default to no (iTunes).
|
||
```
|
||
|
||
* [Apple Podcasts categories](https://help.apple.com/itc/podcasts_connect/#/itc9267a2f12)
|
||
* [Apple - A podcaster’s guide to RSS](https://help.apple.com/itc/podcasts_connect/#/itcb54353390)
|
||
|
||
|
||
## Shortcodes
|
||
|
||
### Contact
|
||
|
||
Insert a html5 contact form, see more above.
|
||
|
||
```
|
||
{{< contact >}}
|
||
```
|
||
|
||
### Figure
|
||
|
||
Zen comes with a improved version of the built in "figure" shortcut.
|
||
|
||
* You can set a max width for images with parameter "imageMaxWidth".
|
||
* If width and height is not set the real dimensions of the image will be used.
|
||
* If only width or height is set the other value will be proportionally calculated.
|
||
|
||
|
||
### Clear
|
||
|
||
Break float.
|
||
|
||
```
|
||
{{< figure src="/images/image.jpg" class="right" >}}
|
||
|
||
blablabla # Displayed left of the image.
|
||
|
||
{{< clear >}}
|
||
|
||
blablabla # Displayed below of the image.
|
||
```
|
||
|
||
|
||
### Audio and Video
|
||
|
||
```
|
||
{{< audio src="/audio/audio.mp3" class="something" >}}
|
||
|
||
{{< video src="/video/video.mp4" class="something" >}}
|
||
```
|
||
|
||
Possible parameters are:
|
||
|
||
* src
|
||
* class
|
||
* preload (none/metadata/auto, default metadata)
|
||
* width (only video)
|
||
|
||
The audio and video tags will be wrapped with a figure tag.
|
||
|
||
|
||
### Wrapper
|
||
|
||
A simple, but useful, shortcode to wrap content in a div with a class. The content will be run through "markdownify".
|
||
|
||
```
|
||
{{< wrapper class-name-you-want markdown >}}
|
||
The **content** that should be wrapped.
|
||
|
||
Some more content.
|
||
{{< /wrapper >}}
|
||
```
|
||
|
||
This will produce:
|
||
|
||
```
|
||
<div class="class-name-you-want">
|
||
<p>The <strong>content</strong> that should be wrapped.</p>
|
||
|
||
<p>Some more content.</p>
|
||
</div>
|
||
```
|
||
|
||
If the content should be left untouched add "nomarkdown" after the class name.
|
||
|
||
```
|
||
{{< wrapper class-name-you-want nomarkdown >}}
|
||
The **content** that should be wrapped.
|
||
|
||
Some more content.
|
||
{{< /wrapper >}}
|
||
```
|
||
|
||
This will produce:
|
||
|
||
```
|
||
<div class="class-name-you-want">
|
||
The **content** that should be wrapped. Some more content.
|
||
</div>
|
||
```
|
||
|
||
|
||
## Choose between using jQuery or Umbrella JS
|
||
|
||
Umbrella JS is always added and it's used for all theme JavaScript. To add jQuery, set the related parameter to true in the configuration file or in the front matter of specific pages. No problem having both libraries loaded on the same page.
|
||
|
||
This is the way I construct my JavaScript files.
|
||
|
||
**Umbrella JS:**
|
||
|
||
```
|
||
(function ($) {
|
||
|
||
'use strict';
|
||
|
||
// Add your code here.
|
||
$('html').removeClass('nojs').addClass('js');
|
||
|
||
})(u);
|
||
```
|
||
|
||
**jQuery:**
|
||
|
||
```
|
||
(function ($) {
|
||
|
||
'use strict';
|
||
|
||
// Add your code here.
|
||
$('html').removeClass('nojs').addClass('js');
|
||
|
||
})(jQuery);
|
||
```
|
||
|
||
|
||
## Use Gulp to lint Sass and JavaScript
|
||
|
||
* Lint your Sass using sass-lint.
|
||
* Lint your JavaScript using eslint.
|
||
* Will lint files in the theme as well as the root assets directory.
|
||
* Watch all of your files as you develop and re-build everything on the fly.
|
||
|
||
Set up your front-end development build tools:
|
||
|
||
1. Install Node.js and npm, the Node.js package manager.
|
||
|
||
Detailed instructions are available on the "npm quick start guide":
|
||
https://github.com/kss-node/kss-node/wiki/npm-quick-start-guide
|
||
|
||
2. The package.json file in your new sub-theme contains the versions of all the
|
||
Node.js software you need. To install them run:
|
||
|
||
npm install
|
||
|
||
3. Install the gulp-cli tool globally. Normally, installing a Node.js globally
|
||
is not recommended, which is why both Gulp and Grunt have created wrapper
|
||
commands that will allow you to run "gulp" or "grunt" from anywhere, while
|
||
using the local version of gulp or grunt that is installed in your project.
|
||
To install gulp's global wrapper, run:
|
||
|
||
npm install -g gulp-cli
|
||
|
||
5. The default gulp task will lint your Sass and JavaScript.
|
||
To run the default gulp task, type:
|
||
|
||
gulp
|
||
|
||
To watch all your files as you develop, type:
|
||
|
||
gulp watch
|
||
|
||
|
||
## Create a zen subtheme
|
||
|
||
Since Hugo 0.42 there is sub them support via [Theme Components](https://gohugo.io/themes/theme-components/). A nice feature if you want to extend an existing theme, like zen.
|
||
|
||
If all you want is customise layouts, styles and scripts for a site it's easier to copy the needed files to the root layout and assets directories and edit them there. See instructions above.
|
||
|
||
The included "create_sub_theme.sh" script makes it easy to get started on a sub theme. Navigate to the theme directory where you have placed the zen base theme and run the script like this.
|
||
|
||
```
|
||
$ ./zen/create_sub_theme.sh
|
||
```
|
||
|
||
Enter a name for your sub theme when asked for. In the site config file add your sub theme name first and "zen" after it. Hugo will now first look in the sub theme for files and if they are not there look in the zen base theme.
|