Home on Darkatse

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.,

A Plain Markdown Post

Sun, 14 Feb 2016 00:00:00 +0000

Sample Text

Third-level header

Fourth-level header

A paragraph (with a footnote):

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. 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.¹

Lorem Ipsum

Thu, 23 Jul 2015 00:00:00 +0000

Quisque mattis volutpat lorem vitae feugiat. Praesent porta est quis porta imperdiet. Aenean porta, mi non cursus volutpat, mi est mollis libero, id suscipit orci urna a augue. In fringilla euismod lacus, vitae tristique massa ultricies vitae. Mauris accumsan ligula tristique, viverra nulla sed, porta sapien. Vestibulum facilisis nec nisl blandit convallis. Maecenas venenatis porta malesuada. Ut ac erat tortor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla sodales quam sit amet tincidunt egestas. In et turpis at orci vestibulum ullamcorper. Aliquam sed ante libero. Sed hendrerit arcu lacus.

About Hugo Paged

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

I immediately loved the design of the paged.js website when I first saw it a couple of years ago.¹ I have published a few books before, so the crop marks on the website caught my attention first, which gave me a familiar feel of printed books. The second thing that I appreciated was the rotated floral heart bullet behind the title of each page, i.e.,

❧

So I wrote a Hugo theme that mimics the style of the paged.js website. I tried not to look at its HTML/CSS source code, but I had to read the source to figure out:

Search

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

The searching is performed via fuse.js. For the search keywords, white spaces act as the AND operator, and | acts as the OR operator. To match an exact phrase, double quote it. For example, R Markdown matches articles that contain both R and Markdown, R | Markdown matches articles that contain R or Markdown, and "R Markdown" matches articles that contain the whole phrase R Markdown.