Hugo 短代码

前言

在我们撰写博客文案时难免发现,常规的markdown文法虽然已经可以满足大部分需求, 但是仍存在一定的局限性. 通篇文案基本上以文字和图片为主, 难免有些乏味.

而hugo 的短代码功能可以维护 Markdown 的简洁性, 同时保证可添加 HTML 内容, 这种方式允许我们在 Markdown 文件中以一种简洁的形式写HTML.短代码是一种类似于HTML标记的语法，它可以在Markdown文本中以一种简洁的形式插入HTML内容。

例如，我们可以使用短代码来插入视频、音频、表格等HTML元素，而不必编写繁琐的HTML标记。同时,短代码+CSS这套组合拳具有高度定制化的方案,一定程度上提高了Markdown文法的可玩性。也许这么说有些生硬,那么我们不妨举个具体的栗子：

通常在引用GitHub仓库时我们都是通过超链接文本的方式,那么如果通过短代码定义了以下GitHub仓库的样式,是不是相比原来多了几分趣味呢？

Hugo

public

The world’s fastest framework for building websites.

官方在一开始也给我们定义好了一些短代码样式,例如Youtube,Bilibili视频等短代码,这些代码可以帮助我们把视频嵌入到博文中.本篇文章主要仿照官方的短代码语法,结合互联网上的资料,还有自己的进阶理解来集成一些丰富多样的短代码样式!

语法

还是以上面的案例为基础进行讲解,markdown文法中实用短代码的方式如下：通过两个花括号搭配尖括号来告诉Hugo"我这个是短代码,你在编译的时候记得帮我转译一下~"

代码示例如下

{{< github name="hugo" link="https://github.com/gohugoio/hugo" description="The world’s fastest framework for building websites." color="#00add8" language="GO" >}}

逐行分析后我们发现一共具有以下参数：

参数	解释
name	仓库名
link	链接
description	简介
color	颜色
language	语言

在layouts/shortcodes/ 下新建 github.html ,对应的html代码如下：

📃展开代码

<div class="github">
    <div class="logo">
        {{ replace $.Site.Data.SVG.repository "icon" "icon github-icon" | safeHTML }}
        <a class="name" href={{ .Get "link" }} target="_blank">{{ .Get "name" }}</a>
    </div>
    <div class="visibility">public</div>
    <div class="description">{{ .Get "description" }}</div> 
    <div class="language">
        <span class="language-color" style="background-color: {{ .Get "color" }}"></span>
        <span class="language-name">{{ .Get "language" }}</span>
    </div>
</div>

可以看见每个参数都单独放在一个div里面，参数通过{{ .Get "参数" }}来传值，基本的语法就是html，但是由于不知道参数具体的值，都是通过占位符先把这个空占着，等到我们编写markdown文件时再把值传过来。

特别说明的是：“logo"模块是显示的/data/SVG.toml中的repository图标，那么我们需要额外创建该文件并在其中写入svg样式：

