Add Social Media in hugo

this is a custom feature we need to define in config.toml

Add your social media in config.toml

You can add social media in HTML directly, also, can use config file which is easy to change every time you want to update.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

[params]
 [[params.social]]
      url   = "https://twitter.com/"
      icon  = "fa-brands fa-twitter fa-lg"
  [[params.social]]
      url   = "https://facebook.com/"
      icon  = "fa-brands fa-facebook fa-lg" 
  [[params.social]]
      url   = "https://linkedin.com/"
      icon  = "fa-brands fa-linkedin fa-lg"
  [[params.social]]
      url = "https://linkedin.com/"  
      icon = "fa-brands fa-instagram fa-lg" 

Using in HTML page

Because header and footer both show social media, we just write a singe HTML, them import to some places you want to display.

1
2
3
4
5
6
7

{{ with $.Site.Params.social }}
  {{ range . }}
    <a href="{{ .url }}">
      <i class="{{ .icon}}"></i>
    </a>
  {{ end }}
{{ end }}

Import to somewhere

How to import social-media template to header

Icon Source

In this project, I choose fontawesome as the icon source. You also can determine which icon library you want to use. Popular choices include Font Awesome, Material Icons, and Bootstrap Icons. You can either download the icon library and include it in your Hugo project or use a CDN link.