Documentation on A Hugo theme inspired by paged.js

Introduction

Mon, 01 Jan 0001 00:00:00 +0000

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:

Getting started

Mon, 01 Jan 0001 00:00:00 +0000

There are two ways to get started with this theme, depending on whether you use R or Hugo.

R users

If you use R, the easiest way to get started is to install the blogdown package, and create a new site with this theme:

install.packages('blogdown')
blogdown::new_site(theme = 'yihui/hugo-paged')

Or you can create a new RStudio blogdown project (if you use RStudio) with the yihui/hugo-paged theme.

Hugo users

Create a new Hugo site with hugo new.
Download this theme from Github and unzip it to the themes/hugo-paged directory.
Move all content of the exampleSite directory in this theme to the root directory of the new site.
Run hugo server and start playing with the new site.

Customization

Mon, 01 Jan 0001 00:00:00 +0000

The more you know, the less real work you will get done. You have been warned.

Site config

In your site config file (hugo.yaml or config.yaml), you can customize some options such as the top menu or footer, which should be straightforward to understand if you take a look at the exampleSite’s config file.

If you want to add a logo to the left of the top navigation bar, you can use the logo parameter, e.g.,