lxndrblz / anatole

Anatole is a minimalistic two-column theme for Hugo.

Anatole Hugo Theme

Anatole is a beautiful minimalist two-column hugo theme based on farbox-theme-Anatole.

Demo

A live demo of the theme can be found under the following domain: https://anatole-demo.netlify.app/

Features

Anatole's aims to be minimalistic and sleek but still brings some great functionality, including:

• Dark mode
• Multilingual
• RTL support
• Portfolio (optional)
• Post Thumbnails (optional)
• 100⁄100 Google Lighthouse score
• Analytics powered by Google Analytics, Simple Analytics and Umami (optional)
• Comments powered by Disqus, Commento, Gitalk, Utteranc.es or Giscus (optional)
• KaTex support (optional)
• Formspree Contact Form (optional)
• Twitter Cards support
• Open Graph support
• Google Fonts support
• Custom JavaScript and CSS (optional)
• Compliant to strict CSP
• Post Series
• Mermaid diagram support (optional)

Preview the Example Site

git clone https://github.com/lxndrblz/anatole.git anatole
cd anatole/exampleSite
hugo server --themesDir ../..

Documentation

🚧 The documentation has moved!

The latest documentation for the theme can be found within the Wiki Tab on GitHub.

License

Anatole is licensed under the MIT license.

Contributions

This theme is maintained by its author Alexander Bilz and with the help from these awesome contributors. All contributions (including features, translations, code cleanups, improved documentation & bugs reporting) are welcome.

Read the guidelines for more information about contributing to this project.

Sponsoring

If you like this theme, give it a star on GitHub, and consider supporting its development:

Special Thanks 🎁

• Go to Cai Cai, for the great Anatole Farbox theme that formed the foundation for this theme.
• Go to Kareya Saleh for providing the profile picture used in the exampleSite.
• Go to Petri R for providing the portfolio picture used in the exampleSite.
• Go to Ales Krivec for providing the thumbnail picture used in the exampleSite image-test post.
• Go to Tobias Ahlin for his SpinKit that is used in the exampleSite redirect post.
• Go to FontAwseome for providing the icons used in this project.

anatole's Issues

Lighthouse report: Accessibility concerns

Running Lighthouse on the site points out a few problems, which I'm splitting across separate issues based on category to make them easier to triage.

For accessibility, the following issues were reported:

• List items are not contained within <ul> or <ol> parent elements.

This seems to be violated by this line

anatole/layouts/partials/navbar.html

Line 5 in 292a8af

<li><a {{if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }}class="current"{{end}} href="{{ .URL }}" title="{{ .Title }}">{{ .Name }}</a></li>

• Background and foreground colors do not have sufficient contrast ratio

This is a concern I personally felt as well. The text color in dark mode needs to be a bit brighter to improve contrast and legibility. Once it is closer to white than gray we should be good to go.

View the report

Always an about page?

First, thank you for this Theme, I like it a lot.

Not sure how it's happening, but my menu always shows an about page.

I have an about.md defined in the content/ folder, but my config.toml doesn't specify one

[menu]

  [[menu.main]]
  name = "Home"
  identifier = "home"
  weight = 100
  url = "/"

  [[menu.main]]
  name = "Posts"
  weight = 200
  identifier = "posts"
  url = "/posts/"

Any help is appreciated

Home page issue

Hi there,

loving this theme, thanks for the work!

I'm having an issue where i have a home defined:

[[menu.main]]
name = "Home"
identifier = "home"
weight = 100
url = "/"

I also have an empty index.md file

However the index.html layout is not loading?

I'd like a home page that shows the most recent blog posts.

Any help on how to fix this would be appreciated

Disappearing posts from home page

Hi @lxndrblz ,

I'm trying to add Disqus comments on my website with your theme. I have a website configured like in an example site. When I added Disqus shortname in the config and in my posts I added type: "post" (like here), the comments section in posts was visible, but all posts with this markup disappeared from the home page. You can observe it on my website.

