hugo-theme-contentful/feed.atom

<?xml version="1.0" encoding="utf-8" ?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <title>Contentful</title>
  
    <link rel="self" type="application/atom+xml" href="https://foo-dogsquared.github.io/hugo-theme-contentful/feed.atom"/><link rel="canonical" type="text/html" href="https://foo-dogsquared.github.io/hugo-theme-contentful/"/><link rel="alternate" type="application/feed+json" href="https://foo-dogsquared.github.io/hugo-theme-contentful/feed.json"/><link rel="alternate" type="application/rss+xml" href="https://foo-dogsquared.github.io/hugo-theme-contentful/feed.rss"/><rights>© 2022 </rights>
  <generator uri="https://gohugo.io/" version="0.98.0">Hugo</generator>
  <updated>2020-10-20T21:36:34+08:00</updated>
  <id>https://foo-dogsquared.github.io/hugo-theme-contentful/</id><icon>https://foo-dogsquared.github.io/hugo-theme-contentful/icon.png</icon>
  <author>
    <name>John Doe</name>
    <email>johndoe@example.com</email>
    </author><entry>
    <id>https://foo-dogsquared.github.io/hugo-theme-contentful/articles/extending-contentful/</id>
    <title type="text">Extending Contentful</title>
    <link rel="alternate" href="https://foo-dogsquared.github.io/hugo-theme-contentful/articles/extending-contentful/" hreflang="en" title="Extending Contentful"/><category term="theme"/><category term="extending"/>
    <published>2020-05-12T17:25:55+08:00</published>
    <updated>2022-05-13T18:08:06+08:00</updated><content type="html">
