Hexo 博客加入豆瓣读书界面（综合教程）

豆瓣书单电影界面

注意：首先需要检查你的hexo版本是多少，在你的博客目录下执行命令 hexo -v

即可，这个豆瓣插件需要的版本需要<4.2.0，否则会出现bug，比如点击书单的在读，想读或者已读会出现一个新的弹出页面，解决办法就是降低hexo的版本，先卸载目前的hexo版本，再安装4.0.0版本的hexo即可，我的版本为4.0.0。

在hexo 博客个性化定制中，加入豆瓣读书界面可要为博客主页添光加彩

点击链接查看效果：陈邵云的博客 (csy666lalala.github.io)

以下展示两种方法：（本质一样）

第一种：

第一步：检查hexo版本

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

Eg：

Cd到你的博客目录

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

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

输入以下命令：

npm uninstall hexonpm 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   #如果想生成豆瓣页面，这个需要设置为truebook: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)可以把这个数据设置的大一点。

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

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

menu:媒体:url: /icon: fas fa-listchildren:- name: 电影url: /moviesicon: fas fa-film- name: 书单url: /booksicon: fas fa-book- name: 游戏url: /gamesicon: fas fa-gamepad

注意：相当于在配置文件最上面的菜单栏里添加新栏目，不要多打一个menu！！！否则会报错

第五步：适配Matery主题：在 /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

需要注意的是，通常大家都喜欢用 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（在搜索栏中搜索后以管理员身法运行）中使用以下命令：

‘$ npm install hexo-douban –save’

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

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

douban:user: mythsmanbuiltin: falsebook: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: /archivesbooks: /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 博客加入豆瓣读书界面（综合教程）相关推荐

腾讯云搭建hexo博客
title: 腾讯云搭建hexo博客 tags: hexo,腾讯云文章目录 title: 腾讯云搭建hexo博客 tags: hexo,腾讯云 @[toc] 1. 腾讯云学生认证购买重置密码和网 ...
ubuntu安装有道云笔记_Ubuntu 安装Node 10.16 跑 Nodeppt 加Hexo博客再来个为知笔记私有云...
几个月前偶然看到NodePPT的霸气标语 U work so hard, but 干不过 write PPTs 当时觉得挺好玩的,后来在自己的Windows笔记本上安装了,效果也确实不错,但是在Ubu ...
使用 Debian 从 0 开始搭建 hexo 博客
Hexo 是一个快速.简洁且高效的博客框架.Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页. Hexo 产生的静态文件只要放到任何支持 html ...
云开发平台开箱，3分钟零基础搭建个人Hexo博客
简介:Hexo是一款基于Node.js的博客框架,可以将Markdown格式的文本渲染为HTML代码.所以,博客基本就是纯静态,维护相对方便.但是缺点也很明显--经常换编写环境使用不便,因为它的所有渲 ...
阿里云服务器系统 php mysql_阿里云服务器配环境(Ubuntu 16.04+Nginx+MySQL+PHP)并部署hexo博客...
购买服务器阿里云向学生出售优惠价格的服务器,一个月只需9.5块,具体配置看图吧更新Ubuntu源,安装Git 1 2 3sudo apt update sudo apt upgrade sudo ...
Hexo框架+Github Page搭建博客(附下载主题、导出CSDN博客至Hexo博客)
文章目录一.Git的下载与安装二.Nodejs安装三.安装Hexo 四.初始化Hexo 4.1 hexo init 4.2 配置_config.yml 4.3 hexo s运行 4.4 下载更多 ...
如何从零搭建一个hexo博客网站02
title: 如何从零搭建一个hexo博客网站02 categories: "Hexo教程" #文章分類目錄可以省略简介:此教程分为两部分,云服务器篇和本地pc机篇 tags: ...
使用Travis CI自动部署Hexo博客
自从使用GitHub Pages和Hexo来发布博客之后,不得不说方便了许多,只需要几个简单的命令博客就发布了.但在不断的使用中发现每次的发布操作也挺耗时的. 我一般的操作是将平时整理好的md文件放到 ...
https 加端口_Ubuntu 安装Node 10.16 跑 Nodeppt 加Hexo博客再来个为知笔记私有云
几个月前偶然看到NodePPT的霸气标语 U work so hard, but 干不过 write PPTs 当时觉得挺好玩的,后来在自己的Windows笔记本上安装了,效果也确实不错,但是在Ubu ...

Hexo 博客加入豆瓣读书界面（综合教程）

Hexo 博客加入豆瓣读书界面（综合教程）相关推荐

最新文章

热门文章