添加豆瓣读书



豆瓣书单电影界面

**注意:首先需要检查你的hexo版本是多少,在你的博客目录下执行命令 hexo -v即可,这个豆瓣插件需要的版本需要<4.2.0,否则会出现bug,比如点击书单的在读,想读或者已读会出现一个新的弹出页面,解决办法就是降低hexo的版本,先卸载目前的hexo版本,再安装4.0.0版本的hexo即可,我的版本为4.0.0。**
在hexo 博客个性化定制中,加入豆瓣读书界面可要为博客主页添光加彩

点击链接查看效果: 安清衍的博客

温馨提示:文末有部署三部曲,可复制

以下展示两种方法:(本质一样)

第一种:

第一步:检查hexo版本

在电脑左下角搜索栏(若关闭搜索栏可以使用win键+s键打开搜索框)输入git bash,右键点击选择以管理员身份运行

Eg:图片不见啦
我的目录在g:\blog2我就输入cd g:\blog2(以英文方式输入且cd后有空格

很重要!!!否则会存到默认位置就是c盘,导致电脑变卡

输入以下命令:

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

第二步:在博客站点目录执行命令安装豆瓣插件

同第一步以管理员身法运行gitbash(很重要!!!不然很可能报错)

Cd到你的博客目录

例如我的目录在g:\blog2 我就输入cd g:\blog2(以英文方式输入且cd后有空格)

很重要!!!否则会存到默认位置就是c盘,导致电脑变卡

安装插件:

$ 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 
​``` 

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


## 第四步:然后再主题配置文件_config.yml中添加关于此页面的菜单:(下面是我的配置)``` bash
$ 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 
​``` 

**注意:相当于在配置文件最上面的菜单栏里添加新栏目,不要多打一个menu!!!否则会报错 **
<img src="https://bu.dusays.com/2021/12/21/adb6c84806a18.png" alt=“图片不见啦” />
 
## 第五步:适配Matery主题:在 /themes/hexo-theme-matery/layout 文件夹下面创建一个名为 douban.ejs 的文件,并将下面的内容复制进去:``` bash
$ <%- 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,用文本编辑器打开这三个文件,并将其文件内容末尾的代码修改为一下内容:``` bash
/* 原文件内容为 layout: [`page`, `post`] ,将其修改为下面的内容*/
layout: [`page`, `douban`]``` 

##第七步:最后就是使用并生成相应的页面,执行命令如下``` bash
$ hexo douban​ 

需要注意的是,通常大家都喜欢用 hexo d 来作为 hexo deploy 命令的简化,但是当安装了 hexo douban 之后,就不能用 hexo d 了,因为 hexo douban 跟 hexo deploy 的前缀都是 hexo d ,你以后执行的 hexo d 将不再是 Hexo 页面的生成,而是豆瓣页面的生成。

以下是可选的命令参数:

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

当站点配置文件的builtin的值为true时,生成页面的功能会嵌入到hexo g和hexo s中,在进行部署生成操作,会自动生成相应的页面。
# 第二种:
##    第一步:安装模块依赖
我们使用时可以先安装依赖模块,在GitBash(在搜索栏中搜索后**以管理员身法运行**)中使用以下命令:

``` bash
$ npm install hexo-douban –save

第二步:站点配置文件中添加配置

然后我们再在Hexo站点根目录配置文件_config.xml中的末尾添加如下配置:

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 s和hexo g中,默认是false,另一可选项为true(1.x.x版本新增配置项)。
 title: 该页面的标题.
 quote: 写在页面开头的一段话,支持html语法.
 timeout: 爬取数据的超时时间,默认是 10000ms ,如果在使用时发现报了超时的错(ETIMEOUT)可以把这个数据设置的大一点。

由于hexo-douban 是默认抓取豆瓣读书、豆瓣电影以及豆瓣游戏的,如果只想要其中一部分,可以把其它部分在上述配置文件中去掉即可。

第三步:启动

那么我们如何去使用这个呢?

我们只需要在GitBash中输入以下命令:hexo clean && hexo douban -bgm && hexo g && hexo s即可,注意其中开启hexo-douban的命令中,-bgm代表的是book、game、movie三个参数,如果只需要其中的一部分就只带你想要的那些参数。

另外注意的是,由于hexo douban的简写也是hexo d,与hexo deploy的简写指令hexo d冲突,因此在进行二者部署的时候,只能都打全名而不能打简写形式。

第四步:测试

上面都没问题之后,我们只需要在站点目录下测试http://localhost:4000/books 或者 http://localhost:4000/movies 等,如果看到页面了就说明成功了。

第五步:部署

如果上述都没有问题,我们就可以在菜单栏中添加按钮了,打开主题配置文件_config.xml,找到菜单按钮,可以选择性的添加下面内容:

$menu:
$  home: /archives: /archives
$  books: /books     # 这是链接到books页面
$  movies: /movies   #  这是链接到movies页面
$  games: /games   # 这是链接到games页面

注意添加完成之后按钮并不是中文的,这是由于在languages文件夹下面的zh-CN(中文语言配置文件)没有添加上述对应的中文参数信息,所以我们需要主动添加。

语言文件夹在你的主题配置文件夹下面,比如我的是使用的next主题,则是在E:\blog\hexo\themes\next\languages目录下,找到zh-CN文件,在menu菜单下添加:

menu:
  books: 阅读
  movies: 电影
  games: 游戏

即可完成中文化自定义菜单。

博客的豆瓣页面就做好啦

温馨实现:以下是部署三部曲:

hexo cl&&hexo douban -bgm&&hexo g&&hexo s

如果对你有用就评论一下让作者知道叭(当然赞赏也可_>)


文章作者: csy
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 csy !
评论
  目录