Anatole theme for Farbox ported to Zola
Zola Homepage | Demo with customizations
First download this theme to your themes
directory:
$ cd themes
$ git clone https://github.com/longfangsong/anatole-zola.git
and then enable it in your config.toml
:
theme = "anatole-zola"
And copy the content/about
, content/archive
, content/_index.md
in the theme folder to your own content folder. And edit the _index.md
in about
folder to edit the content of your about
page.
Add title
, description
and base_url
:
title = "Anatole"
description = "A other zola theme"
base_url = "https://example.com"
Though the origin theme only support light mode, we added a dark mode option here.
You can either
extra.mode
field in config.toml
to use the dark/light modeextra.default_mode
field in config.toml
to read the dark/light mode from localStorage
(the key is 'mode'
), and use some Javascript to control the theme each reader is usingCurrently, we have English, Chinese, German and Swedish translations, set the default_language
if necessary:
# 如果你想要中文
default_language = "zh"
If there are complications, you can copy this snippet to your config.toml
:
[languages.en.translations]
language_name = "English"
about = "About"
home = "Home"
tags = "Tags"
archive = "Archive"
links = "Links"
date_format = "%Y-%m-%d"
next_page = "Next Page"
last_page = "Last Page"
[languages.zh.translations]
language_name = "中文"
home = "首页"
about = "关于"
tags = "标签"
archive = "归档"
links = "友链"
date_format = "%Y-%m-%d"
next_page = "下一页"
last_page = "上一页"
[languages.de.translations]
language_name = "Deutsch"
about = "Info"
home = "Home"
tags = "Kategorien"
archive = "Archiv"
links = "Links"
date_format = "%d-%m-%Y"
next_page = "Nächste Seite"
last_page = "Vorherige Seite"
[languages.sv.translations]
language_name = "Svenska"
about = "Info"
home = "Hem"
tags = "Etiketter"
archive = "Arkiv"
links = "Länkar"
date_format = "%Y-%m-%d"
next_page = "Nästa Sidan"
last_page = "Sista Sidan"
Feel free to create a pull request if you want to translate the theme into other languages!
The theme will become multilingual automatically if you specify another language except default_language
.
You'll see a language-switching button on top right.
Tags and links sections are optional.
If you want to enable the tags page, add
taxonomies = [
{name = "tags"},
]
[extra.show]
tags = true
To your config.toml
If you want to enable the links page, add
[extra.show]
links = true
and copy content/links
to your own content
library. And edit the _index.md
in it to modify its content.
If you want to add the author's name on each page, add:
[extra]
author = "John Doe"
We support a bunch of social links:
[extra.social]
github = ""
gitlab = ""
stackoverflow = "" # use user_id
twitter = ""
mastodon = "" # use hostname/@username
facebook = ""
instagram = ""
dribbble = ""
weibo = ""
linkedin = ""
flickr = ""
Fill in your username if you want! And the logo won't appear if you leave it empty.
We currently support...
[extra.comment.valine]
appid = "Your appid goes here"
appkey = "Your appkey goes here"
notify = false # true/false: mail notify https://github.com/xCss/Valine/wiki/Valine-%E8%AF%84%E8%AE%BA%E7%B3%BB%E7%BB%9F%E4%B8%AD%E7%9A%84%E9%82%AE%E4%BB%B6%E6%8F%90%E9%86%92%E8%AE%BE%E7%BD%AE
verify = false # true/false: verify code
avatar = "mm" # avatar style https://github.com/xCss/Valine/wiki/avatar-setting-for-valine
placeholder = "Say something here"
[extra.comment.disqus]
name = "longfangsong"
[extra.comment.utterances]
repo = "Your repo for comments"
issue_term = "pathname"
theme = "github-light"
There are several options I left in the origin templates for you to customize your site.
You can create a blog.scss
or something similiar in the your sass
folder, add a templates.html
with following content:
{%/* extends "anatole-zola/templates/basic.html" */%}
{%/* block extra_head */%}
<link rel="stylesheet" href="{{ get_url(path="blog.css") }}">
{%/* endblock */%}
You can add more social links by adding a templates.html
with some content added to more_social_link
block:
{%/* extends "anatole-zola/templates/basic.html" */%}
{%/* block more_social_link */%}
<div id="pirate" data-wordart-src="//cdn.wordart.com/json/685czi4rqil5" style="width: 100%;" data-wordart-show-attribution></div>
{%/* endblock */%}
If you want to use some awesome logos, FontAwesome icons are already available.