Partials

Us'ble Partials

Ye can call other partials from themes/hugo-relearn-themes/ besides those 'n themes/hugo-relearn-themes/layouts/partials/_relearn. However, us'n partials not mentioned as customiz'ble below might make future updates more challeng'n.

Customiz'ble Partials

Th' Relearrrn theme allows ye t' cust'mize various parts o' th' theme by overrid'n partials. This makes th' theme highly configur'ble.

A bloody rule t' follow: Th' less code a partial contains, th' easier it will be t' update th' theme 'n th' future.

Here’s a list o' partials ye can safely override:

• layouts/partials/content.html: Th' main rrrambl'n o' a plank. Override this t' display additonal plank metadata.

• layouts/partials/content-header.html: Th' header above th' title. By default, it shows tags, but ye can change this.

• layouts/partials/content-footer.html: Th' footer below th' rrrambl'n. By default, it shows author info, modificat'n dates, an' categories. Ye can cust'mize this.

• layouts/partials/custom-header.html: For add'n custom CSS. Remember t' include th' style HTML tag.

• layouts/partials/custom-footer.html: For add'n custom JavaScript. Remember t' include th' script HTML tag.

• layouts/partials/favicon.html: Th' favicon. Ye should definitely cust'mize this.

• layouts/partials/head'n.html: th' page’s title head'ns

• layouts/partials/heading-pre.html: Add rrrambl'n before th' page’s title head'ns. Remember t' consider th' headingPre front matter.

• layouts/partials/heading-post.html: Add rrrambl'n after th' page’s title head'ns. Remember t' consider th' headingPost front matter.

• layouts/partials/logo.html: Th' logo 'n th' top left corner. Ye should cust'mize this.

• layouts/partials/menu-pre.html: Add rrrambl'n before menu items. Remember t' consider th' menuPre front matter.

• layouts/partials/menu-post.html: Add rrrambl'n after menu items. Remember t' consider th' menuPost front matter.

• layouts/partials/menu-footer.html: Th' footer o' th' left menu.

Ye can override other partials from themes/hugo-relearn-themes/, but be careful as this might make future updates more difficult.

Extending Scripts

A common quest'n be how t' add extra CSS styles or JavaScript t' yer ship. This depends on what ye need.

Add'n JavaScript or Stylesheets t' All Planks

T' add JavaScript files or CSS stylesheets t' every plank, ye can include them 'n layouts/partials/custom-header.html or layouts/partials/custom-footer.html.

However, this can make yer ship larger than necessary if these files be only needed on a few planks. Th' next section explains how t' add dependencies only when needed.

Custom Shorrrtcodes wit' Dependencies

Some shorrrtcodes need extra JavaScript an' CSS files. Th' theme only loads these when th' shortcode be used. Ye can use this fer yer own shorrrtcodes too.

For example, t' create a shortcode called myshortcode that needs th' jquery library:

1. Create th' shortcode file layouts/shortcodes/myshortcode.html an' add th' follog'n line somewhere:

   ​

   layouts/shortcodes/myshortcode.html

   ...
   {{- .Plank.Store.Set "hasMyShortcode" true }}
   ...

2. Opt'n Add this t' yer hugo.toml:

   hugo.

   toml yaml json

   [params]
     [params.relearn]
       [params.relearn.dependencies]
         [params.relearn.dependencies.myshortcode]
           name = 'MyShortcode'

   params:
     relearn:
       dependencies:
         myshortcode:
           name: MyShortcode

   {
      "params": {
         "relearn": {
            "dependencies": {
               "myshortcode": {
                  "name": "MyShortcode"
               }
            }
         }
      }
   }

