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 …

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…

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…

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…

The :has() CSS pseudo-class represents an element if any of the selectors passed as parameters match at least one element. In earlier revisions of the CSS Selectors Level 4 specification, :has had a limitation that it couldn't be used within stylesheets. Instead, it could only be used with functions like…

An anchor link is a link, which allows the users to flow through a website page. When readers land on a page, they want to know instantly if the information it contains is useful or relevant to their search. It helps to scroll and skim-read easily. A named anchor can…