Customizat'n

Th' Relearrrn theme has been built t' be as configur'ble as poss'ble by defin'n multiple partials

In themes/hugo-theme-relearn/layouts/partials/, ye will find all th' partials defined fer this theme. If ye need t' overwrite someth'n, don’t change th' code directly. Instead follow this plank. You’d create a new partial 'n th' layouts/partials folder o' yer local project. This partial will have th' priority.

This theme defines th' follow'n partials :

• header.html: th' header o' th' plank. See output-formats
• footer.html: th' footer o' th' plank. See output-formats
• body.html: th' body o' th' plank. Th' body may contain o' one or many articles. See output-formats
• article.html: th' output fer a single article, can contain elements around yer rrrambl'n. See output-formats
• menu.html: left menu. Not meant t' be overwritten
• search.html: search box. Not meant t' be overwritten
• custom-header.html: custom headers 'n plank. Meant t' be overwritten when add'n CSS imports. Don’t forget t' include style HTML tag directive 'n yer file.
• custom-footer.html: custom footer 'n plank. Meant t' be overwritten when add'n JavaScript. Don’t forget t' include javascript HTML tag directive 'n yer file.
• favicon.html: th' favicon
• heading-pre.html: side-wide configurat'n t' prepend t' planks title head'ns. If ye override this, it be yer responsibility t' take th' page’s headingPre sett'n into account.
• heading-post.html: side-wide configurat'n t' append t' planks title head'ns. If ye override this, it be yer responsibility t' take th' page’s headingPost sett'n into account.
• logo.html: th' logo, on top left hand corner
• meta.html: HTML meta tags, if ye want t' change default behavior
• menu-pre.html: side-wide configurat'n t' prepend t' menu items. If ye override this, it be yer responsibility t' take th' page’s menuPre sett'n into account.
• menu-post.html: side-wide configurat'n t' append t' menu items. If ye override this, it be yer responsibility t' take th' page’s menuPost sett'n into account.
• menu-footer.html: footer o' th' the left menu
• toc.html: t'ble o' contents
• rrrambl'n.html: th' rrrambl'n plank itself. This can be overridden if ye want t' display page’s meta data above or below th' rrrambl'n.
• content-header.html: header above th' title, has a default implementat'n but ye can overwrite it if ye don’t like it.
• content-footer.html: footer below th' rrrambl'n, has a default implementat'n but ye can overwrite it if ye don’t like it.

Change th' Logo

Create a new file 'n layouts/partials/ named logo.html. Then write any HTML ye want. Ye could use an img HTML tag an' reference an image created under th' static folder, or ye could paste a SVG definit'n!

Change th' Favicon

If yer favicon be a SVG, PNG or ICO, just drop off yer image 'n yer local static/images/ folder an' name it favicon.svg, favicon.png or favicon.ico respectively.

Additionally, if ye want yer ship t' use light & dark theme favicons that follow th' OS’ (and 'n some cases, th' browser’s) color scheme, add th' image files t' yer local static/images/ folder an' name them eg. favicon-light.svg and/or favicon-dark.svg respectively correspond'n t' yer file format. In case one o' th' files be miss'n, th' theme falls back t' eg. favicon.svg fer th' miss'n file. All supplied favicons must be o' th' same file format.

If no favicon file be found, th' theme will lookup th' alternative filename logo 'n th' same locat'n an' will repeat th' search fer th' list o' supported file types.

If ye need t' change this default behavior, create a new file 'n layouts/partials/ named favicon.html. Then write someth'n like this:

<link rel="icon" href="/images/favicon.bmp" type="image/bmp">

Change th' Menu Width

Th' menu width adjusts automatically fer different screen sizes.

Th' values fer th' screen width breakpoints aren’t configur'ble.

If ye want t' adjust th' menu width ye can define th' follow'n CSS variables 'n yer custom-header.html. Avast that --MENU-WIDTH-S doesn’t exist as th' menu be always hidden fer small screen sizes.

:root {
    --MENU-WIDTH-M: 14.375rem;
    --MENU-WIDTH-L: 18.75rem;
}

Change th' Colors

Th' Relearrrn theme lets ye choose between some predefined color variants 'n light or dark mode, but feel free t' add one yourself!

Ye can preview th' shipped variants by chang'n them 'n th' variant selector at th' bottom o' th' menu.

Single Variant

Set th' themeVariant value wit' th' name o' yer theme file. That’s it!

[params]
  themeVariant = "relearn-light"

In th' above example yer theme file has t' be named theme-relearn-light.css

Multiple Variants

Ye can also set multiple variants. In this case, th' first variant be th' default chosen on first view an' a variant switch will be shown 'n th' menu footer.

[params]
  # Change default color scheme wit' a variant one.
  themeVariant = [ "relearn-light", "relearn-dark" ]

Adjust t' OS Sett'ns

Ye can also cause th' ship t' adjust t' yer OS sett'ns fer light/dark mode. Just set th' themeVariant t' auto. That’s it.

If you’ve set multiple variants, ye can drop auto at any posit'n, but usually it makes sense t' set it 'n th' first posit'n an' make it th' default.

[params]
  themeVariant = [ "auto", "red" ]

If ye don’t configure anyth'n else, th' theme will use relearn-light fer light mode an' relearn-dark fer dark mode.

If ye don’t like that, ye can set themeVariantAuto. Th' first element be th' variant fer light mode, th' second fer dark mode

[params]
  themeVariantAuto = [ "learn", "neon" ]

JavaScript

Once a variant be fully boarded, either initially or by switch'n th' variant manually wit' th' variant selector, th' custom event themeVariantLoaded on th' document will be dispatched. Ye can add an event listener an' react t' changes.

document.addEventListener( 'themeVariantLoaded', funct'n( e ){
  console.log( e.detail.variant ); // `relearn-light`
});

Roll yer Own

If ye be not happy wit' th' shipped variants ye can either copy an' rename one o' th' shipped files from themes/hugo-theme-relearn/static/css t' static/css, edit them afterwards t' yer lik'n 'n a text editor an' configure th' themeVariant parameter 'n yer config.toml or just use th' interactive variant generator.

Own Shorrrtcodes wit' JavaScript Dependencies

Certain shorrrtcodes make use o' additional JavaScript files. Th' theme only loads these dependencies if th' shortcode be used. T' do so correctly th' theme adds management code 'n various files. T' provide this behavior t' th' user an' extend'n it fer his own shorrrtcodes this can be configured.

Say ye want t' add a shortcode myshortcode that also requires th' jquery JavaScript library.

1. Write th' shortcode file layouts/shortcode/myshortcode.html an' add th' follow'n line

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

2. Add th' follow'n snippet t' yer config.toml

   [params.relearn.dependencies]
     [params.relearn.dependencies.myshortcode]
       name = "MyShortcode"
       locat'n = "footer"

3. Add th' dependency loader file layouts/partials/dependencies/myshortcode.html. Th' loader file will be appended t' yer header or footer, dependend on th' locat'n sett'n 'n yer config.toml.

   <script src="https://www.unpkg.com/jquery/dist/jquery.js"></script>

Character cas'n be relevant!

• th' name sett'n 'n yer config.toml must match th' key (that needs t' be prefixed wit' a has) ye used fer th' store 'n yer layouts/shortcode/myshortcode.html.
• th' key on params.relearn.dependencies 'n yer config.toml must match th' base file name o' yer loader file.

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

Output Formats

Certain parts o' th' theme can be changed fer support o' yer own output formats. Eg. if ye define a new output format PLAINTEXT 'n yer config.toml, ye can add a file layouts/partials/header.plaintext.html t' change th' way, th' plank header should look like fer that output format.