hugo的使用总结,shortcode使用 - 凌冬的个人博客

hugo的使用总结

shortcode 使用总结

1 . 定义 shortcode 解析 yaml语法

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


{{ with .Inner | transform.Unmarshal }}
<a class="friends" target="_blank" title="{{ .name }}" href="{{ .link }}">
  <div class="card" >
  {{ if .avatar }}
    <img
      class="lazyload no-fancybox"
     
      data-original="{{ .avatar }}"
    />
  {{ end }}
  <div class="right">
    <h3>{{ .name }}</h3>
    <div title="{{ .desc }}">{{ .desc }}</div>
  </div>
  </div>
</a>

{{ end }}

shortcode使用文档

参考 hugo的官方文档

even主题 shortcode参考

解析yaml格式内容

我可以匹配如 yaml 等内容,利用正则表达式的方式来实现，代码如下

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


{{ $matchCode := replaceRE "(.|\n)*```ya?ml((.|\n)*)```(.|\n)*" "$2" .Inner  }}
{{- with $matchCode | transform.Unmarshal  -}}
<a class="friends" target="_blank" title="{{ .name }}" href="{{ .link }}">
  <div class="card" >
  {{- if .avatar }}
    <img
      class="lazyload no-fancybox"
      data-original="{{ .avatar }}"
    />
  {{- end -}}
  <div class="right">
    <h3>{{ .name }}</h3>
    <div title="{{ .desc }}">{{ .desc }}</div>
  </div>
  </div>
</a>
{{-  end  -}}

这个就是我的友人帐的解析代码了，经过修改后，可以直接使用 markdown 的代码，方便维护

正则表达式参考文档

将markdown转html

参考文档

1

{{ .Inner | markdownify  }}

中间遇到的困难

第一次写，发现无法匹配代码，后面发现是表达式没法匹配 \n 这个内容，因为 . 不能匹配换行，需要改为 (.|\n) , 修改后 (.|\n)* 就可以匹配 yaml代码块的内容了。

github actions 配置部署

参考官方文档

代码提交的那个仓库配置私钥，github-pages 的那个仓库配置公钥，也就是 deploy key 【gh-pages 服务端配置公钥】

1

ssh-keygen -t rsa -b 4096 -C "$(git config user.email)" -f gh-pages -N ""

其他笔记

[[post/11.个人总结/工具使用/markdown语法/流程图-时序图写法 | 流程图画法]]

[[post/13.软件使用总结/markdown/markdown流程图绘制 | markdown流程图插件]]

hugo 图片链接处理

接着看一下 Render Hooks 的内容，我们这里只关注 render-image.html 和 render-link.html，下面是官网的两个例子

layouts/_default/_markup/render-image.html

1
2
3


<p class="md__image">
  <img src="{{ ( replace .Destination "static" "" ) | safeURL }}" alt="{{ .Text }}" {{ with .Title }} title="{{ . }}"{{ end }} />
</p>

vscode markdown复制配置

1
2
3
4
5


{
    "markdown.copyFiles.destination": {
        "**/*": "${documentWorkspaceFolder}/static/image/mdfiles/"
    }
}

这样把 image 图片复制到 /static 目录下，就能部署显示了

文章目录