Author Name on example

Hugo-Tufte Features compatibility

Author Name — Fri, 06 Feb 2026 13:56:01 -0800

This is a quick demonstration post. It serves as an example of the features of this theme. One of them is $\LaTeX$ via Katex.

A Bit About Mathematics

This is an example of an epigraph with some math $\mathbb N \subseteq \mathbb R$ to start the beginning of a section.
Shawn O'Hare, Math is Fun, p.8

Inline

Some inline math: This is Marginpar. $e^{i \pi} = -1$ and $\sqrt{-1} = i$ and $a_2 = 3$ .

Display

And display math using this symbol $$: This is Marginnote with counter like footnote.

-- \cdot_H -- \colon B(G,H) \times B(H, K) \to B(G, K), \quad ([X], [Y]) \mapsto [X \times_H Y].

Environments

Currently, certain $\LaTeX$ environments need to be escaped so that the markdown processor does not override Katex. Currently, display environments should be enclosed in <p> tags and blank lines. For instance:

$$ \begin{aligned} \mu(A) &= \iint_{I^2} \chi_A (x,y) \ d(x,y) = \int_I \left( \int_I \chi_A (x,y) \ dx\right) dy = \int_I 0 \ dy= 0 \quad \text{and} \\ \mu(A) &=\iint_{I^2} \chi_A (x,y) \ d(x,y) = \int_I \left( \int_I \chi_A (x,y) \ dy \right) dx =\int_I dx = 1, \end{aligned} $$

is produced from

<p>
$$
\begin{aligned}
 \mu(A) &= \iint_{I^2} \chi_A (x,y) \ d(x,y)
 = \int_I \left( \int_I \chi_A (x,y) \ dx\right) dy
 = \int_I 0 \ dy= 0 \quad \text{and} \\
 \mu(A) &=\iint_{I^2} \chi_A (x,y) \ d(x,y)
 = \int_I \left( \int_I \chi_A (x,y) \ dy \right) dx
 =\int_I dx = 1,
\end{aligned}
$$
</p>

Blockquotes shortcode also eliminated

This is suppose to be {{< blockquotes >}}, instead we use {{< epigraph >}} shortcode. But first, we try to manually cite via This is between cite tags and has math: $e^x$

This is a blockquote with two paragraphs, that employs the theme’s blockquote shortcode. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse id sem consectetuer libero luctus adipiscing. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

Shawn O'Hare, www.shawnohare.com

Code

As an example of some inline code: go test -v -short. And this is some block-code:

199
200
201
202
203
204
205
206
207
208
209
210
211


package main

import "log"

func add(x int, y int) int {
 log.Println("We are going to take the sum of two numbers, and leave a long comment.")
 return x + y
}

func main() {
 y := add(1, 2)
 log.Println(y)
}

Here’s an example without line numbers.

package main

import "log"

func add(x int, y int) int {
 log.Println("We are going to take the sum of two numbers, and leave a very very very long comment.")
 return x + y
}

func main() {
 y := add(1, 2)
 log.Println(y)
}

Figure

Below we have an example of a regular width figure.

The image title. This is the image caption. Image attribution

The image title. This is the image caption. Image attribution But tight integration of graphics with text is central to Tufte’s work even when those graphics are ancillary to the main body of a text. In many of those cases, a margin figure may be most appropriate.

Below is a full-width figure.

Napoleonic wars This the image caption. Image attribution

A Story About Cats