repository = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M2 2.5C2 1.83696 2.26339 1.20107 2.73223 0.732233C3.20108 0.263392 3.83696 0 4.5 0L13.25 0C13.4489 0 13.6397 0.0790176 13.7803 0.21967C13.921 0.360322 14 0.551088 14 0.75V13.25C14 13.4489 13.921 13.6397 13.7803 13.7803C13.6397 13.921 13.4489 14 13.25 14H10.75C10.5511 14 10.3603 13.921 10.2197 13.7803C10.079 13.6397 10 13.4489 10 13.25C10 13.0511 10.079 12.8603 10.2197 12.7197C10.3603 12.579 10.5511 12.5 10.75 12.5H12.5V10.5H4.5C4.30308 10.5 4.11056 10.5582 3.94657 10.6672C3.78257 10.7762 3.65442 10.9312 3.57816 11.1128C3.50191 11.2943 3.48096 11.4943 3.51793 11.6878C3.5549 11.8812 3.64816 12.0594 3.786 12.2C3.92524 12.3422 4.0023 12.5338 4.00024 12.7328C3.99818 12.9318 3.91716 13.1218 3.775 13.261C3.63285 13.4002 3.4412 13.4773 3.24222 13.4752C3.04325 13.4732 2.85324 13.3922 2.714 13.25C2.25571 12.7829 1.99929 12.1544 2 11.5V2.5ZM12.5 1.5V9H4.5C4.144 9 3.806 9.074 3.5 9.208V2.5C3.5 2.23478 3.60536 1.98043 3.79289 1.79289C3.98043 1.60536 4.23478 1.5 4.5 1.5H12.5ZM5 12.25V15.5C5 15.5464 5.01293 15.5919 5.03734 15.6314C5.06175 15.6709 5.09667 15.7028 5.1382 15.7236C5.17972 15.7444 5.22621 15.7532 5.27245 15.749C5.31869 15.7448 5.36286 15.7279 5.4 15.7L6.85 14.613C6.89328 14.5805 6.94591 14.563 7 14.563C7.05409 14.563 7.10673 14.5805 7.15 14.613L8.6 15.7C8.63714 15.7279 8.68131 15.7448 8.72755 15.749C8.77379 15.7532 8.82028 15.7444 8.8618 15.7236C8.90333 15.7028 8.93826 15.6709 8.96266 15.6314C8.98707 15.5919 9 15.5464 9 15.5V12.25C9 12.1837 8.97366 12.1201 8.92678 12.0732C8.87989 12.0263 8.81631 12 8.75 12H5.25C5.1837 12 5.12011 12.0263 5.07322 12.0732C5.02634 12.1201 5 12.1837 5 12.25Z"/></svg>'

除此以外，仅有html是不够的，显示出来就是一串文字，还需要加上相应CSS代码来丰富组件的样式。由于每个部分都被分离出来了，我们在CSS中找到对应的类进行编辑就可以了

在 themes/hugo-theme-stack/assets/scss 中新建shortcodes.scss，同时在themes/hugo-theme-stack/assets/scss/style.scss 中加入@import "shortcodes.scss";

📃展开代码

.github {
  border: 1.2px solid #d0d7de;
  border-radius: 8px;
  font-family: -apple-system,BlinkMacSystemFont,segoe ui,noto sans,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji;
  padding: 1em;
  margin-bottom: 20px;
  .github-icon {
      width: 1.2em;
      height: 1.2em;
      margin-right: 0.5em;
      margin-bottom: -4px;
      fill: #0a0a0a;
  }
  .name {
      font-weight: bold;
      color: #0969da;
      text-decoration: none;
  }
  .visibility{
    font-size: 80%;
    color: #656d76;
    transition: all .5s;
    border: 1px solid #d0d7de;
    border-radius: 19px;
    padding: 0px 10px;
    float: right;
    margin-top: -31px;
  }
  .description {
      margin-top: 0.5em;
      margin-bottom: 1em;
      font-size: 90%;
      color: #656d76;
      transition: all .5s;
      font-weight: 400;
  }
  .language-color {
      position: relative;
      top: 1px;
      display: inline-block;
      width: 0.75em;
      height: 0.75em;
      border-radius: 50%;
  }
  .language-name {
      font-size: 85%;
      margin-left: 0.5em;
      transition: all .5s;
      color: #656d76;
      font-weight: 400;
  }
}

💡这里我把他们单独放在一个模块中，主要为了降低了代码的耦合性，因为基本上shortcodes的样式代码是又臭又长，而且基本上不会有什么改动，放在custom.scss里面只会影响阅读，单独隔离出来就是很好的一个选择

案例

接下来依次介绍一些实用好看的短代码样式吧!

彩色标签

今天是个做水果蛋糕的好天气!

细水长流，静水深流

波心荡冷月无声

春风十里扬州路

首先在 data/SVG.toml 文件中插入以下svg图标

📃展开代码

