05. July 2023
Tag Cloud, PDF Viewer, Photo List
Some New Short Codes
Tag Cloud
I thought some "tag clouds" a nice addition to the site. I did a search for some tag cloud examples. I found Bep had a good example of a simple text "tag cloud." You can find Bep's code here. Thanks for sharing Bep! I converted his partial into the shortcode tagcloud. Since I wanted to include all tags, I changed the "Count" ">=" 3 to "Count" ">=" 1. I have not (yet) created any styles to match the code.
1<!--
2 Retrieved from: https://discourse.gohugo.io/t/tag-cloud/6335
3 Original Code Author: bep
4-->
5<div id="theme-tagcloud" class="col-sm-12" style="margin-bottom: 15px;">
6 {{ $tags := $.Site.Taxonomies.tags.ByCount }}
7 {{ $v1 := where $tags "Count" ">=" 1 }}
8 {{ $v2 := where $v1 "Term" "not in" (slice "hugo" "tags" "rss") }}
9 {{ range $v2 }}
10 {{ if .Term }}
11 {{ $tagURL := printf "tags/%s" .Term | relURL }}
12 <a href="{{ $tagURL }}" class="btn btn-default" role="button" style="text-transform: uppercase; font-size: 12px; padding-right: 5px; padding-left: 5px;" >{{ .Term }} <span class="badge">({{ .Count }})</span></a>
13 {{ end }}
14 {{ end }}
15</div>
Photo Links
I use the Compose theme. It has a layout for a single blog folder and multiple documentation folders. The blog's top-level list page uses image links for each blog article. I wanted my review (documentation) list pages to behave similarly. So, I tried to figure it out.
If I understand the Hugo documentation correctly, I could not use .Pages in a shortcode--I had to use .Site.Pages instead. The $pathDepth variable tells the shortcode how many levels of the path have to match before it includes the page. Here's the shortcode I came up with:
1<!-- determine how many levels of the path must match -->
2<!-- It really causes *a lot* of blank spaces without the "-" (dashes) -->
3{{- $pathDepth := .Get 0 | default 1 -}}
4<section class="grid-3">
5<!-- save the current page and split the path into an array -->
6{{- $thisPg := .Page -}}
7{{- $thisPgArr := split $thisPg "/" -}}
8<!-- I couldn't get any of the other Pages to work in a shortcode -->
9{{- range .Site.Pages -}}
10<!-- Only include pages that have an image -->
11 {{- if isset .Params "image" -}}
12 {{- $curPg := . -}}
13 {{- $curTitle := .Title -}}
14 {{- $curPgArr := split $curPg "/" -}}
15 <!-- Collect the common pieces of the two arrays (in order) into a new array -->
16 {{- $both := intersect $thisPgArr $curPgArr -}}
17 <!-- Compare the length of the two arrays to see if they are equal -->
18 {{- if eq ($both | len) ($pathDepth) -}}
19 {{- with .Params.image -}}
20<!--
21I snagged this section and div code by looking at the html source generated
22by the "block" shortcode of the compose template.
23-->
24 <div>
25 <h3 id="{{ $curPg.Title | urlize }}">{{ $curPg.Title }}</h3>
26 {{- $imgURL := printf "images/%s" . | relURL -}}
27 <a href="{{ $curPg.RelPermalink }}"><img alt="{{ $curPg.Title}}" title="{{ $curPg.Title}}" src="{{ $imgURL }}" /></a>
28 </div>
29 {{- end -}}
30 {{- end -}}
31 {{- end -}}
32{{- end -}}
33</section>
The markdown looks like this:
1---
2title: "Reviews"
3weight: 1
4---
5
6I hope you find my reviews helpful.
7
8{{< photolinks 2 >}}
You can see an example of the output here
Embedded PDF File
I thought it might be nice to include embedded PDF files in my documents. I poked around and found a Hugo theme I could install as a submodule. It's called hugo-embed-pdf-shortcode. Just follow the instructions in the included README.md to install and use it. As I mentioned, I used the submodule method of installation. It does add about 15MB of files to your site. I included a user's manual for my new grill on this page. I do find the smaller text and images difficult to make out with this viewer. Thankfully, it does provide a way to download the PDF and to view it full-size in your browser.