mirror of
https://github.com/foo-dogsquared/hugo-theme-more-contentful.git
synced 2025-01-31 04:58:14 +00:00
10 lines
11 KiB
JSON
10 lines
11 KiB
JSON
{
|
||
"version": "https://jsonfeed.org/version/1.1",
|
||
"title": "Recipes on More Contentful",
|
||
"home_page_url": "https://foo-dogsquared.github.io/hugo-theme-more-contentful/",
|
||
"feed_url": "https://foo-dogsquared.github.io/hugo-theme-more-contentful/recipes/feed.json",
|
||
"description": "Recent content in Recipes on More Contentful",
|
||
"authors":[],
|
||
"items":
|
||
[{"content_html":"\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.contacts \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","date_modified":"2020-10-20T20:38:24+08:00","date_published":"2020-10-20T20:38:24+08:00","id":"https://foo-dogsquared.github.io/hugo-theme-more-contentful/recipes/configurable-list-of-contacts/","summary":"\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","tags":null,"title":"Configurable list of contacts","url":"https://foo-dogsquared.github.io/hugo-theme-more-contentful/recipes/configurable-list-of-contacts/"},{"content_html":"\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","date_modified":"2020-10-20T20:36:55+08:00","date_published":"2020-10-20T20:36:55+08:00","id":"https://foo-dogsquared.github.io/hugo-theme-more-contentful/recipes/creating-an-archive-page/","summary":"\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","tags":null,"title":"Creating an archive page","url":"https://foo-dogsquared.github.io/hugo-theme-more-contentful/recipes/creating-an-archive-page/"}]}
|