Climb a tree, wait for a fireman jump to fireman then scratch his face sleep on dog bed, force dog to sleep on floor cat snacks, and eat prawns daintily with a claw then lick paws clean wash down prawns with a lap of carnation milk then retire to the warmest spot on the couch to claw at the fabric before taking a catnap climb a tree, wait for a fireman jump to fireman then scratch his face put toy mouse in food bowl run out of litter box at full speed . See owner, run in terror chase mice, so thinking longingly about tuna brine for eat a plant, kill a hand for wake up human for food at 4am. Human is washing you why halp oh the horror flee scratch hiss bite scratch the furniture and rub face on owner. Loves cheeseburgers see owner, run in terror chew on cable. Thug cat ignore the squirrels, you’ll never catch them anyway. Eat a plant, kill a hand find empty spot in cupboard and sleep all day so hide head under blanket so no one can see yet love to play with owner’s hair tie rub face on everything i like big cats and i can not lie. Wake up human for food at 4am stare at the wall, play with food and get confused by dust yet then cats take over the world scamper. Inspect anything brought into the house get video posted to internet for chasing red dot. Brown cats with pink ears chew foot spit up on light gray carpet instead of adjacent linoleum. I am the best wake up human for food at 4am, meow spread kitty litter all over house, for meow. Knock dish off table head butt cant eat out of my own dish jump off balcony, onto stranger’s head, chase ball of string scream at teh bath but climb leg, so unwrap toilet paper but destroy couch. Climb a tree, wait for a fireman jump to fireman then scratch his face. Leave hair everywhere swat turds around the house eat grass, throw it back up, and eat grass, throw it back up. Chase after silly colored fish toys around the house.

We really like cats.

Yes, they are fluffy and happy.

Authoring Stage Taxonomy for Digital Garden

Author Name — Mon, 28 Jul 2025 00:00:00 +0000

This theme supports custom taxonomy and growth stage indicators. By default seedling, budding and evergreen will have predefined indicator.

But fist, it must be manually set up as follows:

[taxonomies]
 stage = "stage"

Create taxonomy folder and it’s terms _index.md:

mysite/
 ├── ...
 ├── content/
 │ └── stage/
 │ ├─ seedling/
 │ │ └─ _index.md
 │ ├─ budding/
 │ │ └─ _index.md
 │ └─ evergreen/
 │ └─ _index.md
 └── ...

Within _index.md, Set the stage title and translationKey if site is multilingual, you can also override custom indicator or emoji:

---
title: 'Stage of me being Godzilla'
translationKey: godzilla
emoji: '🦖'
# indicator: 'https://example.com/indicator.svg'
---

You can write the introduction or blah blah blah here

Add the stage parameter into your post index.md:

---
title: 'My Post'
stage: 'seedling'
---

Authoring Cover Images and Audio Articles

Author Name — Sat, 22 Feb 2025 00:00:00 +0000

Adding Cover Images

Assign The Cover Images

To add a cover image to your article, you have two options:

Front Matter Method

You can use either cover or images parameter for the images source. And alt, coverAlt or imagesAlt parameter for alt text.

---
title: "My Article"
images: "images/my-cover.jpg"
alt: "Description of the images"
---

Page Bundle Method

Create a folder for your post
Name your image cover.*
Place it in the same folder as your content
Set the alt text in your post frontmatter

Place The Cover

You can place your featured images in various layout, anywhere on article content with {{< figure >}} shortcode:

{{< figure src="cover" caption="alt" >}}

This is freedom of authoring!

Cat named Cooper with styrofoam on his fur due to electrostatic charge.

Adding Audio Articles

Front Matter Method

---
title: "My Article"
audio: "audio/my-audio.ogg"
---

Page Bundle Method

You can upload multiple audio format with this method:

Create a folder for your post
Name your audio audio.*
Place it in the same folder as your content

Page Bundle Method Examples

Here’s how your folder structure should look:

content/
└── posts/
 └── my-article/
 ├── index.md
 ├── cover.jpg
 ├── audio.mp3
 └── audio.ogg

Authoring Terms Entry

Author Name & A.N. Other — Mon, 03 Feb 2025 00:00:00 +0000

You can change the cover of each terms entry by adding the cover parameter in _index.md under [lang]\[taxonomies]\[terms]\. For example, to set the cover of the term configuration in categories, add the parameter in content\en\categories\configuration\_index.md.

---
title: "Configuration"
description: "Configuration description, this might be useful for HTML metadata"
cover: "https://example.com/cover.png"
translationKey: configuration
---

