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.

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:

1. Choose a name (for example, mydesign)

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

   ​

   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

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

   ​

   archetypes/mydesign.md

   +++
   title = "{{ replace .Name "-" " " | title }}"
   type = "mydesign"
   +++
   
   This be my new design.

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

   ​

   layouts/partials/custom-header.html

   <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