介绍了一种为博客添加个人豆瓣阅读和观影记录页面的方法。

不久前看到有个博主在自己的网站上展示了个人阅读和观影记录，觉得很有特点，便想着在自己的博客上也能不能实现类似的效果。

在 Google 上搜索的时候发现了一篇文章介绍的方法，通过第三方的接口导入，实现起来比较简单。

「布克牧为」接口

需要使用的接口是 布克牧为（ book 和 movie 的谐音），注册账号后，输入个人豆瓣ID（9位数字，进入个人主页可以看到），同步观影信息和读书信息。

同步完成后，会生成 API 密钥，用于不同形式（列表、详细信息）的电影或书籍展示。

image-20210902092206967

嵌入静态博客

要想在自己的博客中进行展示，首先需要在目录栏中加入读书和观影这两个栏目。在toml 设置文件中的menu.main 中进行添加：

 [[menu.main]]
    name = "观影"
    url = "/movie/"
    weight = 5

  [[menu.main]]
    name = "阅读"
    url = "/book/"
    weight = 6

接着需要在对应的content目录下生成book 和movie 两个文件夹📂。在文件夹下各新建一个index.md的文件。

对于博客而言，点击目录栏的读书应该展示book文件夹下的 markdown 文档，而我们要做的就是将豆瓣展示页这样一个 Html 文件嵌入 markdown 文档中。

Html 文件的编写参考「布克牧为」的作者在 GitHub 上的使用说明

<head>
<meta name="referrer" content="same-origin">
</head>
<head>
<script src="https://cdn.jsdelivr.net/combine/npm/react@17.0.2/umd/react.production.min.js,npm/react-dom@17.0.2/umd/react-dom.production.min.js,gh/iMuFeng/bmdb@3.4.1/dist/bmdb.js"></script>
</head>
<div class="container"></div>
<script>
new Bmdb({
type: 'book',
selector: '.container',
secret: 'API密钥',
noMoreDataTips: '没有更多数据了'
})
</script>

Html 文件的嵌入方法也比较简单，便是将代码复制插入 Markdown 文件中，如果被正确地识别为了 Html，是不会显示具体的内容的。如果没能识别，可以检查是否有换行、空格等，删去。

如果出现 Markdown 文件无法正确显示 Html 网页的情况，可以在根目录下的config.opml 文件中加入以下代码。

[markup.goldmark]    
[markup.goldmark.renderer]     
unsafe = true

之后就按照正常流程生成静态博客，同步到 GitHub Pages 上即可。

image-20210902093811847