Zzo theme for Hugo

Zzo theme made for bloggers.

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.

Table of contents

• Features
• Reference
• Dependency
• Minimum Hugo version
• Installation
• Updating
• Run example site
• Configuration
• Layout
• Gallery
• Multi Language
• Sub Theme
• Shortcodes

Features

• Multiple sub themes(dark, light, solarized, hacker)
• A mobile menu
• CSS grid and flex for layout
• HTML5
• Hugo Pipes for js and sass
• jQuery
• Simple blog
• Minify css
• Meta tags and JSON-LD
• Multilingual (i18n)
• Responsive design
• RSS and JSON feeds with full content
• Search with Lunr
• Gallery with Masonry, Photoswipe
• Prism.js for highlight code
• Lazy image load with lazysizes

Reference

I have referenced:

• zen theme
• docdock theme
• learn theme
• overreacted.io

Dependency

Zzo theme is using this library.

• jquery@3.4.1
• mark.js
• clipboard.js
• fetch-inject
• lazysizes
• masonry
• lunr
• jquery.toc
• photoswipe
• prism
• shave.js
• perfect-scrollbar

Minimum Hugo version

Hugo version 0.58.0 or higher is required.

Installation

First of all, You need to add config files. Follow the Configuration step.

You can download and unpack the theme manually from Github but it's easier to use git to clone the repo.

From the root of your site:

$ git clone https://github.com/zzossig/hugo-theme-zzo.git themes/zzo

If you use git to version control your site, highly recommended, it's best to add the zzo theme as a submodule.

From the root of your site:

git submodule add https://github.com/zzossig/hugo-theme-zzo.git themes/zzo

Updating

From the root of your site:

git submodule update --remote --merge

Run example site

From the root of themes/zzo/exampleSite:

hugo server --themesDir ../..

Configuration

1. config folder structure

root
├── config
│   ├── _default
│   │   ├── config.toml
│   │   ├── languages.toml
│   │   ├── menus.en.toml
│   │   ├── menus.ko.toml
│   │   ├── params.toml

2. config.toml

baseURL = "http://example.org/"
title = "Hugo Zzo Theme"
theme = "zzo"

defaultContentLanguage = "en"
defaultContentLanguageInSubdir = false
hasCJKLanguage = false

summaryLength = 70

googleAnalytics = ""
copyright = "MIT©zzossig"
timeout = 10000
enableEmoji = true
paginate = 7
rssLimit = 100

[outputs]
  home = [ "HTML", "RSS", "JSON" ]

[taxonomies]
  category = "categories"
  tag = "tags"
  series = "series"

3. languages.toml

[en]
  title = "Hugo Zzo Theme"
  languageName = "English"
  weight = 1

[ko]
  title = "Hugo Zzo Theme"
  languageName = "한국어"
  weight = 2

4. menus.en.toml

You shoud make your own menu.

[[main]]
  identifier = "home"
  name = "home"
  url = "/"
  weight = 0
...

5. params.toml

description = "The Zzo theme for Hugo example site."

# body
enableToc = true
enableBreadcrumb = true
enableCustomScrollbar = true
enablePhotoSwipe = true
enableSearch = true
enableMark = true

# sidebar
enableSidebarTags = true
enableSidebarSeries = true
enableSidebarCategories = true

# footer
showPoweredBy = true
showFeedLinks = true
showSocialLinks = true
enableLangChange = true
enableThemeChange = true
themeOptions = ["dark", "light", "hacker", "solarized"]
[socialOptions]
  facebook = "http://example.org/"
  twitter = "http://example.org/"
  github = "http://example.org/"
  stack-overflow = ""
  instagram = ""
  google-plus = ""
  youtube = ""
  medium = ""
  tumblr = ""
  linkedin = ""
  pinterest = "http://example.org/"
  stack-exchange = ""

Layout

CSS grid for layout

Modern CSS grid is the easiest and cleanest way to layout your pages.

