Collection of Hugo Shortcodes

  • Mon, Apr 17, 2023
  • One-minute read

Table of Contents

整理了一些在 Hugo 下使用比较方便的技巧，以及一些可行的优化。

Gist

Hugo 可以直接使用其内置的shortcodes来嵌入Gist代码块。

显示所有的gist文件

{{< gist jmooring 50a7482715eac222e230d1e64dd9a89b >}}

显示指定的文件

{{< gist jmooring 50a7482715eac222e230d1e64dd9a89b 1-template.html >}}

Ref: Hugo Shortcodes

GitHub

Hugo本身并不支持直接显示GitHub上的代码文件，所以想要这么做的话，需要添加一个自定义的shortcode。

添加Shortcode代码

在layouts/shortcodes下创建github.html文件，并粘贴如下代码：

{{ $dataJ := getJSON "https://api.github.com/repos/"  (.Get "repo")  "/contents/"  (.Get "file")  }}
{{ $con := base64Decode $dataJ.content }}

{{ highlight $con (.Get "lang") (.Get "options") }}

显示GitHub代码

直接调用如下shortcode即可：

{{< github repo="username/repo-name" file="/path/to/file" lang="language" options="highlight-options" >}}

Ref: https://github.com/haideralipunjabi/hugo-shortcodes/tree/master/github

HugoBlogGitHub hugothemegithubgistshortcodes

comments