title: hexo加入豆瓣页面
date: 2022-03-15 10:25:00
author: HaoQi
img:
top: true
cover: false
coverImg:
password:
reprintPolicy: cc_by
toc: true
mathjax: false
summary: 为你的hexo添加豆瓣页面
categories: 插件篇
tags:

  • hexo
  • douban

1安装豆瓣插件

  1. npm install hexo-douban --save

2配置文件

在博客站点目录的配置文件_config.yml 下，添加如下配置：

  1. douban: 
  2.   user: ***    #这个需要修改为你个人的id  
  3.   builtin: true   #如果想生成豆瓣页面，这个需要设置为true
  4.   book: 
  5.       title: 'This is my book title' 
  6.       quote: 'This is my book quote' 
  7.   movie: 
  8.       title: 'This is my movie title' 
  9.       quote: 'This is my movie quote' 
  10.   game: 
  11.       title: 'This is my game title' 
  12.       quote: 'This is my game quote' 
  13.   timeout: 10000

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

然后再主题配置文件_config.yml 中添加关于此页面的菜单：(下面是我的配置)

  1.   媒体: 
  2.     url: /movies
  3.     icon: fas fa-heartbeat
  4.     children: 
  5.       - name: 电影
  6.         url: /movies
  7.         icon: fas fa-film
  8.       - name: 书单
  9.         url: /books
  10.         icon: fas fa-book
  11.       - name: 游戏
  12.         url: /games
  13.         icon: fas fa-gamepad

3适配matery主题

在 /themes/hexo-theme-matery/layout 文件夹下面创建一个名为 douban.ejs 的文件，并将下面的内容复制进去：

  1. <%- partial('_partial/post-cover') %> 
  2. <style> 
  3.     .hexo-douban-picture img {
  4.         width: 100%; 
  5.     } 
  6. </style>
  7. <main class="content"> 
  8.     <div id="contact" class="container chip-container"> 
  9.         <div class="card"> 
  10.             <div class="card-content" style="padding: 30px"> 
  11.                 <h1 style="margin: 10px 0 10px 0px;"><%= page.title %></h1> 
  12.                 <%- page.content %> 
  13.             </div> 
  14.         </div> 
  15.         <div class="card"> 
  16.             <div class="card-content" style="text-align: center"> 
  17.                 <h3 style="margin: 5px 0 5px 5px;">如果你有好的内容推荐，欢迎在下面留言！</h3> 
  18.             </div> 
  19.         </div> 
  20.         <div class="card"> 
  21.             <% if (theme.gitalk && theme.gitalk.enable) { %>
  22.                 <%- partial('_partial/gitalk') %>
  23.             <% } %> 
  24.             <% if (theme.gitment.enable) { %> 
  25.                 <%- partial('_partial/gitment') %> 
  26.             <% } %> 
  27.             <% if (theme.disqus.enable) { %> 
  28.                 <%- partial('_partial/disqus') %> 
  29.             <% } %> 
  30.             <% if (theme.livere && theme.livere.enable) { %> 
  31.                 <%- partial('_partial/livere') %> 
  32.             <% } %> 
  33.             <% if (theme.valine && theme.valine.enable) { %> 
  34.                 <%- partial('_partial/valine') %> 
  35.             <% } %> 
  36.         </div> 
  37.     </div> 
  38. </main>

4修改配置文件

在博客站点目录下的 node_modules 文件夹下找到 hexo-douban/lib，文件夹下有三个 js 文件，分别为：books-generator.js 、games-generator.js 、movies-generator.js，用文本编辑器打开这三个文件，并将其文件内容末尾的代码修改为一下内容：

/ 原文件内容为 layout: [_page_, _post_] ，将其修改为下面的内容/

layout: [page, douban]

最后就是使用并生成相应的页面，执行命令如下:

  1. hexo douban

5注意事项

1.node.js版本为12.20.2，才能抓取豆瓣页面。我的hexo -v 6.0.0 npm -v 6.14.11。

2.抓取豆瓣。

  1. -h, --help    # 帮助页面
  2. -b, --books   # 只生成书单页面
  3. -g, --games   # 只生成游戏页面
  4. -m, --movies  # 只生成电影页面

3.一天抓取次数达上限将抓取为0，次日恢复抓取。