说明
本文作为我搭建Hexo博客时的笔记以及往后的更新迭代记录。
安装
- 环境设置
将Cloud Studio安装环境设置为Nodejs。
- 命令集合
//安装
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主题为例。
添加音乐播放器
npm install aplayer --save添加版权声明
- 在目录
themes/next/layout/_macro/下新建文件my-copyright.swig，添加如下代码：
{% 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 %}- 在目录
themes/next/source/css/_common/components/post/下新建文件my-post-copyright.styl添加如下代码：
.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;
}- 修改目录
themes/next/layout/_macro/下的post.swig，在代码：
{% if theme.wechat_subscriber.enabled and not is_index %}
<div>
{% include 'wechat-subscriber.swig' %}
</div>
{% endif %}之前添加如下代码：
<div>
{% if not is_index %}
{% include 'my-copyright.swig' %}
{% endif %}
</div>- 修改目录
themes/next/source/css/_common/components/post/下的post.styl文件，在最后一行增加如下代码：
@import "my-post-copyright";- 最后到
站点根目录/scaffolds/下的post.md，在两个---中间增加一行：
copyright: true添加博文置顶
- 将
node_modules/hexo-generator-index/lib/generator.js文件的内容替换为以下代码：
'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
}
});
};- 设置文章置顶
在文章Front-matter中添加top值，数值越大文章越靠前。
添加文章结束标语
- 在目录
\themes\next\layout\_macro下新建文件passage-end-tag.swig,并添加如下代码：
<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>- 打开目录
\themes\next\layout\_macro\下的post.swig文件，在END POST BODY下添加如下代码：
<div>
{% if not is_index %}
{% include 'passage-end-tag.swig' %}
{% endif %}
</div>- 打开站点配置文件
_config.yml，在末尾添加如下代码：
# 文章末尾添加“本文结束”标记
passage_end_tag:
enabled: true添加站内搜索
先通过以下命令安装站内搜索插件。
npm install hexo-generator-search --save 在主题配置文件_config.yml中将local_search的enable值设为true，然后在站点配置文件_config.yml末尾添加如下代码：
# 本地搜索
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样式，进行如下修改：
blockquote {
margin: 0;
padding: 0;
word-break: break-all;
}文章永久链接
使用如下命令安装hexo-abbrlink插件：
sudo npm install hexo-abbrlink --save在站点配置文件下进行如下修改：
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页面压缩优化
运行以下命令安装：
sudo npm install -g gulp
cd hexo
sudo npm install gulp-minify-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp --save在博客根目录下新建 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 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地址。
<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
npm install hexo-autonofollow --save 站点配置文件_config.xml中添加如下字段：
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调整评论框高度
.valine .vinputs-area {
overflow: hidden;
margin: 20px auto auto !important;
position: relative;
border: 1px solid #ededed;
}修改文章内超链接样式
.post-body p a {
color: #0593d3;
border-bottom: none;
&:hover {
color: #0477ab;
text-decoration: underline;
}
}修改阅读全文按钮样式
.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风格为例）：
// 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;版权属于：三水非冰
本文链接：https://www.sanshuifeibing.com/posts/bd5b3fbb.html
转载时须注明作者及出处
