hugo-theme-contentful/articles/feed.json

{
    "version": "https://jsonfeed.org/version/1.1",
    "title": "Articles on Contentful",
    "home_page_url": "https://foo-dogsquared.github.io/hugo-theme-contentful/",
    "feed_url": "https://foo-dogsquared.github.io/hugo-theme-contentful/articles/feed.json",
    "description": "Recent content in Articles on Contentful", 
    "authors":[{"name":"John Doe"}],
    "items":
        [{"content_html":"\n\u003cdiv id=\"preamble\"\u003e\n\u003cdiv class=\"sectionbody\"\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eExtending a Hugo theme is nothing new and a \u003ca href=\"https://gohugo.io/content-management/sections/\"\u003efew\u003c/a\u003e \u003ca href=\"http://hugocodex.org/add-ons/\"\u003eplaces\u003c/a\u003e provide a place for the most common extensions.\nIn this post, I’ll be listing a few personal recipes I’ve always used for extending a Hugo theme.\nThough this only applies specifically to Contentful and may need some tweaking when applying it other themes.\u003c/p\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"sect1\"\u003e\n\u003ch2 id=\"_customizing_your_head\"\u003eCustomizing your \u003ccode\u003e\u0026lt;head\u0026gt;\u003c/code\u003e\u003c/h2\u003e\n\u003cdiv class=\"sectionbody\"\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eLet’s start with the most basic and perhaps most useful customization: modifying the \u003ccode\u003e\u0026lt;head\u003c/code\u003e\u0026gt;.\nThis is useful for adding your own CSS and JavaScript files, changing certain metadata, or adding icons.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eFirst, copy the \u003ccode\u003ehead\u003c/code\u003e partial from the theme (\u003ccode\u003etheme/contentful/layouts/partials/head.html\u003c/code\u003e) to your own (\u003ccode\u003elayouts/partials/head.html\u003c/code\u003e).\nWe’re simply taking advantage of \u003ca href=\"https://gohugo.io/templates/lookup-order/\"\u003eHugo’s lookup order\u003c/a\u003e where we’ve override the \u003ccode\u003ehead\u003c/code\u003e partial with our own copy.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eThen, feel free to add your own (or others\u0026#39;) scripts and stylesheets, \u003ca href=\"https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML\"\u003eicons and other metadata\u003c/a\u003e, or whatever suitable things.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eIn my case, I often use certain JavaScript libraries like \u003ca href=\"https://www.mathjax.org/\"\u003eMathJax\u003c/a\u003e for mathematical typesetting, \u003ca href=\"https://prismjs.com/\"\u003ePrism\u003c/a\u003e for syntax highlighting, and \u003ca href=\"https://github.com/francoischalifour/medium-zoom/\"\u003emedium-zoom\u003c/a\u003e for interactive image zooms.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eHere’s the modified code.\n(The example code is snipped for brevity.)\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"listingblock\"\u003e\n\u003cdiv class=\"content\"\u003e\n\u003cpre class=\"highlight\"\u003e\u003ccode class=\"language-go\" data-lang=\"go\"\u003e\u0026lt;!--snip--\u0026gt;\n\n{{- /* MathJax */ -}}\n\u0026lt;script src=\u0026#34;https://polyfill.io/v3/polyfill.min.js?features=es6\u0026#34;\u0026gt;\u0026lt;/script\u0026gt;\n\u0026lt;script id=\u0026#34;MathJax-script\u0026#34; defer src=\u0026#34;https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js\u0026#34;\u0026gt;\u0026lt;/script\u0026gt;\n\n{{- /* Prism.js */ -}}\n\u0026lt;link rel=\u0026#34;stylesheet\u0026#34; href=\u0026#34;https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/themes/prism-tomorrow.min.css\u0026#34; type=\u0026#34;text/css\u0026#34;\u0026gt;\n\u0026lt;script defer src=\u0026#34;https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/components/prism-core.min.js\u0026#34;\u0026gt;\u0026lt;/script\u0026gt;\n\u0026lt;script defer src=\u0026#34;https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/autoloader/prism-autoloader.min.js\u0026#34;\u0026gt;\n\u0026lt;script defer src=\u0026#34;https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/keep-markup/prism-keep-markup.min.js\u0026#34;\u0026gt;\n\n{{- /* medium-zoom */ -}}\n\u0026lt;script defer src=\u0026#34;https://cdn.jsdelivr.net/npm/medium-zoom@1.0.5/dist/medium-zoom.min.js\u0026#34;\u0026gt;\u0026lt;/script\u0026gt;\n\u0026lt;script\u0026gt;window.addEventListener(\u0026#39;load\u0026#39;, () =\u0026gt; mediumZoom(\u0026#39;article img\u0026#39;, { \u0026#39;background\u0026#39;: \u0026#39;rgba(0, 0, 0, 0.75)\u0026#39; }))\u0026lt;/script\u0026gt;\u003c/code\u003e\u003c/pre\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eSince 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 \u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script\"\u003e\u003ccode\u003edefer\u003c/code\u003e attribute\u003c/a\u003e.\nIf you have an inline script, you can simply wrap it in an event listener for page loading (\u003ccode\u003ewindow.addEventListener(\u0026#34;load\u0026#34;, your_function_goes_here)\u003c/code\u003e).\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eIf you want document-specific libraries, you have to pass some raw HTML through the parser of the document.\nFor Goldmark, the default Markdown parser starting \u003ca href=\"https://gohugo.io/news/0.60.0-relnotes/\"\u003eHugo v0.60.0\u003c/a\u003e, blocks raw HTML by default and you can disable it by setting \u003ccode\u003emarkup.goldmark.renderer.unsafe\u003c/code\u003e to \u003ccode\u003etrue\u003c/code\u003e.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eFor Blackfriday, it parses even the raw HTML just fine.\nThough, you have to set it as the default Markdown parser.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eFor \u003ca href=\"https://asciidoctor.org/\"\u003eAsciidoctor\u003c/a\u003e, you can use \u003ca href=\"https://asciidoctor.org/docs/user-manual/#passthroughs\"\u003epassthroughs\u003c/a\u003e to get raw HTML through.\u003c/p\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"sect1\"\u003e\n\u003ch2 id=\"_twitter_cards\"\u003eTwitter cards\u003c/h2\u003e\n\u003cdiv class=\"sectionbody\"\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eThis will add \u003ca href=\"https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started\"\u003eTwitter cards\u003c/a\u003e for your webpages.\n(Be sure to copy the \u003ccode\u003ehead\u003c/code\u003e partial first in your own layout folder.)\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eThankfully, Hugo already has \u003ca href=\"https://gohugo.io/templates/internal/#twitter-cards\"\u003ean internal template for Twitter cards\u003c/a\u003e.\nSimply add  \u003ccode\u003e{{- template \u0026#34;_internal/twitter_cards.html\u0026#34; . -}}\u003c/code\u003e somewhere in your own copy.\n(For reference, \u003ca href=\"https://github.com/gohugoio/hugo/blob/25a6b33693992e8c6d9c35bc1e781ce3e2bca4be/tpl/tplimpl/embedded/templates/twitter_cards.html\"\u003ehere’s the source code for the internal template\u003c/a\u003e.)\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eYou could also roll your own Twitter cards but I recommend to modify the internal template instead fitting your specific needs.\n(Copy the internal template from the given link, create it as a partial in \u003ccode\u003elayouts/partials/twitter_cards.html\u003c/code\u003e, modify it, and insert the template with \u003ccode\u003e{{- partial \u0026#34;twitter_cards.html\u0026#34; -}}\u003c/code\u003e.)\u003c/p\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"sect1\"\u003e\n\u003ch2 id=\"_open_graph_protocol\"\u003eOpen Graph protocol\u003c/h2\u003e\n\u003cdiv class=\"sectionbody\"\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eNext up, we’re implementing \u003ca href=\"https://opengraphprotocol.org/\"\u003eOpen Graph protocol\u003c/a\u003e for our webpages.\nCommonly used for making suitable format when sharing the content on certain sites like Facebook.\n(Be sure to copy the \u003ccode\u003ehead\u003c/code\u003e partial first in your own layout folder.)\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eSimilar to Twitter cards, Hugo has \u003ca href=\"https://gohugo.io/templates/internal/#open-graph\"\u003ean internal template for this\u003c/a\u003e.\nSimply add  \u003ccode\u003e{{- template \u0026#34;_internal/opengraph.html\u0026#34; . -}}\u003c/code\u003e somewhere in your own copy.\n(For reference, \u003ca href=\"https://github.com/gohugoio/hugo/blob/25a6b33693992e8c6d9c35bc1e781ce3e2bca4be/tpl/tplimpl/embedded/templates/opengraph.html\"\u003ehere’s the source code for the internal template\u003c/a\u003e.)\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eIf you want more control and customized version of the output, I recommend to copy the internal template and create a partial (e.g., \u003ccode\u003elayouts/partials/opengraph.html\u003c/code\u003e) and modify it.\u003c/p\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"sect1\"\u003e\n\u003ch2 id=\"_an_archive_page\"\u003eAn archive page\u003c/h2\u003e\n\u003cdiv class=\"sectionbody\"\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eThis will add an archive page similar to archive pages \u003ca href=\"https://davidtranscend.com/archives/\"\u003elike\u003c/a\u003e \u003ca href=\"https://lukesmith.xyz/blogindex.html\"\u003ethese\u003c/a\u003e.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"listingblock\"\u003e\n\u003cdiv class=\"content\"\u003e\n\u003cpre class=\"highlight\"\u003e\u003ccode class=\"language-go\" data-lang=\"go\"\u003e{{- define \u0026#34;main\u0026#34; -}}\n\n\u0026lt;h1\u0026gt;{{ .Title }}\u0026lt;/h1\u0026gt;\n\n{{ .Content }}\n\n\u0026lt;hr\u0026gt;\n\n{{- /* Creating a section that lists out regular pages by year */ -}}\n{{ range $.Site.RegularPages.GroupByPublishDate \u0026#34;2006\u0026#34; }}\n    {{- /* Skip regular pages with an invalid creation date string. */ -}}\n    {{- /* This is convenient if we want to exclude certain posts to be listed by giving no value to `date` in the frontmatter. */ -}}\n    {{- /* We will also exclude hidden pages. */ -}}\n    {{ if ne .Key \u0026#34;0001\u0026#34; }}\n        \u0026lt;section data-year=\u0026#34;{{ .Key }}\u0026#34;\u0026gt;\n            \u0026lt;h2 id=\u0026#34;{{ .Key }}\u0026#34;\u0026gt;{{ .Key }}\u0026lt;/h2\u0026gt;\n            \u0026lt;ul\u0026gt;\n            {{- range where .Pages \u0026#34;Params.hidden\u0026#34; \u0026#34;!=\u0026#34; true -}}\n                \u0026lt;li\u0026gt;\n                    \u0026lt;date\u0026gt;{{ .Date.Format \u0026#34;2006-01-02\u0026#34; }}\u0026lt;/date\u0026gt; -\n                    \u0026lt;a aria-label=\u0026#34;{{ .Title }}\u0026#34; href=\u0026#34;{{ .Permalink }}\u0026#34;\u0026gt;{{ .Title }}\u0026lt;/a\u0026gt;\n                \u0026lt;/li\u0026gt;\n            {{- end -}}\n            \u0026lt;/ul\u0026gt;\n        \u0026lt;/section\u0026gt;\n    {{- end }}\n{{ end }}\n\n{{- end -}}\u003c/code\u003e\u003c/pre\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eWe will simply add this as a layout in our customized theme.\nLet’s call it \u003ccode\u003earchives\u003c/code\u003e so we have to add a file in \u003ccode\u003elayouts/_default/archives.html\u003c/code\u003e then set a page of our project with the \u003ccode\u003elayout\u003c/code\u003e key in the frontmatter.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eWe want the archives page to be accessed at \u003ccode\u003e$.Site.BaseURL/archives\u003c/code\u003e so we’ll simply create \u003ccode\u003earchives.adoc\u003c/code\u003e (\u003ca href=\"https://gohugo.io/content-management/formats/#list-of-content-formats\"\u003eany valid content files with certain file extensions can do\u003c/a\u003e, I’m using \u003ca href=\"https://asciidoctor.org/\"\u003eAsciidoctor\u003c/a\u003e) with the following example content.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"listingblock\"\u003e\n\u003cdiv class=\"content\"\u003e\n\u003cpre class=\"highlight\"\u003e\u003ccode class=\"language-asciidoctor\" data-lang=\"asciidoctor\"\u003e---\ntitle: \u0026#34;Archives\u0026#34;\nlayout: \u0026#34;archive\u0026#34;\n---\n\n= Archives\n\nThis is the archives of the century.\u003c/code\u003e\u003c/pre\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"sect1\"\u003e\n\u003ch2 id=\"_configurable_social_media_links\"\u003eConfigurable social media links\u003c/h2\u003e\n\u003cdiv class=\"sectionbody\"\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eMost themes offer quick social media links with site configuration.\nHowever, it is only limited to popular media sites such as Facebook, Twitter, Instagram, GitHub, etc.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eTo get around this, we’ll make use of \u003ca href=\"https://gohugo.io/templates/data-templates/\"\u003edata templates\u003c/a\u003e.\nLet’s create a quick game plan how does it work.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eThe data is a top-level dictionary/object with each key contains an object with the following fields.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"ulist\"\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ccode\u003eurl\u003c/code\u003e is the…​ contact link itself and it is required to have it.\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ccode\u003ename\u003c/code\u003e is the text to appear in the output.\nAlso required to have.\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ccode\u003eweight\u003c/code\u003e is an integer similar to how Hugo sorts the pages with the lower weight having high precedence;\nif this key is absent, it will be interpreted as 0.\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eAnd here’s the data example in TOML which is placed in \u003ccode\u003edata/contact.toml\u003c/code\u003e.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"listingblock\"\u003e\n\u003cdiv class=\"content\"\u003e\n\u003cpre class=\"highlight\"\u003e\u003ccode class=\"language-toml\" data-lang=\"toml\"\u003e[github]\n    name = \u0026#34;GitHub\u0026#34;\n    url = \u0026#34;https://github.com/foo-dogsquared\u0026#34;\n\n[gitlab]\n    name = \u0026#34;Gitlab\u0026#34;\n    url = \u0026#34;https://gitlab.com/foo-dogsquared\u0026#34;\n\n[keybase]\n    name = \u0026#34;Keybase\u0026#34;\n    url = \u0026#34;https://keybase.io/foo_dogsquared\u0026#34;\n    weight = -1\n\n[twitter]\n    name = \u0026#34;Twitter\u0026#34;\n    url = \u0026#34;https://twitter.com/foo_dogsquared\u0026#34;\u003c/code\u003e\u003c/pre\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eI want my Keybase profile to appear first than anything else for whatever reason so the \u003ccode\u003eweight\u003c/code\u003e key is set to -1.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eWith this data, we can then create a template out of it.\nI’ve put the following template in a partial named \u003ccode\u003econtacts\u003c/code\u003e (i.e., \u003ccode\u003elayouts/partials/contacts\u003c/code\u003e).\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"listingblock\"\u003e\n\u003cdiv class=\"content\"\u003e\n\u003cpre class=\"highlight\"\u003e\u003ccode class=\"language-go\" data-lang=\"go\"\u003e\u0026lt;address\u0026gt;\n{{- range (sort $.Site.Data.contact \u0026#34;weight\u0026#34; \u0026#34;asc\u0026#34;) -}}\n| \u0026lt;a rel=\u0026#34;me\u0026#34; href=\u0026#34;{{ .url }}\u0026#34;\u0026gt;{{- .name -}}\u0026lt;/a\u0026gt; |\n{{- end -}}\n\u0026lt;/address\u0026gt;\u003c/code\u003e\u003c/pre\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eA suggestion (and an exercise) for extending this is to create image links.\nMaybe add another key named \u003ccode\u003eimage\u003c/code\u003e that accepts either URL.\nThe \u003ccode\u003ename\u003c/code\u003e would now be the image alternative text.\u003c/p\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n","date_modified":"2022-05-13T18:08:06+08:00","date_published":"2020-05-12T17:25:55+08:00","id":"https://foo-dogsquared.github.io/hugo-theme-contentful/articles/extending-contentful/","summary":"Extending a Hugo theme is nothing new and a few places 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.\n   Customizing your \u0026lt;head\u0026gt; Let’s start with the most basic and perhaps most useful customization: modifying the \u0026lt;head\u0026gt;.","tags":["theme","extending"],"title":"Extending Contentful","url":"https://foo-dogsquared.github.io/hugo-theme-contentful/articles/extending-contentful/"},{"content_html":"\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eThis theme supports RSS, Atom, and JSON feed output for more ways of publishing web content for your visitors.\nIt is also suitable for reading content from feed readers.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eHere are the following documents used as references for the creation of the output feed templates.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"ulist\"\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ca href=\"https://tools.ietf.org/html/rfc4287\"\u003eAtom 1.0 - IETF RFC4287\u003c/a\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ca href=\"https://jsonfeed.org/version/1\"\u003eJSON Feed version 1 specifications\u003c/a\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ca href=\"https://cyber.harvard.edu/rss/rss.html\"\u003eRSS 2.0 specifications\u003c/a\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eIn this demo, it is enabled and you should be able to see them through the following links:\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"ulist\"\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cp\u003e\u003cstrong\u003eRSS\u003c/strong\u003e: \u003ccode\u003e$HUGO_URL/index.rss\u003c/code\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003cstrong\u003eAtom\u003c/strong\u003e: \u003ccode\u003e$HUGO_URL/index.atom\u003c/code\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003cstrong\u003eJSON\u003c/strong\u003e: \u003ccode\u003e$HUGO_URL/index.json\u003c/code\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eFor enabling output feeds, utilize the \u003ca href=\"https://gohugo.io/templates/output-formats\"\u003eoutput formats\u003c/a\u003e in your site configuration.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eIf you’re settling with this option, here’s an example template for enabling all of the feed formats.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"listingblock\"\u003e\n\u003cdiv class=\"content\"\u003e\n\u003cpre class=\"highlight\"\u003e\u003ccode class=\"language-toml\" data-lang=\"toml\"\u003e# Visit the following for more information:\n# https://gohugo.io/templates/output-formats\n\n# Defining the media type of the output formats\n# For JSON format, it doesn\u0026#39;t need to be since it\u0026#39;s already built-in into Hugo\n[mediaTypes]\n    [mediaTypes.\u0026#34;application/atom+xml\u0026#34;]\n        suffixes = [\u0026#34;atom\u0026#34;, \u0026#34;atom.xml\u0026#34;] # You can remove the \u0026#34;atom.xml\u0026#34; if you want\n\n    # Redefining RSS media type for the additional suffix\n    [mediaTypes.\u0026#34;application/rss+xml\u0026#34;]\n        suffixes = [\u0026#34;rss\u0026#34;, \u0026#34;rss.xml\u0026#34;] # You can remove the \u0026#34;rss.xml\u0026#34; if you want\n\n\n\n# Including all of the feed output formats in the build\n[outputFormats]\n    [outputFormats.Rss]\n        mediaType = \u0026#34;application/rss+xml\u0026#34;\n        baseName = \u0026#34;feed\u0026#34;\n\n    [outputFormats.Atom]\n        mediaType = \u0026#34;application/atom+xml\u0026#34;\n        baseName = \u0026#34;feed\u0026#34;\n\n    [outputFormats.Json]\n        mediaType = \u0026#34;application/json\u0026#34;\n        baseName = \u0026#34;feed\u0026#34;\n\n\n# Indicating what output formats shall be included\n# for the following kinds\n[outputs]\n    # .Site.BaseURL/index.* is available\n    home = [\u0026#34;HTML\u0026#34;, \u0026#34;JSON\u0026#34;, \u0026#34;RSS\u0026#34;, \u0026#34;ATOM\u0026#34;]\n\n    # .Site.BaseURL/$section/index.* is available\n    section = [\u0026#34;HTML\u0026#34;, \u0026#34;JSON\u0026#34;, \u0026#34;RSS\u0026#34;, \u0026#34;ATOM\u0026#34;]\u003c/code\u003e\u003c/pre\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n","date_modified":"2022-05-13T18:08:06+08:00","date_published":"2019-09-04T17:22:44+08:00","id":"https://foo-dogsquared.github.io/hugo-theme-contentful/articles/rss-atom-and-json-feed-support/","summary":"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.\n Here are the following documents used as references for the creation of the output feed templates.\n   Atom 1.0 - IETF RFC4287\n  JSON Feed version 1 specifications\n  RSS 2.0 specifications\n   In this demo, it is enabled and you should be able to see them through the following links:","tags":["this is a test tag","tag2"],"title":"RSS, Atom, and JSON Feed Support","url":"https://foo-dogsquared.github.io/hugo-theme-contentful/articles/rss-atom-and-json-feed-support/"}]}