parent
0ad201040f
commit
9f98583f26
@ -0,0 +1,17 @@ |
||||
--- |
||||
title: "Page Source Link" |
||||
date: 2022-05-30T21:22:04-07:00 |
||||
tags: |
||||
- meta |
||||
--- |
||||
I just added a page-source link to my blog setup. |
||||
<!--more--> |
||||
You can see how it was done in the commit that introduced this blog post (just click the "Page Source" link that should be present in the header for this article!): |
||||
* [Hugo](https://gohugo.io/) supports setting site-wide variables in [config files](https://gohugo.io/getting-started/configuration/), and suppors accessing information about the file that generated a give post with the [`File` object](https://gohugo.io/variables/files/). By setting a site-wide variable that points at [the base of my Git repo in my self-hosted Gitea instance](https://gitea.scubbo.org/scubbo/blogContent/src/branch/main), both of these pieces of information can be used at build-time to generate a page-specific URL to inject into the built page. |
||||
* I had to copy-in and overwrite the `layouts/_default/single.html` file from the theme I'm using ([Ananke](https://github.com/theNewDynamic/gohugo-theme-ananke)), because the aforementioned information is only available at build-time. If I'd have tried to inject this information by editing the page at view-time (with a Javascript file, as I've [done elsewhere](https://gitea.scubbo.org/scubbo/blogContent/src/branch/main/blog/static/js/custom.js) with simpler styling changes), the information wouldn't have been available. |
||||
* OK, _technically_ I could probably have inserted both of those information pieces into the page in hidden elements, and then used Javascript to retrieve them and construct the URL, but why not do it directly at build-time? |
||||
* The lines you're interested in are lines 50-52 of the file (at the time of first-commit - man, it's awkward that I can't add a link to a commit that hasn't been created yet, huh!?) - everything else is just a copy-paste of the existing layout from Ananke. |
||||
* The [`{{with}}`](https://gohugo.io/functions/with) function is a pretty neat way to do "_check if X exists, and use it in-scope if so; else, skip the scope below_". |
||||
* Note that I am not linking directly to the root of the _repo_ in `page_source_base` ([https://gitea.scubbo.org/scubbo/blogContent/src/branch/main/blog/](https://gitea.scubbo.org/scubbo/blogContent/src/branch/main/blog/)), but to a subfolder (`blog/`) within it. This is because I have my Hugo source in a subfolder within the repo, so that other configuration files (`Dockerfile`, CI/CD configuration, `.gitignore`, etc.) can live in the root and the source can be kept clean and separate. |
||||
|
||||
Keen readers will notice I haven't discussed the [Gitea](https://gitea.io/en-us/) instance before. I've significantly revamped my setup recently, with Git hosting, CI/CD pipeline with [Drone](https://www.drone.io/), and deployment to a Kubernetes cluster, all self-hosted. I've been putting off a sequel to [the "self-hosting blog" post]({{< ref "/posts/self-hosting-blog" >}}) describing the process, but it's probably past-due by now! |
||||
@ -0,0 +1,72 @@ |
||||
{{/* This file was copied from the Ananke definition, initially in order to add a "page source" link (which depends upon information available at build-time by Hugo, and so which can't be added at read-time with Javascript like with the class-changes done in `custom.js`). */}} |
||||
{{ define "header" }} |
||||
{{/* We can override any block in the baseof file by defining it in the template */}} |
||||
{{ partial "page-header.html" . }} |
||||
{{ end }} |
||||
|
||||
{{ define "main" }} |
||||
{{ $section := .Site.GetPage "section" .Section }} |
||||
<article class="flex-l flex-wrap justify-between mw8 center ph3"> |
||||
<header class="mt4 w-100"> |
||||
<aside class="instapaper_ignoref b helvetica tracked"> |
||||
{{/* |
||||
CurrentSection allows us to use the section title instead of inferring from the folder. |
||||
https://gohugo.io/variables/page/#section-variables-and-methods |
||||
*/}} |
||||
{{with .CurrentSection.Title }}{{. | upper }}{{end}} |
||||
</aside> |
||||
{{ partial "social-share.html" . }} |
||||
<h1 class="f1 athelas mt3 mb1"> |
||||
{{- .Title -}} |
||||
</h1> |
||||
{{ with .Params.author | default .Site.Params.author }} |
||||
<p class="tracked"> |
||||
By <strong> |
||||
{{ if reflect.IsSlice . }} |
||||
{{ delimit . ", " | markdownify }} |
||||
{{else}} |
||||
{{ . | markdownify }} |
||||
{{ end }} |
||||
</strong> |
||||
</p> |
||||
{{ end }} |
||||
{{/* Hugo uses Go's date formatting is set by example. Here are two formats */}} |
||||
{{ if not .Date.IsZero }} |
||||
<time class="f6 mv4 dib tracked" {{ printf `datetime="%s"` (.Date.Format "2006-01-02T15:04:05Z07:00") | safeHTMLAttr }}> |
||||
{{- .Date.Format (default "January 2, 2006" .Site.Params.date_format) -}} |
||||
</time> |
||||
{{end}} |
||||
|
||||
{{/* |
||||
Show "reading time" and "word count" but only if one of the following are true: |
||||
1) A global config `params` value is set `show_reading_time = true` |
||||
2) A section front matter value is set `show_reading_time = true` |
||||
3) A page front matter value is set `show_reading_time = true` |
||||
*/}} |
||||
{{ if (or (eq (.Param "show_reading_time") true) (eq $section.Params.show_reading_time true) )}} |
||||
<span class="f6 mv4 dib tracked"> - {{ i18n "readingTime" .ReadingTime }} </span> |
||||
<span class="f6 mv4 dib tracked"> - {{ i18n "wordCount" .WordCount }} </span> |
||||
{{ end }} |
||||
{{ with .Site.Params.page_source_base}} |
||||
<span class="f6 mv4 dib tracked"> - <a href="{{ . }}content/{{ $.File.Path }}">Page Source</a></span> |
||||
{{ end }} |
||||
</header> |
||||
<div class="nested-copy-line-height lh-copy {{ $.Param "post_content_classes" | default "serif"}} f4 nested-links nested-img {{ $.Param "text_color" | default "mid-gray" }} pr4-l w-two-thirds-l"> |
||||
{{- .Content -}} |
||||
{{- partial "tags.html" . -}} |
||||
<div class="mt6 instapaper_ignoref"> |
||||
{{ if .Site.DisqusShortname }} |
||||
{{ template "_internal/disqus.html" . }} |
||||
{{ end }} |
||||
{{ if .Site.Params.commentoEnable }} |
||||
{{- partial "commento.html" . -}} |
||||
{{ end }} |
||||
</div> |
||||
</div> |
||||
|
||||
<aside class="w-30-l mt6-l"> |
||||
{{- partial "menu-contextual.html" . -}} |
||||
</aside> |
||||
|
||||
</article> |
||||
{{ end }} |
||||
Loading…
Reference in new issue