Pixel

简体中文 · Live site

A Hugo theme for long notes and small archives. Its visual language comes from old screens and light novels: bitmap type, numbered chapters, thin rules, and a restrained red accent. The page still reads like a page.

Reading first

The article column is held to a comfortable measure. CH and SCENE numbers follow the document structure and restart inside each chapter. On wide screens, the index can be moved and resized like a note; when space runs out, it folds back into the article.

Included

• Automatic light and dark modes, with a full-width mobile layout
• CJK-first pixel typography, syntax highlighting, KaTeX, and Mermaid
• Movable and resizable table of contents with an inline fallback
• Image zoom, callouts, collapsible boxes, and media shortcodes

Parameters and copy-ready examples for every content component are collected in the shortcode reference.

Use

Add the theme:

git submodule add https://github.com/AO2233/pixel.git themes/pixel

Pixel requires Hugo 0.146.0 or later (the extended edition is not required). Then select it in your Hugo configuration:

theme: pixel

The included hugo.yaml is a working reference for Goldmark, code highlighting, the table of contents, menus, and theme parameters.

Social icons

Footer icons are inlined from assets/icons/social/ at build time. Choose a filename from the bundled icon catalog and use it as the icon value in params.social. Icons inherit the footer color in both light and dark mode. Add another SVG to the same directory to extend the set without adding client-side JavaScript.

Theme structure

assets/css/          Theme styles, bundled into one fingerprinted file
  tokens.css         Colors, type scale and spacing; dark mode overrides tokens only
  base / layout / headings / article / media / code
  components/        TOC, post list, pagination, collapsible, callout, spoiler
  pages/ vendor/ effects/
assets/js/main.js    Entry point, bundled with Hugo's esbuild (js.Build)
assets/js/modules/   One module per feature (TOC, embeds, image reveal, ...)
layouts/             Hugo ≥ 0.146 layout tree (_partials, _shortcodes, _markup)
static/vendor/       Third-party libraries, loaded only on pages that need them

The cascade order of the CSS bundle is listed in layouts/_partials/head/styles.html. Builds with hugo (production) minify and fingerprint both bundles; hugo server serves them unminified for debugging.

License and credits

Pixel's original theme code is released under the MIT License. The theme fonts in static/fonts/ are not covered by that license, and this repository grants no public license for them. Read the font notice before publishing or redistributing the theme.

The JavaScript libraries used by the theme retain their own licenses. Their versions, upstream projects, and acknowledgements are listed in Third-party notices.