notice-warning = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 576 512" fill="hsl(0, 65%, 65%)"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zM124 296c-6.6.0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h264c6.6.0 12 5.4 12 12v56c0 6.6-5.4 12-12 12H124z"/></svg>'
notice-info = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 512 512" fill="hsl(30, 80%, 70%)"><path d="M256 8a248 248 0 100 496 248 248 0 000-496zm0 110a42 42 0 110 84 42 42 0 010-84zm56 254c0 7-5 12-12 12h-88c-7 0-12-5-12-12v-24c0-7 5-12 12-12h12v-64h-12c-7 0-12-5-12-12v-24c0-7 5-12 12-12h64c7 0 12 5 12 12v100h12c7 0 12 5 12 12v24z"/></svg>'
notice-note = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 512 512" fill="hsl(200, 65%, 65%)"><path d="M504 256a248 248 0 11-496 0 248 248 0 01496 0zm-248 50a46 46 0 100 92 46 46 0 000-92zm-44-165l8 136c0 6 5 11 12 11h48c7 0 12-5 12-11l8-136c0-7-5-13-12-13h-64c-7 0-12 6-12 13z"/></svg>'
notice-tip = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 512 512" fill="hsl(140, 65%, 65%)"><path d="M504 256a248 248 0 11-496 0 248 248 0 01496 0zM227 387l184-184c7-6 7-16 0-22l-22-23c-7-6-17-6-23 0L216 308l-70-70c-6-6-16-6-23 0l-22 23c-7 6-7 16 0 22l104 104c6 7 16 7 22 0z"/></svg>'

新建notice.html文件(在哪里新建应该…不用多说了吧？)，加入以下代码

📃展开代码

{{- $noticeType := .Get 0 -}}
{{- $raw := (markdownify .Inner | chomp) -}}
{{- $block := findRE "(?is)^<(?:address|article|aside|blockquote|canvas|dd|div|dl|dt|fieldset|figcaption|figure|footer|form|h(?:1|2|3|4|5|6)|header|hgroup|hr|li|main|nav|noscript|ol|output|p|pre|section|table|tfoot|ul|video)\\b" $raw 1 -}}
{{ $icon := (replace (index $.Site.Data.SVG $noticeType) "icon" "icon notice-icon") }}
<div class="notice {{ $noticeType }}" {{ if len .Params | eq 2 }} id="{{ .Get 1 }}" {{ end }}>
    <div class="notice-title">{{ $icon | safeHTML }}</div>
    {{- if or $block (not $raw) }}{{ $raw }}{{ else }}<p>{{ $raw }}</p>{{ end -}}
</div>

在 assets/scss/shortcodes.scss 中加入以下样式

📃展开代码

.notice {
    position: relative;
    padding: 1em 1em 2em 2.5em;
    margin-bottom: 1em;
    border-radius: 4px;
  
    p:last-child {
      margin-bottom: 0;
    }

    p{
      margin-left: 20px;
    }
  
    .notice-title {
      position: absolute;
      left: 16px;
      margin-top: 17px;
      font-size: 1.2em;
  
      .notice-icon {
        width: 1.2em;
        height: 1.2em;
      }
    }
  
    &.notice-warning {
      background: hsla(0, 65%, 65%, 0.15);
      border-left: 5px solid hsl(0, 65%, 65%);
    }
  
    &.notice-info {
      background: hsla(30, 80%, 70%, 0.15);
      border-left: 5px solid hsl(30, 80%, 70%);
    }
  
    &.notice-note {
      background: hsla(200, 65%, 65%, 0.15);
      border-left: 5px solid hsl(200, 65%, 65%);
    }
  
    &.notice-tip {
      background: hsla(140, 65%, 65%, 0.15);
      border-left: 5px solid hsl(140, 65%, 65%);
    }
  }

[data-theme="dark"] .notice {
  &.notice-warning {
    background: hsla(0, 25%, 35%, 0.15);
    border-left: 5px solid hsl(0, 25%, 35%);

    .notice-title {
      color: hsl(0, 25%, 35%);
    }
  }

  &.notice-info {
    background: hsla(30, 25%, 35%, 0.15);
    border-left: 5px solid hsl(30, 25%, 35%);

    .notice-title {
      color: hsl(30, 25%, 35%);
    }
  }

  &.notice-note {
    background: hsla(200, 25%, 35%, 0.15);
    border-left: 5px solid hsl(200, 25%, 35%);

    .notice-title {
      color: hsl(200, 25%, 35%);
    }
  }

  &.notice-tip {
    background: hsla(140, 25%, 35%, 0.15);
    border-left: 5px solid hsl(140, 25%, 35%);

    .notice-title {
      color: hsl(140, 25%, 35%);
    }
  }
}

