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 no children. Children can be either element nodes or text (including whitespace). Comments, processing instructions, and CSS content do not affect whether an element is considered empty.

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…