Mercury

Fork of the Apollo theme.

Modern and minimalistic blog theme powered by Zola.
See a live preview here.

_{^{Named after the greek god of trickery and thieves}}

Installation

Download the theme

git submodule add https://github.com/flxzt/mercury themes/mercury

Add theme = "mercury" to your config.toml
Copy the example content

cp -r themes/mercury/content content

Features

Site configuration

Enable analytics with Goatcounter:

[extra.analytics]
enabled = true
goatcounter_user = "your_user"
goatcounter_host = "goatcounter.com"    # default= goatcounter.com

Using a CDN for fonts

[extra]
use_cdn = true

Add a website favicon and logo before the site the site header

[extra]
favicon = "/images/favicon.png"
logo = "/images/logo.png"

Enable math rendering inline with $ and blocks with $$ through MathJax (currently always loaded with CDN):

[extra]
mathjax = true

Set a color scheme:

[extra]
theme = "auto"      # either `auto`, `dark` or `light`

Social buttons can be added. The available icon names are the file names without .svg in static/social_icons/.

[extra]
socials = [
    { name = "rss", url = "https://mercury.flxzt.net/atom.xml", icon = "rss" },
    { name = "github", url = "https://github.com/flxzt/mercury", icon = "github" },
]

You can add stylesheets to override the theme. These filenames are relative to the root of the site. In this example, the two CSS files would be in the static folder.

[extra]
stylesheets = [
    "override.css",
    "something_else.css"
]

Adding a footer:

[extra.footer]
enabled = true
# You can either set the footer text here or overwrite the footer.html template for custom html
text = "John Doe - © 2022"

Pages

To enable a table of contents, add this to the page frontmatter:

[extra]
toc = true

or a tldr at the start:

[extra]
tldr = "This page is way too long!"

pages can have a banner image:

[extra]
banner_image = "/absolute/path/to/image.png"

You can specify that a page is an URL link instead of content.

[extra]
link_to = "https://project.page.com"

Sections

To specify a different path for a section, add:

[extra]
section_path = "/absolute/section/path/_index.md"

Templates

Use custom templates by adding this: template = "<name>.html to the page or section frontmatter.

cards The cards.html section template to display projects with cards.

When using it pages can have a card image with:

template = "cards.html"
[extra]
card_image = "/absolute/path/to/image.png"

webapps There is a webapp.html page template for embedding web apps in an iframe.

specify the path to the webapp in the page frontmatter:

template = "webapp.html"
[extra]
webapp = "/path/to/webapp/index.html

Shortcodes

There is a gallery shortcode which searches the page directory for images and displays them as a foto gallery. Usage in markdown:

{{ gallery() }}

To display a right-aligned floating text, use the aside(width="<value>") shortcode (any valid css width value with the unit can be passed as a parameter). The shortcode has a body, so it has to be terminated with {% end %}. Usage:

{% aside(width="50%") %}
Some related info
{% end %}

It can be useful to then break the flowing text manually. For this there is the clear() shortcode:

{{ clear() }}

To help with alignment, any content can be resized to be a specific width with withwidth(width="<value>"):

{% withwidth(width="50%") %}
Content is maximum 50 percent!
{% end %}

flxzt / mercury