Hexo搭建笔记 - 三水非冰

说明

本文作为我搭建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;