hugo短代码

Hugo官方的文档看着头疼，大概意思是Markdown的内容格式过于简单，有些创作者为了实现某些功能被迫将HTML的一些功能添加到Markdown里面去了（应该是利用Markdown内嵌HTML标签，但我直接插入HTML标签似乎是没用的），于是hugo创造了短代码。¹

hugo短代码通过{{<短代码名参数>}}的形式调用.

要突出显示页面上的 Hugo/GO 模板代码，请在左大括号之后添加/* 和右大括号之前添加*/。

自带的ref

今天会发现短代码，是因为我想做博客内的交叉引用，直接用链接好麻烦，如果换个域名什么的就全没了。查了一圈才发现hugo可以用短代码链接其他文件。²

例如我要链接到初始之地，只需要输入：

[初始之地]({{<ref "初始之地">}})

抄来的一些代码

网上搜了些有意思的短代码。

高亮

关于这个我其实很纳闷，Markdown自带的语法里应该是有高亮的，但是似乎hugo不支持？

高亮测试

在.layout/shortcodes下创建mark.html，编写：

<mark>{{ .Get "text" }}</mark>

使用方式：

{{<mark text="高亮测试"  >}}

在./assets/scss/custom.css中可以为主题自定义css。高亮目前用的黄，我觉得还行，以后看到有意思的颜色再换吧。

隐藏

之前看到象友的标签很有意思，这个用短代码应该也能实现。

同样的位置新建detail.html：

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

示例：

点我

点我干嘛

{{- $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>

在/asset/scss/custom.css中加入以下样式：

.notice {
  position:relative;
  padding: 1em 1em 1em 2.5em;
  margin-bottom: 1em;
  border-radius: 4px;
  p:last-child {
      margin-bottom: 0;
  }
  .notice-title {
      position: absolute;
      left: 0.8em;
      .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-title {
          color: hsl(0, 65%, 65%);
      }
  }
  &.notice-info {
      background: hsla(30, 80%, 70%, 0.15);
      border-left: 5px solid hsl(30, 80%, 70%);
      .notice-title {
          color: hsl(30, 80%, 70%);
      }
  }
  &.notice-note {
      background: hsla(200, 65%, 65%, 0.15);
      border-left: 5px solid hsl(200, 65%, 65%);
      .notice-title {
          color: hsl(200, 65%, 65%);
      }
  }
  &.notice-tip {
      background: hsla(140, 65%, 65%, 0.15);
      border-left: 5px solid hsl(140, 65%, 65%);
      .notice-title {
          color: 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%);
      }
  }
}

里面有一个[data-theme="dark"],估计是暗色模式下的css样式，我不爱用，主题里关于暗色模式我其实都删了，但是抄来的代码还是保留了这个项目（说不定以后会用暗色模式咧？）。

之后在./data/下新建SVG.toml文件，拷贝以下：

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>'

这是定义4个变量为SVG图像，以后有想法可以替换其他的。

告一段落

以后要是抄到了更好的再继续更新。其实蛮好玩的，我看主题也自带了很多有意思的短代码。不过感觉要调用起来还是蛮麻烦的。