2.8 KiB
2.8 KiB
Hugo Profile
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
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
params:
color:
textColor:
backgroundColor:
primaryColor:
secondaryColor:
darkmode:
textColor:
backgroundColor:
primaryColor:
secondaryColor:
Theme
you can disable the toggle in config.yaml. It will be in auto by default.
note: customizing default theme will release further
params:
theme:
disableThemeToggle: false
SEO and analytics
It has Hugo's _internal/opengraph.html, _internal/twitter_cards.html for SEO performance and _internal/google_analytics.html for analytics.
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