Hugo provides the ability to easily create custom shortcodes to meet your website’s needs. All you need to do is add an html file in the shortcodes folder with the html you want to render.

To make a custom audio shortcode create an html file in the following location: layouts/shortcodes/audio.html

<figure {{ with .Get "class" }}class="{{ . }}"{{ end }}> <audio controls preload="{{ .Get "preload" | default "metadata" }}"> {{ with .Get "src" }}<source src="{{ . | relURL }}" type="audio/mpeg">{{ end }} </audio> {{ with .Get "caption" }}<figcaption>{{ . }}</figcaption>{{ end }} </figure>

And shortcode:

{{ <audio src="/audio/file.mp3" caption="Caption"> }}

Originally published at https://ronaldsvilcins.com on April 20, 2022.

The CSS :empty pseudo-class selects any element that has no children or text.

/* Background color of every empty div element */
div:empty {
  background-color: #000;
}<div>
  <p>Some text</p>
</div><div>
  <!-- No text, background #000 -->
</div>

MDN’s definition:

The :empty CSS pseudo-class represents any element that has…

If you want to display the total number of content pages that Hugo generated from a particular section use where to filter section pages:

<p>Total number of pages in the /articles/ section:
    {{ len (where .Site.RegularPages "Section" "==" "articles") }}.
</p>

You can center a flexbox item vertically and horizontally by applying margin: auto; to it.

.parent { display: flex; }
.child { margin: auto; }

• Windows: Press Ctrl + Shift + I then Ctrl + Shift P.
• Mac: Press Command + Option + I then Command + Shift P.
• Then type “screenshot” to see the four screenshot options.

Screenshot types

• Capture area screenshot
• Capture full size screenshot
• Capture node screenshot
• Capture screenshot

In Chrome version 89, the modified right-click element inspector allows us to capture a screenshot from the inspector.

Sometimes we need to add raw HTML content in markdown files. We can do it before or after, the content. And in the middle of content using shortcodes. Here is how to create your own one-line custom shortcode to make that possible.

Create html file located in /layouts/shortcodes/rawhtml.html.

 
{{.Inner}}

And then you can use the shortcode in your markdown file e.g:

{{ < rawhtml > }}
  <p>Hello World!</p>
{{ < /rawhtml >}}

Originally published at https://ronaldsvilcins.com on February 15, 2022.

Hugo has a built-in related content feature. To list up to 3 related pages include this partial in your single page template. It will match up pages based on common tags and will show the three most likely.

Add sample code in layouts/partials/related.html.

{{ $related := .Site.RegularPages.Related . | first 3 }} 
{{ with $related }} <h3>See also</h3> 
<ul> 
{{ range . }} 
<li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li> 
{{ end }} 
</ul> 
{{ end }}

And then include this partial template in one of your default template that you want to show. For example you can show related content in your _default/single.html, so it appears on every blog post.

Hugo’s related content default configuration ( config.yaml):

related:   
  includeNewer: false   
  indices:   
  - name: keywords     
    weight: 100   
  - name: date     
    weight: 10   
 threshold: 80   
 toLower: false

Originally published at https://ronaldsvilcins.com on February 13, 2022.