Could you help me with that issue?
Thanks in advance!

Dark theme support

This should be rather straightforward to implement with CSS3 variables and the prefers-color-scheme media query. I'd personally also love for there to be a user-facing toggle since some platforms don't support the preferes-color-scheme query. For that purpose I have put together a bit of JS and CSS in my site for the manual toggle to work. If I am able to adopt this theme to my site I'd love to contribute this feature.

Replace screenshots in documentation

The screenshots in the images folder are showing a dated version of the theme. Those should be replaced with the most current one.

Create chromastyles sheets for consistent experience

Would probably be worth bundling a syntax highlighting stylesheet (from hugo gen chromastyles) and adapting it with the CSS variables to ensure a consistent experience between dark and light theme.

Originally posted by @msfjarvis in #14 (comment)

Social icon not show

I already turned off adblock, but still not working.

Social icons not showing

https://themes.gohugo.io/theme/anatole/

Current item highlighting in navbar is error-prone

In the example site, when you select the About tab it will not be underlined in the manner Home and Posts is. I checked the generated HTML and can confirm the Hugo trick used to set class="current" seems to not work on standalone pages, as can be reproduced on my staging site at https://staging.msfjarvis.dev where all nav items except Posts are standalone pages.

Hugo Build does not finish properly

Content

When I try to build command , I get the following error and the build will not finish properly.

hugo --minify-
 "/usr/local/hogehoge/themes/anatole/layouts/partials/head.html:31:1": parse failed: template: partials/head.html:31: illegal number syntax: "-"

Lighthouse report: Performance concerns

Running Lighthouse on the site points out a few problems, which I'm splitting across separate issues based on category to make them easier to triage.

For performs, the following issues were reported:

• Eliminate render-blocking resources

Flagged due to https://github.com/lxndrblz/anatole/blob/master/layouts/partials/head.html#L13

• Ensure text remains visible during webfont load

Flagged again by FontAwesome but not sure we can do anything about it.

View the report

Link Preview

Is there a way to set a link preview for social sharing? I’d like it to show up even if there’s not an image in the post.

I shared a post to Twitter tonight, and just the link shows up.

Thank you!

I can't change my profile picture.

I have put my picture in [images] dictionary, I changed the path of profile picture in [config.toml].
but when I open the web http://localhost:1313/, I can't see the picture.why?

Clicking on tags shows duplicate post entries

Steps:

1. git submodule add https://github.com/lxndrblz/anatole.git themes/anatole.
2. Replaced config.toml from exampleSite, made some basic changes and created an MD file under content/post
3. hugo serve
4. Clicked on my post and clicked on the tag
5. I can see duplicate entry for the single post I have

Medium Zoom appears white in darkmode

I also noticed an issue if you have dark mode enabled, then click on a picture, the background turns white. I remedied this with the following, but didn't make a PR because it feels kinda hacky and there might be a more sensible way of fixing it:

// medium-zoom.js
// global variable above the initial function
var currentBackground = "#292a2d" ? (document.querySelector("html").getAttribute("data-theme") === "dark") : "#fff";

// then later on, referencing it in createOverlay():
overlay.style.background = currentBackground;

// as well as the two other places that set the background to "#fff" (L427 & L457):
background: currentBackground

Originally posted by @ehamiter in #14 (comment)

Theme is not rendered on Netlify

Thank you for providing excellent theme!!

The theme works on localhost, but not on Netlify.
I investigated the page source and found that css is not loaded on my website.

I was following #48, but my case seems different from that.

Would you please how to fix my problem?

on localhost

on Netlify

Thank you.

Long line issue

Hi,

when I have a long line code inside my page, it would 'overflow'...

Like this:

BTW anatole is an extraordinary work!

Dark theme switching is buggy

