1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
|
---
title: "Other Parameters"
date: "2024-10-08"
summary: "Other Parameters parameters"
description: "Other Parameters parameters"
toc: false
readTime: false
autonumber: true
math: false
showTags: false
---
Miscellaneous settings.
## Home Meta Description
You can specify the homepage meta description with the following parameter:
```toml
[params]
description = "Your description"
```
## Breadcrumbs
Show breadcrumbs on pages.
Example:
```toml
[params.breadcrumbs]
enabled = true
showCurrentPage = true
home = "~"
```
Set `enabled` to `false` if you want to hide breadcrumbs. By default, breadcrumbs are shown.
Set `showCurrentPage` to `false` to hide the last crumb, i.e, the current page.
`home` when set with a non-empty string, uses the latter as the first crumb instead of the string "Home".
## Comments
Enable comments on your posts using [Giscus](https://giscus.app/).
```toml
[params.giscus]
enable = false
repo = "your/repo"
repoid = "id"
category = "category"
categoryid = "categoryId"
mapping = "pathname"
theme = "preferred_color_scheme"
```
Tip: use `preferred_color_scheme` theme to have a consistent dark and light appearance.
You can decide to hide the comments section on certain pages, using the following parameter on the page itself:
```md
disableComment: true
```
## Umami
You can include [Umami](https://umami.is/) in your website as follows:
```toml
[params.umami]
enable = true
websiteId = "unique-website-id"
jsLocation = "http://example.org/umami.js"
```
## Favicons
If `static/favicon.ico` exists the following favicons are included in the head of the website:
- `favicon.ico`
- `favicon-16x16.png`
- `favicon-32x32.png`
- `android-chrome-192x192.png`
- `apple-touch-icon.png`
You can also specify a subdirectory of /static if you prefer
using the following param:
```toml
[params]
faviconPath = 'your-path'
```
You can easily generate favicons using [this website](https://realfavicongenerator.net/) starting from your image.
## OpenGraph
**Custom `og:image` (link preview images)**
Typo allows you to customize the image shown in the card generated by most social media apps (X/Bluesky/WhatsApp) when you share a link to your site.
These apps follow the [OpenGraph protocol](https://ogp.me) and look for `og:image` meta tags in the markup of the links you share. Typo will render the `og:image` meta tag provided a suitable one can be found.
> A size of 1200x630 is generally recommended for preview images.
A simple way to tell Hugo about the preferred image(s) to be used for `og:image` is by using the frontmatter `images` array with explicit paths to images.
Otherwise, you can refer to [Hugo docs](https://gohugo.io/templates/embedded/#configuration-open-graph) on how the default template function looks for a suitable image. Typo respects and uses the image found in these aforementioned ways but otherwise, looks into the following cases.
To show the same preview image across all your pages not fitting the above conditions, copy the preview image to the location `/assets/images/og-image.png`. `.webp` and `.jpg` files are also supported. This image will usually be applied for links to the home page and other links without any explicitly specified images.
If you want more control, you can create your own `layouts/partials/head/og-image.html` in your Hugo project and provide custom templating to generate an image URL. Here's an example that shows how an externally hosted service could be used for links other than the home page:
```handlebars
{{- if .IsHome -}}
{{- with resources.GetMatch "images/og-image.{webp,png,jpg}" -}}
{{- .RelPermalink -}}
{{- end -}}
{{- else -}}
{{- if .IsPage -}}
{{- printf "/api/og-image?title=%s" (or .Title site.Title site.Params.title | urlquery) -}}
{{- end -}}
{{- end -}}
```
Overriding `og-image.html` will still respect frontmatter/Hugo processing config and only applies if those scenarios fail.
## Mermaid Diagrams
Mermaid diagrams are supported, you can set light and dark themes in your config and they switch with your blog's light/dark state. Below are the default values:
```toml
[params]
mermaidTheme = "default"
mermaidDarkTheme = "dark"
```
|