使用方法如下：

{{< notice notice-warning >}}
warning 可以换成 info tip note 
{{< /notice >}}

简洁版彩色标签

千里烟波，暮霭沉沉楚天阔

东风夜放花千树，更吹落，星如雨

波心荡冷月无声

十里青山远，潮平路带沙。数声啼鸟怨年华。又是凄凉时候，在天涯。白露收残月，清风散晓霞。绿杨堤畔问荷花。记得年时沽酒，那人家。

新建simple-notice.html文件

📃展开代码

{{- $noticeType := .Get 0 -}}
{{- $raw := (markdownify .Inner | chomp) -}}
{{- $block := findRE "(?is)^<(?:address|article|aside|blockquote|canvas|dd|div|dl|dt|fieldset|figcaption|figure|footer|form|h(?:1|2|3|4|5|6)|header|hgroup|hr|li|main|nav|noscript|ol|output|p|pre|section|table|tfoot|ul|video)\\b" $raw 1 -}}
{{ $icon := (replace (index $.Site.Data.SVG $noticeType) "icon" "icon simple-notice-icon") }}
<div class="simple-notice {{ $noticeType }}" {{ if len .Params | eq 2 }} id="{{ .Get 1 }}" {{ end }}>
    <div class="simple-notice-title">{{ $icon | safeHTML }}</div>
    {{- if or $block (not $raw) }}{{ $raw }}{{ else }}<p>{{ $raw }}</p>{{ end -}}
</div>

在 assets/scss/shortcodes.scss 中加入以下样式

📃展开代码

.simple-notice {
  position:relative;
  padding: 1em 0 1em 2em;
  margin-bottom: 1em;
  transition: all .5s;
  p:last-child {
      margin-bottom: 0;
  }
  .simple-notice-title {
    position: absolute;
    left: 16px;
    margin-top: 16px;
    font-size: 1.2em;
      .simple-notice-icon {
          width: 1em;
          height: 1em;
          margin-left: -0.8em;
      }
  }
  &.simple-notice-warning {
      border-top: 2px solid hsl(0, 100%, 35%);
      color: hsl(0, 100%, 35%);
      a {
          color: hsl(0, 100%, 35%);
          text-decoration-color: hsl(0, 100%, 35%);
      }
  }
  &.simple-notice-info {
      border-top: 2px solid hsl(40, 80%, 45%);
      color: hsl(40, 80%, 45%);
      a {
          color: hsl(40, 80%, 45%);
          text-decoration-color: hsl(40, 80%, 45%);
      }
  }
  &.simple-notice-note {
      border-top: 2px solid hsl(210, 100%, 25%);
      color: hsl(210, 100%, 25%);
      a {
          color: hsl(210, 100%, 25%);
          text-decoration-color: hsl(210, 100%, 25%);
      }
  }
  &.simple-notice-tip {
      border-top: 2px solid hsl(150, 100%, 25%);
      color: hsl(150, 100%, 25%);
      a {
          color: hsl(150, 100%, 25%);
          text-decoration-color: hsl(150, 100%, 25%);
      }
  }
}

[data-theme="dark"] .simple-notice {
  &.simple-notice-warning {
      border-top: 2px solid hsl(0, 65%, 65%);
      color: hsl(0, 65%, 65%);
      a {
          color: hsl(0, 65%, 65%);
          text-decoration-color: hsl(0, 65%, 65%);
      }
  }
  &.simple-notice-info {
      border-top: 2px solid hsl(30, 80%, 70%);
      color: hsl(30, 80%, 70%);
      a {
          color: hsl(30, 80%, 70%);
          text-decoration-color: hsl(30, 80%, 70%);
      }
  }
  &.simple-notice-note {
      border-top: 2px solid hsl(200, 65%, 65%);
      color: hsl(200, 65%, 65%);
      a {
          color: hsl(200, 65%, 65%);
          text-decoration-color: hsl(200, 65%, 65%);
      }
  }
  &.simple-notice-tip {
      border-top: 2px solid hsl(140, 65%, 65%);
      color: hsl(140, 65%, 65%);
      a {
          color: hsl(140, 65%, 65%);
          text-decoration-color: hsl(140, 65%, 65%);
      }
  }
}

