前提
hexo有多个配置文件
- 站点配置文件：在站点根目录下的_config.yml
- 主题配置文件：在对应主题文件内的_config.yml
安装配置next主题
//切换到你的站点目录
cd your-hexo-site
//下载主题
git clone https://github.com/iissnan/hexo-theme-next themes/next
//修改站点配置_config.yml
theme: next
//修改主题配置文件themes/next/_config.yml
//next有三个子主题，这里我们使用 Mist
scheme: Mist
//修改右侧头像，对应图片放于themes/next/sources/images/
avatar: /images/avatar.jpg
//修改标签图标（和前一步一致）
favicon: /images/favicon.ico
//清理
hexo clean
//生成
hexo g
//启动
hexo s
//上传
hexo d
启用分类及标签
//修改主题配置文件_config.yml
menu:
categories: /categories #分类页（需手动创建）
tags: /tags #标签页（需手动创建）
//需要手动创建的如下操作
hexo new page "tags"
//这样编写文章时需要增加对应的结构字段
//会自动归类
tags:
categories:
酷炫效果
集成本地搜索
安装 hexo-generator-searchdb，在站点的根目录下执行以下命令：
npm install hexo-generator-searchdb --save
编辑站点配置文件，新增以下内容到任意位置：
search:
path: search.xml
field: post
format: html
limit: 10000
编辑 主题配置文件，启用本地搜索功能：
# Local search
local_search:
enable: true
集成Algolia 搜索功能
前提 Next 版本 >= 5.1.0
点击跳转官网
进入Dashboard，选择Indices 新建一个Index。
本地安装 npm install --save hexo-algolia
查询第2步获得的 Application ID、Search-Only API Key 和 Admin API Key，其中Admin API Key
编辑站点配置文件
algolia:
appId: 'xxx' //Application ID
applicationID: 'xxx' //Application ID
apiKey: 'xxx'
adminApiKey: 'xxx'
indexName: 'xxx'
chunkSize: 5000
fields: //这些就是索引字段，随意搭配
- name
- message
- path
- date
- url
- title
- slug
- content:strip
更新索引至Algolia
hexo algolia
启用主题配置文件中的Algolia
algolia_search:
enable: true
站点右上角斜标
点击跳转官网 选择喜欢的样式
复制对应的代码然后粘贴刚才复制的代码到themes/next/layout/_layout.swig文件中(放在
添加RSS
根目录下安装插件
npm install --save hexo-generator-feed
修改站点配置_config.yml
//末尾添加
#Extensions
##Plugins: http://hexo.io/plugins/
plugins: hexo-generate-feed
修改主题配置文件_config.yml
rss: /atom.xml
添加动态背景
打开next/layout/_layout.swig
增加如下代码
//在 < /body>之前添加代码 (注意不要放在< /head>的后面)
{% if theme.canvas_nest %}
{% endif %}
//可更改线条样式
{% if theme.canvas_nest %}
{% endif %}
//color ：线条颜色, 默认: '0,0,0'；三个数字分别为(R,G,B)
//opacity: 线条透明度（0~1）, 默认: 0.5
//count: 线条的总数量, 默认: 150
//zIndex: 背景的z-index属性，css属性用于控制所在层的位置, 默认: -1
修改主题配置文件_config.yml
canvas_nest: true
修改文章内链接文本样式
打开themes\next\source\css_common\components\post\post.styl
末尾增加如下代码
// 文章内链接文本样式
.post-body p a{
color: #0593d3;
border-bottom: none;
border-bottom: 1px solid #0593d3;
&:hover {
color: #fc6423;
border-bottom: none;
border-bottom: 1px solid #fc6423;
}
}
修改底部“#文章”的“#”标签
打开/themes/next/layout/_macro/post.swig
搜索 rel="tag">#，将 # 换成
文章末尾统一添加“本文结束”标记
在路径 \themes\next\layout_macro 中新建 passage-end-tag.swig 文件
写入如下代码
{% if not is_index %}
-------------本文结束感谢您的阅读-------------
{% endif %}
//接着打开\themes\next\layout\_macro\post.swig文件，在post-body 之后，
//post-footer 之前添加如下画红色部分代码（post-footer之前两个DIV）：
{% if not is_index %}
{% include 'passage-end-tag.swig' %}
{% endif %}
//更改主题配置文件
# 文章末尾添加“本文结束”标记
passage_end_tag:
enabled: true
添加RSS
切换到你的blog（我是取名blog，具体的看你们的取名是什么）的路径，例如我是在//D/Hexo/blog这个路径上，也就是在你的根目录下
安装模块
npm install --save hexo-generator-feed
更改主题配置文件
在里面的末尾添加：(请注意在冒号后面要加一个空格，不然会发生错误！)
#Extensions
##Plugins: http://hexo.io/plugins/
plugins: hexo-generate-feed
然后打开next主题文件夹里面的_config.yml,在里面配置为如下样子：(就是在rss:的后面加上/atom.xml,注意在冒号后面要加一个空格)
#Set rss to false to disable feed link.
#Leave rss as empty to use site's feed link.
#Set rss to specific value if you have burned your feed already.
rss: /atom.xml
配置完之后运行：
$ hexo g
重新生成一次，你会在./public 文件夹中看到 atom.xml 文件。然后启动服务器查看是否有效，之后再部署到 Github 中。
博文压缩
安装模块
在站点的根目录下执行以下命令：
$ npm install gulp -g
$ npm install gulp-minify-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp --save
新建控制脚本
hexo根目录，新建 gulpfile.js ，并填入以下内容：
var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
// 压缩 public 目录 css
gulp.task('minify-css', function() {
return gulp.src('./public/**/*.css')
.pipe(minifycss())
.pipe(gulp.dest('./public'));
});
// 压缩 public 目录 html
gulp.task('minify-html', function() {
return gulp.src('./public/**/*.html')
.pipe(htmlclean())
.pipe(htmlmin({
removeComments: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
}))
.pipe(gulp.dest('./public'))
});
// 压缩 public/js 目录 js
gulp.task('minify-js', function() {
return gulp.src('./public/**/*.js')
.pipe(uglify())
.pipe(gulp.dest('./public'));
});
// 执行 gulp 命令时执行的任务
gulp.task('default', [
'minify-html','minify-css','minify-js'
]);
生成博文是执行 hexo g && gulp 就会根据 gulpfile.js 中的配置，对 public 目录中的静态资源文件进行压缩。
修改代码块自定义样式
修改custom.styl
打开\themes\next\source\css\_custom\custom.styl,向里面加入：(颜色可以自己定义)
// Custom styles.
code {
color: #ff7600;
background: #fbf7f8;
margin: 2px;
}
// 大代码块的自定义样式
.highlight, pre {
margin: 5px 0;
padding: 5px;
border-radius: 3px;
}
.highlight, code, pre {
border: 1px solid #d6d6d6;
}
修改右侧头像添加旋转效果
打开\themes\next\source\css_common\components\sidebar\sidebar-author.styl
添加如下代码
.site-author-image {
display: block;
margin: 0 auto;
padding: $site-author-image-padding;
max-width: $site-author-image-width;
height: $site-author-image-height;
border: $site-author-image-border-width solid $site-author-image-border-color;
/* 头像圆形 */
border-radius: 80px;
-webkit-border-radius: 80px;
-moz-border-radius: 80px;
box-shadow: inset 0 -1px 0 #333sf;
/* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束
(1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/
/* 鼠标经过头像旋转360度 */
-webkit-transition: -webkit-transform 1.0s ease-out;
-moz-transition: -moz-transform 1.0s ease-out;
transition: transform 1.0s ease-out;
}
img:hover {
/* 鼠标经过停止头像旋转
-webkit-animation-play-state:paused;
animation-play-state:paused;*/
/* 鼠标经过头像旋转360度 */
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
/* Z 轴旋转动画 */
@-webkit-keyframes play {
0% {
-webkit-transform: rotateZ(0deg);
}
100% {
-webkit-transform: rotateZ(-360deg);
}
}
@-moz-keyframes play {
0% {
-moz-transform: rotateZ(0deg);
}
100% {
-moz-transform: rotateZ(-360deg);
}
}
@keyframes play {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(-360deg);
}
}
hexo源码上git
们在使用 Hexo 来写博客的时候，我们将博客搭建在 GitHub 上后，当我们使用 hexo d 部署到 GitHub 上，其实没有把我们博客源码保存上去，而只是生成一些博客需要的静态的页面。假设我们硬盘坏了，数据无法恢复，那么我们的博客源文档也会不见，所以最好我们是把源代码也托管到 GitHub 上， 这个也有一个好处就是你在其他电脑上也可以同步编写博客。接下来就讲述如何实现。
提交
以windows gitbash为例，在你的hexo根目录下右键gitbash：
//初始化
$ git init
//添加远程仓库
$ git remote add origin [email protected]:username/username.github.io.git
//添加当前目录到INDEX
$ git add .
//更新日志
$ git commit -m "blog"
//推送到源
$ git push origin master:MyBlog
此时，登录你的git，会发现多出了MyBlog分支，且源码已经提交上去
git add -u 只提交已经add的文件的更新，不会增加新增的文件
git add . 提交修改和新文件，不包括删除的
git add -A 以上两个的结合
忽略npm安装的模块
使用hexo不可避免的npm或cnpm安装了一堆node_modules，这部分东西我们没有必要提交到git上去，只需要把package.json提交，下次git clone下来后再npm install即可。
git本身支持忽略指定的文件或文件夹的操作，在我们的hexo根目录下新建一个文件.gitignore，然后写入node_modules/即可，这个时候git add .时是不会把node_modules文件夹里的提交的。
步骤
以后写完日志
$ git add .
$ git commit -m "blog"
$ git push origin master:MyBlog
$ hexo g
$ hexo d
博文带图片
hexo配置文件_config.yml :
post_asset_folder: true
安装模块：
npm install hexo-asset-image --save
此时创建博文hexo n "xxxx"时发现/source/_posts文件夹内除了xxxx.md文件还有一个同名的文件夹,将使用的图片放于同名的文件夹即可，在md文件内
即可
hexo同步提交到coding并发布
注册coding
注册Coding.net账号：
打开Coding.net官网，注册一个个人账号
新建项目：
注意项目名与注册用的账户名一致，这里我用的是test：
添加公钥
点击设置->部署公钥->新建部署公钥，之前部署到Github上的时候，本地目录 C\User(中文为用户)(电脑用户名).ssh 目录下会有 github.rsa.pub 公钥文件，打开然后复制里面的内容，直接贴在这里的公钥框中：
Tip：
记得要勾选 授予推送权限 ，否则在后面运行hexo d时会提示错误：
Coding.net Tips : [Deploy key is not allowed to push!]
fatal: Could not read from remote repository.
打开Git命令窗口Git Bash，执行指令：
ssh -T [email protected]
出现提示
说明配置正确。
修改hexo配置
打开hexo本地的配置文件 _config.yml，修改 deploy 的配置内容，这里设置了运行hexo d之后部署的目的地址，原本只有Github地址，现在添加多Coding.net的地址，其中test是注册该平台的 用户名：
Tip：
github:和coding:后面接地址前，必须有一个英语输出法的空格隔开，否则会报错。
push
执行
hexo g
hexo d
部署
打开Coding.net的项目管理界面，打开代码->Pages服务，选择部署来源为master分支，然后保存即可：
测试效果：
打开http://test.coding.me/test访问我们的博客，刚配置完访问的时候出现404错误很正常，需要等待几分钟左右才能生效。
请关注我的订阅号
