豆瓣书单电影页面

首先需要检查 hexo 的版本，在博客的根目录下执行 hexo -v 命令就可以检查版本，这个豆瓣插件需要的版本 < 4.2.0，否则会出现 bug。解决办法为降低 hexo 的版本，先卸载当前 hexo 版本，再安装低于 4.2.0 的版本即可。

$ npm uninstall hexo
$ npm install hexo@4.0.0 -g

  • 首先在博客站点目录执行下面的命令安装豆瓣插件：

$ npm install hexo-douban --save

  • 接着在博客根目录的配置文件_config.yml下，添加如下配置：

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。

  • title:：该标题的名字。

  • quote:：写在开头的一段话，支持 html 语法。

  • timeout:：爬取数据的超时时间，默认是 10000ms，如果在使用时发现报了超时的错 (ETIMEOUT) 可以把这个数据设置的大一点。

    如果只想显示某一个页面 (比如 movie)，那就把其他的配置项注释掉即可。

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

    • menu:
       媒体:
          url: /
          icon: fas fa-list
          children:
            - name: 电影
              url: /movies
              icon: fas fa-film
            - name: 书单
              url: /books
              icon: fas fa-book
            - name: 游戏
              url: /games
              icon: fas fa-gamepad
  • 在 /themes/hexo-theme-matery/layout 文件夹下面创建一个名为 douban.ejs 的文件，并将下面的内容复制进去： 
    • <%- partial('_partial/post-cover') %> 
    <style> 
        .hexo-douban-picture img {
            width: 100%; 
        } 
    </style>
    <main class="content"> 
        <div id="contact" class="container chip-container"> 
            <div class="card"> 
                <div class="card-content" style="padding: 30px"> 
                    <h1 style="margin: 10px 0 10px 0px;"><%= page.title %></h1> 
                    <%- page.content %> 
                </div> 
            </div> 
            <div class="card"> 
                <div class="card-content" style="text-align: center"> 
                    <h3 style="margin: 5px 0 5px 5px;">如果你有好的内容推荐，欢迎在下面留言！</h3> 
                </div> 
            </div> 
            <div class="card"> 
                <% if (theme.gitalk && theme.gitalk.enable) { %>
                    <%- partial('_partial/gitalk') %>
                <% } %> 
                <% if (theme.gitment.enable) { %> 
                    <%- partial('_partial/gitment') %> 
                <% } %> 
                <% if (theme.disqus.enable) { %> 
                    <%- partial('_partial/disqus') %> 
                <% } %> 
                <% if (theme.livere && theme.livere.enable) { %> 
                    <%- partial('_partial/livere') %> 
                <% } %> 
                <% if (theme.valine && theme.valine.enable) { %> 
                    <%- partial('_partial/valine') %> 
                <% } %> 
            </div> 
        </div> 
    </main>

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

    • /* 原文件内容为 layout: [`page`, `post`] ，将其修改为下面的内容*/
    layout: [`page`, `douban`]
  • 最后就是使用并生成相应的页面，执行命令如下: 
    • $ hexo douban

    需要注意的是，当安装 douban 插件后，hexo d将不能使用，想到使用需要写成hexo deploy。以下是可选的命令参数：

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

当站点配置文件的 builtin 的值为 true 时，生成页面的功能会嵌入到 hexo g 和 hexo s 中，在进行部署生成操作，会自动生成相应的页面。