Adding Tag Links to My Hugo Site Posts

*NOTE: TODO: This page needs updates to work with MDX*

</div></section><section class="p_default_section standard_category_section flow"><div class="content flow"><p>### Goal: Get tags working on this site √</p></div></section><section class="p_default_section standard_category_section flow"><div class="content flow"><p>This was easy... Tags work out of the box with Hugo. The only thing I did was updated the config file to remove the auto generated `categories`. That was done by just adding this to the config.toml file:</p></div></section><section class="code_section raw_category_section flow" xml{numberLines="true}"><div class="heading_group"> <h2>Code</h2></div><pre><code><span class="numberedLine"><span class="text plain">[taxonomies]</span> <span class="numberedLine"> tag = "tags"</span></span></code></pre></section><section class="p_default_section standard_category_section flow"></section><section class="p_default_section standard_category_section flow"><div class="content flow"><p>That overwrites the existing `[taxonomies]` which has categories with this option that only contains tags.</p></div></section><section class="p_default_section standard_category_section flow"><div class="content flow"><p>### Goal: Put links to the tag pages on the individual post pages √</p></div></section><section class="p_default_section standard_category_section flow"><div class="content flow"><p>This was pretty straight forward with a pull from the documentation. The page where the edit was made for my theme is:</p></div></section><section class="p_default_section standard_category_section flow"><div class="content flow"><p>hugo-site/themes/MY_THEME/layouts/partials/single/title.html</p></div></section><section class="p_default_section standard_category_section flow"><div class="content flow"><p>All I had to do was drop this code in:</p></div></section><section class="code_section raw_category_section flow" xml{numberLines="true}"><div class="heading_group"> <h2>Code</h2></div><pre><code><span class="numberedLine"><span class="text plain">{{ range $elem_index, $elem_val := (.GetTerms "tags") }}</span> <span class="numberedLine"> {{- if gt $elem_index 0 }}, {{ end -}}</span> <span class="numberedLine"> <a href="{{ .Permalink }}">{{ .LinkTitle }}</a></span> <span class="numberedLine">{{- end -}}</span></span></code></pre></section><section class="p_default_section standard_category_section flow"></section><section class="p_default_section standard_category_section flow"><div class="content flow"><p>That code loops through all the tags. If there is more than one, it puts a comma between them.</p></div></section><section class="p_default_section standard_category_section flow"><div class="content flow"><p>### Goal: Put links to the tag pages under the post titles on the index pages √</p></div></section><section class="p_default_section standard_category_section flow"><div class="content flow"><p>This was pretty much the same as the single page. The pages to edit was:</p></div></section><section class="p_default_section standard_category_section flow"><div class="content flow"><p>hugo-site/themes/MY_THEME/layouts/_default/summary.html</p></div></section><section class="p_default_section standard_category_section flow"><div class="content flow"><p>This time the code was:</p></div></section><section class="code_section raw_category_section flow" xml{numberLines="true}"><div class="heading_group"> <h2>Code</h2></div><pre><code><span class="numberedLine"><span class="text plain">{{ range $elem_index, $elem_val := (.GetTerms "tags") }}</span> <span class="numberedLine"> {{- if eq $elem_index 0 }} - {{ end -}}</span> <span class="numberedLine"> {{- if gt $elem_index 0 }}, {{ end -}}</span> <span class="numberedLine"> <a href="{{ .Permalink }}">{{ .LinkTitle }}</a></span> <span class="numberedLine">{{- end -}}</span></span></code></pre></section><section class="p_default_section standard_category_section flow"></section><section class="p_default_section standard_category_section flow"><div class="content flow"><p>The difference is the line `{{- if eq $elem_index 0 }} - {{ end -}}`. That one prints out a dash before the first tag (if there are any). I use that for a separation from the date that comes in just before it.</p></div></section><section class="p_default_section standard_category_section flow"><div class="content flow"><p>I was thinking I'd try to output just the first tag, but after seeing the full list, I'm fine with that. So, this has me in good shape for the tags.</p></div></section><section class="p_default_section standard_category_section flow"><div class="content flow"><p>### Other Stuff</p></div></section><section class="p_default_section standard_category_section flow"><div class="content flow"><p>Reference to the different Hugo tokens that can be used in templates:</p></div></section><section class="code_section raw_category_section flow"><div class="heading_group"> <h2>Code</h2></div><pre><code><span class="numberedLine"><span class="text html basic"><span class="meta tag inline table html"><span class="punctuation definition tag begin html"><</span><span class="entity name tag inline table html">table</span><span class="punctuation definition tag end html">></span></span></span> <span class="numberedLine"> <span class="meta tag inline table html"><span class="punctuation definition tag begin html"><</span><span class="entity name tag inline table html">tr</span><span class="punctuation definition tag end html">></span></span></span> <span class="numberedLine"> <span class="meta tag inline table html"><span class="punctuation definition tag begin html"><</span><span class="entity name tag inline table html">td</span><span class="punctuation definition tag end html">></span></span>{{/* */}}<span class="meta tag inline table html"><span class="punctuation definition tag begin html"></</span><span class="entity name tag inline table html">td</span><span class="punctuation definition tag end html">></span></span></span> <span class="numberedLine"> <span class="meta tag inline table html"><span class="punctuation definition tag begin html"><</span><span class="entity name tag inline table html">td</span><span class="punctuation definition tag end html">></span></span>comment<span class="meta tag inline table html"><span class="punctuation definition tag begin html"></</span><span class="entity name tag inline table html">td</span><span class="punctuation definition tag end html">></span></span></span> <span class="numberedLine"> <span class="meta tag inline table html"><span class="punctuation definition tag begin html"></</span><span class="entity name tag inline table html">tr</span><span class="punctuation definition tag end html">></span></span></span> <span class="numberedLine"> <span class="meta tag inline table html"><span class="punctuation definition tag begin html"><</span><span class="entity name tag inline table html">tr</span><span class="punctuation definition tag end html">></span></span></span> <span class="numberedLine"> <span class="meta tag inline table html"><span class="punctuation definition tag begin html"><</span><span class="entity name tag inline table html">td</span><span class="punctuation definition tag end html">></span></span><span class="meta tag inline table html"><span class="punctuation definition tag begin html"></</span><span class="entity name tag inline table html">td</span><span class="punctuation definition tag end html">></span></span></span> <span class="numberedLine"> <span class="meta tag inline table html"><span class="punctuation definition tag begin html"><</span><span class="entity name tag inline table html">td</span><span class="punctuation definition tag end html">></span></span><span class="meta tag inline table html"><span class="punctuation definition tag begin html"></</span><span class="entity name tag inline table html">td</span><span class="punctuation definition tag end html">></span></span></span> <span class="numberedLine"> <span class="meta tag inline table html"><span class="punctuation definition tag begin html"></</span><span class="entity name tag inline table html">tr</span><span class="punctuation definition tag end html">></span></span></span> <span class="numberedLine"> <span class="meta tag inline table html"><span class="punctuation definition tag begin html"><</span><span class="entity name tag inline table html">tr</span><span class="punctuation definition tag end html">></span></span></span> <span class="numberedLine"> <span class="meta tag inline table html"><span class="punctuation definition tag begin html"><</span><span class="entity name tag inline table html">td</span><span class="punctuation definition tag end html">></span></span>{{ }}<span class="meta tag inline table html"><span class="punctuation definition tag begin html"></</span><span class="entity name tag inline table html">td</span><span class="punctuation definition tag end html">></span></span></span> <span class="numberedLine"> <span class="meta tag inline table html"><span class="punctuation definition tag begin html"><</span><span class="entity name tag inline table html">td</span><span class="punctuation definition tag end html">></span></span>output<span class="meta tag inline table html"><span class="punctuation definition tag begin html"></</span><span class="entity name tag inline table html">td</span><span class="punctuation definition tag end html">></span></span></span> <span class="numberedLine"> <span class="meta tag inline table html"><span class="punctuation definition tag begin html"></</span><span class="entity name tag inline table html">tr</span><span class="punctuation definition tag end html">></span></span></span> <span class="numberedLine"> <span class="meta tag inline table html"><span class="punctuation definition tag begin html"><</span><span class="entity name tag inline table html">tr</span><span class="punctuation definition tag end html">></span></span></span> <span class="numberedLine"> <span class="meta tag inline table html"><span class="punctuation definition tag begin html"><</span><span class="entity name tag inline table html">td</span><span class="punctuation definition tag end html">></span></span>{{<span class="constant character entity html"><span class="punctuation definition entity html">&</span>lt<span class="punctuation definition entity html">;</span></span> <span class="constant character entity html"><span class="punctuation definition entity html">&</span>gt<span class="punctuation definition entity html">;</span></span>}}<span class="meta tag inline table html"><span class="punctuation definition tag begin html"></</span><span class="entity name tag inline table html">td</span><span class="punctuation definition tag end html">></span></span></span> <span class="numberedLine"> <span class="meta tag inline table html"><span class="punctuation definition tag begin html"><</span><span class="entity name tag inline table html">td</span><span class="punctuation definition tag end html">></span></span>partials<span class="meta tag inline table html"><span class="punctuation definition tag begin html"></</span><span class="entity name tag inline table html">td</span><span class="punctuation definition tag end html">></span></span></span> <span class="numberedLine"> <span class="meta tag inline table html"><span class="punctuation definition tag begin html"></</span><span class="entity name tag inline table html">tr</span><span class="punctuation definition tag end html">></span></span></span> <span class="numberedLine"> <span class="meta tag inline table html"><span class="punctuation definition tag begin html"><</span><span class="entity name tag inline table html">tr</span><span class="punctuation definition tag end html">></span></span></span> <span class="numberedLine"> <span class="meta tag inline table html"><span class="punctuation definition tag begin html"><</span><span class="entity name tag inline table html">td</span><span class="punctuation definition tag end html">></span></span>{{<span class="constant character entity html"><span class="punctuation definition entity html">&</span>#37<span class="punctuation definition entity html">;</span></span> <span class="constant character entity html"><span class="punctuation definition entity html">&</span>#37<span class="punctuation definition entity html">;</span></span>}}<span class="meta tag inline table html"><span class="punctuation definition tag begin html"></</span><span class="entity name tag inline table html">td</span><span class="punctuation definition tag end html">></span></span></span> <span class="numberedLine"> <span class="meta tag inline table html"><span class="punctuation definition tag begin html"><</span><span class="entity name tag inline table html">td</span><span class="punctuation definition tag end html">></span></span>shortcodes<span class="meta tag inline table html"><span class="punctuation definition tag begin html"></</span><span class="entity name tag inline table html">td</span><span class="punctuation definition tag end html">></span></span></span> <span class="numberedLine"> <span class="meta tag inline table html"><span class="punctuation definition tag begin html"></</span><span class="entity name tag inline table html">tr</span><span class="punctuation definition tag end html">></span></span></span> <span class="numberedLine"> <span class="meta tag inline table html"><span class="punctuation definition tag begin html"><</span><span class="entity name tag inline table html">tr</span><span class="punctuation definition tag end html">></span></span></span> <span class="numberedLine"> <span class="meta tag inline table html"><span class="punctuation definition tag begin html"><</span><span class="entity name tag inline table html">td</span><span class="punctuation definition tag end html">></span></span>{{- -}}<span class="meta tag inline table html"><span class="punctuation definition tag begin html"></</span><span class="entity name tag inline table html">td</span><span class="punctuation definition tag end html">></span></span></span> <span class="numberedLine"> <span class="meta tag inline table html"><span class="punctuation definition tag begin html"><</span><span class="entity name tag inline table html">td</span><span class="punctuation definition tag end html">></span></span>removes surrounding white space<span class="meta tag inline table html"><span class="punctuation definition tag begin html"></</span><span class="entity name tag inline table html">td</span><span class="punctuation definition tag end html">></span></span></span> <span class="numberedLine"> <span class="meta tag inline table html"><span class="punctuation definition tag begin html"></</span><span class="entity name tag inline table html">tr</span><span class="punctuation definition tag end html">></span></span></span> <span class="numberedLine"> <span class="meta tag inline table html"><span class="punctuation definition tag begin html"><</span><span class="entity name tag inline table html">tr</span><span class="punctuation definition tag end html">></span></span></span> <span class="numberedLine"> <span class="meta tag inline table html"><span class="punctuation definition tag begin html"><</span><span class="entity name tag inline table html">td</span><span class="punctuation definition tag end html">></span></span><span class="meta tag inline table html"><span class="punctuation definition tag begin html"></</span><span class="entity name tag inline table html">td</span><span class="punctuation definition tag end html">></span></span></span> <span class="numberedLine"> <span class="meta tag inline table html"><span class="punctuation definition tag begin html"><</span><span class="entity name tag inline table html">td</span><span class="punctuation definition tag end html">></span></span><span class="meta tag inline table html"><span class="punctuation definition tag begin html"></</span><span class="entity name tag inline table html">td</span><span class="punctuation definition tag end html">></span></span></span> <span class="numberedLine"> <span class="meta tag inline table html"><span class="punctuation definition tag begin html"></</span><span class="entity name tag inline table html">tr</span><span class="punctuation definition tag end html">></span></span></span> <span class="numberedLine"><span class="meta tag inline table html"><span class="punctuation definition tag begin html"></</span><span class="entity name tag inline table html">table</span><span class="punctuation definition tag end html">></span></span></span></span></code></pre></section><section class="p_default_section standard_category_section flow"></section><section class="categories_section flow"></section></article> </main><footer> <ul> <li>© Alan W. Smith 2000-2024</li> <li><a href="https://www.neopoligen.com">Neopoligen</a></li> <li><a href="https://links.alanwsmith.com">Links</a></li> <li><a href="https://hachyderm.io/deck/@TheIdOfAlan">Mastodon</a></li> </ul></footer></body> </html>