&lt;div id=&#34;preamble&#34;&gt;
&lt;div class=&#34;sectionbody&#34;&gt;
&lt;div class=&#34;paragraph&#34;&gt;
&lt;p&gt;Extending a Hugo theme is nothing new and a &lt;a href=&#34;https://gohugo.io/content-management/sections/&#34;&gt;few&lt;/a&gt; &lt;a href=&#34;http://hugocodex.org/add-ons/&#34;&gt;places&lt;/a&gt; provide a place for the most common extensions.
In this post, I’ll be listing a few personal recipes I’ve always used for extending a Hugo theme.
Though this only applies specifically to Contentful and may need some tweaking when applying it other themes.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&#34;sect1&#34;&gt;
&lt;h2 id=&#34;_customizing_your_head&#34;&gt;Customizing your &lt;code&gt;&amp;lt;head&amp;gt;&lt;/code&gt;&lt;/h2&gt;
&lt;div class=&#34;sectionbody&#34;&gt;
&lt;div class=&#34;paragraph&#34;&gt;
&lt;p&gt;Let’s start with the most basic and perhaps most useful customization: modifying the &lt;code&gt;&amp;lt;head&lt;/code&gt;&amp;gt;.
This is useful for adding your own CSS and JavaScript files, changing certain metadata, or adding icons.&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&#34;paragraph&#34;&gt;
&lt;p&gt;First, copy the &lt;code&gt;head&lt;/code&gt; partial from the theme (&lt;code&gt;theme/contentful/layouts/partials/head.html&lt;/code&gt;) to your own (&lt;code&gt;layouts/partials/head.html&lt;/code&gt;).
We’re simply taking advantage of &lt;a href=&#34;https://gohugo.io/templates/lookup-order/&#34;&gt;Hugo’s lookup order&lt;/a&gt; where we’ve override the &lt;code&gt;head&lt;/code&gt; partial with our own copy.&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&#34;paragraph&#34;&gt;
&lt;p&gt;Then, feel free to add your own (or others&amp;#39;) scripts and stylesheets, &lt;a href=&#34;https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML&#34;&gt;icons and other metadata&lt;/a&gt;, or whatever suitable things.&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&#34;paragraph&#34;&gt;
&lt;p&gt;In my case, I often use certain JavaScript libraries like &lt;a href=&#34;https://www.mathjax.org/&#34;&gt;MathJax&lt;/a&gt; for mathematical typesetting, &lt;a href=&#34;https://prismjs.com/&#34;&gt;Prism&lt;/a&gt; for syntax highlighting, and &lt;a href=&#34;https://github.com/francoischalifour/medium-zoom/&#34;&gt;medium-zoom&lt;/a&gt; for interactive image zooms.&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&#34;paragraph&#34;&gt;
&lt;p&gt;Here’s the modified code.
(The example code is snipped for brevity.)&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&#34;listingblock&#34;&gt;
&lt;div class=&#34;content&#34;&gt;
&lt;pre class=&#34;highlight&#34;&gt;&lt;code class=&#34;language-go&#34; data-lang=&#34;go&#34;&gt;&amp;lt;!--snip--&amp;gt;

{{- /* MathJax */ -}}
&amp;lt;script src=&amp;#34;https://polyfill.io/v3/polyfill.min.js?features=es6&amp;#34;&amp;gt;&amp;lt;/script&amp;gt;
&amp;lt;script id=&amp;#34;MathJax-script&amp;#34; defer src=&amp;#34;https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js&amp;#34;&amp;gt;&amp;lt;/script&amp;gt;

{{- /* Prism.js */ -}}
&amp;lt;link rel=&amp;#34;stylesheet&amp;#34; href=&amp;#34;https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/themes/prism-tomorrow.min.css&amp;#34; type=&amp;#34;text/css&amp;#34;&amp;gt;
&amp;lt;script defer src=&amp;#34;https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/components/prism-core.min.js&amp;#34;&amp;gt;&amp;lt;/script&amp;gt;
&amp;lt;script defer src=&amp;#34;https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/autoloader/prism-autoloader.min.js&amp;#34;&amp;gt;
&amp;lt;script defer src=&amp;#34;https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/keep-markup/prism-keep-markup.min.js&amp;#34;&amp;gt;

{{- /* medium-zoom */ -}}
&amp;lt;script defer src=&amp;#34;https://cdn.jsdelivr.net/npm/medium-zoom@1.0.5/dist/medium-zoom.min.js&amp;#34;&amp;gt;&amp;lt;/script&amp;gt;
&amp;lt;script&amp;gt;window.addEventListener(&amp;#39;load&amp;#39;, () =&amp;gt; mediumZoom(&amp;#39;article img&amp;#39;, { &amp;#39;background&amp;#39;: &amp;#39;rgba(0, 0, 0, 0.75)&amp;#39; }))&amp;lt;/script&amp;gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&#34;paragraph&#34;&gt;
&lt;p&gt;Since most of the JavaScript libraries used here are not really a requirement (except for MathJax for mathematical typesetting), I’ve set them to be loaded at the end of the page loading with &lt;a href=&#34;https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script&#34;&gt;&lt;code&gt;defer&lt;/code&gt; attribute&lt;/a&gt;.
If you have an inline script, you can simply wrap it in an event listener for page loading (&lt;code&gt;window.addEventListener(&amp;#34;load&amp;#34;, your_function_goes_here)&lt;/code&gt;).&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&#34;paragraph&#34;&gt;
&lt;p&gt;If you want document-specific libraries, you have to pass some raw HTML through the parser of the document.
For Goldmark, the default Markdown parser starting &lt;a href=&#34;https://gohugo.io/news/0.60.0-relnotes/&#34;&gt;Hugo v0.60.0&lt;/a&gt;, blocks raw HTML by default and you can disable it by setting &lt;code&gt;markup.goldmark.renderer.unsafe&lt;/code&gt; to &lt;code&gt;true&lt;/code&gt;.&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&#34;paragraph&#34;&gt;
&lt;p&gt;For Blackfriday, it parses even the raw HTML just fine.
Though, you have to set it as the default Markdown parser.&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&#34;paragraph&#34;&gt;
&lt;p&gt;For &lt;a href=&#34;https://asciidoctor.org/&#34;&gt;Asciidoctor&lt;/a&gt;, you can use &lt;a href=&#34;https://asciidoctor.org/docs/user-manual/#passthroughs&#34;&gt;passthroughs&lt;/a&gt; to get raw HTML through.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&#34;sect1&#34;&gt;
&lt;h2 id=&#34;_twitter_cards&#34;&gt;Twitter cards&lt;/h2&gt;
&lt;div class=&#34;sectionbody&#34;&gt;
&lt;div class=&#34;paragraph&#34;&gt;
&lt;p&gt;This will add &lt;a href=&#34;https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started&#34;&gt;Twitter cards&lt;/a&gt; for your webpages.
(Be sure to copy the &lt;code&gt;head&lt;/code&gt; partial first in your own layout folder.)&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&#34;paragraph&#34;&gt;
&lt;p&gt;Thankfully, Hugo already has &lt;a href=&#34;https://gohugo.io/templates/internal/#twitter-cards&#34;&gt;an internal template for Twitter cards&lt;/a&gt;.
Simply add  &lt;code&gt;{{- template &amp;#34;_internal/twitter_cards.html&amp;#34; . -}}&lt;/code&gt; somewhere in your own copy.
(For reference, &lt;a href=&#34;https://github.com/gohugoio/hugo/blob/25a6b33693992e8c6d9c35bc1e781ce3e2bca4be/tpl/tplimpl/embedded/templates/twitter_cards.html&#34;&gt;here’s the source code for the internal template&lt;/a&gt;.)&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&#34;paragraph&#34;&gt;
&lt;p&gt;You could also roll your own Twitter cards but I recommend to modify the internal template instead fitting your specific needs.
(Copy the internal template from the given link, create it as a partial in &lt;code&gt;layouts/partials/twitter_cards.html&lt;/code&gt;, modify it, and insert the template with &lt;code&gt;{{- partial &amp;#34;twitter_cards.html&amp;#34; -}}&lt;/code&gt;.)&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&#34;sect1&#34;&gt;
&lt;h2 id=&#34;_open_graph_protocol&#34;&gt;Open Graph protocol&lt;/h2&gt;
&lt;div class=&#34;sectionbody&#34;&gt;
&lt;div class=&#34;paragraph&#34;&gt;
&lt;p&gt;Next up, we’re implementing &lt;a href=&#34;https://opengraphprotocol.org/&#34;&gt;Open Graph protocol&lt;/a&gt; for our webpages.
Commonly used for making suitable format when sharing the content on certain sites like Facebook.
(Be sure to copy the &lt;code&gt;head&lt;/code&gt; partial first in your own layout folder.)&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&#34;paragraph&#34;&gt;
&lt;p&gt;Similar to Twitter cards, Hugo has &lt;a href=&#34;https://gohugo.io/templates/internal/#open-graph&#34;&gt;an internal template for this&lt;/a&gt;.
Simply add  &lt;code&gt;{{- template &amp;#34;_internal/opengraph.html&amp;#34; . -}}&lt;/code&gt; somewhere in your own copy.
(For reference, &lt;a href=&#34;https://github.com/gohugoio/hugo/blob/25a6b33693992e8c6d9c35bc1e781ce3e2bca4be/tpl/tplimpl/embedded/templates/opengraph.html&#34;&gt;here’s the source code for the internal template&lt;/a&gt;.)&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&#34;paragraph&#34;&gt;
&lt;p&gt;If you want more control and customized version of the output, I recommend to copy the internal template and create a partial (e.g., &lt;code&gt;layouts/partials/opengraph.html&lt;/code&gt;) and modify it.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&#34;sect1&#34;&gt;
&lt;h2 id=&#34;_an_archive_page&#34;&gt;An archive page&lt;/h2&gt;
&lt;div class=&#34;sectionbody&#34;&gt;
&lt;div class=&#34;paragraph&#34;&gt;
&lt;p&gt;This will add an archive page similar to archive pages &lt;a href=&#34;https://davidtranscend.com/archives/&#34;&gt;like&lt;/a&gt; &lt;a href=&#34;https://lukesmith.xyz/blogindex.html&#34;&gt;these&lt;/a&gt;.&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&#34;listingblock&#34;&gt;
&lt;div class=&#34;content&#34;&gt;
&lt;pre class=&#34;highlight&#34;&gt;&lt;code class=&#34;language-go&#34; data-lang=&#34;go&#34;&gt;{{- define &amp;#34;main&amp;#34; -}}

&amp;lt;h1&amp;gt;{{ .Title }}&amp;lt;/h1&amp;gt;

{{ .Content }}

&amp;lt;hr&amp;gt;

{{- /* Creating a section that lists out regular pages by year */ -}}
{{ range $.Site.RegularPages.GroupByPublishDate &amp;#34;2006&amp;#34; }}
    {{- /* Skip regular pages with an invalid creation date string. */ -}}
    {{- /* This is convenient if we want to exclude certain posts to be listed by giving no value to `date` in the frontmatter. */ -}}
    {{- /* We will also exclude hidden pages. */ -}}
    {{ if ne .Key &amp;#34;0001&amp;#34; }}
        &amp;lt;section data-year=&amp;#34;{{ .Key }}&amp;#34;&amp;gt;
            &amp;lt;h2 id=&amp;#34;{{ .Key }}&amp;#34;&amp;gt;{{ .Key }}&amp;lt;/h2&amp;gt;
            &amp;lt;ul&amp;gt;
            {{- range where .Pages &amp;#34;Params.hidden&amp;#34; &amp;#34;!=&amp;#34; true -}}
                &amp;lt;li&amp;gt;
                    &amp;lt;date&amp;gt;{{ .Date.Format &amp;#34;2006-01-02&amp;#34; }}&amp;lt;/date&amp;gt; -
                    &amp;lt;a aria-label=&amp;#34;{{ .Title }}&amp;#34; href=&amp;#34;{{ .Permalink }}&amp;#34;&amp;gt;{{ .Title }}&amp;lt;/a&amp;gt;
                &amp;lt;/li&amp;gt;
            {{- end -}}
            &amp;lt;/ul&amp;gt;
        &amp;lt;/section&amp;gt;
    {{- end }}
{{ end }}

{{- end -}}&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&#34;paragraph&#34;&gt;
&lt;p&gt;We will simply add this as a layout in our customized theme.
Let’s call it &lt;code&gt;archives&lt;/code&gt; so we have to add a file in &lt;code&gt;layouts/_default/archives.html&lt;/code&gt; then set a page of our project with the &lt;code&gt;layout&lt;/code&gt; key in the frontmatter.&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&#34;paragraph&#34;&gt;
&lt;p&gt;We want the archives page to be accessed at &lt;code&gt;$.Site.BaseURL/archives&lt;/code&gt; so we’ll simply create &lt;code&gt;archives.adoc&lt;/code&gt; (&lt;a href=&#34;https://gohugo.io/content-management/formats/#list-of-content-formats&#34;&gt;any valid content files with certain file extensions can do&lt;/a&gt;, I’m using &lt;a href=&#34;https://asciidoctor.org/&#34;&gt;Asciidoctor&lt;/a&gt;) with the following example content.&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&#34;listingblock&#34;&gt;
&lt;div class=&#34;content&#34;&gt;
&lt;pre class=&#34;highlight&#34;&gt;&lt;code class=&#34;language-asciidoctor&#34; data-lang=&#34;asciidoctor&#34;&gt;---
title: &amp;#34;Archives&amp;#34;
layout: &amp;#34;archive&amp;#34;
---

= Archives

This is the archives of the century.&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&#34;sect1&#34;&gt;
&lt;h2 id=&#34;_configurable_social_media_links&#34;&gt;Configurable social media links&lt;/h2&gt;
&lt;div class=&#34;sectionbody&#34;&gt;
&lt;div class=&#34;paragraph&#34;&gt;
&lt;p&gt;Most themes offer quick social media links with site configuration.
However, it is only limited to popular media sites such as Facebook, Twitter, Instagram, GitHub, etc.&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&#34;paragraph&#34;&gt;
&lt;p&gt;To get around this, we’ll make use of &lt;a href=&#34;https://gohugo.io/templates/data-templates/&#34;&gt;data templates&lt;/a&gt;.
Let’s create a quick game plan how does it work.&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&#34;paragraph&#34;&gt;
&lt;p&gt;The data is a top-level dictionary/object with each key contains an object with the following fields.&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&#34;ulist&#34;&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;url&lt;/code&gt; is the…​ contact link itself and it is required to have it.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;name&lt;/code&gt; is the text to appear in the output.
Also required to have.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;weight&lt;/code&gt; is an integer similar to how Hugo sorts the pages with the lower weight having high precedence;
if this key is absent, it will be interpreted as 0.&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div class=&#34;paragraph&#34;&gt;
&lt;p&gt;And here’s the data example in TOML which is placed in &lt;code&gt;data/contact.toml&lt;/code&gt;.&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&#34;listingblock&#34;&gt;
&lt;div class=&#34;content&#34;&gt;
&lt;pre class=&#34;highlight&#34;&gt;&lt;code class=&#34;language-toml&#34; data-lang=&#34;toml&#34;&gt;[github]
    name = &amp;#34;GitHub&amp;#34;
    url = &amp;#34;https://github.com/foo-dogsquared&amp;#34;

[gitlab]
    name = &amp;#34;Gitlab&amp;#34;
    url = &amp;#34;https://gitlab.com/foo-dogsquared&amp;#34;

[keybase]
    name = &amp;#34;Keybase&amp;#34;
    url = &amp;#34;https://keybase.io/foo_dogsquared&amp;#34;
    weight = -1

[twitter]
    name = &amp;#34;Twitter&amp;#34;
    url = &amp;#34;https://twitter.com/foo_dogsquared&amp;#34;&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&#34;paragraph&#34;&gt;
&lt;p&gt;I want my Keybase profile to appear first than anything else for whatever reason so the &lt;code&gt;weight&lt;/code&gt; key is set to -1.&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&#34;paragraph&#34;&gt;
&lt;p&gt;With this data, we can then create a template out of it.
I’ve put the following template in a partial named &lt;code&gt;contacts&lt;/code&gt; (i.e., &lt;code&gt;layouts/partials/contacts&lt;/code&gt;).&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&#34;listingblock&#34;&gt;
&lt;div class=&#34;content&#34;&gt;
&lt;pre class=&#34;highlight&#34;&gt;&lt;code class=&#34;language-go&#34; data-lang=&#34;go&#34;&gt;&amp;lt;address&amp;gt;
{{- range (sort $.Site.Data.contact &amp;#34;weight&amp;#34; &amp;#34;asc&amp;#34;) -}}
| &amp;lt;a rel=&amp;#34;me&amp;#34; href=&amp;#34;{{ .url }}&amp;#34;&amp;gt;{{- .name -}}&amp;lt;/a&amp;gt; |
{{- end -}}
&amp;lt;/address&amp;gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&#34;paragraph&#34;&gt;
&lt;p&gt;A suggestion (and an exercise) for extending this is to create image links.
Maybe add another key named &lt;code&gt;image&lt;/code&gt; that accepts either URL.
The &lt;code&gt;name&lt;/code&gt; would now be the image alternative text.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</content>
  </entry><entry>
    <id>https://foo-dogsquared.github.io/hugo-theme-contentful/articles/rss-atom-and-json-feed-support/</id>
    <title type="text">RSS, Atom, and JSON Feed Support</title>
    <link rel="alternate" href="https://foo-dogsquared.github.io/hugo-theme-contentful/articles/rss-atom-and-json-feed-support/" hreflang="en" title="RSS, Atom, and JSON Feed Support"/><author>
      <name>John Doe</name>
    </author><author>
      <name>Jane Doe</name>
    </author><category term="this is a test tag"/><category term="tag2"/>
    <published>2019-09-04T17:22:44+08:00</published>
    <updated>2022-05-13T18:08:06+08:00</updated><content type="html">&lt;div class=&#34;paragraph&#34;&gt;
&lt;p&gt;This theme supports RSS, Atom, and JSON feed output for more ways of publishing web content for your visitors.
It is also suitable for reading content from feed readers.&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&#34;paragraph&#34;&gt;
&lt;p&gt;Here are the following documents used as references for the creation of the output feed templates.&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&#34;ulist&#34;&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;a href=&#34;https://tools.ietf.org/html/rfc4287&#34;&gt;Atom 1.0 - IETF RFC4287&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;a href=&#34;https://jsonfeed.org/version/1&#34;&gt;JSON Feed version 1 specifications&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;a href=&#34;https://cyber.harvard.edu/rss/rss.html&#34;&gt;RSS 2.0 specifications&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div class=&#34;paragraph&#34;&gt;
&lt;p&gt;In this demo, it is enabled and you should be able to see them through the following links:&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&#34;ulist&#34;&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;RSS&lt;/strong&gt;: &lt;code&gt;$HUGO_URL/index.rss&lt;/code&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Atom&lt;/strong&gt;: &lt;code&gt;$HUGO_URL/index.atom&lt;/code&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;JSON&lt;/strong&gt;: &lt;code&gt;$HUGO_URL/index.json&lt;/code&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div class=&#34;paragraph&#34;&gt;
&lt;p&gt;For enabling output feeds, utilize the &lt;a href=&#34;https://gohugo.io/templates/output-formats&#34;&gt;output formats&lt;/a&gt; in your site configuration.&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&#34;paragraph&#34;&gt;
&lt;p&gt;If you’re settling with this option, here’s an example template for enabling all of the feed formats.&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&#34;listingblock&#34;&gt;
&lt;div class=&#34;content&#34;&gt;
&lt;pre class=&#34;highlight&#34;&gt;&lt;code class=&#34;language-toml&#34; data-lang=&#34;toml&#34;&gt;# Visit the following for more information:
# https://gohugo.io/templates/output-formats

# Defining the media type of the output formats
# For JSON format, it doesn&amp;#39;t need to be since it&amp;#39;s already built-in into Hugo
[mediaTypes]
    [mediaTypes.&amp;#34;application/atom+xml&amp;#34;]
        suffixes = [&amp;#34;atom&amp;#34;, &amp;#34;atom.xml&amp;#34;] # You can remove the &amp;#34;atom.xml&amp;#34; if you want

    # Redefining RSS media type for the additional suffix
    [mediaTypes.&amp;#34;application/rss+xml&amp;#34;]
        suffixes = [&amp;#34;rss&amp;#34;, &amp;#34;rss.xml&amp;#34;] # You can remove the &amp;#34;rss.xml&amp;#34; if you want



# Including all of the feed output formats in the build
[outputFormats]
    [outputFormats.Rss]
        mediaType = &amp;#34;application/rss+xml&amp;#34;
        baseName = &amp;#34;feed&amp;#34;

    [outputFormats.Atom]
        mediaType = &amp;#34;application/atom+xml&amp;#34;
        baseName = &amp;#34;feed&amp;#34;

    [outputFormats.Json]
        mediaType = &amp;#34;application/json&amp;#34;
        baseName = &amp;#34;feed&amp;#34;


# Indicating what output formats shall be included
# for the following kinds
[outputs]
    # .Site.BaseURL/index.* is available
    home = [&amp;#34;HTML&amp;#34;, &amp;#34;JSON&amp;#34;, &amp;#34;RSS&amp;#34;, &amp;#34;ATOM&amp;#34;]

    # .Site.BaseURL/$section/index.* is available
    section = [&amp;#34;HTML&amp;#34;, &amp;#34;JSON&amp;#34;, &amp;#34;RSS&amp;#34;, &amp;#34;ATOM&amp;#34;]&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;
&lt;/div&gt;
</content>
  </entry></feed>