Hugo博客添加豆瓣卡片
Beijing, China: ☀️ 🌡️+20°C 🌬️→19km/h
写在前面
考虑到很多人会用博客记录自己读书或一些观影感受，而豆瓣作为各类影音和书籍的集中社区，很好的保留了个人阅读观影记录。
Hugo 提供 shortcode 方式添加豆瓣卡片方法，可直接参考Sulv’s Blog ，后来发现由于官方 API 的更新或访问延迟，经常导致卡片信息不显示，故探寻以下方法：
GitHub 存储
利用 GitHub Action 特性，以 API 的方式定时从个人豆瓣主页数据获取历史记录，保存书籍、电影等相关信息，同时抓取封面图片等，保留至 GitHub 仓库。
构建个人 GitHub 仓库，在.github/workflows目录下添加douban.yaml和download.yml文件，同时主目录添加douban.py和requirements.txt文件。在个人豆瓣主页设置个人ID并记录，修改douban.yaml中的id信息，最终卡片信息都存储在data/douban中，封面图片存储在images/douban中，具体文件内容可直接参考个人博客仓库GitHub - ShaohanTian/MyBlog
。（豆瓣卡片根据前端定制化HTML文件和CSS文件配置）
第三方抓取（更推荐）
在themes/layouts/shortcodes中添加douban.html文件：
[{{ $dbUrl := .Get "src" }}
{{ $dbApiUrl := "https://neodb.social/api/catalog/fetch?url=" }}
{{ $dbFetch := getJSON $dbApiUrl $dbUrl }}
{{ if $dbFetch }}
{{ $itemRating := 0 }}{{ with $dbFetch.rating }}{{ $itemRating = . }}{{ end }}
%3Cdiv class="db-card"%3E
<div class="db-card-subject">
<div class="db-card-post"><img loading="lazy" decoding="async" referrerpolicy="no-referrer" src="{{ replace $dbFetch.cover_image_url "neodb.social" "neodb.prvcy.page" }}"></div>
<div class="db-card-content">
<div class="db-card-title"><a href="{{ $dbUrl }}" class="cute" target="_blank" rel="noreferrer">{{ $dbFetch.title }}</a></div>
<div class="rating"><span class="allstardark"><span class="allstarlight" style="width:{{ mul 10 $itemRating }}%"></span></span><span class="rating_nums">{{ $itemRating }}</span></div>
<div class="db-card-abstract">{{ $dbFetch.brief }}</div>
</div>
<div class="db-card-cate">{{ $dbFetch.category }}</div>
</div>
</div>
{{else}}
<p style="text-align: center;"><small>远程获取内容失败，请检查 API 有效性。</small></p>
{{end}}>)
比如我们想添加鲁迅的《朝花夕拾》这本书，在豆瓣上直接搜索，获得对应链接https://book.douban.com/subject/1449352/：
书写形式及最终呈现的效果如下：
# MD 源文件去除aa标签
{aa{< douban src="https://book.douban.com/subject/1449352/" >}}
参考文献
【2】 Hugo 博客自定义 shortcodes | Sulv’s Blog
【3】 豆瓣书影音同步 GitHub Action | 怡红院落
【5】 awesome-hugo-shortcodes | GitHub
【6】 shortcodes | douban | GitHub
【8】 immmmm | GitHub