mirror of https://github.com/jpanther/congo.git
121 lines
53 KiB
HTML
121 lines
53 KiB
HTML
<!doctype html><html lang=en-AU dir=ltr class=scroll-smooth data-default-appearance=light data-auto-appearance=true><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta name=theme-color content="rgb(255,255,255)"><title>Content Examples · Congo</title>
|
|
<meta name=title content="Content Examples · Congo"><script type=text/javascript src=/congo/js/appearance.min.022d0ebc3b46a335eb1c7ef79b7f2de143d7cd5156d433638592ef1ce5f8554e.js integrity="sha256-Ai0OvDtGozXrHH73m38t4UPXzVFW1DNjhZLvHOX4VU4="></script><link type=text/css rel=stylesheet href=/congo/css/main.bundle.min.8cd4199ad423a763e2dd42a32c20643d8eb472bc550188be85b60444140826dd.css integrity="sha256-jNQZmtQjp2Pi3UKjLCBkPY60crxVAYi+hbYERBQIJt0="><script defer type=text/javascript id=script-bundle src=/congo/js/main.bundle.min.fba363b244ec92c2d7b9de42d4cebd0b8994fd07279923c5929eb4dc3d055606.js integrity="sha256-+6NjskTsksLXud5C1M69C4mU/QcnmSPFkp603D0FVgY=" data-copy=Copy data-copied=Copied></script><meta name=description content="
|
|
Some examples that demonstrate how content should be created and structured.
|
|
"><link rel=canonical href=https://jpanther.github.io/congo/docs/content-examples/><link rel=apple-touch-icon sizes=180x180 href=/congo/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/congo/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/congo/favicon-16x16.png><link rel=manifest href=/congo/site.webmanifest><meta property="og:title" content="Content Examples"><meta property="og:description" content="Some examples that demonstrate how content should be created and structured."><meta property="og:type" content="article"><meta property="og:url" content="https://jpanther.github.io/congo/docs/content-examples/"><meta property="article:section" content="docs"><meta property="article:published_time" content="2020-08-09T00:00:00+00:00"><meta property="article:modified_time" content="2020-08-09T00:00:00+00:00"><meta name=twitter:card content="summary"><meta name=twitter:title content="Content Examples"><meta name=twitter:description content="Some examples that demonstrate how content should be created and structured."><script type=application/ld+json>{"@context":"https://schema.org","@type":"Article","articleSection":"Documentation","name":"Content Examples","headline":"Content Examples","description":"Some examples that demonstrate how content should be created and structured.","abstract":"It\u0026rsquo;s time to bring everything together with some examples that demonstrate how content should be created and structured.","inLanguage":"en-AU","url":"https:\/\/jpanther.github.io\/congo\/docs\/content-examples\/","author":{"@type":"Person","name":"Congo"},"copyrightYear":"2020","dateCreated":"2020-08-09T00:00:00\u002b00:00","datePublished":"2020-08-09T00:00:00\u002b00:00","dateModified":"2020-08-09T00:00:00\u002b00:00","keywords":["content","example"],"mainEntityOfPage":"true","wordCount":"2000"}</script><meta name=author content="Congo"><link href=https://twitter.com/ rel=me><link href=https://facebook.com/ rel=me><link href=https://linkedin.com/ rel=me><link href=https://youtube.com/ rel=me></head><body class="m-auto flex h-screen max-w-7xl flex-col bg-neutral px-6 text-lg leading-7 text-neutral-900 sm:px-14 md:px-24 lg:px-32 dark:bg-neutral-800 dark:text-neutral"><div id=the-top class="absolute flex self-center"><a class="-translate-y-8 rounded-b-lg bg-primary-200 px-3 py-1 text-sm focus:translate-y-0 dark:bg-neutral-600" href=#main-content><span class="pe-2 font-bold text-primary-600 dark:text-primary-400">↓</span>Skip to main content</a></div><header class="py-6 font-semibold text-neutral-900 print:hidden sm:py-10 dark:text-neutral"><nav class="flex items-start justify-between sm:items-center"><div class="flex flex-row items-center"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" rel=me href=/congo/>Congo</a></div><ul class="flex list-none flex-col text-end sm:flex-row"><li class="group mb-1 sm:mb-0 sm:me-7 sm:last:me-0.5"><a href=/congo/docs/ title><span class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2">Docs</span></a></li><li class="group mb-1 sm:mb-0 sm:me-7 sm:last:me-0.5"><a href=/congo/samples/ title><span class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2">Samples</span></a></li><li class="group mb-1 sm:mb-0 sm:me-7 sm:last:me-0.5"><a href=/congo/users/ title><span class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2">Users</span></a></li><li class="group mb-1 sm:mb-0 sm:me-7 sm:last:me-0.5"><a href=https://github.com/jpanther/congo title target=_blank><span class="group-dark:hover:text-primary-400 transition-colors group-hover:text-primary-600"><span class="icon relative inline-block px-1 align-text-bottom"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentcolor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6.0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6.0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3.0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1.0-6.2-.3-40.4-.3-61.4.0.0-70 15-84.7-29.8.0.0-11.4-29.1-27.8-36.6.0.0-22.9-15.7 1.6-15.4.0.0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5.0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9.0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4.0 33.7-.3 75.4-.3 83.6.0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6.0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9.0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg></span></span></a></li><li class="group mb-1 sm:mb-0 sm:me-7 sm:last:me-0.5"><button id=search-button-1 title="Search (/)">
|
|
<span class="group-dark:hover:text-primary-400 transition-colors group-hover:text-primary-600"><span class="icon relative inline-block px-1 align-text-bottom"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="search" class="svg-inline--fa fa-search fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M505 442.7 405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9.0 208 0S0 93.1.0 208s93.1 208 208 208c48.3.0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9.0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7.0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7.0 128 57.2 128 128 0 70.7-57.2 128-128 128z"/></svg>
|
|
</span></span><span class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"></span></button></li><li class="group mb-1 sm:mb-0 sm:me-7 sm:last:me-0.5"><div class="group relative"><button class="group-dark:hover:text-primary-400 flex w-full items-center justify-end transition-colors group-hover:text-primary-600">
|
|
<span class="icon relative inline-block px-1 align-text-bottom"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="currentcolor" d="M4.545 6.714 4.11 8H3l1.862-5h1.284L8 8H6.833l-.435-1.286H4.545zm1.634-.736L5.5 3.956h-.049l-.679 2.022H6.18z"/><path fill="currentcolor" d="M0 2a2 2 0 012-2h7a2 2 0 012 2v3h3a2 2 0 012 2v7a2 2 0 01-2 2H7a2 2 0 01-2-2v-3H2A2 2 0 010 9V2zm2-1A1 1 0 001 2v7a1 1 0 001 1h7a1 1 0 001-1V2A1 1 0 009 1H2zm7.138 9.995c.193.301.402.583.63.846-.748.575-1.673 1.001-2.768 1.292.178.217.451.635.555.867 1.125-.359 2.08-.844 2.886-1.494.777.665 1.739 1.165 2.93 1.472.133-.254.414-.673.629-.89-1.125-.253-2.057-.694-2.82-1.284.681-.747 1.222-1.651 1.621-2.757H14V8h-3v1.047h.765c-.318.844-.74 1.546-1.272 2.13a6.066 6.066.0 01-.415-.492 1.988 1.988.0 01-.94.31z"/></svg>
|
|
</span><span class=text-sm>EN</span><span class=text-[0.6rem]><span class="icon relative inline-block px-1 align-text-bottom"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3.0l192-192c12.5-12.5 12.5-32.8.0-45.3s-32.8-12.5-45.3.0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3.0s-12.5 32.8.0 45.3l192 192z"/></svg></span></span></button><div class="invisible w-full bg-transparent group-hover:visible"></div><div class="invisible absolute z-50 flex flex-col whitespace-nowrap rounded border border-neutral-300 bg-neutral text-start text-base shadow group-hover:visible ltr:right-0 rtl:left-0 dark:border-neutral-600 dark:bg-neutral-800"><div class="flex flex-grow"><a href=/congo/docs/content-examples/ class="flex w-full items-center justify-between bg-primary-100 px-2 py-1 dark:bg-primary-900">English (Australia)<span class="ms-2 w-6 text-primary-600 dark:text-primary-400"><span class="icon relative inline-block px-1 align-text-bottom"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentcolor" d="M438.6 105.4c12.5 12.5 12.5 32.7.0 45.2l-256 256c-12.5 12.5-32.7 12.5-45.2.0L9.372 278.6c-12.496-12.5-12.496-32.7.0-45.2 12.498-12.5 32.758-12.5 45.258.0L159.1 338.7 393.4 105.4c12.5-12.52 32.7-12.52 45.2.0h0z"/></svg></span></span></a></div><div class="flex flex-grow"><a href=/congo/ja/docs/content-examples/ class="w-full py-1 pe-10 ps-2 decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2">日本語</a></div><div class="flex flex-grow"><a href=/congo/zh-cn/docs/content-examples/ class="w-full py-1 pe-10 ps-2 decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2">简体中文</a></div></div></div></li></ul></nav></header><div class="relative flex grow flex-col"><main id=main-content class=grow><article><header class=max-w-prose><ol class="text-sm text-neutral-500 print:hidden dark:text-neutral-400"><li class="hidden inline"><a class="dark:underline-neutral-600 decoration-neutral-300 hover:underline" href=/congo/>Welcome to Congo! :tada:</a><span class="px-1 text-primary-500">/</span></li><li class=inline><a class="dark:underline-neutral-600 decoration-neutral-300 hover:underline" href=/congo/docs/>Documentation</a><span class="px-1 text-primary-500">/</span></li><li class="hidden inline"><a class="dark:underline-neutral-600 decoration-neutral-300 hover:underline" href=/congo/docs/content-examples/>Content Examples</a><span class="px-1 text-primary-500">/</span></li></ol><h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">Content Examples</h1><div class="mb-12 mt-8 text-base text-neutral-500 print:hidden dark:text-neutral-400"><div class="flex flex-row flex-wrap items-center"><span title="Reading time">10 mins</span><span class="px-2 text-primary-500">·</span>
|
|
<span class=mb-[2px]><a href=https://github.com/jpanther/congo/tree/dev/exampleSite/content/docs/content-examples/index.md class="text-lg hover:text-primary-500" rel="noopener noreferrer" target=_blank title="Edit content"><span class="icon relative inline-block px-1 align-text-bottom"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M490.3 40.4c21.9 21.87 21.9 57.33.0 79.2l-30 30.1-98-97.98 30.1-30.06C414.3-.2135 449.7-.2135 471.6 21.66L490.3 40.4zM172.4 241.7 339.7 74.34l98 97.96L270.3 339.6C264.2 345.8 256.7 350.4 248.4 353.2l-88.8 29.6C150.1 385.6 141.5 383.4 135 376.1 128.6 370.5 126.4 361 129.2 352.4l29.6-88.8C161.6 255.3 166.2 247.8 172.4 241.7v0zM192 63.1c17.7.0 32 15.23 32 32 0 18.6-14.3 32-32 32H96c-17.67.0-32 15.2-32 32V416c0 17.7 14.33 32 32 32H352c17.7.0 32-14.3 32-32V319.1c0-16.8 14.3-32 32-32s32 15.2 32 32V416c0 53-43 96-96 96H96c-53.02.0-96-43-96-96V159.1c0-53 42.98-96 96-96h96z"/></svg></span></a></span></div></div></header><section class="prose mt-0 flex max-w-full flex-col dark:prose-invert lg:flex-row"><div class="order-first px-0 lg:order-last lg:max-w-xs lg:ps-8"><div class="toc pe-5 print:hidden lg:sticky lg:top-10"><details open class="-ms-5 mt-0 overflow-hidden rounded-lg ps-5"><summary class="block cursor-pointer bg-neutral-100 py-1 ps-5 text-lg font-semibold text-neutral-800 dark:bg-neutral-700 dark:text-neutral-100 lg:hidden">Table of Contents</summary><div class="border-s border-dotted border-neutral-300 py-2 ps-5 dark:border-neutral-600"><nav id=TableOfContents><ul><li><a href=#branch-pages>Branch pages</a><ul><li><a href=#homepage>Homepage</a></li><li><a href=#list-pages>List pages</a></li><li><a href=#taxonomy-pages>Taxonomy pages</a></li></ul></li><li><a href=#leaf-pages>Leaf pages</a><ul><li><a href=#external-links>External links</a></li><li><a href=#simple-pages>Simple pages</a></li></ul></li><li><a href=#custom-layouts>Custom layouts</a><ul><li><a href=#overriding-default-layouts>Overriding default layouts</a></li><li><a href=#custom-section-layouts>Custom section layouts</a></li></ul></li></ul></nav></div></details></div></div><div class="min-h-0 min-w-0 max-w-prose grow"><p>If you’ve been reading the documentation in order, you should now know about all the features and configurations available in Congo. This page is designed to pull everything together and offer some worked examples that you might like to use in your Hugo project.</p><div class="flex rounded-md bg-primary-100 px-4 py-3 dark:bg-primary-900"><span class="pe-3 text-primary-400"><span class="icon relative inline-block px-1 align-text-bottom"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M506.3 417 293 53c-16.33-28-57.54-28-73.98.0l-213.2 364C-10.59 444.9 9.849 480 42.74 480h426.6c32.76.0 53.26-35 36.96-63zM232 168c0-13.25 10.75-24 24-24s24 10.8 24 24v128c0 13.25-10.75 24-23.1 24S232 309.3 232 296V168zm24 248c-17.36.0-31.44-14.08-31.44-31.44s14.07-31.44 31.44-31.44 31.44 14.08 31.44 31.44C287.4 401.9 273.4 416 256 416z"/></svg>
|
|
</span></span><span class=dark:text-neutral-300><strong>Tip:</strong> If you’re new to Hugo, be sure to check out the <a href=https://gohugo.io/content-management/page-bundles/ target=_blank rel=noreferrer>official docs</a> to learn more about the concept of page bundles and resources.</span></div><p>The examples on this page can all be adapted to different scenarios but hopefully give you some ideas about how to approach formatting a particular content item for your individual project.</p><h2 id=branch-pages class="relative group">Branch pages <span class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#branch-pages aria-label=Anchor>#</a></span></h2><p>Branch page bundles in Hugo cover items like the homepage, section listings, and taxonomy pages. The important thing to remember about branch bundles is that the filename for this content type is <strong><code>_index.md</code></strong>.</p><p>Congo will honour the front matter parameters specified in branch pages and these will override the default settings for that particular page. For example, setting the <code>title</code> parameter in a branch page will allow overriding the page title.</p><h3 id=homepage class="relative group">Homepage <span class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#homepage aria-label=Anchor>#</a></span></h3><table><thead><tr><th></th><th></th></tr></thead><tbody><tr><td><strong>Layout:</strong></td><td><code>layouts/index.html</code></td></tr><tr><td><strong>Content:</strong></td><td><code>content/_index.md</code></td></tr></tbody></table><p>The homepage in Congo is special in that it’s overarching design is controlled by the homepage layout config parameter. You can learn more about this in the <a href=https://jpanther.github.io/congo/docs/homepage-layout/>Homepage Layout</a> section.</p><p>If you want to add custom content to this page, you simply need to create a <code>content/_index.md</code> file. Anything in this file will then be included in your homepage.</p><p><strong>Example:</strong></p><div class=highlight><pre tabindex=0 class=chroma><code class=language-yaml data-lang=yaml><span class=line><span class=cl><span class=nn>---</span><span class=w>
|
|
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>title</span><span class=p>:</span><span class=w> </span><span class=s2>"Welcome to Congo!"</span><span class=w>
|
|
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>description</span><span class=p>:</span><span class=w> </span><span class=s2>"This is a demo of adding content to the homepage."</span><span class=w>
|
|
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nn>---</span><span class=w>
|
|
</span></span></span><span class=line><span class=cl><span class=w></span><span class=l>Welcome to my website! I'm really happy you stopped by.</span><span class=w>
|
|
</span></span></span></code></pre></div><p><em>This example sets a custom title and adds some additional text to the body of the page. Any Markdown formatted text is acceptable, including shortcodes, images and links.</em></p><h3 id=list-pages class="relative group">List pages <span class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#list-pages aria-label=Anchor>#</a></span></h3><table><thead><tr><th></th><th></th></tr></thead><tbody><tr><td><strong>Layout:</strong></td><td><code>layouts/_default/list.html</code></td></tr><tr><td><strong>Content:</strong></td><td><code>content/../_index.md</code></td></tr></tbody></table><p>List pages group all the pages within into a section and provide a way for visitors to reach each page. A blog or portfolio are examples of a list page as they group together posts or projects.</p><p>Creating a list page is as simple as making a sub-directory in the content folder. For example, to create a “Projects” section, you would create <code>content/projects/</code>. Then create a Markdown file for each of your projects.</p><p>A list page will be generated by default, however to customise the content, you should also create an <code>_index.md</code> page in this new directory.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-shell data-lang=shell><span class=line><span class=cl>.
|
|
</span></span><span class=line><span class=cl>└── content
|
|
</span></span><span class=line><span class=cl> └── projects
|
|
</span></span><span class=line><span class=cl> ├── _index.md <span class=c1># /projects</span>
|
|
</span></span><span class=line><span class=cl> ├── first-project.md <span class=c1># /projects/first-project</span>
|
|
</span></span><span class=line><span class=cl> └── another-project
|
|
</span></span><span class=line><span class=cl> ├── index.md <span class=c1># /projects/another-project</span>
|
|
</span></span><span class=line><span class=cl> └── project.jpg
|
|
</span></span></code></pre></div><p>Hugo will generate URLs for the pages in your projects folder accordingly.</p><p>Just like the homepage, content in the <code>_index.md</code> file will be output into the generated list index. Congo will then list any pages in this section below the content.</p><p><strong>Example:</strong></p><div class=highlight><pre tabindex=0 class=chroma><code class=language-yaml data-lang=yaml><span class=line><span class=cl><span class=nn>---</span><span class=w>
|
|
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>title</span><span class=p>:</span><span class=w> </span><span class=s2>"Projects"</span><span class=w>
|
|
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>description</span><span class=p>:</span><span class=w> </span><span class=s2>"Learn about some of my projects."</span><span class=w>
|
|
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>cascade</span><span class=p>:</span><span class=w>
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>showReadingTime</span><span class=p>:</span><span class=w> </span><span class=kc>false</span><span class=w>
|
|
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nn>---</span><span class=w>
|
|
</span></span></span><span class=line><span class=cl><span class=w></span><span class=l>This section contains all my current projects.</span><span class=w>
|
|
</span></span></span></code></pre></div><p><em>In this example, the special <code>cascade</code> parameter is being used to hide the reading time on any sub-pages within this section. By doing this, any project pages will not have their reading time showing. This is a great way to override default theme parameters for an entire section without having to include them in every individual page.</em></p><p>The <a href=https://jpanther.github.io/congo/samples/>samples section</a> of this site is an example of a list page.</p><h3 id=taxonomy-pages class="relative group">Taxonomy pages <span class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#taxonomy-pages aria-label=Anchor>#</a></span></h3><table><thead><tr><th></th><th></th></tr></thead><tbody><tr><td><strong>List layout:</strong></td><td><code>layouts/_default/taxonomy.html</code></td></tr><tr><td><strong>Term layout:</strong></td><td><code>layouts/_default/term.html</code></td></tr><tr><td><strong>Content:</strong></td><td><code>content/../_index.md</code></td></tr></tbody></table><p>Taxonomy pages come in two forms - taxonomy lists and taxonomy terms. Lists display a listing of each of the terms within a given taxonomy, while terms display a list of pages that are related to a given term.</p><p>The terminology can get a little confusing so let’s explore an example using a taxonomy named <code>animals</code>.</p><p>Firstly, to use taxonomies in Hugo, they have to be configured. This is done by creating a config file at <code>config/_default/taxonomies.toml</code> and defining the taxonomy name.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-toml data-lang=toml><span class=line><span class=cl><span class=c># config/_default/taxonomies.toml</span>
|
|
</span></span><span class=line><span class=cl>
|
|
</span></span><span class=line><span class=cl><span class=nx>animal</span> <span class=p>=</span> <span class=s2>"animals"</span>
|
|
</span></span></code></pre></div><p>Hugo expects taxonomies to be listed using their singular and plural forms, so we add the singular <code>animal</code> equals the plural <code>animals</code> to create our example taxonomy.</p><p>Now that our <code>animals</code> taxonomy exists, it needs to be added to individual content items. It’s as simple as inserting it into the front matter:</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-yaml data-lang=yaml><span class=line><span class=cl><span class=nn>---</span><span class=w>
|
|
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>title</span><span class=p>:</span><span class=w> </span><span class=s2>"Into the Lion's Den"</span><span class=w>
|
|
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>description</span><span class=p>:</span><span class=w> </span><span class=s2>"This week we're learning about lions."</span><span class=w>
|
|
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>animals</span><span class=p>:</span><span class=w> </span><span class=p>[</span><span class=s2>"lion"</span><span class=p>,</span><span class=w> </span><span class=s2>"cat"</span><span class=p>]</span><span class=w>
|
|
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nn>---</span><span class=w>
|
|
</span></span></span></code></pre></div><p>This has now created two <em>terms</em> within our <code>animals</code> taxonomy - <code>lion</code> and <code>cat</code>.</p><p>Although it’s not obvious at this point, Hugo will now be generating list and term pages for this new taxonomy. By default the listing can be accessed at <code>/animals/</code> and the term pages can be found at <code>/animals/lion/</code> and <code>/animals/cat/</code>.</p><p>The list page will list all the terms contained within the taxonomy. In this example, navigating to <code>/animals/</code> will show a page that has links for “lion” and “cat” which take visitors to the individual term pages.</p><p>The term pages will list all the pages contained within that term. These term lists are essentially the same as normal <a href=#list-pages>list pages</a> and behave in much the same way.</p><p>In order to add custom content to taxonomy pages, simply create <code>_index.md</code> files in the content folder using the taxonomy name as the sub-directory name.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-shell data-lang=shell><span class=line><span class=cl>.
|
|
</span></span><span class=line><span class=cl>└── content
|
|
</span></span><span class=line><span class=cl> └── animals
|
|
</span></span><span class=line><span class=cl> ├── _index.md <span class=c1># /animals</span>
|
|
</span></span><span class=line><span class=cl> └── lion
|
|
</span></span><span class=line><span class=cl> └── _index.md <span class=c1># /animals/lion</span>
|
|
</span></span></code></pre></div><p>Anything in these content files will now be placed onto the generated taxonomy pages. As with other content, the front matter variables can be used to override defaults. In this way you could have a tag named <code>lion</code> but override the <code>title</code> to be “Lion”.</p><p>To see how this looks in reality, check out the <a href=https://jpanther.github.io/congo/tags/>tags taxonomy listing</a> on this site.</p><h2 id=leaf-pages class="relative group">Leaf pages <span class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#leaf-pages aria-label=Anchor>#</a></span></h2><table><thead><tr><th></th><th></th></tr></thead><tbody><tr><td><strong>Layout:</strong></td><td><code>layouts/_default/single.html</code></td></tr><tr><td><strong>Content (standalone):</strong></td><td><code>content/../page-name.md</code></td></tr><tr><td><strong>Content (bundled):</strong></td><td><code>content/../page-name/index.md</code></td></tr></tbody></table><p>Leaf pages in Hugo are basically standard content pages. They are defined as pages that don’t contain any sub-pages. These could be things like an about page, or an individual blog post that lives in the blog section of the website.</p><p>The most important thing to remember about leaf pages is that unlike branch pages, leaf pages should be named <code>index.md</code> <em>without</em> an underscore. Leaf pages are also special in that they can be grouped together at the top level of the section and named with a unique name.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-shell data-lang=shell><span class=line><span class=cl>.
|
|
</span></span><span class=line><span class=cl>└── content
|
|
</span></span><span class=line><span class=cl> └── blog
|
|
</span></span><span class=line><span class=cl> ├── first-post.md <span class=c1># /blog/first-post</span>
|
|
</span></span><span class=line><span class=cl> ├── second-post.md <span class=c1># /blog/second-post</span>
|
|
</span></span><span class=line><span class=cl> └── third-post
|
|
</span></span><span class=line><span class=cl> ├── index.md <span class=c1># /blog/third-post</span>
|
|
</span></span><span class=line><span class=cl> └── image.jpg
|
|
</span></span></code></pre></div><p>When including assets in a page, like an image, a page bundle should be used. Page bundles are created using a sub-directory with an <code>index.md</code> file. Grouping the assets with the content in its own directory is important as many of the shortcodes and other theme logic assumes that resources are bundled alongside pages.</p><p><strong>Example:</strong></p><div class=highlight><pre tabindex=0 class=chroma><code class=language-yaml data-lang=yaml><span class=line><span class=cl><span class=nn>---</span><span class=w>
|
|
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>title</span><span class=p>:</span><span class=w> </span><span class=s2>"My First Blog Post"</span><span class=w>
|
|
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>date</span><span class=p>:</span><span class=w> </span><span class=ld>2022-01-25</span><span class=w>
|
|
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>description</span><span class=p>:</span><span class=w> </span><span class=s2>"Welcome to my blog!"</span><span class=w>
|
|
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>summary</span><span class=p>:</span><span class=w> </span><span class=s2>"Learn more about me and why I am starting this blog."</span><span class=w>
|
|
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>tags</span><span class=p>:</span><span class=w> </span><span class=p>[</span><span class=s2>"welcome"</span><span class=p>,</span><span class=w> </span><span class=s2>"new"</span><span class=p>,</span><span class=w> </span><span class=s2>"about"</span><span class=p>,</span><span class=w> </span><span class=s2>"first"</span><span class=p>]</span><span class=w>
|
|
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nn>---</span><span class=w>
|
|
</span></span></span><span class=line><span class=cl><span class=w></span><span class=l>_This_ is the content of my blog post.</span><span class=w>
|
|
</span></span></span></code></pre></div><p>Leaf pages have a wide variety of <a href=https://jpanther.github.io/congo/docs/front-matter/>front matter</a> parameters that can be used to customise how they are displayed.</p><h3 id=external-links class="relative group">External links <span class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#external-links aria-label=Anchor>#</a></span></h3><p>Congo has a special feature that allows links to external pages to appear alongside articles in the article listings. This is useful if you have content on third party websites like Medium, or research papers that you’d like to link to, without replicating the content in your Hugo site.</p><p>In order to create an external link article, some special front matter needs to be set:</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-yaml data-lang=yaml><span class=line><span class=cl><span class=nn>---</span><span class=w>
|
|
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>title</span><span class=p>:</span><span class=w> </span><span class=s2>"My Medium post"</span><span class=w>
|
|
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>date</span><span class=p>:</span><span class=w> </span><span class=ld>2022-01-25</span><span class=w>
|
|
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>externalUrl</span><span class=p>:</span><span class=w> </span><span class=s2>"https://medium.com/"</span><span class=w>
|
|
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>summary</span><span class=p>:</span><span class=w> </span><span class=s2>"I wrote a post on Medium."</span><span class=w>
|
|
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>showReadingTime</span><span class=p>:</span><span class=w> </span><span class=kc>false</span><span class=w>
|
|
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>_build</span><span class=p>:</span><span class=w>
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>render</span><span class=p>:</span><span class=w> </span><span class=s2>"false"</span><span class=w>
|
|
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>list</span><span class=p>:</span><span class=w> </span><span class=s2>"local"</span><span class=w>
|
|
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nn>---</span><span class=w>
|
|
</span></span></span></code></pre></div><p>Along with the normal front matter parameters like <code>title</code> and <code>summary</code>, the <code>externalUrl</code> parameter is used to tell Congo that this is not an ordinary article. The URL provided here will be where visitors are directed when they select this article.</p><p>Additionally, we use a special Hugo front matter parameter <code>_build</code> to prevent a normal page for this content being generated - there’s no point generating a page since we’re linking to an external URL!</p><p>The theme includes an archetype to make generating these external link articles simple. Just specify <code>-k external</code> when making new content.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-shell data-lang=shell><span class=line><span class=cl>hugo new -k external posts/my-post.md
|
|
</span></span></code></pre></div><h3 id=simple-pages class="relative group">Simple pages <span class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#simple-pages aria-label=Anchor>#</a></span></h3><table><thead><tr><th></th><th></th></tr></thead><tbody><tr><td><strong>Layout:</strong></td><td><code>layouts/_default/simple.html</code></td></tr><tr><td><strong>Front Matter:</strong></td><td><code>layout: "simple"</code></td></tr></tbody></table><p>Congo also includes a special layout for simple pages. The simple layout is a full-width template that just places Markdown content into the page without any special theme features.</p><p>The only features available in the simple layout are breadcrumbs and sharing links. However, the behaviour of these can still be controlled using the normal page <a href=https://jpanther.github.io/congo/docs/front-matter/>front matter</a> variables.</p><p>To enable the simple layout on a particular page, add the <code>layout</code> front matter variable with a value of <code>"simple"</code>:</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-yaml data-lang=yaml><span class=line><span class=cl><span class=nn>---</span><span class=w>
|
|
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>title</span><span class=p>:</span><span class=w> </span><span class=s2>"My landing page"</span><span class=w>
|
|
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>date</span><span class=p>:</span><span class=w> </span><span class=ld>2022-03-08</span><span class=w>
|
|
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>layout</span><span class=p>:</span><span class=w> </span><span class=s2>"simple"</span><span class=w>
|
|
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nn>---</span><span class=w>
|
|
</span></span></span><span class=line><span class=cl><span class=w></span><span class=l>This page content is now full-width.</span><span class=w>
|
|
</span></span></span></code></pre></div><h2 id=custom-layouts class="relative group">Custom layouts <span class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#custom-layouts aria-label=Anchor>#</a></span></h2><p>One of the benefits of Hugo is that it makes it easy to create custom layouts for the whole site, individual sections or pages.</p><p>Layouts follow all the normal Hugo templating rules and more information is available in the <a href=https://gohugo.io/templates/introduction/ target=_blank rel=noreferrer>official Hugo docs</a>.</p><h3 id=overriding-default-layouts class="relative group">Overriding default layouts <span class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#overriding-default-layouts aria-label=Anchor>#</a></span></h3><p>Each of the content types discussed above lists the layout file that is used to generate each type of page. If this file is created in your local project it will override the theme template and thus can be used to customise the default style of the website.</p><p>For example, creating a <code>layouts/_default/single.html</code> file will allow the layout of leaf pages to be completely customised.</p><h3 id=custom-section-layouts class="relative group">Custom section layouts <span class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#custom-section-layouts aria-label=Anchor>#</a></span></h3><p>It is also simple to create custom layouts for individual content sections. This is useful when you want to make a section that lists a certain type of content using a particular style.</p><p>Let’s step through an example that creates a custom “Projects” page that lists projects using a special layout.</p><p>In order to do this, structure your content using the normal Hugo content rules and create a section for your projects. Additionally, create a new layout for the projects section by using the same directory name as the content and adding a <code>list.html</code> file.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-shell data-lang=shell><span class=line><span class=cl>.
|
|
</span></span><span class=line><span class=cl>└── content
|
|
</span></span><span class=line><span class=cl>│ └── projects
|
|
</span></span><span class=line><span class=cl>│ ├── _index.md
|
|
</span></span><span class=line><span class=cl>│ ├── first-project.md
|
|
</span></span><span class=line><span class=cl>│ └── second-project.md
|
|
</span></span><span class=line><span class=cl>└── layouts
|
|
</span></span><span class=line><span class=cl> └── projects
|
|
</span></span><span class=line><span class=cl> └── list.html
|
|
</span></span></code></pre></div><p>This <code>list.html</code> file will now override the default list template, but only for the <code>projects</code> section. Before we look at this file, lets first look at the individual project files.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-yaml data-lang=yaml><span class=line><span class=cl><span class=nn>---</span><span class=w>
|
|
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>title</span><span class=p>:</span><span class=w> </span><span class=s2>"Congo"</span><span class=w>
|
|
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>date</span><span class=p>:</span><span class=w> </span><span class=ld>2021-08-11</span><span class=w>
|
|
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>icon</span><span class=p>:</span><span class=w> </span><span class=s2>"github"</span><span class=w>
|
|
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>description</span><span class=p>:</span><span class=w> </span><span class=s2>"A theme for Hugo built with Tailwind CSS."</span><span class=w>
|
|
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>topics</span><span class=p>:</span><span class=w> </span><span class=p>[</span><span class=s2>"Hugo"</span><span class=p>,</span><span class=w> </span><span class=s2>"Web"</span><span class=p>,</span><span class=w> </span><span class=s2>"Tailwind"</span><span class=p>]</span><span class=w>
|
|
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>externalUrl</span><span class=p>:</span><span class=w> </span><span class=s2>"https://github.com/jpanther/congo/"</span><span class=w>
|
|
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nn>---</span><span class=w>
|
|
</span></span></span></code></pre></div><p><em>In this example we are assigning some metadata for each project that we can then use in our list template. There’s no page content, but there’s nothing stopping you from including it. It’s your own custom template after all!</em></p><p>With the projects defined, now we can create a list template that outputs the details of each project.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-go data-lang=go><span class=line><span class=cl><span class=p>{{</span> <span class=nx>define</span> <span class=s>"main"</span> <span class=p>}}</span>
|
|
</span></span><span class=line><span class=cl> <span class=p><</span><span class=nx>section</span> <span class=nx>class</span><span class=p>=</span><span class=s>"mt-8"</span><span class=p>></span>
|
|
</span></span><span class=line><span class=cl> <span class=p>{{</span> <span class=k>range</span> <span class=p>.</span><span class=nx>Pages</span> <span class=p>}}</span>
|
|
</span></span><span class=line><span class=cl> <span class=p><</span><span class=nx>article</span> <span class=nx>class</span><span class=p>=</span><span class=s>"pb-6"</span><span class=p>></span>
|
|
</span></span><span class=line><span class=cl> <span class=p><</span><span class=nx>a</span> <span class=nx>class</span><span class=p>=</span><span class=s>"flex"</span> <span class=nx>href</span><span class=p>=</span><span class=s>"{{ .Params.externalUrl }}"</span><span class=p>></span>
|
|
</span></span><span class=line><span class=cl> <span class=p><</span><span class=nx>div</span> <span class=nx>class</span><span class=p>=</span><span class=s>"mr-3 text-3xl text-neutral-300"</span><span class=p>></span>
|
|
</span></span><span class=line><span class=cl> <span class=p><</span><span class=nx>span</span> <span class=nx>class</span><span class=p>=</span><span class=s>"relative inline-block align-text-bottom"</span><span class=p>></span>
|
|
</span></span><span class=line><span class=cl> <span class=p>{{</span> <span class=nx>partial</span> <span class=s>"icon.html"</span> <span class=p>.</span><span class=nx>Params</span><span class=p>.</span><span class=nx>icon</span> <span class=p>}}</span>
|
|
</span></span><span class=line><span class=cl> <span class=p><</span><span class=o>/</span><span class=nx>span</span><span class=p>></span>
|
|
</span></span><span class=line><span class=cl> <span class=p><</span><span class=o>/</span><span class=nx>div</span><span class=p>></span>
|
|
</span></span><span class=line><span class=cl> <span class=p><</span><span class=nx>div</span><span class=p>></span>
|
|
</span></span><span class=line><span class=cl> <span class=p><</span><span class=nx>h3</span> <span class=nx>class</span><span class=p>=</span><span class=s>"flex text-xl font-semibold"</span><span class=p>></span>
|
|
</span></span><span class=line><span class=cl> <span class=p>{{</span> <span class=p>.</span><span class=nx>Title</span> <span class=p>}}</span>
|
|
</span></span><span class=line><span class=cl> <span class=p><</span><span class=o>/</span><span class=nx>h3</span><span class=p>></span>
|
|
</span></span><span class=line><span class=cl> <span class=p><</span><span class=nx>p</span> <span class=nx>class</span><span class=p>=</span><span class=s>"text-sm text-neutral-400"</span><span class=p>></span>
|
|
</span></span><span class=line><span class=cl> <span class=p>{{</span> <span class=p>.</span><span class=nx>Description</span> <span class=p>}}</span>
|
|
</span></span><span class=line><span class=cl> <span class=p><</span><span class=o>/</span><span class=nx>p</span><span class=p>></span>
|
|
</span></span><span class=line><span class=cl> <span class=p><</span><span class=o>/</span><span class=nx>div</span><span class=p>></span>
|
|
</span></span><span class=line><span class=cl> <span class=p><</span><span class=o>/</span><span class=nx>a</span><span class=p>></span>
|
|
</span></span><span class=line><span class=cl> <span class=p><</span><span class=o>/</span><span class=nx>article</span><span class=p>></span>
|
|
</span></span><span class=line><span class=cl> <span class=p>{{</span> <span class=nx>end</span> <span class=p>}}</span>
|
|
</span></span><span class=line><span class=cl> <span class=p><</span><span class=o>/</span><span class=nx>section</span><span class=p>></span>
|
|
</span></span><span class=line><span class=cl><span class=p>{{</span> <span class=nx>end</span> <span class=p>}}</span>
|
|
</span></span></code></pre></div><p>Although this is quite a straightforward example, you can see that it steps through each of the pages in this section (ie. each project), and then outputs HTML links to each project alongside an icon. The metadata in the front matter for each project is used to determine which information is displayed.</p><p>Keep in mind that you’ll need to ensure the relevant styles and classes are available, which may require the Tailwind CSS to be recompiled. This is discussed in more detail in the <a href=https://jpanther.github.io/congo/docs/advanced-customisation/>Advanced Customisation</a> section.</p><p>When making custom templates like this one, it’s always easiest to take a look at how the default Congo template works and then use that as a guide. Remember, the <a href=https://gohugo.io/templates/introduction/ target=_blank rel=noreferrer>Hugo docs</a> are a great resource to learn more about creating templates too.</p></div></section><footer class="max-w-prose pt-8 print:hidden"><div class=pt-8><hr class="border-dotted border-neutral-300 dark:border-neutral-600"><div class="flex justify-between pt-3"><span><a class="group flex" href=/congo/docs/partials/><span class="me-2 text-neutral-700 transition-transform group-hover:-translate-x-[2px] group-hover:text-primary-600 dark:text-neutral dark:group-hover:text-primary-400"><span class="ltr:inline rtl:hidden">←</span><span class="ltr:hidden rtl:inline">→</span></span>
|
|
<span class="flex flex-col"><span class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500">Partials</span>
|
|
<span class="mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400"></span></span></a></span><span><a class="group flex text-right" href=/congo/docs/advanced-customisation/><span class="flex flex-col"><span class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500">Advanced Customisation</span>
|
|
<span class="mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400"></span></span><span class="ms-2 text-neutral-700 transition-transform group-hover:-translate-x-[2px] group-hover:text-primary-600 dark:text-neutral dark:group-hover:text-primary-400"><span class="ltr:inline rtl:hidden">→</span><span class="ltr:hidden rtl:inline">←</span></span></a></span></div></div></footer></article><div class="pointer-events-none absolute bottom-0 end-0 top-[100vh] w-12"><a href=#the-top class="pointer-events-auto sticky top-[calc(100vh-5.5rem)] flex h-12 w-12 items-center justify-center rounded-full bg-neutral/50 text-xl text-neutral-700 backdrop-blur hover:text-primary-600 dark:bg-neutral-800/50 dark:text-neutral dark:hover:text-primary-400" aria-label="Scroll to top" title="Scroll to top">↑</a></div></main><footer class="py-10 print:hidden"><div class="flex items-center justify-between"><div><p class="text-sm text-neutral-500 dark:text-neutral-400">© 2023 Congo contributors</p><p class="text-xs text-neutral-500 dark:text-neutral-400">Powered by <a class="hover:underline hover:decoration-primary-400 hover:text-primary-500" href=https://gohugo.io/ target=_blank rel="noopener noreferrer">Hugo</a> & <a class="hover:underline hover:decoration-primary-400 hover:text-primary-500" href=https://github.com/jpanther/congo target=_blank rel="noopener noreferrer">Congo</a></p></div><div class="flex flex-row items-center"><div class="me-14 cursor-pointer text-sm text-neutral-700 hover:text-primary-600 dark:text-neutral dark:hover:text-primary-400"><button id=appearance-switcher-0 type=button aria-label="appearance switcher"><div class="flex h-12 w-12 items-center justify-center dark:hidden" title="Switch to dark appearance"><span class="icon relative inline-block px-1 align-text-bottom"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M32 256C32 132.2 132.3 32 255.8 32c11.36.0 29.7 1.668 40.9 3.746 9.616 1.777 11.75 14.63 3.279 19.44C245 86.5 211.2 144.6 211.2 207.8c0 109.7 99.71 193 208.3 172.3 9.561-1.805 16.28 9.324 10.11 16.95C387.9 448.6 324.8 480 255.8 480 132.1 480 32 379.6 32 256z"/></svg></span></div><div class="hidden h-12 w-12 items-center justify-center dark:flex" title="Switch to light appearance"><span class="icon relative inline-block px-1 align-text-bottom"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M256 159.1c-53.02.0-95.1 42.98-95.1 95.1s41.2 96.9 95.1 96.9 95.1-42.98 95.1-95.1S309 159.1 256 159.1zM509.3 347l-63.2-91.9 63.15-91.01c6.332-9.125 1.104-21.74-9.826-23.72l-109-19.7-19.7-109c-1.975-10.93-14.59-16.16-23.72-9.824L256 65.89 164.1 2.736c-9.125-6.332-21.74-1.107-23.72 9.824L121.6 121.6 12.56 141.3C1.633 143.2-3.596 155.9 2.736 164.1L65.89 256 2.74 347.01c-6.332 9.125-1.105 21.74 9.824 23.72l109 19.7 19.7 109c1.975 10.93 14.59 16.16 23.72 9.824L256 446.1l91.01 63.15c9.127 6.334 21.75 1.107 23.72-9.822l19.7-109 109-19.7C510.4 368.8 515.6 356.1 509.3 347zM256 383.1c-70.69.0-127.1-57.31-127.1-127.1.0-70.69 57.31-127.1 127.1-127.1S383.1 186.2 383.1 256c0 70.7-56.4 127.1-127.1 127.1z"/></svg></span></div></button></div></div></div></footer><div id=search-wrapper class="invisible fixed inset-0 z-50 flex h-screen w-screen cursor-default flex-col bg-neutral-500/50 p-4 backdrop-blur-sm sm:p-6 md:p-[10vh] lg:p-[12vh] dark:bg-neutral-900/50" data-url=https://jpanther.github.io/congo/><div id=search-modal class="top-20 mx-auto flex min-h-0 w-full max-w-3xl flex-col rounded-md border border-neutral-200 bg-neutral shadow-lg dark:border-neutral-700 dark:bg-neutral-800"><header class="relative z-10 flex flex-none items-center justify-between px-2"><form class="flex min-w-0 flex-auto items-center"><div class="flex h-8 w-8 items-center justify-center text-neutral-400"><span class="icon relative inline-block px-1 align-text-bottom"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="search" class="svg-inline--fa fa-search fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M505 442.7 405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9.0 208 0S0 93.1.0 208s93.1 208 208 208c48.3.0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9.0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7.0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7.0 128 57.2 128 128 0 70.7-57.2 128-128 128z"/></svg></span></div><input type=search id=search-query class="mx-1 flex h-12 flex-auto appearance-none bg-transparent focus:outline-dotted focus:outline-2 focus:outline-transparent" placeholder=Search tabindex=0></form><button id=close-search-button class="flex h-8 w-8 items-center justify-center text-neutral-700 hover:text-primary-600 dark:text-neutral dark:hover:text-primary-400" title="Close (Esc)">
|
|
<span class="icon relative inline-block px-1 align-text-bottom"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentcolor" d="M310.6 361.4c12.5 12.5 12.5 32.75.0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3 54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75.0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75.0-45.25s32.75-12.5 45.25.0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25.0s12.5 32.75.0 45.25l-105.4 105.4L310.6 361.4z"/></svg></span></button></header><section class="flex-auto overflow-auto px-2"><ul id=search-results></ul></section></div></div></div></body></html> |