My custom shortcodes

tips & tricks
1

Hi all, best feature of Hugo is shortcodes for me.
I’m using them as html snippets
Now I’m collecting them on a github reposity.
feel free to conribute or comment
here is the github page
and demo

Youtube and dailymotion is working on local but its broken when i upload them :/

2 Likes
2

Good idea. Do you know about the internal Hugo shortcodes which come out of the box? It’s figure, gist, instagram, ref and relref, tweet, vimeo, youtube etc. They’re here: https://gohugo.io/content-management/shortcodes/#readout

3

I’m working on making a website that will compile hugo shortcodes from around the web and ones that users submit. It’ll include some teaching on what each part does for people to learn and understand more and organization by some categories.

4

Great. I use shortcodes a lot and take a look in my archive. If there’s something of interest I’ll give it to you. I assume I can contribute to the repo once it’s online, right?

5

Yea i’m not sure how I’ll manage the contributions, if it’ll be some kind of repo or some other way to contribute.

6

I would build a Github or Bitbucket repo. So others can send commit requests and you can decide whether or how to implement. This is how I work with my team which is spread over the country. You can even make a Github pages website from that repo - totally flexible.

Here’s an interesting shortcode for you: https://gist.github.com/Lego2012/281b51bbdee9b5a4f8851ace24bb85fe

7

Here’s another one which I found during my searches. It’s not completely done by me but the basics by someone I don’t know: https://gist.github.com/Lego2012/74c9d19b5706af6ce393ca15cd40cde9

8

yea, i guess i could have a repo separate from the website repo… to keep things clear and separate. thanks for the idea

9

I generated my blog website (https://codingnconcepts.com/) using hugo static site generator. I am using quite a few shortcodes which I find very useful like

  1. Current Year
  2. Link to open in a new browser window
  3. Highlighter
  4. Strikethrough
  5. Code Block Output

I have written how to create them from scratch here:-

10

Useful, curious, though:

This is the most trending post of the year {{< year >}}

How do you know that that post will always be the most trending? :slight_smile:

11

Haha, you caught me, l changed the statement of the example in my blog…haha :wink:

1 Like