Link clickable


#1

Hi!

In my config.toml file, I have like

[params]

About=“some text here”

How do I make some text clickable in that file? I want the users to be able to click on a word(so it looks like a link) and then they come to that link on Wikipedia for example.


#2

I am not sure what you are asking. Could you give another example?


#3

I have some text in the about box on my homepage, and want to make some text clickable so if they click on it, they come to a link. So I wanna add a link basically, like this: https://www.w3schools.com/html/html_links.asp But how can I do this in the config.toml file?


#4

I’m still not sure exactly what you’re asking.

But, assuming you want the parameter in the config file to be the link text, you could do something like this:

<a href="https://some-link.com/">{{ .Site.Params.about }}</a>

Note, parameters in your config file should start with a lowercase letter, i.e. about not About.


#5

Okay but I don’t want the whole about text to be clickable, only one word. How can I do that?
And in my config.toml, it looks like this:
[params]
Name = “nameHere”
HeaderUsername = “somethingHere”
HeaderHostname = “somethinghere”
About = “some text about us”

I followed the github to setup it up and that works, so About works with capital A.


#6

I’m unable to help you further until you share some code. Please see Requesting Help.


#7

Well that is the code above, that is the file where I add text which shows up on the page. It’s code from config.toml file.


#8

Right. But that is not enough info (at least for me) to troubleshoot with. Can you share your site code, and/or your theme code?


#9

This is index.html https://pastebin.com/U9FcWPtT
This is the theme I use: https://github.com/LordMathis/hugo-theme-nix/


#10

You can use markdown in the About value.

About = "Some [text](https://gohugo.io/)"

In the template:

{{ .Site.Params.About | markdownify }}

#11

Alright I added exactly that and server runs without errors, but on the page it prints text instead of only the text that is underlined so you can click on it.


#12

Did you update the template as mentioned above?

You can do this by overriding the theme file. So copy this:

YOUR_SITE/themes/hugo-theme-nix/layouts/index.html

And paste it here:

YOUR_SITE/layouts/index.html

Then update line 31 to be:

{{ .Site.Params.About | markdownify }}

#13

Now it worked! I made a mistake and had wrote it too quickly so I had {{ .Site.Params.About }} | markdownify instead of {{ .Site.Params.About | markdownify }}. Thanks a lot for the help guys! Appreciate it!


#14

The stuff inside curly brackets or sets of curly brackets has special meaning to hugo.
In this case, that’s why putting markdownify outside the brackets had no effect.