If something is written here, the text will be displayed as hero section.

To link the terms entry in another language, you can add the translationKey parameter. For example, if you want to link the terms entry in Indonesian, add the parameter in content\id\categories\konfigurasi\_index.md.

---
title: "Konfigurasi"
description: "Deskripsi konfigurasi, ini bisa berguna untuk metadata HTML"
cover: "https://example.com/cover.png"
translationKey: configuration
---

Jika ada teks yang ditulis di sini, teks akan ditampilkan sebagai bagian hero.

The same way, you can set the cover of each terms entry for series and author taxonomies. After making these changes, rebuild your site to see the updated cover and translations in breadcrumbs. The cover will replace the flowlines images on taxonomies listing.

Configure Discussion

Author Name — Sun, 26 Jan 2025 00:00:00 +0000

The theme supports embedding comments from Bluesky or Mastodon or both social platforms. When you include links to your Bluesky or Mastodon posts in the front matter, the Giscus will be automatically replaced.

Linking discussions with Mastodon post

Link your Mastodon post URL to the front matter using either toot, mstd, or mastodon parameter.

---
toot: https://example.com/@example/12345678901234567890
---

Linking discussions with Bluesky post

Link your Bluesky post URL to the front matter using either skeet, bsky or bluesky parameter.

---
skeet: https://bsky.app/profile/example.com/post/12345678901234
---

Note: You may need to estimating the article’s permalink on your local preview before sharing on Fediverse platforms to obtain the post link, or you might need to run CI/CD operations twice.

Configure Homepage Slides

Author Name — Sun, 26 Jan 2025 00:00:00 +0000

Setting up slide content

The Hugo Brewm theme features a homepage slides section that showcases important content through an interactive carousel. You can add a cover parameter to add a slide cover; this parameter also changes the slide layout. To create multiple slides, you’ll need to make separate files containing this front matter structure:

---
type: slide
title: "Slide Title"
textColor: black # change textcolor to `black` or `white` and set background transparent
params:
 headless: true # prevent page body to be render and redirect to 404.html
 target: "https://example.com" # override the redirect target
---

Dedicated Shortcode for Slide Content

External RSS feeds

The slides section can integrate content from external sources using the RSS shortcode.

---
type: slide
title: "My post on example.com"
---

{{< rss "https://example.com/feed.xml" >}}

Gallery with Masonry layout

For a Pinterest-style layout, you can implement the pin shortcode as follows:

{{< pin "begin" >}}
{{< pin img="https://example.com/item1.jpg" url="https://example.com/item1" label="Item 1" >}}
{{< pin img="https://example.com/item2.jpg" url="https://example.com/item2" label="Item 2" >}}
{{< pin img="https://example.com/item3.jpg" url="https://example.com/item3" label="Item 3" >}}
{{< pin img="https://example.com/item4.jpg" url="https://example.com/item4" label="Item 4" >}}
{{< pin img="https://example.com/item5.jpg" url="https://example.com/item5" label="Item 5" >}}
{{< pin img="https://example.com/item6.jpg" url="https://example.com/item6" label="Item 6" >}}
{{< pin "end" >}}

Configure Logo and Accent Color

Author Name — Sun, 26 Jan 2025 00:00:00 +0000

The Hugo Brewm theme allows you to easily configure your site’s logo and accent color taylored to your brand. Follow these steps to set up your logo:

Change Color Accent

To make the color accent align with your brand identity, you can add following code to your site configuration (hugo.toml):

 // Adjust color
 [params.style]
 // light mode
 [params.style.light]
 // accent color on default contrast 
 ac = '#800'
 // background color on default contrast
 bg = '#eee'
 // foreground color on default contrast
 fg = '#111'
 // midtone color
 // mid = 'gray'
 [params.style.light.more]
 // accent color on hight contrast 
 ac = 'red'
 [params.style.light.less]
 // dark mode
 [params.style.dark]
 ac = '#f80'
 bg = '#000'
 fg = '#fff'
 mid= 'gray'
 [params.style.light.less]
 [params.style.light.more]

