Shortcodes - 标签 - 菠菜眾長https://lruihao.cn/tags/shortcodes/Shortcodes - 标签 - 菠菜眾長Hugo -- gohugo.iozh-CN1024@lruihao.cn (Lruihao)1024@lruihao.cn (Lruihao)Tue, 05 Oct 2021 19:33:13 +0800Hugo 添加知乎卡片式链接 Shortcodeshttps://lruihao.cn/posts/hugo-cardlink/Tue, 05 Oct 2021 19:33:13 +0800Lruihaohttps://lruihao.cn/posts/hugo-cardlink/ 卡片式链接已整合到 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 已合併 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
]]>