Hexo搭建笔记

说明

  本文作为博主搭建Hexo博客时的笔记以及往后的更新迭代记录。
  一些单独分篇请参考本博客的Hexo分类。

安装

  • 环境设置

  将Cloud Studio安装环境设置为Nodejs

  • 命令集合
    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
    29
    30
    31
    //安装
    sudo npm install -g hexo-cli

    //创建一个文件夹用于存放文章与设置。
    mkdir hexo

    //令初始化博客。
    cd hexo
    sudo hexo init

    //提权
    sudo chmod -R 777 *

    //修改站点配置文件后,开启本地服务进行预览
    hexo server

    //安装Hexo Git插件
    sudo npm install --save hexo-deployer-git

    //对文章目录提权
    cd source/_posts
    sudo chmod -R 777 *

    //清理静态网页
    sudo hexo clean

    //生成博客与推送博客
    sudo hexo g -d

    //更改目录权限
    sudo chown -R coding:coding 某目录

配置

  注:以下内容若涉及到主题配置,均以Next主题为例。

添加音乐播放器

1
npm install aplayer --save

添加版权声明

  1. 在目录themes/next/layout/_macro/下新建文件my-copyright.swig,添加如下代码:
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
29
30
{% if page.copyright %}
<div class="my_post_copyright">
<script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>

<!-- JS库 sweetalert 可修改路径 -->
<script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<p><span>本文标题:</span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p>
<p><span>文章作者:</span><a href="/" title="访问 {{ theme.author }} 的个人博客">{{ theme.author }}</a></p>
<p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:MM") }}</p>
<p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:MM") }}</p>
<p><span>原始链接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
<span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}" aria-label="复制成功!"></i></span>
</p>
<p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p>
</div>
<script>
var clipboard = new Clipboard('.fa-clipboard');
$(".fa-clipboard").click(function(){
clipboard.on('success', function(){
swal({
title: "",
text: '复制成功',
icon: "success",
showConfirmButton: true
});
});
});
</script>
{% endif %}
  1. 在目录themes/next/source/css/_common/components/post/下新建文件my-post-copyright.styl添加如下代码:
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
.my_post_copyright {
width: 85%;
max-width: 45em;
margin: 2.8em auto 0;
padding: 0.5em 1.0em;
border: 1px solid #d3d3d3;
font-size: 0.93rem;
line-height: 1.6em;
word-break: break-all;
background: rgba(255,255,255,0.4);
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {
display: inline-block;
width: 5.2em;
color: #b5b5b5;
font-weight: bold;
}
.my_post_copyright .raw {
margin-left: 1em;
width: 5em;
}
.my_post_copyright a {
color: #808080;
border-bottom:0;
}
.my_post_copyright a:hover {
color: #a3d2a3;
text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {
color: #000;
}
.my_post_copyright .post-url:hover {
font-weight: normal;
}
.my_post_copyright .copy-path {
margin-left: 1em;
width: 1em;
+mobile(){display:none;}
}
.my_post_copyright .copy-path:hover {
color: #808080;
cursor: pointer;
}
  1. 修改目录themes/next/layout/_macro/下的post.swig,在代码:
1
2
3
4
5
{% if theme.wechat_subscriber.enabled and not is_index %}
<div>
{% include 'wechat-subscriber.swig' %}
</div>
{% endif %}

之前添加如下代码:

1
2
3
4
5
<div>
{% if not is_index %}
{% include 'my-copyright.swig' %}
{% endif %}
</div>
  1. 修改目录themes/next/source/css/_common/components/post/下的post.styl文件,在最后一行增加如下代码:
1
@import "my-post-copyright";
  1. 最后到站点根目录/scaffolds/下的post.md,在两个---中间增加一行:
1
copyright: true

添加博文置顶

  1. 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
}
});
};

  1. 设置文章置顶

  在文章Front-matter中添加top值,数值越大文章越靠前。

添加文章结束标语

  1. 在目录\themes\next\layout\_macro下新建文件passage-end-tag.swig,并添加如下代码:
1
2
3
4
5
6
7
8
9
10
11
<div>
{% if not is_index %}
<div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束❤感谢阅读-------------</div>

<center>
<button type="button" class="btn btn-info" onclick="location.href='https://www.sanshuifeibing.cn/comments/'">留言</button>
</center>


{% endif %}
</div>
  1. 打开目录\themes\next\layout\_macro\下的post.swig文件,在END POST BODY下添加如下代码:
1
2
3
4
5
<div>
{% if not is_index %}
{% include 'passage-end-tag.swig' %}
{% endif %}
</div>
  1. 打开站点配置文件_config.yml,在末尾添加如下代码:
