Adding "Edit this page" links

Thu, 27 May 2021 00:00:00 +0000

Here’s how the cool Hugo/Wowchemy kids add those groovy “Edit this page” elements to their pages in the academic-starter theme:

In config/_default/params.yaml, find the section edit_page and:

☞︎ Set repo_url to the URL of your repository (here, github)
☞︎ Set content_dir to the directory of your site’s content, content by default)
☞︎ Set repo_branch to your repo’s published branch; I use master rather than main)

Then set the editable fields as needed for the types of content you want these links to be present in.

Here’s the code from this site:

edit_page:
repo_url: 'https://github.com/slinberg-umass/slinberg.net'
content_dir: 'content'
repo_branch: master
editable:
page: true
post: true
book: true

That’s all you need to do; when you rebuild, if the edit_page parameters are not empty, Hugo will insert the link as directed by the templates. This is the bit of triggering code:

{{ partial "page_edit" . }}

It is contained in various inherited templates such as themes/github.com/wowchemy/wowchemy-hugo-modules/wowchemy/layouts/partials/page_footer.html, and the code is in themes/github.com/wowchemy/wowchemy-hugo-modules/wowchemy/layouts/partials/page_edit.html.

Look at the code to see, among other things, that it can be overridden on a specific page or post by adding editable: false to its yaml header.

But we’re not doing that in this case, so falling off the bottom of the content here, we get the groovy link to the page source below (note, you’ll need to fork the repo to actually see it, it’s more for me than for you):

Testing a new shortcode

Thu, 20 May 2021 00:00:00 +0000

Let’s see if we can get this shortcode working, which will allow us to embed a YouTube video with a start and end time.

Here is Chris Bail, introducing topic models, dropping some knowledge about setting explicit seeds for reproducible results. I want friends who do topic models.

The shortcode file youtubestartend.html contains:

<!-- https://discourse.gohugo.io/t/howto-youtube-embed-with-custom-start-time/7060/6 -->
<div style="position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;">
<iframe src="http://www.youtube-nocookie.com/embed/{{ index .Params 0 }}?start={{ index .Params 1 }}&end={{ index .Params 2}}"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" allowfullscreen frameborder="0" title="YouTube Video"></iframe>
</div>

and is placed in the directory layouts/shortcodes/blogdown/.

The embedded code, used above, is:

{{< blogdown/youtubestartend IUAHUEy1V0Q 518 539 >}}

…and incidentally, the way you present the above code, without having the shortcode actually rendered by Hugo, is explained in this Infinite Ink post. Basically, you put the entire shortcode between /* C comment delimiters */:

{{</* blogdown/youtubestartend IUAHUEy1V0Q 518 539 */>}}

…and to render THAT text above, you have to do double delimiters:

{{</*/* blogdown/youtubestartend IUAHUEy1V0Q 518 539 */*/>}}

…and so forth.

hugo | Steve Linberg

Adding "Edit this page" links

Testing a new shortcode