好久好久之前(2年前),写过这功能:《Bitcron 文章内链自动优化显示》,如下效果:

Bitcron 文章内链自动优化显示

#折腾 
当我们在文章内引用了一个站内的链接,一般只是超级链接,其实,也可以为这个超级链接提供更好的表现方式。 这是看起来很简单,但确实一个超赞的想法,来自于 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://book.douban.com/subject/33408247/ https://movie.douban.com/subject/10432911/

食用方式

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

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

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