Adding Logo Image / Logomark Icon

Prepare your logo image

Create or prepare your logo image file (recommended formats: PNG or SVG)

For best results, use an image with a transparent background

Recommended dimensions: height of 50px to 70px

You can also add dark mode version of your logo

Configure the logo in your site configuration:

[params]
 logoMark = 'https://example.com/logoMark.svg'
 logoMarkDark = 'https://example.com/logoMarkDark.svg' #optional

Using Logo Type Preset

If you prefer not to use an image logo, you can enable the built-in text-based logo by adding this setting:

[params]
 logoType = true

After making these changes, rebuild your site to see the updated logo. The logo will automatically appear in the site’s header and will be responsive across different device sizes.

Configure Menu

Author Name — Sun, 26 Jan 2025 00:00:00 +0000

Learn how to configure menus in the Hugo Brewm theme using either config.toml or menus[.lang].toml files.

identifier: Unique identifier for each menu item
name: Text shown in the menu
url: External link destination
pageRef: Link to internal pages
weight: Menu item ordering (smaller numbers first)
pre: Icon placement
post: Description for the link
parent: Parent menu item reference
params.target: Set menu item link target

Adding Icons

Add icons to your menu items with the pre parameter.

[[menu.main]]
 identifier = "github"
 name = "GitHub"
 url = "https://github.com/"
 pre = "github"
 [[menu.main.params]]
 target = "_blank"

Here are all the supported list icons and their corresponding names that can be used when configuring your menu items:

email
rss
behance
bigcartel
bitbucket
blogger
bluesky
bukalapak
buymeacoffee
clubhouse
codepen
creativefabrica
dailymotion
dev
deviantart
digg
dribbble
ebay
etsy
facebook
figma
flickr
flipkart
github
githubsponsors
gitlab
gnusocial
goodreads
googlescholar
gumroad
hackernews
hashnode
icon–500px
instagram
jsfiddle
karyakarsa
keybase
keycdn
kickstarter
kofi
lazada
liberapay
linkedin
mastodon
medium
olx
opencollective
openid
orcid
patreon
paypal
peertube
pinterest
pixelfed
pleroma
publons
quora
reddit
researchgate
saweria
sellfy
shopee
shopify
signal
snapchat
soundcloud
stackexchange
stackoverflow
stripe
substack
tangled
telegram
threads
tiktok
tokopedia
tumblr
twitch
twitter
vimeo
vine
wattpad
weibo
whatsapp
wikipedia
wordpress
write-dot-as
x
xing
xmpp
youtube

Creating Nested Menus

Create dropdown menus by using the parent parameter:

[[menu.main]]
 identifier = "about"
 name = "About"
 pageRef = "/about"

 [[menu.main]]
 identifier = "about-author"
 name = "Author"
 pageRef = "/about/author"
 parent = "about"

Language Support

There are three ways to add multi-language support to your menus:

1. Using `menu.[lang].[menuID]`

In config.toml:

[[menu.en.main]]
 identifier = "about"
 name = "About"
 url = "/about/"

 [[menu.en.main]]
 identifier = "about-author"
 name = "Author"
 pageRef = "/about/author"
 parent = "about"

[[menu.id.main]]
 identifier = "about"
 name = "Tentang"
 url = "/tentang/"

 [[menu.id.main]]
 identifier = "about-author"
 name = "Tentang Penyusun"
 pageRef = "/tentang/penyusun"
 parent = "about"

In menus.en.toml:

[[main]]
 identifier = "about"
 name = "About"
 url = "/about/"

 [[main]]
 identifier = "about-author"
 name = "Author"
 pageRef = "/about/author"
 parent = "about"

In menus.id.toml:

[[main]]
 identifier = "about"
 name = "Tentang"
 url = "/tentang/"

 [[menu.id.main]]
 identifier = "about-author"
 name = "Tentang Penyusun"
 pageRef = "/tentang/penyusun"
 parent = "about"

