Hugo 添加知乎卡片式链接 Shortcodes

注意
本文最後更新於 2022-04-01,文中內容可能已過時。
卡片式链接已整合到 FixIt 主题 https://github.com/Lruihao/FixIt
回顧
之前在使用 hexo 的時候也有用到,模仿知乎卡片式链接
和之前的相比,優化之前是后加載,由 JS 在 瀏覽器處理,
使用 shortcodes 方式后,則是在 GO 構建頁面的時候處理,效能上會好很多。

源碼

基於 LoveIt 主題的 Link Shortcodes, 主要改到以下幾個文件,完整提交記錄

assets/css/custom.scss
assets/css/partial/cardlink.scss          # 卡片式鏈接樣式
layouts/partials/plugin/cardlink.html     # 卡片式鏈接模板
layouts/shortcodes/cardlink.html
static/images/card-link-bg.jpg

使用

使用參數见 FixIt 擴展 Shortcodes - Link

1
{{< cardlink href="https://github.com/Lruihao/hugo-blog/commit/089c303693e806bff855ecf3fee110baa62b870b" content="知乎卡片式链接 Git 記錄" >}}

💡 注:FixIt FixIt 0.2.12 | 更改 已合併 shortcode cardlink 到 shortcode link,只需添加 card=true

1
{{< link href="https://github.com/Lruihao/FixIt" content="卡片式链接已整合到 FixIt 主题" card=true >}}

信息
我的博客即将同步至腾讯云+社区,邀请大家一同入驻:
https://cloud.tencent.com/developer/support-plan?invite_code=3o5dmfzf0xkwk