Creating a Custom Widget for Hugo

Creating a Custom Widget for Hugo

This is how I created a widget for my sidebar using Hugo and Markdown when I need to use HTML. I do have HTML knowledge but it has been a while since I wrote in HTML so decided to use my new found understand of Markdown instead because it makes it that little easier.

In Microsoft Visual Studio Code I found an extention called Markdown PDF where it converts Markdown files to PDF and HTML. I didn’t mess with any of the settings and just followed the instructions on how to print your Markdown file to HTML.

First I made my Markdown File which included the relevant RSS feed Links that I wanted in my sidebar.

# RSS Feeds
---
* [All Articles](https://www.totalreach.co.uk/index.xml)
* [Just Books](https://www.totalreach.co.uk/categories/books/index.xml)
* [Just Games](https://www.totalreach.co.uk/categories/games/index.xml)
* [Just Movies](https://www.totalreach.co.uk/categories/movies/index.xml)
* [Just Tech](https://www.totalreach.co.uk/categories/technology/index.xml)

Then I hit F1 and typed in Markdown and found export to HTML and once I pressed enter on that it produced the HTML for this Markdown with the default stylings.

I removed the stylings in the hope it would just inherit the style off my theme but because it wasn’t a DIV with in the CSS it didn’t and instead of going through the already complicated CSS file to find the right places to add a new DIV I decide to match the style within the HTML.

Using the inspect tool in Credge I soon worked out I needed a H4 not a H1 and then I needed to some how style the <HR> that was in the code.

This was the final code. Using the head tag space to style the border into red adjusting every so often to make sure it was the right width for the theme. With the other amendment to the style of the list to remove the bullet points.

<!DOCTYPE html>
<html>
<head>
    <style>
    /* Red border */
    hr {
      border-top: 3px solid red;
    </style>
</head>
<body>
<h4 id="rss-feeds">RSS FEEDS
    <hr></h4>

<ul style="list-style: none;">
<li><a href="https://www.totalreach.co.uk/index.xml">All Articles</a></li>
<li><a href="https://www.totalreach.co.uk/categories/books/index.xml">Just Books</a></li>
<li><a href="https://www.totalreach.co.uk/categories/games/index.xml">Just Games</a></li>
<li><a href="https://www.totalreach.co.uk/categories/movies/index.xml">Just Movies</a></li>
<li><a href="https://www.totalreach.co.uk/categories/technology/index.xml">Just Tech</a></li>
</ul>
<br>
</body>
</html>

After this was done all was needed was an extra space using the <br> tag in order to give the widget the right spacing from my other widgets on my sidebar. Once the file was finished I placed it in layout - partials - widgets and then added the name of the HTML file into my toml config file to tell it to load html on my sidebar.

While probably a long winded why of doing this. I did see just on this small task the power of Markdown to HTML. While doing some research you can add CSS directly into Markdown ready for rending into the final HTML file. Which could come in handy for my next project.