On mobile, switching themes results in a rather ugly transition as can be seen in this screenrecord. This behaviour is similar on desktop, where the sidebar with profile animates differently than the content causing weird transitions on first load in addition to theme switching.

I'd also suggest moving the theme switching JS to the head.html partial since it needs to load early to prevent white flashes on platforms where theme was manually toggled.

Dark Mode?

Is Dark Mode an option in the config.toml or something I need to customize? I noticed it on your site @lxndrblz.

Page after deployment to GitHub Pages didn't load custom css

After updating to v0.2 I'm getting the message when I deploy my page to GitHub Pages, I'm getting an error related to custom css:

Failed to find a valid digest in the 'integrity' attribute for resource 'https://devdiary.wachulec.me/css/newsletter-form.41ab8feeeba31fe76d273b3cf27a31ff6acd2203b4c18108390653b995d72a80.css' with computed SHA-256 integrity 'GeWA05DEnpmOAEbv24B8taIzq+jKlpCHi6kvlUlFoqQ='. The resource has been blocked.

Used Hugo version: v0.74.3/extended. All necessary files are added in config file.

Mutlitlingual mode

I tried to acitvate the multilingual mode with the description in the readme, but it didn't work. In addition to the changes to config.toml suggested there, I had to specify a base directory to get the multilingual mode working. If this is in general so, the readme should be adapted accordingly.

Trouble with handeling home tab in navbar

Hi to everyone and thanks for this theme.
I was using your theme and I checked.
even without content/_index.md and content/posts/_index.md, The Home navbar works just fine.

But when I want to use it, with or without the two _index.md files mentioned , It doesn't work.

Hugo:

Hugo Static Site Generator v0.74.3-DA0437B4 linux/amd64 BuildDate: 2020-07-23T16:22:34Z

config.toml:

[menu]
  
  [[menu.main]]
  name = "خانه"
  identifier = "home"
  weight = 100
  url = "/"

  [[menu.main]]
  name = "دوره‌ها"
  weight = 200
  identifier = "courses"
  url = "/courses/"


  [[menu.main]]
  name = "درباره ما"
  weight = 300
  identifier = "about us"
  url = "/about-us/"

Those درباره ما and etc are in Persian language.

and in contents/courses/test.md

---
title: "This Problem"
---
blah ....
asdlfaskljd
asdfjaskdfjas
dfkjasdfkk

Can I set dark mode in theme as default in config?

Link above.

Theme not rendering properly

Did something change in the last build or two? I did the following:

git clone https://github.com/lxndrblz/anatole.git anatole
cd anatole/exampleSite
hugo server --themesDir ../..

I do not get a functioning site, instead I get this:

Did something break in the last few merges? I was able to do this a few weeks ago, but when I newly cloned the repo this happened.

Disqus comments not working

hi,

I have also enabled comments in my posts and set my disqusShortname, but none of the posts contain any disqus links?

Any idea what this could be?

thanks

favicon not showing

Thank you very much for creating this theme. I think it looks great and was easy to set up. I think I am experiencing a bug with the favicon.

My static folder is set up as follows:

static
├── CNAME
├── css
│   └── table.css
├── favicons
│   └── favicon.ico
└── img
    └── profile.png

config.toml looks like:

baseURL = "https://samedwardes.com/"
languageCode = "en"
DefaultContentLanguage = "en"
title = "Real Sam I Am"
theme = "anatole"
summarylength = 10
enableEmoji = true

# Enable Disqus
#disqusShortname = ""

# Google Analytics
#googleAnalytics = "UA-123-45"

[params]
title = ""
author = "Sam Edwardes"
description = "Real Sam I Am - a blog by Sam Edwardes"
profilePicture = "img/profile.png"
keywords = ["sam edwardes", "blog", "outdoors", "data-science", "cycling"]
favicon = "favicons/"
customCss = ["css/table.css"]
mainSections = ["post"]

The favourite icon does not show up on my site samedwardes.com:

For reference:

• development repo
• deployed repo

