参考

https://blog.csdn.net/qq_44846853/article/details/104563887

0.准备安装hexo-douban插件

npm install hexo-douban --save    

1.修改主站目录(非主题目录)的_config.yml

博客目录/_config.yml下新建books.ejs

内容如下

douban: 
  user: 252345665    #这个需要修改为你个人的id  
  builtin: false   #如果想生成豆瓣页面，这个需要设置为true
  book: 
      title: 'This is my book title' 
      quote: 'This is my book quote' 
  movie: 
      title: 'This is my movie title' 
      quote: 'This is my movie quote' 
  game: 
      title: 'This is my game title' 
      quote: 'This is my game quote' 
  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)可以把这个数据设置的大一点。

2.在导航处增加入口

博客目录/themes/sakura/_config.yml中加入书单、电影的入口 /books /movies

  清单: { path: javascript:;, fa: fa-list-ul faa-vertical, submenus: { 
    书单: {path: /books/, fa: fa-th-list faa-bounce }, 
    番组: {path: /bangumi/, fa: fa-film faa-vertical }, 
    歌单: {path: /music/, fa: fa-headphones },
    电影: {path: /movies/, fa: fa-headphones },
    图集: {path: /tags/图集/, fa: fa-photo },
    娱乐: {path: /dinoswords, fa: fa-gamepad }
  } }

这个时候已经可以进入第5步验证，不过如果想自定义书单页面样式的话要3、4步

3.适配sakura主题

博客目录/themes/sakura/layout/下 增加文件 douban.ejs

<div class="blank" style="padding-top: 75px;">
</div>
<div class="pattern-center ">
  <div class="pattern-attachment-img">
    <% if (page.photos) { %>
    <img src="<%= page.photos %>" src="<%- theme.lazyloadImg %>" data-src="<%= page.photos %>" class="lazyload" onerror="imgError(this,3)" style="width: 100%; height: 100%; object-fit: cover; pointer-events: none;">
    <% } else { %>
      <img src="<%= theme.bg[Math.floor(Math.random() * theme.bg.length + 1)-1] %>" src="<%- theme.lazyloadImg %>" data-src="<%= page.photos %>" class="lazyload" onerror="imgError(this,3)" style="width: 100%; height: 100%; object-fit: cover; pointer-events: none;">
    <% } %>
    <header class="pattern-header ">
      <h1 class="entry-title">悦读</h1>
    </header>
  </div>
</div>
<div id="content" class="site-content">
  <div id="main">
    <div id="main-part">
      <div class="card"> 
            <div class="card-content" style="padding: 30px"> 
                <h1 style="margin: 10px 0 10px 0px;"><%= page.title %></h1> 
                <%- page.content %> 
            </div> 
        </div> 


      
        <section class="author-profile">
          <div class="info" itemprop="author" itemscope="" itemtype="http://schema.org/Person">
            <a href="/about/" class="profile gravatar"><img src="<%- (theme.cdn || '') + theme.avatar%>" itemprop="image" alt="hojun" height="70" width="70"></a>
            <div class="meta">
              <span class="title">Author</span>
              <h3 itemprop="name">
              <a href="<%- theme.url%>" itemprop="url" rel="author"><%- config.author %></a>
              </h3>
            </div>
          </div>
          <p id="showStr"></p>
        </section>
      </div>   
  </div>
</div>

4.修改插件默认应用的模板

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

/* 原文件内容为 layout: [`page`, `post`] ，将其修改为下面的内容*/
layout: [`douban`]

5.运行插件生成相应界面

hexo clean && hexo douban -bgm && hexo g && hexo s

这时页面localhost:4000/books 或 localhost:4000/movies 可以看到界面了

PS:以下是可选的命令参数：

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