Customizat'n

Arrr! ☠ Pirrrates ☠

Fello' pirrates, be awarrre some featurrres may not work fer us in this trrranslat'n. Like table of rrramblings, some Merrrmaids and stuff.

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 :

rrrambl'n.html: th' rrrambl'n plank itself. This can be overridden if ye wan’t t' display page’s meta data above or below th' rrrambl'n.
header.html: th' header o' th' rrrambl'n plank (contains th' breadcrumbs). 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
footer.html: th' footer o' th' rrrambl'n plank (contains th' arrows). Not meant t' be overwritten
custom-footer.html: custom footer 'n plank. Meant t' be overwritten when add'n Javacript. Don’t forget t' include javascript HTML tag directive 'n yer file
favicon.html: th' favicon
logo.html: th' logo, on top left hand corner
meta.html: HTML meta tags, if ye want t' change default behavior
menu.html: left menu. Not meant t' be overwritten
menu-pre.html: side-wide configurat'n t' prepend t' menu items. If ye override this, it be yer responsiblity t' take th' page’s pre sett'n into account.
menu-post.html: side-wide configurat'n t' append t' menu items. If ye override this, it be yer responsiblity t' take th' page’s post sett'n into account.
menu-footer.html: footer o' th' the left menu
search.html: search box. Not meant t' be overwritten
toc.html: t'ble o' contents

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!

Avast

Th' size o' th' logo will adapt automatically

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

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' 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 exaple 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 choosen 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" ]

Smarrrt Arrrse

If ye want t' switch th' rules highlightn'n theme together wit' yer color variant, generate a rules highlight'n stylesheet an' configure yer installat'n accord'n t' Hugo’s documentat'n, an' @import this stylesheet 'n yer color variant stylesheet. For an example, take a look into theme-relearn-light.css an' config.toml o' th' exampleSite.

Roll yer own

If ye be not happy wit' th' shipped variants ye can either copy one o' th' shipped files, edit them 'n a text editor an' configure th' themeVariant parameter 'n yer config.toml or just use th' interactive variant generator.