Social Icons in Hugo Ananke Theme
- 5 minutes readIntroduction
After completing the initial setup of my blog, I wanted to add a social icon in the header/navbar. After some searching, I found this documentation on the Ananke theme’s wiki.
Why am I writing this post?
Even though there is a wiki page “explaining” how to configure social icons, I was still confused by it, so I’m writing this in case it might help someone else.
How it works
All samples in this documentation will refer to configuration in config/_default/params.toml and use the TOML format. If you have problems translating that into your configuration situation and format (JSON, YAML) please join us in the Discussion Forum.
- ananke.social.share configures share buttons/links on single pages/posts
- ananke.social.follow configures social network links in “follow us on social media” widgets
- ananke.social.networks configures single networks. if user wants to extend, they add a new item to their local param section
- ananke.social.$slugname is individual configuration for the networks defined in ananke.social.networks that is to be set for the implementing site in the individual configuration
Now, I’m not using config/_default_params.toml
, I’m using hugo.toml
, I’m guessing they do pretty much the same but we are already starting to get a mismatch.
Secondly, I don’t know what are
- share buttons/links on single pages/posts
- social network links in “follow us on social media” widgets
- the rest of the presented configurations
This might be a lack of reading comprehension or another issue, but I wasn’t able to understand what these configurations actually represented.
I basically guessed that
[ananke.social.follow]
new_window_icon = false
networks = [
"facebook",
"bluesky",
"linkedin"
]
is used to define which social networks to “enable”. and
[params.ananke.social.linkedin]
username = "patrickkollitsch"
profilelink = "https://th.linkedin.com/in/patrickkollitsch/"
is used to define the social network’s specific configuration (That was an easy guess).
Now, in the first configuration, you have to prepend params.
to ananke.social.follow
like this
[params.ananke.social.follow] # not [ananke.social.follow]
new_window_icon = false
networks = [
...
or it just won’t work.
Anyways, if you copy pasted properly, it should look like the following:
Customize the social icons
If you want to modify the look of the social icons, you will need to copy Ananke’s "follow.html"
partial in themes/layouts/partials/social/follow.html
and paste it into your own layouts/partials/social/follow.html
so that Hugo can use your custom partial instead.
Also, yes, as far as I know (which isn’t a lot), you will have to manually update your custom partial every time Ananke’s is changed/updated (or not if the update doesn’t break anything).
My configuration
I only wanted a GitHub icon that redirects to the blog’s repository, so I did the following.
hugo.toml
[params.ananke.social.follow]
networks = [
"github"
]
[params.ananke.social.github]
username = "D14rn"
profileLink = "https://github.com/D14rn/blog"
layouts\partials\social\follow.html
- Copied the file from Anankes’s
- Deleted the title and aria-label attributes inside the <a> tag because it annoyed me to have some text popup when I was hovering the icon
Conclusion
I hope this article helped you, or maybe it didn’t, but hey, such is life!