Back

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

仿Craft的网页预览卡片

2022/01/01: 修改标题和描述字体

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

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

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

使用效果

 

Shortcode:

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

添加步骤

1.获取 API

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

注册、登陆入口和API
注册、登陆入口和API

注册 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>

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

{{ end }}

3. 修改 API

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

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

在博文中使用

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

回顾思路

1.目标样式

需要修改的地方:

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

2.获取数据

需要的数据

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

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

获取方式

通过 API 的方式获取,下面是主要的工具:

其中 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 的情况

  • 没有适配夜间模式

  • 圆角问题

  • 文字很短的话有点空

  • 下次再写

Last updated on Jan 01, 2022 11:08 UTC