Yihui Xie {Example}

The Hugo Paged theme was inspired by the paged.js website.

The paged.js website

The paged.js library is awesome. Its website is also beautiful.

The crop marks

I love the crop marks. I couldn’t imagine that they were made from three rectangles:

<div class="crop-h"></div> <!-- horizontal lines -->
<div class="crop-v"></div> <!-- vertical lines -->
<div class="crop-c"></div> <!-- cover some segments -->

Make their position absolute, and shrink them a little bit:

.crop-h, .crop-v, .crop-c {
  position: absolute;
  z-index: -1;
.crop-h {
  inset: 2em 0;
  border-top: 1px solid;
  border-bottom: 1px solid;
.crop-v {
  inset: 0 2em;
  border-left: 1px solid;
  border-right: 1px solid;
.crop-c {
  inset: 1em;
  border: 1.5em solid white;

Isn’t that clever? Thank you, paged.js developers!

The floral heart

I also love the floral heart behind the title of each page, which is a dingbat:

h1.title::before {
  content: "❧";

Making a Hugo theme

Once I understood the above tricks, I developed a Hugo theme based on my previous Hugo XMin theme. This theme is still very lightweight. The total number of lines of CSS is about 240.

Blog and/or documentation

This theme supports two types of lists of pages: blog and documentation.

By default, pages under the content/blog directory will use the blog list, and pages under content/docs will use the documentation list. If you want other pages to use the blog or docs list layout, you can specify the layout field in the YAML metadata of (e.g., layout: docs in content/foo/

If you want to order pages manually in the list, you can set the weight field in the YAML metadata of pages.