6

I use Hugo to deploy static web, using Markdown and the problem I would like to sort out is simple. I would like to find the simplest and compatible with Markdown language way to make my web links open in different tab. The method I use now is below:

  1. < rawhtml >}}<a href="https://en.wikipedia.org/wiki/Rasmus_Lerdorf" target="blank">Rasmus Lerdorf</a></br>{{< /rawhtml >
  2. [link with title](http://nodeca.github.io/pica/demo/ "target="blank")

First method working but it is HTML second method not working. Thank You.

Marcin
  • 173
  • 12

2 Answers2

12

You need to create a new file at /layouts/_default/_markup/ called render-link.html.

In that file, you can then customise it to something like:

<a href="{{ .Destination | safeURL }}"{{ with .Title}} title="{{ . }}"{{ end }}{{ if strings.HasPrefix .Destination  "http" }} target="_blank" rel="noopener"{{ end }}>{{ .Text | safeHTML }}</a>

Here is what would happen:

  • [link1](../something/ title="title") => <a href="../something/" title="title">link1</a>
  • [link2](https://example.com) => <a href="https://example.com">link2</a>

It will only add it to URLs with "http" and "https".

The documentation for render-hooks is available here: https://gohugo.io/templates/render-hooks/.

DharmanBot
  • 1,066
  • 2
  • 6
  • 10
I'M YourOnly.One
  • 398
  • 2
  • 8
  • Thank you for clear answers @I'M YourOnly.One , but I got one questions. Doing analogous to example with URL it is possible to do same with IMG, like ![Title](/your-image-url/image.png position="left") or ![Title](/your-image-url/image.png align="center")? – Marcin Apr 29 '22 at 22:15
  • It is possible using render hooks. Instead of `/layouts/_default/_markup/render-links.html` create `/layouts/_default/_markup/render-image.html` from there you can override the default layout when rendering markdown image to html. An example is available [here](https://gohugo.io/templates/render-hooks/#image-markdown-example). – I'M YourOnly.One Apr 30 '22 at 10:47
  • @ I'M YourOnly.One but how I can send variables form my post template to `render-image.html` like position or size? Thank you. – Marcin Apr 30 '22 at 10:54
  • For that, you'll have to create a new shortcode. There is a built-in shortcode called `{{< figure >}}` which can receive `class`, `width`, `height`, `rel`, `alt`, `title`, `caption`, and `attr`. It also automatically add a `figcaption`. You can check the code behind the `figure` shortcode [here](https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/shortcodes/figure.html). More info is available on the [doc site](https://gohugo.io/content-management/shortcodes/#figure). – I'M YourOnly.One Apr 30 '22 at 11:37
-2

Or you could just put the link in as you have it using regular, old HTML.

IMHO, beating yourself up over the failings of Hugo and whatever theme is in use is counter-productive. Markdown was supposed to be a quick and dirty way for users who couldn't grasp the basic fundamentals of html to create and display content on a wiki.

Think about the current situation. Does using Hugo, a theme, and Markdown really save any effort when they simply can't produce the output you need because the features you need don't exist in that combination natively?

When you need to spend hours/days researching and learning how to manipulate the generator's template to generate the output you need from Markdown and Hugo, tell me, where exactly are those time savings?

This is why people using tools such as Flare, RoboHTML, and Paligo laugh at users who brag about how fast they Hugo site generates html pages.

NothingToSeeHere
  • 119
  • 6