Hexo博客添加豆瓣书单电影游戏页面

Hexo博客添加豆瓣书单电影游戏页面

安装

$ npm install hexo-douban --save

配置

将下面的配置写入站点的配置文件 _config.yml 里(不是主题的配置文件).

douban:
  user: mythsman
  builtin: false
  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 shexo g中,默认是false
  • title: 该页面的标题.
  • quote: 写在页面开头的一段话,支持html语法.
  • timeout: 爬取数据的超时时间,默认是 10000ms ,如果在使用时发现报了超时的错(ETIMEOUT)可以把这个数据设置的大一点。

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

使用

使用hexo douban命令即可生成指定页面,如果不加参数,那么默认参数为-bgm

需要注意的是,通常大家都喜欢用hexo d来作为hexo deploy命令的简化,但是当安装了hexo douban之后,就不能用hexo d了,因为hexo doubanhexo 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 ghexo s也内嵌了生成页面的功能。

显示

如果上面的配置和操作都没问题,就可以在生成站点之后打开 //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

适配Matery主题

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

/* banner 部分 */
<style type="text/css">
    .about-cover {
        height: 75vh;
    }
</style>

<%- partial('_partial/bg-cover') %>

/* 内容 */
<main class="content">
    <div id="contact" class="container chip-container">
        <div class="card">
            <div class="card-content">
                <h1 style="margin: 10px 0 10px 0px;"><%= page.title %></h1> <%- page.content %>
            </div>
        </div>
    </div>
</main>

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

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

3.最后使用hexo-douban命令生成页面


  目录