Theme extension

Extending a theme

yCatDev опубликованно
2 min, 205 слов

Категории: Documentation

Теги: theme zola

DeepThought theme can be extended with usual Zola extension mechanisms.

Replacing a template

As any theme, all DeepThought templates can be replaced to override a whole template.

Blocks to extend

If you don't want to replace a whole DeepThought template, but override parts of it, you can extend the template and redefine some specific blocks.

Here is a WIP list of blocks in DeepThought templates to override:

Template location1BlockDescription
base.htmluser_custom_stylesheetCustom stylesheet (css or saas) to fine-tune DeepThought styling
base.htmltitleCustomize default page's titles
base.htmlanalyticsProvide your own analytics script. Google Analytics by default
base.htmlheaderCustomize page's header
base.htmlcontentCustomize page's content
base.htmlsearchProvide your own search box partial template
base.htmlpaginationOverride default pagination
base.htmlcommentProvide your own pagination partial template
base.htmlother_lang_search_jsProvide custom search behavior, eg. to use languages others than English
base.htmluser_custom_jsProvide any custom JS scripts at the end of the body of the page
1

Relative to the templates directory

const menuBarHeight = document.querySelector("nav.navbar").clientHeight; const tocItems = document.querySelectorAll(".toc"); const navSections = new Array(tocItems.length); tocItems.forEach((el, i) => { let id = el.getAttribute("id").substring(5); navSections[i] = document.getElementById(id); }) function isVisible(tocIndex) { const current = navSections[tocIndex]; const next = tocIndex < tocItems.length - 1 ? navSections[tocIndex + 1] : document.querySelectorAll("section.section").item(1); const c = current.getBoundingClientRect(); const n = next.getBoundingClientRect(); const h = (window.innerHeight || document.documentElement.clientHeight); return (c.top <= h) && (n.top - menuBarHeight >= 0); } function activateIfVisible() { for (b = true, i = 0; i < tocItems.length; i++) { if (b && isVisible(i)) { tocItems[i].classList.add('is-active'); b = false; } else tocItems[i].classList.remove('is-active'); } } var isTicking = null; window.addEventListener('scroll', () => { if (!isTicking) { window.requestAnimationFrame(() => { activateIfVisible(); isTicking = false; }); isTicking = true; } }, false);