在 Hexo 中添加豆瓣个人主页

秒速五厘米 2023-01-08 02:15 174阅读 0赞

hexo-douban：可以在 Hexo 页面中嵌入豆瓣页面的插件  
[hexo-douban][]

## 安装 ##

npm install hexo-douban --save-dev

## 配置 ##

在博客站点的配置文件 `_config.yml` 中添加以下内容（注意：不是主题的配置文件）

# hexo-douban
    douban:
      user: xxxx  # 你的豆瓣ID
      builtin: true
      book:
        title: '那些年，我翻阅过的书'
        quote: '思想和身体，总有一个在路上'
      movie:
        title: '那些年，我追过的电影'
        quote: '过去、现在、和未来'
      game:
        title: '那些年，我玩过的游戏'
        quote: '还记得你曾经的游戏角色吗'
      timeout: 10000

*  user: 你的豆瓣ID.打开[豆瓣][Link 1]，登入账户，然后在右上角点击 “个人主页” ，这时候地址栏的URL大概是这样：”https://www.douban.com/people/xxxxxx/" ，其中的”xxxxxx”就是你的个人ID了。
 *  builtin: 是否将生成页面的功能嵌入hexo s和hexo g中，默认是false,另一可选项为true(1.x.x版本新增配置项)。  
    如果配置了builtin参数为true，那么除了可以使用hexo douban命令之外，hexo g或hexo s也内嵌了生成页面的功能。
 *  title: 该页面的标题.
 *  quote: 写在页面开头的一段话,支持html语法.
 *  timeout: 爬取数据的超时时间，默认是 10000ms ,如果在使用时发现报了超时的错(ETIMEOUT)可以把这个数据设置的大一点。  
    注意：如果只想显示某一个页面(比如movie)，那就把其他的配置项注释掉即可。

## 访问 ##

如果上面的配置都没有问题，就可以使用以下地址访问

http://localhost:4000/books
    http://localhost:4000/movies
    http://localhost:4000/games

*注意：此时books、movies、games不需要使用hexo new page xxx来创建，只需要配置hexo-douban后会自动创建。*

## Butterfly 主题中使用 hexo-douban 插件 ##

### 添加到菜单中 ###

如果上面的页面显示都无问题的话，就可以在主题的配置文件 `_config.butterfly.yml` 中为这些页面添加菜单链接了

menu:
      娱乐||fas fa-list:
         - 电影 || /movies/ || fas fa-film
         - 游戏 || /games/ || fas fa-gamepad
         - 书籍 || /books/ || fas fa-book

并且修改主题配置文件 `_config.butterfly.yml`

# If you are using hexo-douban, you can configure it (如果你有使用 hexo-douban,可配置這個)
    douban:
      meta: true
      movies_img: https://gitee.com/dulily/cdn/raw/master/img/me.jpg
      books_img: https://gitee.com/dulily/cdn/raw/master/img/221410-15917120505729.jpg
      games_img: https://gitee.com/dulily/cdn/raw/master/img/fbb1db7f27e748086d30301c6540918f.jpg

*  movies\_img: 设置 hexo-douban 中 movies 页面的 top\_img
 *  books\_img: 设置 hexo-douban 中 books 页面的 top\_img
 *  games\_img: 设置 hexo-douban 中 games 页面的 top\_img

页面的效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70]

其他页面都是类似的

[博客][Link 2]

[hexo-douban]: https://github.com/mythsman/hexo-douban
[Link 1]: https://www.douban.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70]: /images/20221119/8023198072fd46e386271465496260dd.png
[Link 2]: https://dulily.gitee.io/