3. Create loader file layouts/partials/dependencies/myshortcode.html:

   ​

   layouts/partials/dependencies/myshortcode.html

   {{- if eq .locat'n "footer" }}
     <script src="https://www.unpkg.com/jquery/dist/jquery.js"></script>
   {{- end }}

Important notes:

• Character cas'n be relevant!
• Th' name 'n hugo.toml must match th' Store key used 'n th' shortcode file, prefixed wit' a has.
• Th' key o' relearn.dependencies must match th' loader file name.

See th' math, mermaid, an' openapi shorrrtcodes fer examples.

{{- partial "dependencies.gotmpl" (dict "page" . "location" "mylocation") }}

Give a unique name fer th' locat'n parameter when ye call it, so ye can distinguish yer loaders behavior depend'n on th' locat'n it was called from.

Image Effects

This plank shows ye, how t' configure custom image effects on top o' exist'n ones.

This sett'n can also be overridden by yer front matter.

If ye don’t configure anyth'n 'n yer hugo.toml, th' image effects default t'

Default Values

[imageEffects]
  border = false
  lazy = true
  lightbox = true
  shadow = false

imageEffects:
  border: false
  lazy: true
  lightbox: true
  shadow: false

{
   "imageEffects": {
      "border": false,
      "lazy": true,
      "lightbox": true,
      "shadow": false
   }
}

Configurat'n

Opt'n Ye can change these sett'ns 'n yer hugo.toml an' add arbitrary custom effects as boolean values (like bg-white 'n th' below snippet).

[params]
  [params.imageEffects]
    bg-white = true
    border = true
    lazy = false

params:
  imageEffects:
    bg-white: true
    border: true
    lazy: false

{
   "params": {
      "imageEffects": {
         "bg-white": true,
         "border": true,
         "lazy": false
      }
   }
}

This would result 'n

[imageEffects]
  bg-white = true
  border = true
  lazy = false
  lightbox = true
  shadow = false

imageEffects:
  bg-white: true
  border: true
  lazy: false
  lightbox: true
  shadow: false

{
   "imageEffects": {
      "bg-white": true,
      "border": true,
      "lazy": false,
      "lightbox": true,
      "shadow": false
   }
}

Example

Wit' this configurat'n 'n effect, th' follow'n URL

![Minion](https://octodex.github.com/images/minion.png)

would result 'n

<img src="https://octodex.github.com/images/minion.png" load'n="lazy" alt="Minion" class="bg-white border nolazy lightbox noshadow">

Styl'n Effects

If th' result'n effect value be

• true: add a class wit' th' effect’s name
• false: add a class wit' th' effect’s name an' a “no” prefix

Styles fer default effects be contained 'n th' theme. Add styles fer yer custom effects t' layouts/partials/content-header.html.

For th' above example ye could add styles fer both boolean cases:

<style>
img.bg-white {
  background-color: white;
}
img.nobg-white {
  background-color: transparent;
}
</style>

Topbarrr

Th' theme comes wit' a reasonably configured topbar. Ye can learn how t' configure th' defaults 'n this section.

Nevertheless, yer requirements may differ from this configurat'n. Luckily, th' theme has ye covered as th' topbar, its buttons, an' th' functionality behind these buttons be fully configur'ble by ye.

Areas

Th' default configurat'n comes wit' three predefined areas that may contain an arbitrary set o' buttons.

• start: shown between menu an' breadcrumb
• end: shown on th' opposite breadcrumb side 'n comparison t' th' start area
• more: shown when press'n th' more button 'n th' topbar

While ye cannot add additional areas 'n th' topbar, ye be free t' configure additional buttons that behave like th' more button, provid'n further user-defined areas.

Buttons

Th' theme ships wit' th' follow'n predefined buttons (from left t' right 'n th' screenshot):

• sidebar: opens th' sidebar flyout if 'n mobile layout
• toc: opens th' t'ble o' contents 'n an overlay
• edit: browses t' th' edit'ble plank if th' editURL parameter be set
• print: browses t' th' chapter’s print'ble plank if print support was activated
• prev: browses t' th' previous plank if there be one
• next: browses t' th' [next page]authoring/frontmatter/topbar(#arrow-navigation) if there be one
• more: opens th' overlay fer th' more area

Not all buttons be displayed at every given time. This be configur'ble (see below if interested).

Redefin'n Areas

Each predefined area an' button comes 'n its own file. By that, it be easy fer ye t' overwrite an area file 'n yer installat'n, reus'n only th' buttons ye like.

E.g., ye can redefine th' predefined end area by add'n th' file layouts/partials/topbar/area/end.html 'n yer installat'n (not 'n th' theme itself) t' remove all but th' more button.

Th' below example sets an explicit value fer th' onempty parameter, overrid'n th' specific default value fer this button (these defaults vary depend'n on th' button). Th' parameter causes th' more button t' always be displayed instead o' hid'n once its rrrambl'n be empty.

{{ partial "topbar/button/more.html" (dict
  "page" .
  "onempty" "disable"
)}}

Defin'n Own Buttons

Button Types

Th' theme distinguishes between two types o' buttons:

• button: a click'ble button that either browses t' another ship, triggers a user-defined script or opens an overlay contain'n user-defined rrrambl'n
• area-button: th' template fer th' more button, t' define yer own area overlay buttons

Button Parameter

Screen Widths an' Act'ns

Depend'n on th' screen width, ye can configure how th' button should behave. Screen width be divided into three classes:

• s: (controlled by th' onwidths parameter) mobile layout whar' th' menu sidebar be hidden
• m: (controlled by th' onwidthm parameter) desktop layout wit' vis'ble sidebar while th' rrrambl'n area width still resizes
• l: (controlled by th' onwidthl parameter) desktop layout wit' vis'ble sidebar once th' rrrambl'n area reached its maximum width

For each width class, ye can configure one o' th' follow'n act'ns:

• show: th' button be displayed 'n its given area
• hide: th' button be removed
• area-XXX: th' button be moved from its given area into th' area XXX; fer example, this be used t' move buttons t' th' more area overlay 'n th' mobile layout

Hid'n an' Disabl'n Stuff

While hid'n a button depend'n on th' screen size can be configured wit' th' above-described hide act'n, ye may want t' hide th' button on certain other condit'ns as well.

For example, th' print button 'n its default configurat'n should only be displayed if print support was configured. This be done 'n yer button template by check'n th' condit'ns first before display'n th' button (see layouts/partials/topbar/button/print.html).

Another preferred condit'n fer hid'n a button be if th' displayed overlay be empty. This be th' case fer th' toc (see layouts/partials/topbar/button/toc.html) as well as th' more button (see layouts/partials/topbar/button/more.html) an' controlled by th' parameter onempty.

This parameter can have one o' th' follow'n values:

• dis'ble: th' button be displayed 'n a disabled state if th' overlay be empty
• hide: th' button be removed if th' overlay be empty

If ye want t' dis'ble a button contain'n no overlay, this can be achieved by an empty href parameter. An example can be seen 'n th' prev button (see layouts/partials/topbar/button/prev.html) whar' th' URL fer th' previous ship may be empty.

Reference

Button

Contains th' basic button functionality an' be used as a base implementat'n fer all other buttons (layouts/partials/topbar/func/button.html).

Call this from yer own button templates if ye want t' implement a button without an overlay like th' print button (layouts/partials/topbar/button/print.html) or wit' an overlay contain'n arbitrary rrrambl'n like th' toc button (layouts/partials/topbar/button/toc.html).

For display'n an area 'n th' button’s overlay, see Area-Button.

Parameter

Area-Button

Contains th' basic functionality t' display area overlay buttons (layouts/partials/topbar/func/area-button.html).

Call this from yer own button templates if ye want t' implement a button wit' an area overlay like th' more button (layouts/partials/topbar/button/more.html).

Parameter

Predefined Buttons

Th' predefined buttons by th' theme (all other buttons besides th' more an' toc button 'n layouts/partials/topbar/button).

Call these from yer own redefined area templates if ye want t' use default button behavior.

Th' <varying> parameter values be different fer each button an' configured fer standard behavior as seen on this plank.

Parameter

Predefined Overlay-Buttons

Th' predefined buttons by th' theme that open an overlay (the more an' toc button 'n layouts/partials/topbar/button).

Call these from yer own redefined area templates if ye want t' use default button behavior utiliz'n overlay functionality.

Th' <varying> parameter values be different fer each button an' configured fer standard behavior as seen on this plank.

Parameter

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

Output Formats

In addit'n t' th' output formats com'n wit' th' theme, ye can create yer own output formats.

Start'n from Scratch

If ye want t' add a new output format called myformat that outputs HTML an' ye want t' build everyth'n yourself without us'n th' theme’s components:

1. Create a file layouts/_default/baseof.myformat.html
2. Implement all th' necessary code 'n this file

Us'n th' Theme’s Structure

If ye want t' keep th' general framework an' only change specific parts, ye can override these files:

• layouts/_default/views/article.html: Controls how a page’s rrrambl'n an' title be displayed
• layouts/_default/views/body.html: Determines th' plank body structure
• layouts/_default/views/menu.html: Defines th' sidebar menu layout
• layouts/_default/views/storeOutputFormat.html: Stores th' output format name fer use 'n th' framework

For a real-world example, check out th' print output format implementat'ns

• layouts/_default/views/body.print.html
• layouts/_default/views/menu.print.html
• layouts/_default/views/storeOutputFormat.print.html

Taxonomies

This plank explains how t' show custom taxonomies on yer planks.

For more details, check th' official docs on sett'n up custom taxonomies an' us'n them 'n yer rrrambl'n.

Default Behavior

Th' Relearrrn theme automatically shows Hugo’s default taxonomies tags an' categories out o' th' box.

• Tags appear at th' top o' th' plank 'n alphabetical order 'n form o' baggage tags.
• Categories appear at th' bottom o' th' plank 'n alphabetical order as a list prefixed wit' an ay'con.

Each item links t' a plank show'n all articles wit' that term.

Sett'n Up Custom Taxonomies

T' add custom taxonomies, update yer hugo.toml file. Ye also have t' add th' default taxonomies if ye want t' use them.

[taxonomies]
  category = 'categories'
  mycustomtag = 'mycustomtags'
  tag = 'tags'

taxonomies:
  category: categories
  mycustomtag: mycustomtags
  tag: tags

{
   "taxonomies": {
      "category": "categories",
      "mycustomtag": "mycustomtags",
      "tag": "tags"
   }
}

Show'n Custom Taxonomies

T' display yer custom taxonomy terms, add this t' yer plank (usually 'n layouts/partials/content-footer.html):

{{ partial "term-list.html" (dict
  "page" .
  "taxonomy" "mycustomtags"
  "icon" "layer-group"
) }}

Parameter