While going through some old posts, tidying things up a bit, I have missed the Wordpress Edit link on pages and posts. This got me to thinking, could I emulate this in Hugo?

Turn out, yes you can and fairly easily.

First off, I edited my themes’ layout for a single post, which for me was single-content.html, I then figured out where I’d like the edit link and added this bit of template code:

    {{ if .Site.IsServer }}
        {{ partial "edit" . }}
    {{ end }}

The if around the partial means only include this if we are running hugo in development mode.

The next task was to make the edit.html partial:

{{ if .Site.Params.baseDir }}
<a href="vscode://file{{ .Site.Params.baseDir }}/content/{{.File.Path}}">Edit</a>
{{ end }}

I defined Params.baseDir in my sites’ config.yaml, which means I won’t have to alter the theme if I alter where I’ve got the git repo checked out. This needs to be the full path to the root of your site (i.e. the path to the dir with config.yaml in it.).

The vscode://file is specific to Microsoft Visual Studio Code, which is my preferred editor, that will likely need adjusting if you use something else.

Footnote

I tried to make the template read the editor specific bit of the url from the config.yaml, but whenever I did that the dev mode got in the way and mangled the url from:

vscode://file

to

http://localhost:1313/.....

Which isn’t helpful. I’ve not figured out a way of fixing this as yet, so that portion of the edit link is hardcoded into the template.