2021-07-07 07:53:40 +00:00
<?xml version="1.0" encoding="utf-8" ?>
<feed xmlns="http://www.w3.org/2005/Atom">
2022-04-30 12:42:22 +00:00
<title>Recipes on More Contentful</title>
2021-07-07 07:53:40 +00:00
2023-02-21 06:49:55 +00:00
<link rel="self" type="application/atom+xml" href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/recipes/feed.atom"/><link rel="canonical" type="text/html" href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/recipes/"/><link rel="alternate" type="application/feed+json" href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/recipes/feed.json"/><link rel="alternate" type="application/rss+xml" href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/recipes/feed.rss"/><rights>© 2023 </rights>
2022-04-30 12:42:22 +00:00
<generator uri="https://gohugo.io/" version="0.96.0">Hugo</generator>
2021-07-07 07:53:40 +00:00
<updated>2020-05-12T17:25:55+08:00</updated>
2022-04-30 13:04:28 +00:00
<id>https://foo-dogsquared.github.io/hugo-theme-more-contentful</id><icon>https://foo-dogsquared.github.io/hugo-theme-more-contentful/icon.png</icon>
2021-07-07 07:53:40 +00:00
<author>
<name>John Doe</name>
<email>johndoe@example.com</email>
</author><entry>
2022-04-30 13:04:28 +00:00
<id>https://foo-dogsquared.github.io/hugo-theme-more-contentful/recipes/configurable-list-of-contacts/</id>
2021-07-07 07:53:40 +00:00
<title type="text">Configurable list of contacts</title>
2022-04-30 13:04:28 +00:00
<link rel="alternate" href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/recipes/configurable-list-of-contacts/" hreflang="en" title="Configurable list of contacts"/>
2021-07-07 07:53:40 +00:00
<published>2020-10-20T20:38:24+08:00</published>
2023-02-24 13:35:28 +00:00
<updated>2023-02-24T21:30:33+08:00</updated><content type="html"><div class="paragraph">
2021-07-07 07:53:40 +00:00
<p>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.</p>
</div>
<div class="paragraph">
<p>To get around this, we’ ll make use of <a href="https://gohugo.io/templates/data-templates/">data templates</a>.
Let’ s create a quick game plan how does it work.</p>
</div>
<div class="paragraph">
<p>The data is a top-level dictionary/object with each key contains an object with the following fields.</p>
</div>
<div class="ulist">
<ul>
<li>
<p><code>url</code> is the… contact link itself and it is required to have it.</p>
</li>
<li>
<p><code>name</code> is the text to appear in the output.
Also required to have.</p>
</li>
<li>
<p><code>weight</code> 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.</p>
</li>
</ul>
</div>
<div class="paragraph">
<p>And here’ s the data example in TOML which is placed in <code>data/contact.toml</code>.</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlight"><code class="language-toml" data-lang="toml">[github]
name = &#34;GitHub&#34;
url = &#34;https://github.com/foo-dogsquared&#34;
[gitlab]
name = &#34;Gitlab&#34;
url = &#34;https://gitlab.com/foo-dogsquared&#34;
[keybase]
name = &#34;Keybase&#34;
url = &#34;https://keybase.io/foo_dogsquared&#34;
weight = -1
[twitter]
name = &#34;Twitter&#34;
url = &#34;https://twitter.com/foo_dogsquared&#34;</code></pre>
</div>
</div>
<div class="paragraph">
<p>I want my Keybase profile to appear first than anything else for whatever reason so the <code>weight</code> key is set to -1.</p>
</div>
<div class="paragraph">
<p>With this data, we can then create a template out of it.
I’ ve put the following template in a partial named <code>contacts</code> (i.e., <code>layouts/partials/contacts</code>).</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlight"><code class="language-go" data-lang="go">&lt;address&gt;
{{- range (sort $.Site.Data.contacts &#34;weight&#34; &#34;asc&#34;) -}}
| &lt;a rel=&#34;me&#34; href=&#34;{{ .url }}&#34;&gt;{{- .name -}}&lt;/a&gt; |
{{- end -}}
&lt;/address&gt;</code></pre>
</div>
</div>
<div class="paragraph">
<p>A suggestion (and an exercise) for extending this is to create image links.
Maybe add another key named <code>image</code> that accepts either URL.
The <code>name</code> would now be the image alternative text.</p>
</div>
2022-04-30 12:42:22 +00:00
</content>
</entry><entry>
2022-04-30 13:04:28 +00:00
<id>https://foo-dogsquared.github.io/hugo-theme-more-contentful/recipes/creating-an-archive-page/</id>
2022-04-30 12:42:22 +00:00
<title type="text">Creating an archive page</title>
2022-04-30 13:04:28 +00:00
<link rel="alternate" href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/recipes/creating-an-archive-page/" hreflang="en" title="Creating an archive page"/>
2022-04-30 12:42:22 +00:00
<published>2020-10-20T20:36:55+08:00</published>
2023-02-24 13:35:28 +00:00
<updated>2023-02-24T21:30:33+08:00</updated><content type="html"><div class="paragraph">
2022-04-30 12:42:22 +00:00
<p>This will add an archive page similar to archive pages <a href="https://davidtranscend.com/archives/">like</a> <a href="https://lukesmith.xyz/blogindex.html">these</a>.</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlight"><code class="language-go" data-lang="go">{{- define &#34;main&#34; -}}
&lt;h1&gt;{{ .Title }}&lt;/h1&gt;
{{ .Content }}
&lt;hr&gt;
{{- /* Creating a section that lists out regular pages by year */ -}}
{{ range $.Site.RegularPages.GroupByPublishDate &#34;2006&#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 &#34;0001&#34; }}
&lt;section data-year=&#34;{{ .Key }}&#34;&gt;
&lt;h2 id=&#34;{{ .Key }}&#34;&gt;{{ .Key }}&lt;/h2&gt;
&lt;ul&gt;
{{- range where .Pages &#34;Params.hidden&#34; &#34;!=&#34; true -}}
&lt;li&gt;
&lt;date&gt;{{ .Date.Format &#34;2006-01-02&#34; }}&lt;/date&gt; -
&lt;a aria-label=&#34;{{ .Title }}&#34; href=&#34;{{ .Permalink }}&#34;&gt;{{ .Title }}&lt;/a&gt;
&lt;/li&gt;
{{- end -}}
&lt;/ul&gt;
&lt;/section&gt;
{{- end }}
{{ end }}
{{- end -}}</code></pre>
</div>
</div>
<div class="paragraph">
<p>We will simply add this as a layout in our customized theme.
Let’ s call it <code>archives</code> so we have to add a file in <code>layouts/_default/archives.html</code> then set a page of our project with the <code>layout</code> key in the frontmatter.</p>
</div>
<div class="paragraph">
<p>We want the archives page to be accessed at <code>$.Site.BaseURL/archives</code> so we’ ll simply create <code>archives.adoc</code> (<a href="https://gohugo.io/content-management/formats/#list-of-content-formats">any valid content files with certain file extensions can do</a>, I’ m using <a href="https://asciidoctor.org/">Asciidoctor</a>) with the following example content.</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlight"><code class="language-asciidoctor" data-lang="asciidoctor">---
title: &#34;Archives&#34;
layout: &#34;archive&#34;
---
= Archives
This is the archives of the century.</code></pre>
</div>
</div>
2021-07-07 07:53:40 +00:00
</content>
</entry></feed>