警告
本文最后更新于 2021-10-03,文中内容可能已过时。
更多关于 hexo
1 首先
官方文档 是我们的第一手资料,也是最好的。
安装 Hexo 相当简单。然而在安装前,你必须检查电脑中是否已安装下列应用程序:
2 hexo 安装
如果你的电脑中已经安装上述必备程序,那么恭喜你!接下来只需要使用 npm 即可完成 Hexo 的安装。
1
npm install -g hexo-cli
3 建站
安装 Hexo 完成后,请执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件。
1
2
3
hexo init <folder>
cd <folder>
npm install
为一个文件夹的名字
新建完成后,指定文件夹的目录如下:
1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes
4 安装 hexo 插件
全装上吧,没事。
1
2
3
4
5
6
7
8
9
10
11
12
13
npm install hexo-generator-index --save
npm install hexo-generator-archive --save
npm install hexo-generator-category --save
npm install hexo-generator-tag --save
npm install hexo-server --save
npm install hexo-deployer-git --save
npm install hexo-deployer-heroku --save
npm install hexo-deployer-rsync --save
npm install hexo-deployer-openshift --save
npm install hexo-renderer-marked@0.2 --save
npm install hexo-renderer-stylus@0.2 --save
npm install hexo-generator-feed@1 --save
npm install hexo-generator-sitemap@1 --save
5 本地查看效果
执行下面语句,执行完再登录 localhost:4000 查看效果(执行完不要按 Ctrl+C,不然就停止了)
其他步骤在这里不赘述,参见 超详细教程
安卓上搭建 hexo 博客
6 部署
部署后我们可以浏览器搜 username.github.io 查看自己的博客效果,比如我的 lruihao.github.io
7 美化
这些美化都写的很详细,我建议你们自己好好看看吧,我也是在这里看到的,如果问我和这里说的是一样的。
7.1 博文置顶
修改 hero-generator-index
插件,把文件:node_modules/hexo-generator-index/lib/generator.js
内的代码替换为:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
' use strict ' ;
var pagination = require ( ' hexo - pagination ' );
module . exports = function ( locals ){
var config = this . config ;
var posts = locals . posts ;
posts . data = posts . data . sort ( function ( a , b ) {
if ( a . top && b . top ) { // 两篇文章 top 都有定义
if ( a . top == b . top ) return b . date - a . date ; // 若 top 值一样则按照文章日期降序排
else return b . top - a . top ; // 否则按照 top 值降序排
}
else if ( a . top && ! b . top ) { // 以下是只有一篇文章 top 有定义,那么将有 top 的排在前面(这里用异或操作居然不行 233)
return - 1 ;
}
else if ( ! a . top && b . top ) {
return 1 ;
}
else return b . date - a . date ; // 都没定义按照文章日期降序排
});
var paginationDir = config . pagination_dir || ' page ' ;
return pagination ( '' , posts , {
perPage : config . index_generator . per_page ,
layout : [ ' index ' , ' archive ' ] ,
format : paginationDir + ' /% d / ' ,
data : {
__index : true
}
});
};
7.2 about 页面
about 页面可以用 HTML 写,你想怎么写都行,我用的最简单的方法,直接hexo n page "about"
后,会生成一个 md 文件,也就是后面说的文章,直接写文章就行了。
7.3 添加搜索,评论,分享
搜索功能真心好用,当文章多起来的时候,标签提供的作用已经很少了,只能简单索引,搜索却能精确查找,这里我用的依旧是最简单的本地站内搜索。
安装hexo-generator-searchdb
在站点的根目录下执行以下命令:
1
npm install hexo-generator-searchdb --save
配置站点配置文件
新增以下内容到任意位置:
1
2
3
4
5
search:
path: search.xml
field: post
format: html
limit: 10000
配置主题配置文件
1
2
3
## Local search
local_search:
enable: true
algolia 参考文件 让搜索引擎找到你的博客,还是看到邱承佳学长博文有写到 传送门
7.4 添加访客数,阅读量等
评论有多说(多说好像挂了),计数有不蒜,我用的不蒜子,还有其他的。
7.4.1 文章阅读量
以下适合非 next 主题的部分主题,next 主题已经自带,到主题配置文件修改就好了。
打开以下路径在你喜欢的地方添加代码,\blog\hexo\themes\主题名字、layout\_partial
,找到 article.ejs
文件
1
2
3
< div align = "left" >
< span id = "busuanzi_container_page_pv" > 本文总阅读量< span id = "busuanzi_value_page_pv" ></ span > 次 </ span >
</ div >
7.4.2 站点访问量,访客数
打开以下路径在你喜欢的地方添加代码,\blog\hexo\themes\主题名字、layout\_partial
,找到 footer.ejs
文件
1
2
3
4
< script src = "//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" async defer ></ script >
< span id = "busuanzi_container_page_pv" > 本站总访问量< span id = "busuanzi_value_site_pv" ></ span > 次 | </ span >
< span id = "busuanzi_container_site_uv" > 本站访客数< span id = "busuanzi_value_site_uv" ></ span > 人次 </ span >
2018.10.08 更新
不蒜子官网说七牛强制过期域名dn-lbstatics.qbox.me, 所以 js 文件位置发生改变,改为busuanzi.ibruce.info
8 写文章
hexo 文章用轻量型标签语言 Markdown 编写