Skill

Hugo and Blowfish Knowledge

This skill should be used when the user asks about "hugo shortcode", "blowfish config", "hugo template", "blowfish theme", "hugo frontmatter", "blowfish layout", "configure blowfish", "hugo taxonomy", "blowfish dark mode", "mermaid in hugo", or needs guidance on Hugo/Blowfish configuration and features.

Invocation

How this skill is triggered — by the user, by Claude, or both

Slash command

/hugo:knowledge

User invocable

Model invocable

Inline context

Default effort

Context Preview

The summary Claude sees in its skill listing — used to decide when to auto-load this skill

Knowledge reference skill for Hugo and Blowfish theme configuration.

SKILL.md

151 lines · ~956 tokens

Stats

LanguageMakefile

Parent stars0

MaintenanceGood

Last CommitMay 4, 2026

Actions

View Source View Plugin View on GitHub View README

Stats

Actions

Hugo + Blowfish Reference

Knowledge reference skill for Hugo and Blowfish theme configuration.

Blowfish Shortcodes

Shortcode	Usage	Purpose
`alert`	`{{</* alert "info" />}}text{{</ /alert */>}}`	Admonition boxes (info, warning, danger, tip)
`badge`	`{{</* badge />}}text{{</ /badge */>}}`	Inline badges
`button`	`{{</* button href="url" />}}text{{</ /button */>}}`	Call-to-action buttons
`figure`	`{{</* figure src="img.jpg" alt="desc" */>}}`	Enhanced image with caption
`gallery`	`{{</* gallery */>}}`	Image gallery
`icon`	`{{</* icon "github" */>}}`	Inline icons
`katex`	`{{</* katex */>}}`	LaTeX math rendering
`lead`	`{{</* lead />}}text{{</ /lead */>}}`	Lead paragraph styling
`mermaid`	Fenced code block with `mermaid` language	Diagrams (auto-rendered)
`timeline`	`{{</* timeline */>}}`	Timeline display
`typeit`	`{{</* typeit */>}}`	Typewriter animation

Key Blowfish Configuration

params.yaml

colorScheme: "ocean"        # or: blowfish, avocado, fire, congo, slate, etc.
defaultAppearance: "light"  # or "dark"
autoSwitchAppearance: true  # Follow system preference

article:
  showReadingTime: true
  showWordCount: true
  showDate: true
  showAuthor: true
  showBreadcrumbs: true
  showTableOfContents: true
  showRelatedContent: true

homepage:
  layout: "profile"         # or: page, hero, card, background
  showRecent: true
  recentLimit: 5

footer:
  showCopyright: true
  showThemeAttribution: false

list:
  showBreadcrumbs: true
  showTableOfContents: false
  groupByYear: true

Mermaid Configuration

Mermaid works in Blowfish by default. Use fenced code blocks:

```mermaid
graph LR
    A[Start] --> B[Process]
    B --> C[End]
```

No additional configuration needed. Blowfish loads Mermaid.js on demand.

Dark Mode

Blowfish supports automatic dark/light mode switching. Configure in params.yaml:

defaultAppearance: "light"
autoSwitchAppearance: true

Users can toggle manually via the theme switcher in the navigation.

Taxonomy Configuration

Hugo taxonomies for blog organization:

# config.yaml
taxonomies:
  tag: tags
  category: categories
  series: series

Series support enables multi-part post grouping.

Custom Layouts

Blowfish supports layout extension without modifying the theme:

layouts/partials/extend-head.html: Add to <head> (analytics, fonts)
layouts/partials/extend-footer.html: Add before </body>
layouts/partials/extend-article-link.html: Customize article list items

Hugo Frontmatter (Blowfish-enhanced)

---
title: "Post Title"
date: 2026-04-03
draft: false
description: "SEO description"
tags: ["kubernetes", "docker"]
categories: ["tutorials"]
series: ["Container Deep Dive"]
slug: "custom-slug"
showReadingTime: true
showWordCount: true
showTableOfContents: true
showRelatedContent: true
license: "CC BY 4.0"
---

Common Operations

Add Analytics (Plausible)

In layouts/partials/extend-head.html:

<script defer data-domain="<your-domain>" src="<plausible-url>/js/script.js"></script>