在SVG.tmol中加入

📃展开代码

simple-notice-warning = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 512 512" fill="#b30000"><path d="M114.57 76.07a45.71 45.71 0 00-67.51-6.41c-17.58 16.18-19 43.52-4.75 62.77l91.78 123-92.33 124.15c-14.23 19.25-13.11 46.59 4.74 62.77a45.71 45.71 0 0067.5-6.41L242.89 262.7a12.14 12.14 0 000-14.23zm355.67 303.51l-92.33-124.13 91.78-123c14.22-19.25 12.83-46.59-4.75-62.77a45.71 45.71 0 00-67.51 6.41l-128 172.12a12.14 12.14 0 000 14.23L398 435.94a45.71 45.71 0 0067.51 6.41c17.84-16.18 18.96-43.52 4.73-62.77z"/></svg>'
simple-notice-note = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 192 512" fill="#004080"><path d="M176 432c0 44.11-35.89 80-80 80s-80-35.89-80-80 35.89-80 80-80 80 35.89 80 80zM25.26 25.2l13.6 272A24 24 0 0062.83 320h66.34a24 24 0 0023.97-22.8l13.6-272A24 24 0 00142.77 0H49.23a24 24 0 00-23.97 25.2z"/></svg>'
simple-notice-info = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 192 512" fill="#cf9117"><path d="M20 424.23h20V279.77H20a20 20 0 01-20-20V212a20 20 0 0120-20h112a20 20 0 0120 20v212.23h20a20 20 0 0120 20V492a20 20 0 01-20 20H20a20 20 0 01-20-20v-47.77a20 20 0 0120-20zM96 0a72 72 0 100 144A72 72 0 0096 0z"/></svg>'
simple-notice-tip = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 512 512" fill="#008040"><path d="M173.9 439.4L7.5 273c-10-10-10-26.2 0-36.2l36.2-36.2c10-10 26.2-10 36.2 0L192 312.69l240.1-240.1c10-10 26.2-10 36.2 0l36.2 36.21c10 10 10 26.2 0 36.2L210.1 439.4c-10 10-26.2 10-36.2 0z"/></svg>'

块引用

十里青山远，潮平路带沙。数声啼鸟怨年华。又是凄凉时候，在天涯。白露收残月，清风散晓霞。绿杨堤畔问荷花。记得年时沽酒，那人家。

💡目前的块引用存在存在一定问题，主要表现不同设备或浏览器上显示效果不同，在windows+chrome可以显示正常样式和字体，但是同样的配置放在mac+safari或chrome上就完全大变样了，如果在你的的设备上出现引号不对齐的情况可以自行调整😥

新建myquote.html,这样命名是为了与原有的区分开来

📃展开代码

<myblockquote class="quote{{ range .Params }} {{ . }}{{ end }}">
    {{- $content := .Inner | markdownify -}}
    {{- if not (strings.HasPrefix $content "<p>") }}
        {{ printf `<p>%s</p>` $content | safeHTML }}
    {{- else }}
        {{- $content }}
    {{- end -}}
</myblockquote>

CSS样式

📃展开代码

myblockquote.quote {
  position: relative;
  border: none;
  color: #9f9f9f;

  p {
    font-family: "Noto Serif SC", serif;
    font-weight: 500;
    font-size: 18px;
    margin-left: 3em;
    margin-top: 1.5em;
    margin-bottom: 1.5em;

    &::before {
      position: absolute;
      left: 0;
      content: '“';
      font-family: 'JetBrains Mono', serif;
      font-size: 3em;
      font-weight: bold;
      line-height: 1;
    }
  }

  &.poetry {
    display: table;
    padding: 0;

    &::before {
      left: -1em;
    }

    p:last-child {
      margin: 0;
    }
  }

  &.en {
    p {
      line-height: 1.618;
      text-align: left;
      hyphens: auto;
      -webkit-hyphens: auto;
      -moz-hyphens: auto;
    }
  }
}

