One-click-hugo-cms Question (Hyperlinks in Pages)

answered
#1

Hello all. Question: How does one add a hyperlink to a “Page” in the one-click-hugo-cms? It’s an _index.md page but it won’t accept markdown (or HTML) for a link. (I’ve tried in both the CMS editor and in the Github file.)

Any assistance would be much appreciated! Thank you.

#2

I don’t know much about Hugo, but I think the ref shortcode is what you’re looking for: https://gohugo.io/content-management/cross-references/

#3

Thanks Tom. I need to apply the hyperlink to text though and I’m not seeing that option …

#4

Hey @SherG - glad you found us! I’m sure there are some hugo experts floating about, but I would encourage you to check in with some people in Hugo’s community for specific Hugo advice, too.

If you do figure it out or get help elsewhere, we’d super love it if you came back and posted your solution here, so that the next person who stumbles across this can get things fixed up faster. :+1:

#5

If your repo is open and we could take a look at what you’re trying we may also be able to give more specific advice :slight_smile: If the repo isn’t private, let us know two things:

  1. link to the specific file with the attempted link at your git provider
  2. link to that same file on a netlify site

If it isn’t open or you don’t care to share it, here’s some generic advice from my own experience :slight_smile:
When I use hugo + the CMS AND I’m editing in Markdown mode (rather than rich text), either of these formats work:

https://some.link/path (this one won’t show up as a link in the WYSIWYG display! But it does at least for me at publish time)

or

[name](https://some.link/path) (this one should show up as a link in the WYSIWYG display next to the editor from the start)

#6

Thanks, Chris.

I’m specifically trying to add hyperlinks (and line breaks) to the Pages (not Posts – those seem easy to deal with.) Pages in one-click-hugo-cms are navigation items like the Homepage.

After finding this:
#103 (comment)

. . . I tried to apply the markdown widget to Pages by replacing widget:"text" with widget:"markdown" in the config.yml file

  • The markdown editing pane now appears for Pages (and not just Posts) in the CMS.
  • But adding hyperlinks to text causes actual markdown to appear in the live page. No hyperlinks appear. (Same with line breaks or paragraph tags.)

Any assistance would be much appreciated!

#7

Hi @SherG! The text fields you’re trying to edit are set up in Hugo to be processed as simple text, with no makrdown compiling or passed html. (This is also why they’re set as text fields in the CMS config.)

Fortunately, Hugo has a markdownify function that you can use to tell Hugo to translate makrdown into html.

You can find the templates Hugo uses to build the pages in /site/layouts folder of the repo.

Taking the first text field in the home page, called “blurb”, you can search the repo for it, and find it mentioned on line 5 of the home page layout file. In that line, you’ll see it’s calling another partial template called “short-text”.

If you look inside the short-text partial template, you can see the blurb’s text field is used in line 4. You can add | markdownify to the .text template variable, like this:

    <p class="w-60-l mb0">{{.text | markdownify}}</p>

After you save and push that change, the markdown in that text blurb will be rendered as proper HTML in the built site! You’ll notice, though, that it doesn’t change the Netlify CMS preview pane.

The content in the Netlify CMS preview pane is customized using the registerPreviewTemplate method. In the one-click-hugo-cms repo, those templates are stored in the /src/js/cms-preview-templates folder. We can find our “blurb” text in line 22 of the home.js template.

Fixing this one is a little trickier. The getIn() function that’s currently being used just passes the text without doing anything to it. To give it the markdown-processing treatment like the body field in the blog post preview, you need to use widgetFor, or in this case, widgetsFor, because text is a sub-field of the blurb field object widget.

To use the widgetsFor prop, you can change that line 22 in the home.js template like this:

<p className="w-60-l mb0">{this.props.widgetsFor('blurb').getIn(['widgets', 'text'])}</p>

That gets the widgets inside blurb, then gets the sub-widget, text, and provides the normal preview for that widget type. In this case, if it’s a markdown widget, it will render the markdown to html.

(Extra hint: you can remove the this.props. part from that line if you add widgetsFor to the list of props (along with entry and getAsset) on line 8. )

Save and push to your repo, and when the site’s done building, your blurb text widget should now show nicely rendered links, etc. in the CMS preview pane.

That was a lot for one little link! We changed code in 3 places to get a link in one text block:

  • Adding the markdownify function to the text variable in the Hugo template
  • Changing the text field widget to a markdown widget in the CMS config.yml
  • Changing the CMS preview template to get that markdown widget and render an html preview, instead of getting it as raw text.

In the end, the only one you really need for proper display in the finished site is adding the markdownify function to any Hugo template variable that you want to be processed as markdown.

You can type raw markdown into CMS text widgets and Hugo will still know what to do with them. But you won’t get the rich text editor unless you use markdown widgets, and you won’t see a properly formatted CMS preview unless you edit the preview templates.

4 Likes
#8

This was amazingly helpful and crystal clear. Thank you @verythorough!

1 Like
#9

Sure thing! Glad to hear it helped!

1 Like
#10

:heart_eyes: thank you jessica you are magic!

1 Like
#12

@verythorough Solved my problem too! Thanks!

2 Likes