Hugo 文章内链优化显示

好久好久之前（2年前），写过这功能：《Bitcron 文章内链自动优化显示》，如下效果：

Bitcron 文章内链自动优化显示

2017-12-18 #折腾

当我们在文章内引用了一个站内的链接，一般只是超级链接，其实，也可以为这个超级链接提供更好的表现方式。这是看起来很简单，但确实一个超赞的想法，来自于 Jimmy。效果如下(中间部分，hello 为标题):

本文利用 Hugo 的 Shortcodes 功能和 .GetPage 函数来实现。

功能代码

创建 /layouts/shortcodes/link.html：

{{$URL := .Get 0}}
{{ with .Site.GetPage $URL }}
<div class="post-preview">
  <div class="post-preview--meta" style="width:100%;">
    <div class="post-preview--middle">
      <h4 class="post-preview--title">
        <a target="_blank" href="{{ .Permalink }}">{{ .Title }}</a>
      </h4>
      <time class="post-preview--date">{{ .Date.Format ( default "2006-01-02") }}</time>
      {{ if .Params.tags }}
      <small>{{ range .Params.tags }}#{{ . }}&nbsp;{{ end }}</small>
      {{ end }}
      <section style="max-height:105px;overflow:hidden;" class="post-preview--excerpt">
        {{ .Summary | plainify}}
      </section>
    </div>
  </div>
</div>
{{ end }}

样式代码

样式 CSS 代码需自行调配，个人是复用豆瓣条目的：

小众豆瓣已成刚需，电影、图书看完都会标记下，写日志时常会提到，老想着在文章内「优雅」地展示，官方 API 已废，幸好还有给力的 @mufeng 兄，以下功能就使用其提供的轮子。换用轮子：https://github.com/cxfksword/douban-api-rs 效果如下黑匣子 7.6 2020 / 法国比利时 / 剧情悬疑惊悚 / 雅恩·戈斯兰 / 皮埃尔·尼内璐·德·拉格详谈：左晖 8.2 李翔 / 2020 / 新星出版社思考有深度，才有此笃定

食用方式

\{\{<link "bitcron-auto-article-refer">\}\}

文章内去掉反斜杠 \ 插入即可。

其中 link 匹配短代码模板 link.html ，之后填的 bitcron-auto-article-refer 是文章 md 的文件名。