有需要可以引入思源黑体，在 layouts/partials/head/script.html中加入

📃展开代码

<!-- 引入思源黑体 -->
<script> (function () {const customFont = document.createElement('link');customFont.href = "https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;700&display=swap";customFont.type = "text/css";customFont.rel = "stylesheet";document.head.appendChild(customFont);}());</script>

代码示例如下

{{< myquote >}}
十里青山远，潮平路带沙。数声啼鸟怨年华。又是凄凉时候，在天涯。白露收残月，清风散晓霞。绿杨堤畔问荷花。记得年时沽酒，那人家。
{{< /myquote >}}

原生块引用

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
An koala at sunset
― A famous person, The book they wrote

这个是主题自带的，使用方法

{{< quote author="A famous person" source="The book they wrote" url="https://en.wikipedia.org/wiki/Book">}}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
{{< figure src="123.jpg" title="An elephant at sunset" >}}
{{< /quote >}}

插一段趣事：

这个短代码原本我是不知道的，在翻GitHub issue的时候无意中看见一个歪果仁发的贴子，说是采用这个短代码的时候无法显示图片，然后我闲了没事就去帮他debug了一下，刚好脑洞大开想到了原因，顺利帮外国老哥解决了问题

居中块引用

十里青山远，潮平路带沙

数声啼鸟怨年华

又是凄凉时候，在天涯

白露收残月，清风散晓霞

也是一个需要自己调整距离且显示效果因人而异的

新建quote-center.html，写入

📃展开代码

<myblockquote class="quote-center">
    {{- $content := .Inner | markdownify -}}
    {{- if not (strings.HasPrefix $content "<p>") }}
        {{ printf `<p>%s</p>` $content | safeHTML }}
    {{- else }}
        {{- $content }}
    {{- end -}}
</myblockquote>

CSS样式

📃展开代码

myblockquote.quote-center {
  position: relative;
  border-left: none;
  padding-left: 0;
  border-top: 1px solid;
  border-bottom: 1px solid;
  color: #9f9f9f;

  p {
    text-align: center !important;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    font-family: "Noto Serif SC", serif;
    font-weight: 500;
    font-size: 18px;
  }

  &::before {
    position: absolute;
    left: 0;
    content: '“';
    font-family: 'JetBrains Mono', serif;
    font-size: 3em;
    font-weight: bold;
    margin-top: -0.42em;
  }

  &::after {
    position: absolute;
    right: 0;
    content: '”';
    font-family: 'JetBrains Mono', serif;
    font-size: 3em;
    font-weight: bold;
    margin-top: -8rem;
  }
}

代码示例如下（如果你的设备上br换行不奏效就换成回车）

{{< quote-center >}}
十里青山远，潮平路带沙<br>数声啼鸟怨年华<br>又是凄凉时候，在天涯<br>白露收残月，清风散晓霞
{{< /quote-center >}}

网易云音乐

新建 netease.html 文件，写入

📃展开代码

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=100% height=86 src="//music.163.com/outchain/player?type=2&id={{ index .Params 0 }}&auto={{ index .Params 1 }}&height=66"></iframe>

使用方法

{{< netease 557578993 0 >}}

隐藏文字

本文所有的长代码块采用的样式

新建 detail.html，写入

📃展开代码

<details>
    <summary>{{ (.Get 0) | markdownify }}</summary>
    {{ .Inner | markdownify }}
</details>

使用方法

{{< detail "展开详细信息" >}}
隐藏文字
{{< /detail >}}

居中文字

文字居中

创建 align.html 文件，写入

📃展开代码

<p style="text-align:{{ index .Params 0 }}">{{ index .Params 1 | markdownify }}</p>

使用方法

{{< align center "文字居中" >}}

相册

}

相册功能是本章的一个重头戏，需要好好说一下

分别新建gallery.html和galleries.html

其中gallery.html中写入

📃展开代码

<a href="{{ .Get "src" }}" data-ngThumb="{{ .Get "src" }}">{{ .Get "title" }}</a>