Please let me know if any other info could be helpful.

Description in Yaml. Rmd Files.

Hello. I'm adding some description in the yaml metadata of my posts. However, the default summary is still being shown in my site instead of my description. I'm writing .Rmd files. Why I'm doing wrong?

This is the metadata I'm using:

---

title: Some Title
author: Me
date: '2020-07-24'
description: 'This is a description.'

slug: Some slug
categories:

• C1
• C2
  tags:
• T1
• T2
  weight: x

---

This is my post.

Thanks,

Alejandro

Footnote pointing to homepage

The link of the footnote in the markdown example is pointing to the homepage rather than to the corresponding site.

https://themes.gohugo.io//theme/anatole/post/markdown-syntax/

Hide Post

Hi - I'm totally new to Hugo, is there a way to hide posts? I've added a tags section in the header, and the index page comes up. It's not in my post folder, but it is in the content section.

Thank you for any help and putting together this theme.

Subsource Integrity errors

I'm getting 6 Subsource Integrity errors-- it's stating that I have css and js links that have an integrity attribute but missing a crossorigin=anonymous attribute. Do I need to set up something that allows this to work? I'm hosting this on render.com if that helps.

Everything works fine locally.

Subresource Integrity: The resource '<URL>' has an integrity attribute, but the resource requires the request to be CORS enabled to check the integrity, and it is not. The resource has been blocked because the integrity cannot be enforced.
www.erichamiter.com/:1 Subresource Integrity: The resource 'https://erichamiter.com/css/style.min.a43688eed7109f4f6ea35ac58d42e04f099809823869f8298c749d036e1db67c.css' has an integrity attribute, but the resource requires the request to be CORS enabled to check the integrity, and it is not. The resource has been blocked because the integrity cannot be enforced.
www.erichamiter.com/:1 Subresource Integrity: The resource 'https://erichamiter.com/js/anatole-header.min.c275265a259296f3dd50e8236a77fcbcadb1dbb9597d3045c675dcc2c7c58a93.js' has an integrity attribute, but the resource requires the request to be CORS enabled to check the integrity, and it is not. The resource has been blocked because the integrity cannot be enforced.
www.erichamiter.com/:1 Subresource Integrity: The resource 'https://erichamiter.com/js/jquery.min.86b1e8f819ee2d9099a783e50b49dff24282545fc40773861f9126b921532e4c.js' has an integrity attribute, but the resource requires the request to be CORS enabled to check the integrity, and it is not. The resource has been blocked because the integrity cannot be enforced.
www.erichamiter.com/:1 Subresource Integrity: The resource 'https://erichamiter.com/js/bundle.min.0f9c74cb78f13d1f15f33daff4037c70354f98acfbb97a6f61708966675c3cae.js' has an integrity attribute, but the resource requires the request to be CORS enabled to check the integrity, and it is not. The resource has been blocked because the integrity cannot be enforced.
www.erichamiter.com/:1 Subresource Integrity: The resource 'https://erichamiter.com/js/medium-zoom.min.363534c78c934549a591175a8f454bc5a6b27f69bb98eea39cf73acdf14c49ca.js' has an integrity attribute, but the resource requires the request to be CORS enabled to check the integrity, and it is not. The resource has been blocked because the integrity cannot be enforced.
www.erichamiter.com/:318 Subresource Integrity: The resource 'https://erichamiter.com/css/medium-zoom.min.a1468f7a1cce6fe96c4b5483cb4645b85728a32b3abbd598c375a92df16230ef.css' has an integrity attribute, but the resource requires the request to be CORS enabled to check the integrity, and it is not. The resource has been blocked because the integrity cannot be enforced.

Support for multiple languages

Theme looks great. Is there a chance to support multiple languages?

Floating Images and Shortcodes

This isn't an "issue" per-se but more of a question. I understand that if I use shortcodes for figures within a post, like in the following example:

