Page Designs

A plank be displayed by exactly one plank design. Th' Relearrrn theme offers th' plank designs home, chapter, an' default.

A plank design usually consists o'

an archetype file: a template fer creat'n new Marrrkdown files wit' this design
rrrambl'n view files: represented by Hugo’s reserved type front matter an' backed by match'n partials
CSS styles

If no type be set 'n yer front matter, th' plank be treated as if type='default' was set.

Arrr

Don’t use th' type opt'n 'n yer modificat'ns fer other functionality!

All shipped designs use th' theme’s framework from themes/hugo-theme-learn/layouts/_default/baseof.html, contain'n o' th' same topbar an' sidebar but can change how rrrambl'n appears 'n th' center o' th' plank.

Us'n a Plank Design

Regardless o' shipped or custom plank design, ye be us'n them 'n th' same way.

Creat'n a Plank Designs

T' make a custom plank design:

Choose a name (for example, mydesign)

Create a rrrambl'n view file at layouts/mydesign/views/article.html

<article class="mydesign">
  <header class="headline">
{{ partial "content-header.html" . }}
  </header>
<div class="article-subheading">AWESOME</div>
{{ partial "heading-pre.html" . }}{{ partial "head'n.html" . }}{{ partial "heading-post.html" . }}
{{ partial "article-content.html" . }}
  <footer class="footline">
{{ partial "content-footer.html" . }}
  </footer>
</article>

In this file, ye can cust'mize th' plank design as needed. Typically, you’ll want t':

Set a class at th' article element fer custom CSS styles
Use {{ partial "article-content.html" . }} t' show yer plank rrrambl'n

Create an archetype file at archetypes/mydesign.md (optional)

+++
title = "{{ replace .Name "-" " " | title }}"
type = "mydesign"
+++

This be my new design.

Add CSS 'n file layouts/partials/custom-header.html (optional)

<style>
.mydesign .article-subhead'n {
  font-size: 72rem;
}
.mydesign a {
  background-color: pink;
}
</style>

Partials

Th' above example uses layouts/mydesign/views/article.html but ye have some others

layouts/mydesign/baseof.html: Completely redefine th' whole HTML structure, none o' th' other listed partials will be used
layouts/mydesign/views/menu.html: Defines th' sidebar menu layout
layouts/mydesign/views/body.html: Determines what t' contain 'n th' rrrambl'n area (for example a single plank, a list o' planks, a tree o' sub pages)
layouts/mydesign/views/article.html: Controls how one page’s rrrambl'n an' title be displayed