The CSS grid layout are in assets/sass/layout/_grid.scss. A lot can be done by just reordering "grid-template-rows".

grid structure

left	right
1	2
3	4
5	6
7	8

• left, right column width ratio => 5 : 2
• 1 => .navbar-main
• 2 => .navbar-side
• 1 + 2 => .navbar
• 3 => .header-main
• 4 => .header-side
• 3 + 4 => .header
• 5 => .main-main
• 6 => .main-side
• 5 + 6 => .main
• 7 => .footer-main
• 8 => .footer-side
• 7 + 8 => .footer

grid structure example applied in home page

<div class="navbar"></div>
<div class="header"></div>
<div>
  <div class="main-main"></div>
  <div class="main-side"></div>
</div>
<div class="footer></div>

Gallery

Follow the steps below if you want to make gallery

1. Make a gallery folder under the content folder

root
├── content
│   ├── gallery

2. Make a sub folder under the gallery folder

root
├── content
│   ├── gallery
│   │   ├── mygallery

3. Make a index.md file under the sub folder using this command

hugo new content/gallery/mygallery/index.md

4. Put your images in static folder

root
├── static
│   ├── gallery
│   │   ├── mygallery
│   │   │   ├── ...your images here

Multi Language

The default language of this theme is English. If you want to use another language, follow these steps

1. Make a menu file.

root
├── config
│   ├── _default
│   │   ├── ...
│   │   ├── menus.ko.toml

config/_default/menus.ko.toml

[[main]]
  identifier = "about"
  name = "about"
  url = "/about/"
  weight = 1

[[main]]
    identifier = "archive"
    name = "archive"
    url = "/archive/"
    weight = 2
...

2. Make a content file. Add your language code before the md extension.

hugo new about/index.ko.md
hugo new posts/markdown-syntax.ko.md
...

3. Make an i18n file.

i18n/ko.toml

[search-placeholder]
other = "검색..."

[summary-dateformat]
other = "2006년 01월 02일"

[taxo-tags]
other = "태그"

...

Sub Theme

If you don't like the color that I choose, you can make your own sub theme.

1. Make your theme file

root
├── assets
│   ├── sass
│   │   ├── themes
│   │   │   ├── _yourtheme.scss

assets/sass/themes/_yourtheme.scss
$yourtheme: (
    footer-background-color: #403E41,
    footer-color: #bdbdbd, 
    link: #FFD866,
    link-hover: #FF6188,
    title-color: #ffd866,
    meta-color: #FCFCFA,
    ....
);

2. Import your theme file inside _theme.scss file

@import 'dark';
@import 'light';
@import 'hacker';
@import 'solarized';
@import 'yourtheme';

$themes: (
  dark: $dark,
  light: $light,
  hacker: $hacker,  
  solarized: $solarized,
  yourtheme: $yourtheme,
);

3. Edit config file to expose your theme in dropdown component.

config/_default/params.toml
...
themeOptions = ["yourtheme", "dark", "light", "hacker", "solarized"]
...

4. [optional] Add prism file for highlighting code

root
├── assets
│   ├── sass
│   │   ├── prism
│   │   │   ├── _yourtheme.scss

// assets/sass/prism/_yourtheme.scss

.theme__yourtheme {
  ...
}

// assets/sass/prism/_prism.scss

@import 'dark';
@import 'light';
@import 'hacker';
@import 'solarized';
@import 'yourtheme';

Shortcodes

warning

{{% alert theme="info" %}}**this** is a text{{% /alert %}}
{{% alert theme="success" %}}**Yeahhh !** is a text{{% /alert %}}
{{% alert theme="warning" %}}**Be carefull** is a text{{% /alert %}}
{{% alert theme="danger" %}}**Beware !** is a text{{% /alert %}}

expand

{{%expand "Expand me" %}}Good job{{% /expand%}}

img

{{% img src="https://example.com" title="Image4" caption="Image description" alt="image alt" %}}

notice

{{% notice note %}}
A notice disclaimer
{{% /notice %}}