Web Development Curiosities

Hugo .Summary Customization

In my article on supporting link posts in Hugo, I went on a short tangent about the Hugo .Summary function and the fact that I wasn’t using it, but was instead piping .Content to the truncate function.

Mainly I wasn’t using .Summary because it basically strips out the html paragraph tags and makes a big block of text. I find this an interesting choice, because who does this? No one, that’s who. Everyone who uses summaries wants legible summaries, including paragraph breaks. Hugo summaries make the assumption that a handful of words will be enough to draw your readers in, and that that’s the look you want in the first place.

Hugo does provide for overriding this by putting a summary in front matter, but that seems like a major kludge considering how easy it would be for .Summary to take a few option parameters. …

(Read More)

Link Posts in Hugo

Most popular blogging platforms or themes made for them support some kind of link post format as an alternative to a regular, “this is my own original content” post. The idea is that you can link to something somewhere else on the web, and add your comments in your own post. Typically the link post title links to another site, and there is a permalink URL to your own post.

I don’t plan to write a lot of link posts, that’s not the point of my site, but I knew it would be nice to do so whenever I like without having to step outside my blog post shortcuts and blog post template archetypes and manually edit things. To support this, I added the ability in all my section and home list and single article pages to check for a front matter variable called “linkurl”.

Here’s what …

(Read More)

Hugo Shortcode For Custom Image Handling

On my generously sized list of improvements I need to make to this site are a couple of image handling items. I crossed off one of those today, after going down a Rabbit Hole while writing another post that I intended to publish today instead of this one.

Up until now, when I’ve put a screenshot image in a post on this site, I’ve just linked to it directly, which causes a couple issues. First, there’s the image sizing issue – screenshots are high resolution and so appear massive when just linked to inline like that. Second, alignment preferences and captioning can be an issue.

Hugo does have a figure shortcode, but as far as I can tell, it doesn’t have any way to set the image alignment. It does support setting a css class for the figure, but I couldn’t find a way using css to actually affect my image alignment when using the Hugo figure shortcode.

So I wrote …

(Read More)

Using Hugo content sections for RSS feed flexibility

I’ve done a lot of testing with Hugo’s RSS feed generation in the past week, and one fact stands out: you can fight the law, but the law always wins.

In Hugo’s case, the law is content sections. Content sections are the key to RSS flexibility.

You may remember me expressing some bitterness about the way Hugo’s default is to litter the place about with RSS feeds for every single type of taxonomy that you have enabled. Having an RSS feed for every tag is silly, and so I figured I would just disable that. Turns out, it’s not so simple.

As I discovered last week, there’s a lack of granularity for enabling and disabling RSS feeds beyond sections, taxonomies, and taxonomy terms. That sounds great, until you realize I’m not talking about specific sections, taxonomies, and taxonomy terms. I mean all sections, or all taxonomies, or all taxonomy terms. Hugo RSS …

(Read More)

Hugo Feed Link

Yesterday I wrote about how to customize your Hugo RSS feed so that you have one feed named feed.xml. One other addition you may wish to make is to link to it in your page headers.

It’s simple enough – assuming you’ve made the modifications to make Hugo name your RSS feed “feed.xml”, add the following to your base template somewhere between the <head></head> tags. Obviously there will be a lot more in your page header, but this is simplified for our purposes.

<head>
    
<link rel="alternate" type="application/rss+xml" href='{{ "feed.xml" | absURL }}' />
    
</head>

Now when you view your page source, you’ll see a link to your RSS feed embedded within.

Hugo page header RSS link

By the way, in case you’re wondering how I did a view source on iPadOS, the answer is a View Source shortcut, which can be found here.