{{< figure src="/images/comics/explorers.jpg" >}}

paragraph text

the image will be positioned centered and above the paragraph text.

I'm curious if it's possible to position the image to the right of the paragraph (and possibly have the paragraph text wrap/flow around the image?

Also, I was unable to figure out how to position two images side by side.

Any help would be appreciated.

Can I add custom js?

Like above. Reason? For example for adding cookie consent.

Example Site Code does not match Sample Pictures

Hi! Thanks for this template.

I am setting up my website and am noticing some deviations between the base code and the pictures. For example, the menu in the sample picture has an About page but in the config.toml there is no about page listed.

Is it possible to update the example site so it is easier to follow along with the template?

Cannot GroupByParam

Hi,
I have been using your theme for a while now and I love it. In the post section of the main menu, you have grouped all the post by year. I tried to group by params instead and I ran into an error. It works fine when the hugo server is already started but it fails to build when the server is restarted.

This is my list.html

{{ define "main" }}
<div class="archive animated fadeInDown">
   
    <ul class="list-with-title">
      {{ range .Data.Pages.GroupByParam "series" }}     
      <div class="listing-title">{{ .Key }}</div>
      {{ range .Pages }}
      <ul class="listing">
        <div class="listing-item">
            <div class="listing-post"><a href="{{ .Permalink }}" title="{{ .Title }}">{{ .Title }}</a>
              <div class="post-time"><span class="date">{{.Date.Format "Jan 2 2006" }}</span></div>
            </div>
          </div>
    </ul>
    {{ end }}
    {{ end }}
  </div>
{{ end }}

The front matter of one my post

+++
author = "Stella Dare"
title = "Find Factorial of A Number"
date = "2020-09-01"
description = "Find the factorial of a number"
tags = [
    "Basic",
    "Algorithm",
    "JavaScript",
    "Recursion",
]
categories = [
    "Basic",
]
series = "Basic Algorithm"
aliases = ["use-recursion-to-factorialize-a-number"]
+++

The error message when the server is restarted

Building sites … ERROR 2020/09/07 01:24:06 render of "taxonomy" failed: "/home/stel/projects/algorithmscripting/themes/anatole/layouts/_default/list.html:5:20": execute of template failed: template: _default/list.html:5:20: executing "main" at <.Data.Pages.GroupByParam>: error calling GroupByParam: there is no such a param
ERROR 2020/09/07 01:24:06 render of "term" failed: "/home/stel/projects/algorithmscripting/themes/anatole/layouts/_default/list.html:5:20": execute of template failed: template: _default/list.html:5:20: executing "main" at <.Data.Pages.GroupByParam>: error calling GroupByParam: there is no such a param
Built in 225 ms
Error: Error building site: failed to render pages: render of "taxonomy" failed: "/home/stel/projects/algorithmscripting/themes/anatole/layouts/_default/list.html:5:20": execute of template failed: template: _default/list.html:5:20: executing "main" at <.Data.Pages.GroupByParam>: error calling GroupByParam: there is no such a param

My hugo version

Hugo Static Site Generator v0.74.3 linux/amd64 BuildDate: 2020-07-23T20:37:11Z

Can you help me figure out what's happening? Thanks in advance.

lang="{{- site.Language.Lang -}}"

I seem to have missed something
hugo v7.0+
lang="{{- site.Language.Lang -}}"
languageCode = "sg","de","ly"
forever
<html lang="en" data-theme="light">

Can we change the display content of the right column on the home page?

When I change "post" to "about" of the "mainSections" parameter, the right column of the home page will show nothing. What should I do to make the "About" show on the home page?

website is showing the contents of readme file after publishing

Thank you for this template. I forked this repo and published it using Github pages. However, I am only seeing the contents of the readme file and not the actual blog site. What am I doing wrong? I plan to edit all the relevant files with my info after fixing this issue.
Any help regarding this matter will be helpful.

Posts which have date in 2020 year are not displayed

Dark theme switching Safari bug

I've been having issues with the dark theme switching on Safari (everything works fine in Chrome). Here is a video of it. It also seems to happen on the example site on mobile Safari as well.

Previewing website from local directory fails to load CSS

When viewing my site using hugo server -D and loading http://localhost:1313, everything appears to work correctly. However, if I generate static webpages using hugo -D, and the attempt to open public/index.html in my browser, it appears that none of the CSS is loaded.

I have to admit that I'm new to using Hugo, the theme, and also web dev, so I'm assuming this is the best place to ask the question.

What follows is my config.toml which is basically a direct copy of the one you provided in the example site (although I may be missing something):

baseURL = "http://localhost:1313"
languageCode = "en-us"
DefaultContentLanguage = "en"
title = "Random Thoughts"
theme = "anatole"
summarylength = 10
enableEmoji = true
enableRobotsTXT = true

# Enable Disqus
# disqusShortname = ""

# Google Analytics
# googleAnalytics = "UA-123-45"

[params]
title = "Random Thoughts"
author = "Gregory Gelfond"
description = "Computer scientist, philosopher, lifelong learner"
profilePicture = "images/hobbes.jpg"
keywords = ""
favicon = "favicons/"
customCss = []
customJs = []
mainSections = ["post"]
images = ["images/explorers.jpg"]

## Math settings
[params.math]
enable = true  # options: true, false.
use = "mathjax"  # options: "katex", "mathjax".

## Social links
[[params.socialIcons]]
icon = "fa-linkedin"
title = "Linkedin"
url = "https://www.linkedin.com"

[[params.socialIcons]]
icon = "fa-github"
title = "GitHub"
url = "https://github.com/Gregory-Gelfond"

[[params.socialIcons]]
icon = "fa-envelope"
title = "e-mail"
url = "mailto:[email protected]"

## Menu items

[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/"

Great template - few newbie questions.

1. Is there a example for Twitter social icon?
2. Is it possible to change the font?
3. Is it possible to change the width, so the left side is reduced a bit? it looks like profile takes a lot of space?

Thanks,
Raj

Better CSP compatibility

I employ a rather focused CSP on my website which forbids a lot of common XSS vectors like inline styling. This creates problems with multiple features in the theme, notably the Medium-like zoom effect. medium-zoom.min.js creates a style tag in code but does not set a nonce which means I cannot whitelist it without relying on a potentially flaky sha256 sum that will require changing everytime the script is updated.

The way I see we can fix this with minimal effort is this:

1. Un-minify the JS to a readable file
2. Update the code to set a nonce for the generated style element, and document that nonce in the README for users to add to their CSPs.
3. Replace the script tag for medium-zoom.min.js with a Hugo pipe (example] that handles minification and gives us the additional bonus of cache busting via unique URLs as well as implements SRI

problems creating posts and making them show up correctly

I am starting with hugo proyects.
I was trying to use this template.
I create my own md and i am trying to be able to see it on the posts section.
But its still showing me the default .md on the example project.

I am able to show them on the home page. Since i am using the mainsections, but even i am not getting the other ones anymore on the other tab posts i am seeing the older ones.

Could you please guide me on how to show the new ones or how this section works?

Best Regards.

About menu not appearing

The About menu is not appearing on the Hugo Demo site.

Could there be a limit for the content width? Thinking of ultrawide screens and so.

Post header images

+1 to this issue. Would love to see support for this, especially on the front page (i.e. having images in the short preview), like this:

Originally posted by @rsln-s in #59 (comment)

Navbar on mobile overflows with no scroll

When I add too many links to the navbar, the content overflows but does not allow for horizontal scroll/ a way to see the overflowed content. Below is an example of what I am seeing on an iPhone X.

Additionally, it seems like the color change icon is on it's own line in this case.

I think ideally we would have some kind of scroll/other break here to something more mobile friendly.

can the page be divided into two columns?