# 前言
今天就来讲讲如何在 Hexo 页面中嵌入豆瓣个人主页。
# 使用插件
Butterfly 主题使用 hexo-butterfly-douban 插件
其他非 Butterfly 主题使用 hexo-douban 插件
这两个插件的功能是相同的，只是
hexo-butterfly-douban插件适配 Butterfly 主题，可以配置meta,top_img,comments和aside
# 安装
hexo-butterfly-douban 插件：在 Hexo 博客根目录右键 Git Bash，输入以下命令安装插件：
npm install hexo-butterfly-douban --save |
hexo-douban 插件：在 Hexo 博客根目录右键 Git Bash，输入以下命令安装插件：
npm install hexo-douban --save |
# 配置
以下教程使用
hexo-butterfly-douban插件
将下面的配置写入站点的配置文件 _config.yml 里 (不是主题的配置文件).
douban: | |
user: {your douban id} | |
builtin: false | |
book: | |
title: 'This is my book title' | |
quote: 'This is my book quote' | |
meta: true | |
comments: true | |
top_img: https://cdn.jsdelivr.net/gh/Amnesia-f/CDN/img.jpg | |
aside: true | |
movie: | |
title: 'This is my movie title' | |
quote: 'This is my movie quote' | |
meta: true | |
comments: true | |
top_img: https://cdn.jsdelivr.net/gh/Amnesia-f/CDN/img.jpg | |
aside: true | |
game: | |
title: 'This is my game title' | |
quote: 'This is my game quote' | |
meta: true | |
comments: true | |
top_img: https://cdn.jsdelivr.net/gh/Amnesia-f/CDN/img.jpg | |
aside: true | |
timeout: 10000 |
- user: 你的豆瓣 ID. 打开豆瓣，登入账户，然后在右上角点击 “个人主页” ，这时候地址栏的 URL 大概是这样：“https://www.douban.com/people/xxxxxx/” ，其中的 "xxxxxx" 就是你的个人 ID 了。
- builtin: 是否将生成页面的功能嵌入
hexo s和hexo g中，默认是false, 另一可选项为true(1.x.x 版本新增配置项)。 - title: 该页面的标题.
- quote: 写在页面开头的一段话，支持 html 语法.
- timeout: 爬取数据的超时时间，默认是 10000ms , 如果在使用时发现报了超时的错 (ETIMEOUT) 可以把这个数据设置的大一点。
- meta: 插入
<meta name="referrer" content="no-referrer">到页面，可解决部分浏览器无法显示豆瓣图片的问题（会导致一些插件出错，例如 不蒜子计数器。） - comments： 是否显示评论
- top_img： 顶部图
- aside： 是否显示侧边栏
如果只想显示某一个页面 (比如 movie)，那就把其他的配置项注释掉即可。
# 使用
# 1.x.x 版本
在 0.x.x 版本中，文章的更新和豆瓣页面的爬取操作是绑定在一起的，无法支持单独更新文章或者单独爬取文章。
在 1.x.x 版本中，使用 hexo douban 命令即可生成指定页面，如果不加参数，那么默认参数为 -bgm 。
需要注意的是，通常大家都喜欢用 hexo d 来作为 hexo deploy 命令的简化，但是当安装了 hexo douban 之后，就不能用 hexo d 了，因为 hexo douban 跟 hexo deploy 的前缀都是 hexo d 。
$ hexo douban -h | |
Usage: hexo douban | |
Description: | |
Generate pages from douban | |
Options: | |
-b, --books Generate douban books only | |
-g, --games Generate douban games only | |
-m, --movies Generate douban movies only |
如果配置了 builtin 参数为 true ，那么除了可以使用 hexo douban 命令之外， hexo g 或 hexo s 也内嵌了生成页面的功能。
# 0.x.x 版本
直接使用命令 hexo g 即在生成静态页面前爬取豆瓣数据，如果使用 hexo s 则会监听文件变动，每有一次变动就会重新爬取数据。
# 升级
我会不定期更新一些功能或者修改一些 Bug，所以如果想使用最新的特性，可以用下面的方法来更新:
修改 package.json 内 hexo-butterfly-douban 的版本号至最新
重新安装最新版本
npm install hexo-butterfly-douban --save
或者使用以下指令直接更新：
npm install hexo-butterfly-douban --update --save |
# 显示
如果上面的配置和操作都没问题，就可以在生成站点之后打开 //yourblog/books 和 //yourblog/movies , //yourblog/games , 来查看结果.
# 菜单
如果上面的显示没有问题就可以在主题的配置文件 _config.yml 里添加如下配置来为这些页面添加菜单链接.
menu: | |
Home: / | |
Archives: /archives | |
Books: /books #This is your books page | |
Movies: /movies #This is your movies page | |
Games: /games #This is your games page |
# 使用效果
以下是一些主题的使用效果：
# hexo-theme-butterfly
# hexo-theme-landscape
# hexo-theme-next
# hexo-theme-yilia
# hexo-theme-indigo
# hexo-theme-aath
# 注意事项
在我使用过程中，NodeJs 版本需在 v12.18.0 才能爬到数据。
NodeJs 版本需在 v12.18.0 才能爬到数据。
NodeJs 版本需在 v12.18.0 才能爬到数据。
NodeJs 版本需在 v12.18.0 才能爬到数据。
也不知道是为什么，这很奇怪，我去 GitHub 的 issue 中看到很多人也是这种情况。
NodeJsv12.18.0 下载地址：https://nodejs.org/dist/v12.18.0/
node-v12.18.0-x64.msi 这是 64 位的安装包
# 结语
hexo-douban 插件项目地址：https://github.com/mythsman/hexo-douban
hexo-butterfly-douban 插件项目地址：https://github.com/jerryc127/hexo-butterfly-douban
参考：https://blog.csdn.net/weixin_58068682/article/details/116614109