3. Using Front Matter in Markdown Files

in index[.lang].md _index[.lang].md or filename[.lang].md

---
title: "About Author"
menus:
 main:
 indetifier: about-author
 parent: about
---

Configure Pagefind

Author Name — Sun, 26 Jan 2025 00:00:00 +0000

Setting up search in Hugo configuration

To enable search functionality, you’ll need to modify your config.toml file. First, enable the search button using .params.search. Then activate .params.pagefind, if you skip this step, the theme will default to using DuckDuckGo instead.

[params]
 search = true
 pagefind = true

Creating search page

Unlike hugo-brewm theme, this theme use single page for search by configuring new page with search layout. Create search.en.md:

---
title: "Search"
type: "search"
menus:
 main:
 identifier : "Search"
---

Setting up your CI/CD pipeline

To create the search index, add this command to your CI/CD pipeline’s build step:

- name: Index pagefind
 run: npx pagefind --source "public"

Markdown Test

Author Name — Sun, 26 Jan 2025 00:00:00 +0000

This is example of span with letterine class. You need set the markup.goldmark.unsafe and markup.goldmark.renderer.unsafe parameter in config.toml to write html directly, but this is not recommended. And this is marginpar. Bold text, Italic text, Bold and italic text, ~~Strikethrough text~~, and Link —also works. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

\displaystyle \oint \vec{F} \cdot d\vec{s}=0

Please note that while the marginpar support MathML, the display and counter may not works as intended. Please use KaTeX or MathJax instead.

This page do not load with KaTeX nor MathJax script, While all equations on this page is native MathML, the browser supports may vary.

\displaystyle \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} \equiv 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots} } } }

Heading 2

First paragraph will not indent. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Second paragraph and after will indent. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is a blockquote

Nested blockquote

Heading 3

Example table on marginpar shortcode with "abs" attribute to support flowing content:

Number		Alphabeth
16	14	A
10	16	B
14	10	C

Ordered list item 1
Ordered list item 2
- Nested unordered item
- Another nested item
Ordered list item 3

Unordered list item
Another item
- Nested item
- Another nested item

Heading 4

Header 1	Header 2
Cell 1	Cell 2
Cell 3	Cell 4

Task list:

Completed task
Incomplete task

Heading 5

Here’s some inline code and some combined formatting.

Here’s some block code:

// code block with four space
def hello_world():
 print("Hello, World!")

// Code block with syntax highlighting
function greeting(name) {
 return `Hello, ${name}!`;
}

Heading 6

Heading level 6 will show as inline paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

\displaystyle f(n) = \begin{cases} \frac{n}{2}, & \text{if } n\text{ is even} \\ 3n+1, & \text{if } n\text{ is odd} \end{cases}

Author Name on example

Hugo-Tufte Features compatibility

A Bit About Mathematics

Inline

Display

Environments

Blockquotes shortcode also eliminated

Code

Figure

A Story About Cats

We really like cats.

Authoring Stage Taxonomy for Digital Garden

Authoring Cover Images and Audio Articles

Adding Cover Images

Assign The Cover Images

Place The Cover

Adding Audio Articles

Page Bundle Method Examples

Authoring Terms Entry

Configure Discussion

Configure Social Media Integration

Linking discussions with Mastodon post

Linking discussions with Bluesky post

Configure Homepage Slides

Setting up slide content

Dedicated Shortcode for Slide Content

External RSS feeds

Gallery with Masonry layout

Configure Logo and Accent Color

Change Color Accent

Adding Logo Image / Logomark Icon

Using Logo Type Preset

Configure Menu

Menu Parameters

Adding Icons

Creating Nested Menus

Language Support

1. Using menu.[lang].[menuID]

2. Using Separate Menu Files

3. Using Front Matter in Markdown Files

Configure Pagefind

Setting up search in Hugo configuration

Creating search page

Setting up your CI/CD pipeline

Markdown Test

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

1. Using `menu.[lang].[menuID]`