galleries.html中写入

📃展开代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nanogallery2@3.0.5/dist/css/nanogallery2.min.css">
    <script src="https://cdn.jsdelivr.net/npm/nanogallery2@3.0.5/dist/jquery.nanogallery2.min.js"></script>
</head>
<body>

<div data-nanogallery2='{
	 "thumbnailDisplayTransition":          "none",
    "thumbnailHeight":  "200",
    "thumbnailWidth":   "200",
    "galleryMosaic" :   [
      { "c": 1, "r": 1, "w": 2, "h": 2 },
      { "c": 3, "r": 1, "w": 1, "h": 1 },
      { "c": 3, "r": 2, "w": 1, "h": 1 },
      { "c": 4, "r": 1, "w": 1, "h": 1 },
      { "c": 4, "r": 2, "w": 1, "h": 1 },
      { "c": 1, "r": 3, "w": 2, "h": 1 },
      { "c": 3, "r": 3, "w": 2, "h": 1 },
      { "c": 1, "r": 4, "w": 1, "h": 1 }
    ],
     "thumbnailDisplayTransitionDuration":  500,
     "thumbnailDisplayInterval":            30,
     "galleryDisplayTransition":            "none",
     "galleryDisplayTransitionDuration":    500,
     "galleryDisplayMode": "rows",
     "thumbnailDisplayOutsideScreen": "false",
     "eventsDebounceDelay": 10,
     "thumbnailL1BorderHorizontal": 0,
     "thumbnailL1BorderVertical": 0,
     "thumbnailLabel": {
        "titleFontSize": "0.6em"
     },
     "thumbnailHoverEffect2": "image_scale_1.00_1.10|label_backgroundColor_rgba(0,0,0,0)_rgba(255,255,255,0)",
     "galleryTheme": {
        "thumbnail": {
            "borderRadius": "8px"
        }
     },
     "thumbnailToolbarImage": {
        "topLeft": "",
        "topRight": "",
        "bottomLeft": "",
        "bottomRight": ""
     },
     "viewerToolbar":   {
        "display": true,
        "standard": "label"
     },
     "viewerTools":     {
        "topLeft":    "pageCounter, playPauseButton",
        "topRight":   "downloadButton, rotateLeft, zoomButton, fullscreenButton, closeButton"
     },
     "viewerGalleryTWidth": 40,
     "viewerGalleryTHeight": 40
}'>
    {{ .Inner }}
</div>
</body>
</html>

使用方法

{{< galleries >}}

{{< gallery src="https://cdn.lovir.cn/photo/DSCF9645.webp" >}}}

{{< gallery src="https://cdn.lovir.cn/photo/DSCF7385.webp" >}}

{{< gallery src="https://cdn.lovir.cn/photo/DSCF6903.webp" >}}

{{< /galleries >}}

官方文档中其实给出了多种布局方式，我这里采用的是瀑布流布局，所以这一段代码特别扎眼

实际上这并不能称作标准的瀑布流布局，因为他没有动态的计算图片的高度，只是通过划分来把一个平面划分成多个小方格，规定了每个图片的长度和宽度，从而形成固定的布局

    "galleryMosaic" :   [
      { "c": 1, "r": 1, "w": 2, "h": 2 },
      { "c": 3, "r": 1, "w": 1, "h": 1 },
      { "c": 3, "r": 2, "w": 1, "h": 1 },
      { "c": 4, "r": 1, "w": 1, "h": 1 },
      { "c": 4, "r": 2, "w": 1, "h": 1 },
      { "c": 1, "r": 3, "w": 2, "h": 1 },
      { "c": 3, "r": 3, "w": 2, "h": 1 },
      { "c": 1, "r": 4, "w": 1, "h": 1 }
    ],

当然，如果你想要采取其他的布局也可以在 galleries.html的 <div data-nanogallery2=这里开始修改，只需要在官方给出的代码找到对应的代码替换掉我给的代码就行了~

参考链接

🔗自定义 Hugo Shortcodes 简码

🔗来写一些好玩的 Hugo 短代码吧

🔗Hugo博客添加相册功能