Note

This is my personalized fork of Zola's port of the Hyde theme originally created by Mark Otto as a Poole Jekyll Theme. See the changes I've made in the Differentia section below. I haven't really flushed things out to be it's own standalone theme. YMMV in it's use!

hyde

Hyde is a brazen two-column Zola based on the Jekyll theme of the same name that pairs a prominent sidebar with uncomplicated content.

Contents

• Installation
• Differentia
• Options
  • Sidebar menu
  • Sticky sidebar content
  • Themes
  • Reverse layout

Installation

First download this theme to your themes directory using one of the options based on your use-case:

Option 1 - Clone

If you want to manage it as part of YOUR code base, make your own modifications and put it under your own source code management then this is a good choice.

cd themes
git clone https://github.com/choyer/hyde

Option 2 - Submodule

If you want to be able to easily pull updates from this repo

cd <Zola root dir>
git submodule add https://github.com/choyer/hyde themes/hyde

To update the theme to a later version:

cd <Zola root dir>
git submodule update --recursive --remote

Enable the Theme

Enable it in your config.toml:

theme = "hyde"

Differentia

Main differences from the original Zola port include:

• Includes many tabi by Óscars' amazing theme features, including:
  • Integration with remote repositories on GitHub, GitLab, Gitea & Codeberg for commit history and showing the site source.
  • Support for comments using giscus only.
  • Mail encoding for spam protection.
  • All JavaScript can be fully disabled.
  • Customizable Table of Contents.
  • Analytics via goatcounter, unami, plausible
  • Customizable secure headers.
  • Copy button for code blocks.
  • Quick navigation buttons.
  • Custom copyright notice.
  • Plus many other behind the scenes features.
• Sidebar navigation highlights the current active page (like the original Jekyll Hyde theme)
• Combined styles into a single stylesheet
• Privacy focused no tracking or CDN references.
• Locally hosted webfonts
• Ability to define sidebar subtitle via hyde_sidebar_subtitle = "" in main config.toml
• Ability to define sidebar subtext via hyde_sidebar_subtext = "" in main config.toml
• Ability to define sidebar 3rd party social profile links via hyde_social_links = [] in main config.toml (see example)
• Ability to show sidebar copyright via hyde_copyright = true, define copyright license via hyde_copyright_license = "licensed under CC BY 4.0" and define copyright license link via hyde_copyright_license_link = "https://creativecommons.org/licenses/by/4.0/"
• SVG icons with the option of generating a sprite with documented workflow

Social Links example

3rd party social profile links, displayed as icons within the Sidebar, can be defined in the sites config.toml via:

[extra]
hyde_social_links = [
    {name = "github", url = "https://github.com/choyer"},
]

Tip

I've included some of the most popular social service icons. To add your own following the instructions provided in the SVG Sprite Workflow section.

SVG Sprite Workflow

Warning

ON HOLD! Not fully implemented. Still considering my options and whether using a sprite is the best approach. See External SVGs that you can style and Which SVG technique performs best for way too many icons?

Icons (social, etc.) can be delivered by a single SVG sprite. A basic set of social service from Simple Icons is provided.

To add others simply download additional icons from the Simple Icons website or any other svg icon source (e.g. Bootstrap Icons) and place them in the themes /static/icons/src directory.

To generate the SVG sprite you can either use an online tool like Fontastic or a CLI like Yesvgmap.

To use yesvgmap:

yesvgmap -o static/icons/icons.svg -l themes/hydes/static/icons/src/spritelist.txt

Options

Sidebar menu

Set a field in extra with a key of hyde_links:

[extra]
hyde_links = [
    {url = "https://google.com", name = "Google.com"},
    {url = "https://google.fr", name = "Google.fr"},
]

Each link needs to have a url and a name.

Sticky sidebar content

By default Hyde ships with a sidebar that affixes it's content to the bottom of the sidebar. You can optionally disable this by setting hyde_sticky to false in your config.toml.

Themes

Hyde ships with eight optional themes based on the base16 color scheme. Apply a theme to change the color scheme (mostly applies to sidebar and links).

There are eight themes available at this time.

To use a theme, set the hyde_theme field in config.toml to any of the themes name:

[extra]
hyde_theme = "theme-base-08"

To create your own theme, look to the Themes section of included CSS file. Copy any existing theme (they're only a few lines of CSS), rename it, and change the provided colors.

Reverse layout

Hyde's page orientation can be reversed by setting hyde_reverse to true in the config.toml.