Modern and minimalistic blog theme powered by Zola.
See a live preview here.
Fork of the Apollo theme.
Named after the greek god of trickery and thieves
- Download the theme
git submodule add https://github.com/flxzt/mercury themes/mercury
-
Add
theme = "mercury"
to yourconfig.toml
-
Copy the example content
cp -r themes/mercury/content content
Enable analytics with Goatcounter:
[extra.analytics]
enabled = true
goatcounter_user = "your_user"
goatcounter_host = "goatcounter.com" # default: goatcounter.com
Add a website favicon:
[extra]
favicon = "/images/favicon.png"
Set a color scheme:
[extra]
theme = "auto" # either `auto`, `dark` or `light`
Use CDN for fonts:
[extra]
use_cdn = true
Enable math rendering inline with $
and blocks with $$
pairs through Temml:
[extra]
temml = true
Enable the elevator:
[extra]
elevator = true
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" },
]
Add stylesheets to override the theme. The file paths are from the root of the generated site.
In this example, the two CSS files would be in the static
folder.
[extra]
stylesheets = [
"override.css",
"something_else.css"
]
Add 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"
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"
Specify that a page is an URL link instead of content.
[extra]
link_to = "https://project.page.com"
Specify that a section is a direct child of the index and its pages should appear there:
[extra]
show_in_index = true
If this is set, it is possible to specify how many pages should be shown:
[extra]
index_n_pages = 7
To display the subsection as cards instead of a pages list, use:
index_cards = true
The order of the subsections is determined by the weight specified in the subsection:
weight = 0
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 this template 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
To be able to write pages in raw HTML, use the raw
shortcode:
{% raw() %}
<ul>
<li>Write</li>
<li>raw</li>
<li>HTML</li>
</ul>
{% end %}
There is a gallery shortcode which searches the page directory for images and displays them as a foto gallery:
{{ gallery() }}
To display a right-aligned floating text, use the aside(width="<value>")
shortcode. Any valid css width value with its
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 with_width(width="<value>")
:
{% with_width(width="50%") %}
Content is maximum 50 percent!
{% end %}
Write a caption with:
{{ caption(text="This is the caption text") }}
Run the following from the root theme directory:
npm install
npm run post-update