<spanclass=mb-[2px]><ahref=https://github.com/jpanther/congo/tree/dev/exampleSite/content/docs/partials/index.mdclass="text-lg hover:text-primary-500"rel="noopener noreferrer"target=_blanktitle="Edit content"><spanclass="icon relative inline-block px-1 align-text-bottom"><svgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 512 512"><pathfill="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><sectionclass="prose mt-0 flex max-w-full flex-col dark:prose-invert lg:flex-row"><divclass="order-first px-0 lg:order-last lg:max-w-xs lg:ps-8"><divclass="toc pe-5 print:hidden lg:sticky lg:top-10"><detailsopenclass="-ms-5 mt-0 overflow-hidden rounded-lg ps-5"><summaryclass="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><divclass="border-s border-dotted border-neutral-300 py-2 ps-5 dark:border-neutral-600"><navid=TableOfContents><ul><li><ahref=#analytics>Analytics</a><ul><li><ahref=#fathom-analytics>Fathom Analytics</a></li><li><ahref=#plausible-analytics>Plausible Analytics</a></li><li><ahref=#google-analytics>Google Analytics</a></li><li><ahref=#custom-analytics-providers>Custom analytics providers</a></li></ul></li><li><ahref=#comments>Comments</a></li><li><ahref=#favicons>Favicons</a></li><li><ahref=#icon>Icon</a></li><li><ahref=#extensions>Extensions</a><ul><li><ahref=#article-link>Article link</a></li><li><ahref=#head-and-footer>Head and Footer</a></li></ul></li></ul></nav></div></details></div></div><divclass="min-h-0 min-w-0 max-w-prose grow"><h2id=analyticsclass="relative group">Analytics <spanclass="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><aclass="group-hover:text-primary-300 dark:group-hover:text-neutral-700"style=text-decoration-line:none!importanthref=#analyticsaria-label=Anchor>#</a></span></h2><p>Congo provides support for various analytics providers out of the box, as well as the ability to include custom code for any provider of your choice. If you don’t currently have an analytics provider, check out Fathom Analytics.</p><h3id=fathom-analyticsclass="relative group">Fathom Analytics <spanclass="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><aclass="group-hover:text-primary-300 dark:group-hover:text-neutral-700"style=text-decoration-line:none!importanthref=#fathom-analyticsaria-label=Anchor>#</a></span></h3><p>Fathom Analytics is a privacy-first service that is a great alternative to Google Analytics. It allows you to get all the visitor information you need, without spying on them. As a Congo user, you can use this affiliate link to <ahref=https://usefathom.com/ref/RLAJSVtarget=_blankrel=noreferrer>receive $10 credit</a> and try the service.</p><p><ahref=https://usefathom.com/ref/RLAJSVtarget=_blankrel=noreferrer><figure><pictureclass="mx-auto my-0 rounded-md"><sourcesrcset="/congo/docs/partials/fathom-analytics_hu841b74b37c0f8b1e0e9a064be02ef5ae_49300_330x0_resize_q75_h2_box.webp330w,/congo/docs/partials/fathom-analytics_hu841b74b37c0f8b1e0e9a064be02ef5ae_49300_660x0_resize_q75_h2_box.webp660w
,/congo/docs/partials/fathom-analytics.jpg 1320w" sizes=100vw></picture></figure></a></p><p>To enable Fathom Analytics support, simply provide your Fathom site code in the <code>config/_default/params.toml</code> file. The script will load in your site directly from the Fathom Analytics CDN.</p><divclass=highlight><pretabindex=0class=chroma><codeclass=language-tomldata-lang=toml><spanclass=line><spanclass=cl><spanclass=c># config/_default/params.toml</span>
</span></span></code></pre></div><h3id=plausible-analyticsclass="relative group">Plausible Analytics <spanclass="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><aclass="group-hover:text-primary-300 dark:group-hover:text-neutral-700"style=text-decoration-line:none!importanthref=#plausible-analyticsaria-label=Anchor>#</a></span></h3><p>To enable Plausible analytics support, simply provide the domain of the website you want to track in the <code>config/_default/params.toml</code> file. If you are using a self-hosted Plausible, or wish to use a <ahref=https://plausible.io/docs/proxy/introductiontarget=_blankrel=noreferrer>proxied analytics</a> script and event API router, you can also provide additional <code>event</code> and <code>script</code> configuration values. If you do not provide these two values, the script will load directly with Plausible’s default managed service. Refer to <ahref=https://plausible.io/docs/proxy/introductiontarget=_blankrel=noreferrer>Using a proxy for analytics</a> for more details.</p><divclass=highlight><pretabindex=0class=chroma><codeclass=language-tomldata-lang=toml><spanclass=line><spanclass=cl><spanclass=c># config/_default/params.toml</span>
</span></span></code></pre></div><h3id=google-analyticsclass="relative group">Google Analytics <spanclass="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><aclass="group-hover:text-primary-300 dark:group-hover:text-neutral-700"style=text-decoration-line:none!importanthref=#google-analyticsaria-label=Anchor>#</a></span></h3><p>Google Analytics support is provided through the internal Hugo partial. Simply provide the <code>googleAnalytics</code> key in the <code>config/_default/config.toml</code> file and the script will be added automatically.</p><p>Both version 3 (analytics.js) and version 4 (gtag.js) are supported, based on the configuration value provided:</p><divclass=highlight><pretabindex=0class=chroma><codeclass=language-tomldata-lang=toml><spanclass=line><spanclass=cl><spanclass=c># config/_default/config.toml</span>
</span></span></code></pre></div><h3id=custom-analytics-providersclass="relative group">Custom analytics providers <spanclass="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><aclass="group-hover:text-primary-300 dark:group-hover:text-neutral-700"style=text-decoration-line:none!importanthref=#custom-analytics-providersaria-label=Anchor>#</a></span></h3><p>If you wish to use a different analytics provider on your website you can also override the analytics partial and provide your own script. Simply create the file <code>layouts/partials/analytics.html</code> in your project and it will automatically include it in the <code><head></code> of the website.</p><h2id=commentsclass="relative group">Comments <spanclass="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><aclass="group-hover:text-primary-300 dark:group-hover:text-neutral-700"style=text-decoration-line:none!importanthref=#commentsaria-label=Anchor>#</a></span></h2><p>To add comments to your articles, Congo includes support for a comments partial that is included at the base of each article page. Simply provide a <code>layouts/partials/comments.html</code> which contains the code required to display your chosen comments.</p><p>You can use either the built-in Hugo Disqus template, or provide your own custom code. Refer to the <ahref=https://gohugo.io/content-management/comments/target=_blankrel=noreferrer>Hugo docs</a> for further information.</p><p>Once the partial has been provided, finer control over where comments are displayed is then managed using the <code>showComments</code> parameter. This value can be set at the theme level in the <code>params.toml</code><ahref=https://jpanther.github.io/congo/docs/configuration/#theme-parameters>config file</a>, or on a per-article basis by including it in the <ahref=https://jpanther.github.io/congo/docs/front-matter/>front matter</a>. The parameter defaults to <code>false</code> so it must be set to <code>true</code> in one of these locations in order for comments to be displayed.</p><h2id=faviconsclass="relative group">Favicons <spanclass="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><aclass="group-hover:text-primary-300 dark:group-hover:text-neutral-700"style=text-decoration-line:none!importanthref=#faviconsaria-label=Anchor>#</a></span></h2><p>Congo provides a default set of blank favicons to get started but you can provide your own assets to override them. The easiest way to obtain new favicon assets is to generate them using a third-party provider like <ahref=https://favicon.iotarget=_blankrel=noreferrer>favicon.io</a>.</p><p>Icon assets should be placed directly in the <code>static/</code> folder of your website and named as per the listing below. If you use <ahref=https://favicon.iotarget=_blankrel=noreferrer>favicon.io</a>, these will be the filenames that are automatically generated for you, but you can provide your own assets if you wish.</p><divclass=highlight><pretabindex=0class=chroma><codeclass=language-shelldata-lang=shell><spanclass=line><spanclass=cl>static/
</span></span></code></pre></div><p>Alternatively, you can also completely override the default favicon behaviour and provide your own favicon HTML tags and assets. Simply provide a <code>layouts/partials/favicons.html</code> file in your project and this will be injected into the site <code><head></code> in place of the default assets.</p><h2id=iconclass="relative group">Icon <spanclass="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><aclass="group-hover:text-primary-300 dark:group-hover:text-neutral-700"style=text-decoration-line:none!importanthref=#iconaria-label=Anchor>#</a></span></h2><p>Similar to the <ahref=https://jpanther.github.io/congo/docs/shortcodes/#icon>icon shortcode</a>, you can include icons in your own templates and partials by using Congo’s <code>icon.html</code> partial. The partial takes one parameter which is the name of the icon to be included.</p><p><strong>Example:</strong></p><divclass=highlight><pretabindex=0class=chroma><codeclass=language-godata-lang=go><spanclass=line><spanclass=cl><spanclass=p>{{</span><spanclass=nx>partial</span><spanclass=s>"icon.html"</span><spanclass=s>"github"</span><spanclass=p>}}</span>
</span></span></code></pre></div><p>Icons are populated using Hugo pipelines which makes them very flexible. Congo includes a number of built-in icons for social, links and other purposes. Check the <ahref=https://jpanther.github.io/congo/samples/icons/>icon samples</a> page for a full list of supported icons.</p><p>Custom icons can be added by providing your own icon assets in the <code>assets/icons/</code> directory of your project. The icon can then be referenced in the partial by using the SVG filename without the <code>.svg</code> extension.</p><p>Icons can also be used in article content by calling the <ahref=https://jpanther.github.io/congo/docs/shortcodes/#icon>icon shortcode</a>.</p><h2id=extensionsclass="relative group">Extensions <spanclass="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><aclass="group-hover:text-primary-300 dark:group-hover:text-neutral-700"style=text-decoration-line:none!importanthref=#extensionsaria-label=Anchor>#</a></span></h2><p>Congo also provides for a number of extension partials that allow for expanding upon base functionality.</p><h3id=article-linkclass="relative group">Article link <spanclass="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><aclass="group-hover:text-primary-300 dark:group-hover:text-neutral-700"style=text-decoration-line:none!importanthref=#article-linkaria-label=Anchor>#</a></span></h3><p>If you wish to insert additional code after article links, create a <code>layouts/partials/extend-article-link.html</code> file. This is especially powerful when combined with the <ahref=https://jpanther.github.io/congo/docs/shortcodes/#badge><code>badge</code></a> shortcode which can be used to highlight metadata for certain articles.</p><h3id=head-and-footerclass="relative group">Head and Footer <spanclass="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><aclass="group-hover:text-primary-300 dark:group-hover:text-neutral-700"style=text-decoration-line:none!importanthref=#head-and-footeraria-label=Anchor>#</a></span></h3><p>The theme allows for inserting additional code directly into the <code><head></code> and <code><footer></code> sections of the template. These can be useful for providing scripts or other logic that isn’t part of the theme.</p><p>Simply create either <code>layouts/partials/extend-head.html</code> or <code>layouts/partials/extend-footer.html</code> and these will automatically be included in your website build. Both partials are injected as the last items in <code><head></code> and <code><footer></code> so they can be used to override theme defaults.</p></div></section><footerclass="max-w-prose pt-8 print:hidden"><divclass=pt-8><hrclass="border-dotted border-neutral-300 dark:border-neutral-600"><divclass="flex justify-between pt-3"><span><aclass="group flex"href=/congo/docs/shortcodes/><spanclass="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"><spanclass="ltr:inline rtl:hidden">←</span><spanclass="ltr:hidden rtl:inline">→</span></span>
