Zhuia

An elegant but still playful theme for Zola.

Author: Giovanni Crisalfi

License: MIT

Homepage: https://github.com/gicrisf/zhuia

Live Demo: https://zhuia.netlify.app

Last updated: 2023-04-30T21:01:54+02:00

Zhuia

An elegant but still playful theme for Zola powered by Spectre.css.

It is especially optimized for mobile navigation (optionally without JavaScript, if you don’t like fancy stuff).

DEMO: https://zhuia.netlify.app/

Contents

• Installation
• Features
• Options
  • Title
  • SEO
  • Menu
  • Social
  • Footer
• Name
• Genesis
• Donate
• License

Installation

First download this theme to your themes directory:

$ cd themes
$ git clone https://github.com/gicrisf/zhuia.git

and then enable it in your config.toml:

theme = "zhuia"

Posts should be placed directly in the content folder.

To sort the post index by date, enable sort in your index section content/_index.md:

sort_by = "date"

Features

• Lightweight and minimal
• Spectre CSS classes to manage content. Look at the docs
• Responsive for mobile support (with full-page mobile menu)
• SCSS based CSS source files for easy customization
• HTML based sidebar widget
• Author card sidebar widget with customizable avatar
• Multi-author support
• Optional twitter sidebar widget
• Feed RSS/Atom
• Open Graph and Twitter Cards support
• Social buttons with icons
• Deploy via Netlify (config already included)
• Tags AND categories
• Granular image optimization for a really faster loading on mobile
• Pagination
• Easily extendable menu
• Inter-page pagination
• Optional NoJs
• Hamburger animation
• Comments
• Related posts (not sure about this)
• Search bar
• Math rendering
• Other shortcodes
• Multilanguage support
• Dark mode
• Table of Contents
• Image + text title option

Options

Title

Set a title and description in the config to appear in the site header and on the RSS feed:

title = "Der Prozess"
description = "a novel written by Franz Kafka in 1914"

SEO

Most SEO tags are populated by the page metadata, but you can set the author and for the og:image tag provide the path to an image:

[extra]

author = "Timothy Morton"
og_image = "Hyperobjects.png"

Menu

You can choose between two modes:

• With a small script for an elegant overlay menu
• Without any scripts at all (it just your show menu underneath)

Social

Set a field in extra with a key of footer_links:

[extra]

# Freely comment out or delete every field
social_links = [
    {url = "https://t.me/yourname", name = "telegram"},
    {url = "https://twitter.com/gicrisf", name = "twitter"},
    {url = "https://github.com/gicrisf", name = "github"},
    # {url = "", name = "facebook"},
    # {url = "", name = "instagram"},
    # {url = "", name = "bookstack"},
    # {url = "", name = "dokuwiki"},
]

The theme automatically picks up the right icons. We can expand the support to other social, for sure: make a PR or open an enhancement issue to ask a new implementation.

Footer

You can add your own copyright or whatever to the footer with a through a simple option on the config file:

[extra]

footer_tagline = "What if everything is an illusion and nothing exists? In that case, I definitely overpaid for my carpet."

Name

The name arise from two parts:

• The generator, Zola, gives the “Z”;
• An extinct species of New Zealand wattlebird, the huia, provide the second part.

The theme is built on Spectre CSS framework, so I found reasonable evoking a spectral species.

Genesis

This theme is based on a Pelican theme I originally made for my blog, which was in turn based on the Grav theme Quark.

Donate

Did you liked this theme? Make a donation and support new features!

License

Open sourced under the MIT license.