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