Hexo搭建笔记

博主：三水非冰
发布时间：2017 年 12 月 30 日
299次浏览
暂无评论
9646字数
分类：学习笔记-C#

说明

本文作为我搭建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无效解决方法
浏览次数: 1812
斗鱼直播源解析
浏览次数: 1690
手动修改War3脚本
浏览次数: 1316
编写油猴脚本初体验
浏览次数: 1312
博客由Hexo转至Typecho
浏览次数: 1068

独元殇
不错不错，什么时候曲能做出来呢？
卢松松
这是你写的词？
huangguan
不行哦
南山
ARM架构路由的蝴蝶可以发一下嘛
一个大学生
三水哥，我不知道你什么原因你微信公众号没了，请问那个校园3.8...

Hexo搭建笔记

三水非冰 • 2017 年 12 月 30 日

说明

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

自定义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;

说明

安装

配置

添加音乐播放器

添加版权声明

添加博文置顶

添加文章结束标语

添加站内搜索

代码块复制按钮

引用块设置换行

文章永久链接

页面压缩优化

添加fork me on github

添加autonofollow

自定义CSS样式

DesertsP版Valine调整评论框高度

修改文章内超链接样式

修改阅读全文按钮样式

修改主题页面布局为圆角

发表评论 取消回复

Hexo搭建笔记

说明

安装

配置

添加音乐播放器

添加版权声明

添加博文置顶

添加文章结束标语

添加站内搜索

代码块复制按钮

引用块设置换行

文章永久链接

页面压缩优化

添加fork me on github

添加autonofollow

自定义CSS样式

DesertsP版Valine调整评论框高度

修改文章内超链接样式

修改阅读全文按钮样式

修改主题页面布局为圆角

发表评论取消回复