Anatole is a minimalist two-column hugo theme based on farbox-theme-Anatole.
Anatole is a beautiful minimalist two-column hugo theme based on farbox-theme-Anatole.
Anatole's aims to be minimalistic and sleek, but still brings some great functionality.
git clone https://github.com/lxndrblz/anatole.git anatole cd anatole/exampleSite hugo server --themesDir ../..
git submodule add https://github.com/lxndrblz/anatole.git themes/anatole.
config.toml. Feel free to copy the demo
config.tomland some content from the exampleSite.
hugo serveand admire the result at
http://localhost:1313/.
If you want to get the latest update of the
Anatoletheme please execute this command:
git submodule update --remote --merge
Ìn this section I'll discuss the custom parameters available within the
config.toml. The complete sample can be found in the exampleSite folder.
[params] title = "I'm Jane Doe" author = "Jane Doe" description = "Call me Jane" profilePicture = "images/profile.jpg"
Add you own favicon in
static/favicons/favicon.ico.
By default the copyright, will show the current year, but you can change this by configuring the
copyrightparameter.
toml copyright = "2020-2021"
Non-content entries can be added right from the
config.tomlfile.
[menu][[menu.main]] name = "Home" identifier = "home" weight = 100 url = "/"
[[menu.main]] name = "Posts" weight = 200 identifier = "posts" url = "/post/"
[[menu.main]] name = "About" weight = 300 identifier = "about" url = "/about/"
You can easily enable the dark mode from the
config.tomlall you have to do is to set the parameter
displayModeto
dark. If you don't specify any displayMode, then the light version will be loaded.
Please also note that returning visitors will see the theme that was last displayed to them on your site. If your user has his system configured to dark mode, then this will also take precedence over the
displayModeset in the
config.toml.
[params] displayMode = "dark"
You can easily disable the theme switcher from the
config.toml. All you have to do is to set the parameter
disableThemeSwitcherto
true.
toml [params] disableThemeSwitcher = true # Theme switcher is enabled by default
You can easily disable the animations from the
config.toml. All you have to do is to set the parameter
doNotLoadAnimationsto
true.
toml [params] doNotLoadAnimations = true # Animations are loaded by default
You can change the default date formating for the
list.html, the
single.htmland the
index.html. Simply configure the matching parameters.
toml [params] singleDateFormat = "Mon, Jan 2, 2006" indexDateFormat = "Mon, Jan 2, 2006" listDateFormat = "Jan 2"
If you prefer having a static page as your home page rather than a listing of the latest posts, then make sure you leave the
mainSectionsparameter blank:
toml [params] mainSections = []Put any content into the
_index.mdfile located in the content directory. If you want, you can also have some static text and the posts below. In such case, simply keep the
mainSections = ["post"]and put any static content in the
_index.md.
Anatole supports multilingual page setups. All you need to do is to add the languages to your 'config.toml'. For each Language you can set the custom options like title or description. It's important to include a
LanguageName, as it will be displayed in the main menu.
[Languages] [Languages.en] title = "My blog" weight = 1 LanguageName = "EN"[Languages.de] title = "Mein blog" description = "Ich bin Jane" weight = 2 LanguageName = "DE"
There are two ways of translating your content either by adding a suffix in the filename eg.
mypost.de.mdor by setting a contentDir (a certain directory) for each language. Link to the Hugo documentation. If you want to use the option with the
contentDir, you will have to add the
contentDirparameter for each language:
[languages] [languages.en] contentDir = "content/english" languageName = "EN" weight = 1
To make sure your menu is linking to the correct localized content, make sure that you customize the menu items to include the language prefix. Your menu might look like the following:
[[Languages.de.menu.main]] url = "/de/" identifier = "home" name = "Startseite" weight = 100[[Languages.de.menu.main]] name = "Beiträge" weight = 200 identifier = "posts" url = "/de/post/"
[[Languages.de.menu.main]] name = "Über" weight = 300 identifier = "about" url = "/de/about/"
Anatole currently ships with support for some basic languages. Contributions for other language translations are welcome.
The theme is optimized to adhere to the requirements checked for in the Lighthouse Audit. On my personal site I was able to reach a perfect 100⁄100 score.
No comment section is shown on the
single.html, unless a Disqus code is specified in the
config.tomlfile.
disqusShortname = "XXX"
No comment section is shown on the
single.htmlunless a
repois specified in the
config.tomlfile. If uncertain how parameter to configure, check out the official [documentation}(https://utteranc.es/).
[params.utterances] repo = "githubuser/reponame" issueTerm = "pathname" theme= "preferred-color-scheme" # label =
Two notes on the security of Utteranc.es - If you are using a strict CSP, you'll have to add the domain to it. - The script currently has no built-in integrity check, due to limitations of Utterances.
To use Google Analytics, a valid tracking code has to be added. If you don't want to load the code, then commend out the parameter.
googleAnalytics = "UA-123-45"
To use Simple Analytics, it has to be enabled by setting the parameter to true. If you are using a custom subdomain to evade Adblockers, then specify the URL without a trailing slash.
[params.simpleAnalytics] enable = true # customurl = "https://analytics.example.com"
To use Google Site Verification, add the following line to the
[params]:
[params] googleSiteVerify = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
Replace the hash with the one Google provided you.
## Math settings [params.math] enable = false # options: true, false. Enable math support globally, default: false. You can always enable math on per page. use = "katex" # options: "katex", "mathjax". default is "katex".
Step 1: Configure the
contactFormActionin the
config.toml```toml [params]
Step 2: Activate the `contact: true` or `contact=true` in the frontmatter of a page. See `exampleSite/content/contact.html` as an example. ### Twitter Cards supportIn order to use the full functionality of Twitter cards, you will have to define a couple of settings in the
config.toml
and the frontmatter of a page.In the
config.toml
you can configure a site feature image. This image will be displayed, if no image is defined in the frontmatter of a page.```toml [params] images = ["images/site-feature-image.png"]
To define a custom image of a page, you might want to add the following to the frontmatter of a post.
images = ["post-cover.png"]
Thumbnails can be enabled easily by setting the
thumbnailparameter in the frontmatter of a post to an image such as
"images/landscape.jpg".
md +++ ... tags = [ "thumbnail", ] thumbnail= "images/landscape.jpg" +++Make sure to put the image in the
static/images/directory.
You can add your custom CSS files with the
customCssparameter of the configuration file. Put your files into the
assets/cssdirectory.
customCss = ["css/custom.css", "css/styles.css"]
On the user-side it will look like this:
. └── assets └── css ├── custom.css └── styles.css
You can add your custom JS files with the
customJsparameter of the configuration file. Put your files into the
assets/jsdirectory.
[params] customJs = ["js/hello.js", "js/world.js"]
On the user-side it will look like this:
. └── assets └── js ├── hello.js └── world.js
hello.jsand
world.jswill be bundled into a
custom.min.js.
You can also include links to remote javascript files (hosted on CDNs for example). But be aware, that integrity settings and minification won't be applied. Further make sure to adjust your CSP. You can load a remote script like this:
[params] customJs = ["http://cdn.exmple.org/fancyscript.js"]
Both approaches can even be mixed:
[params] customJs = ["https://cdn.exmple.org/fancyscript.js", "js/world.js"]
The theme is compliant with most strict CSP policies out of the box. A sample CSP for an Anatole-based site would look something like this:
Content-Security-Policy " base-uri 'self'; connect-src 'self'; default-src 'self'; frame-ancestors 'none'; font-src 'self' cdnjs.cloudflare.com; img-src 'self'; object-src 'none'; script-src 'self'; style-src 'self' cdnjs.cloudflare.com; "
If you want to configure the security headers for a site running on Netlify, you want to make sure you create a special
_headersfile in your sites static folder. The content might look like the following:
/* X-Frame-Options: DENY X-Clacks-Overhead: "GNU Terry Pratchett" X-XSS-Protection: 1; mode=block X-Content-Type-Options: nosniff Referrer-Policy: same-origin Content-Security-Policy: base-uri 'self'; connect-src 'self'; default-src 'self'; frame-ancestors 'none'; font-src 'self' cdnjs.cloudflare.com; img-src 'self'; object-src 'none'; script-src 'self'; style-src 'self' cdnjs.cloudflare.com; Strict-Transport-Security: max-age=63072000; includeSubDomains; preload
You can configure the pages shown on the front page by altering the
mainSectionsparameter:
[params] mainSections = ["post", "docs"]
If you want Hugo to generate a robots.txt, you will have to set the
enableRobotsTXTin the
config.tomlto
true. By default a robots.txt, which allows search engine crawlers to access to any page, will be generated. It will look like this:
User-agent: *
If certain sites should be excluded from being accessed, you might want to setup a custom robots.txt file within your
staticfolder of your site.
This theme has support for either Hugo's lightning-fast Chroma code highlighting. See the Hugo docs for more information.
To enable Chroma, add the following to your site parameters:
pygmentsCodeFences = true pygmentsUseClasses = true
Then, you can generate a different style by running:
hugo gen chromastyles --style=monokailight > assets/css/syntax.css
If you get any errors, make sure the
assets/css/directory exists within your sites root folder. Include the newly generated
syntax.csslike a standard custom CSS script:
[params] customCss = ["css/syntax.css"]
Anatole is licensed under the MIT license.
This theme is maintained by its author Alexander Bilz and with the help from these awesome contributors. Please open an issue/pull request if you want to contribute to making this theme better and more feature-complete. For PRs please make sure that they align with theme's goals: minimalism, speed and elegance.
If you like this theme, give it a star on GitHub, and consider supporting its development: