Hugo｜为博客添加网页预览Shortcode

2022/01/01: 修改标题和描述字体 2022/06/04: 修改了外围tag，解决一些问题

正在写一篇关于白噪音的博文，需要插入很多外链，但是这样的格式，未免太不够意思了。很难凑字数……

我很喜欢Craft和Notion的网页预览格式，但因为 Craft 比较简洁，只有一张图，看起来好实现一点，所以最后选择了模仿抄它的样式做预览卡片。

操作主要参考了这篇文章：把链接做成卡片形式：一个纯 HTML 的尝试 - 此生未命名／Untitled Life

使用效果

Shortcode：

{{<  preview "https://liatas.com/posts/escaping-hugo-shortcodes/" >}}

添加步骤

1.获取 API

图片框里放置的是网站的 icon，而在网站没有 icon 时，需要用网页快照替代填充。这里获取网页快照用到的是thumbnail.ws，免费账户一个月可以获取 1000 次。

注册 thumbnail.ws

地址：📷 📺 thumbnail.ws - Sign up

或者通过点击首页的“Sign Up”进入。

拷贝 API

这里的登陆入口比较奇怪，叫“Members”，在右上角。登陆之后，拷贝下面一长串的 API Keys（如上图所示）

2.创建 preview.html

在 shortcode 文件夹中创建preview.html

我用的 stack 主题对应路径是：/layouts/shortcodes/preview.html 贴入下列代码：

{{ with getJSON (printf "https://api.microlink.io/?url=%s" (.Get "src" | default
(.Get 0))) }}

<style>
  .link-box {
    border-radius: 5px;
    height: 72px;
    min-width: 0px;
    width: 100%;
    align-items: flex-start;
    display: flex;
    box-sizing: border-box;
    background: #f3f5f8;
    margin-top: 1.2em;
    margin-bottom: 1.2em;
  }

  .link-box:hover {
    background: #eceff4;
  }

  .link-box--favicon {
    width: 100%;
    min-height: 100%;
    min-width: 56px;
    border-radius: 4px;
    background: #dae3ea;
    object-fit: cover;
  }

  .link-box-info {
    display: flex;
    flex-direction: column;
    white-space: nowrap;
    min-width: 10px;
    padding: 8px 8px 8px 4px;
    height: 72px;
    box-sizing: border-box;
    -webkit-box-flex: 1;
  }

  .link-box-title {
    font-size: 1.6rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: 500;
    margin: 0;
    line-height: 1.2;
    padding-bottom: 6px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #0e2c46;
  }
  .link-box-des {
    font-size: 1.3rem;
    font-weight: 400;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin: 0;
    line-height: 1.2;
    overflow: hidden;
    padding-bottom: 4px;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #465c74;
  }
  .link-url {
    font-size: 1.2rem;
    font-weight: 400;
    font-family: "Lato";
    line-height: 1.2;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #9ba2aa;
  }
  .link-box-img {
    position: relative;
    width: 72px;
    height: 72px;
    padding: 8px;
    display: block;
    object-fit: cover;
  }
</style>

<section>
<a href="{{ .data.url }}" target="_blank">
  <div class="link-box" style="align-items: center">
    <div size="56" class="link-box-img">
      {{ with .data.logo }}
      <img src="{{ .url }}" alt="" class="link-box--favicon" />
      {{ else }}
      <img
        src="https://api.thumbnail.ws/api/ab5e7b39a759fc30e6011a7ee654752e103dfeba45a2/thumbnail/get?width=720&url={{ .data.url }}"
        alt=""
        class="link-box--favicon"
      />
      {{ end }}
    </div>

    <div class="link-box-info">
      <div class="link-box-title">
        {{ .data.title | title }} {{ with .data.description }}
      </div>

      <div class="link-box-des">{{ . | htmlUnescape | markdownify }}</div>
      {{ end }}

      <div class="link-url">{{ .data.url }}</div>
    </div>
  </div>
</a>
</section>
{{ end }}

3. 修改 API

用之前拷贝的 API 替换掉 87 行的中文

src="https://api.thumbnail.ws/api/贴入你的APi代码/thumbnail/get?width=720&url={{.data.url}}"

在博文中使用

{{<  preview "这里放网页链接" >}}

回顾思路

1.目标样式

需要修改的地方：

字体类型、颜色
间距，突出标题
卡片颜色，使其更符合主题的蓝色调。

2.获取数据

需要的数据

网页的 icon、标题、描述和 url 链接。

还有网页快照，用来替代没有网页 icon 的网页。

获取方式

通过 API 的方式获取，下面是主要的工具：

Microlink
- icon
- 标题
- 描述
thumbnail.ws
- 网页快照

其中 Microlink 的使用参考自Useful Hugo Templating · Ypertex Blog，thumbnail.ws 则是在上文的 Create Link 版本代码中遍阅发现的。

另外，我有按照 Microlink 文档里说的，在终端中的做了如下操作：

npm install @microlink/cli --global

以及

microlink https://github.com/microlinkhq

不知道有没有影响，我没有看懂 Microlink 到底是怎么用的。

3.修改 shortcode

首先在hugo 官方文档学习了 shortcode 的写法，老实说，不大看得懂，于是放弃了从零开始写的想法，翻文件夹中的 html 文件，发现可以通过一个 html 文件定义 css 样式和 shortcode，于是开始试着这样做起来。

在把链接做成卡片形式：一个纯 HTML 的尝试中有提供比较完善的 shortcode 写法，我在此基础上逐项修改。

最后通过在两个 img 元素中直接插入{{else}}实现用网页快照替代网页 icon。

存在的问题

有些网页加不了

加友链的时候有出现转到 example.com 的情况
没有适配夜间模式
圆角问题
文字很短的话有点空
下次再写