1
2
3
# 文章末尾添加“本文结束”标记
passage_end_tag:
enabled: true

添加站内搜索

  先通过以下命令安装站内搜索插件。

1
npm install hexo-generator-search --save

  在主题配置文件_config.yml中将local_searchenable值设为true,然后在站点配置文件_config.yml末尾添加如下代码:

1
2
3
4
5
6
# 本地搜索
search:
path: search.xml
field: post
format: html
limit: 10000

代码块复制按钮

  将themes\next\_config.yml里的copy_button: false改为copy_button: true

引用块设置换行

  修改themes\next\source\css\_common\scaffolding\base.styl,找到blockquote样式,进行如下修改:

1
2
3
4
5
blockquote {
margin: 0;
padding: 0;
word-break: break-all;
}

文章永久链接

  使用如下命令安装hexo-abbrlink插件:

1
sudo npm install hexo-abbrlink --save

  在站点配置文件下进行如下修改:

1
2
3
4
5
6
7
url: https://www.sanshuifeibing.cn
root: /
permalink: posts/:abbrlink.html
permalink_defaults:
abbrlink:
alg: crc32 # 算法:crc16(default) and crc32
rep: hex # 进制:dec(default) and hex

页面压缩优化

  运行以下命令安装:

1
2
3
sudo npm install -g gulp
cd hexo
sudo npm install gulp-minify-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp --save

  在博客根目录下新建 gulpfile.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
29
30
31
32
33
34
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 4.0 适用的方式
gulp.task('default', gulp.parallel('minify-html', 'minify-css', 'minify-js'
//build the website
));

添加fork me on github

  在\themes\next\layout\_layout.swig文件下的div class="headband"下面添加以下代码:
注意:href指向的地址需要修改成你的github地址。

1
<a href="https://your-url" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>

添加autonofollow

1
npm install hexo-autonofollow --save

  站点配置文件_config.xml中添加如下字段:

1
2
3
4
5
nofollow:
enable: true
exclude:
- 'www.xxx.com'
...

  注:exclude处所添加的网址会被排除,即不会添加nofollow属性。
  插件默认添加的属性为external nofollow noopener noreferrer,一般来说只需要external nofollow即可,如果需修改,可以增删根目录下的node_moduleshexo-autonofollowlib/filter.js文件中rel的值。

自定义CSS样式

  在themes/next/source/css/_custom/custom.styl里添加下列需要的代码即可。

DesertsP版Valine调整评论框高度

1
2
3
4
5
6
.valine .vinputs-area {
overflow: hidden;
margin: 20px auto auto !important;
position: relative;
border: 1px solid #ededed;
}

修改文章内超链接样式

1
2
3
4
5
6
7
8
.post-body p a {
color: #0593d3;
border-bottom: none;
&:hover {
color: #0477ab;
text-decoration: underline;
}
}

修改阅读全文按钮样式

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
29
30
31
.post-button {
margin-top: 30px;
text-align: center;
}

.post-button .btn {
color: #fff;
font-size: 15px;
background: #5c5c5c;
border-radius: 16px;
line-height: 2;
padding: 0 20px;
transition: 0.2s ease-out;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

}


.post-button a{
margin: 0 8px 8px 0 !important;
border-bottom: 1px solid #666;
border: none;
}


.btn:hover, .post-button .btn:hover {
border-color: #222;
color: #222;
background: #fff;

}

修改主题页面布局为圆角

  在/themes/next/source/css/_variables处找到custom.styl添加如下代码(以Gemini风格为例):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// Variables of Gemini scheme
// =================================================

@import "Pisces.styl";

// Settings for some of the most global styles.
// --------------------------------------------------
$body-bg-color = #eee

// Borders.
// --------------------------------------------------
$box-shadow-inner = 0 2px 2px 0 rgba(0,0,0,.12), 0 3px 1px -2px rgba(0,0,0,.06), 0 1px 5px 0 rgba(0,0,0,.12)
$box-shadow = 0 2px 2px 0 rgba(0,0,0,.12), 0 3px 1px -2px rgba(0,0,0,.06), 0 1px 5px 0 rgba(0,0,0,.12), 0 -1px .5px 0 rgba(0,0,0,.09)

$border-radius-inner = initial
$border-radius = initial
$border-radius-inner = 15px 15px 15px 15px;
$border-radius = 15px;

修改友链页面样式

请转至《Hexo修改友链样式

-------------本文结束❤感谢阅读-------------

本文标题:Hexo搭建笔记

文章作者:三水非冰

发布时间:2017年12月30日

最后更新:2019年09月01日

原始链接:https://www.sanshuifeibing.cn/posts/aa6444c6.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

如果觉得我的文章对您有用,请随意打赏,您的支持将鼓励我继续创作。