Configuration

This page contains the below configuration.

• Font
• Color palette
• Theme
• SEO
• Navbar
• Footer
• Custom CSS
• SubPath to serve static files

See the configurations for pages or sections.

Font

You can customize the font size, font weight, line height, text align properties in config.yaml

params:
    font:
        fontSize: 1.5rem # default: 1rem
        fontWeight: 500 # default: 400
        lineHeight: 1 # default: 1.5
        textAlign: right # default: left

Font used

• Roboto
• Alata
• Lara

If you want to customize the font, edit these files head.html, font.css

Color palette

You can customize the color palette in config.yaml. For more details

params:
  color:
    textColor: <value>
    secondaryTextColor: <value>
    backgroundColor: <value>
    secondaryBackgroundColor: <value> 
    primaryColor: <value>
    secondaryColor: <value>

    darkmode:
      textColor: <value>
      secondaryTextColor: <value>
      backgroundColor: <value>
      secondaryBackgroundColor: <value>
      primaryColor: <value>
      secondaryColor: <value>

Theme

you can disable the toggle in config.yaml. It will be in auto by default.

params:
    theme:
        disableThemeToggle: false
        defaultTheme: "light" # or dark

SEO

It has Hugo's _internal/opengraph.html, _internal/twitter_cards.html.

• How to use opengraph
• How to use twitter cards

Navbar

If you want to customize the menu, you can customize in config.yaml

• alignment: It will align the menus. If you didn't specify by default it will be ms-auto. Left: ms-auto | center: mx-auto | right: me-auto.
• brandLogo: If you want you different logo for brand, you can change by this property.
• brandName: If you want you different name for brand, you can change by this property.

params:
    navbar:
        align: mx-auto
        brandLogo: "/logo.png" # Logo for the brand | default is the favicon variable
        brandName: "Profile" # Brand name for the brand | default is the title variable

Menus

It follows Hugo's menus

Menus:
  main:
    - identifier: blog
      name: Blog
      title: Blog posts
      url: /blog
      weight: 1

    #Dropdown menu
    - identifier: dropdown
      title: Example dropdown menu
      name: Dropdown
      weight: 2
    - identifier: dropdown1
      title: example dropdown 1
      name: example 1
      url: /#
      parent: dropdown
      weight: 1
    - identifier: dropdown2
      title: example dropdown 2
      name: example 2
      url: /#
      parent: dropdown
      weight: 2

Footer

footer:
    # recentPosts: false
    socialNetworks:
      github: https://github.com
      linkedin: https://linkedin.com
      twitter: https://twitter.com
      instagram: https://instagram.com
      facebook: https://facebook.com

Custom CSS

• If you want to use custom styling, then create a file named style.css inside static folder
• Before adding your styles into the file, enable the customCSS configuartion in config.yaml.

params:
  customCSS: true

SubPath to serve static files

To allow websites in a sub-path like <ghuser-or-org>.github.io/myhugosite/

params:
  staticPath: "/your/path/"