hexo 个性化设置（大全）

发表于 | 更新于 | 分类于

主题

访问主题列表，获取主题代码。

进入themes目录，进入以下操作：

下载主题 (以next主题为例)

1
git clone https://github.com/iissnan/hexo-theme-next.git（主题的地址）

打开__config.yml文件，将themes修改为next（下载到的主题文件夹的名字）

hexo g

hexo d

关于hexo-next主题下的一些个性化配置，参考：Next主题配置

主题美化

文章中添加居中模块

文章Markdown中填写如下：

1
<blockquote class="blockquote-center">优秀的人，不是不合群，而是他们合群的人里面没有你</blockquote>

自定义hexo new生成md文件的选项

在/scaffolds/post.md文件中添加：

1
2
3
4
5
6
7
8
9
10
---
title: {{ title }}
date: {{ date }}
tags:
categories: 
copyright: true
permalink: 01
top: 0
password:
---

隐藏网页底部powered By Hexo / 强力驱动

打开themes/next/layout/_partials/footer.swig,使用””隐藏之间的代码即可，或者直接删除

添加顶部加载条

打开/themes/next/layout/_partials/head.swig文件，在maximum-scale=1”/>后添加如下代码:

src
1
<link href="//cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css" rel="stylesheet">

但是，默认的是粉色的，要改变颜色可以在/themes/next/layout/_partials/head.swig文件中添加如下代码（接在刚才link的后面）

1
2
3
4
5
6
7
8
9
10
11
12
    .pace .pace-progress {
        background: #1E92FB; /*进度条颜色*/
        height: 3px;
    }
    .pace .pace-progress-inner {
         box-shadow: 0 0 10px #1E92FB, 0 0 5px     #1E92FB; /*阴影颜色*/
    }
    .pace .pace-activity {
        border-top-color: #1E92FB;    /*上边框颜色*/
        border-left-color: #1E92FB;    /*左边框颜色*/
    }
</style>

鼠标点击小红心的设置

将 love.js 文件添加到 \themes\next\source\js\src 文件目录下。
找到 \themes\next\layout_layout.swing 文件， 在文件的后面， 标签之前 添加以下代码

1
2
<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/love.js"></script>

背景的设置

将 particle.js 文件添加到 \themes\next\source\js\src 文件目录下。
找到 \themes\next\layout_layout.swing 文件， 在文件的后面，标签之前 添加以下代码：

1
2
<!-- 背景动画 -->
<script type="text/javascript" src="/js/src/particle.js"></script>

修改文章内链接文本样式

将链接文本设置为蓝色，鼠标划过时文字颜色加深，并显示下划线。
找到文件 themes\next\source\css_custom\custom.styl ，添加如下 css 样式：

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

搜索功能

安装 hexo-generator-searchdb，在站点的根目录下执行以下命令：

1
$ npm install hexo-generator-searchdb --save

编辑 站点配置文件，新增以下内容到任意位置

1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

修改文章底部的那个带#号的标签

修改模板/themes/next/layout/_macro/post.swig，搜索 rel=”tag”>#，将 # 换成

加入动态背景

首先找到\themes\next\layout_layout.swig，在末尾前加上下面一句:（这里提供两种样式，当然你也可以自由更改）。

默认灰色线条

1
<script type="text/javascript" src="/js/src/particle.js"></script>

浅蓝色线条

1
<script type="text/javascript" src="/js/src/particle.js" count="50" zindex="-2" opacity="1" color="0,104,183"></script>

然后在themes\source\js\src\下新建文件particle.js写上以下代码:

1
!function(){function n(n,e,t){return n.getAttribute(e)||t}function e(n){return document.getElementsByTagName(n)}function t(){var t=e("script"),o=t.length,i=t[o-1];return{l:o,z:n(i,"zIndex",-1),o:n(i,"opacity",.5),c:n(i,"color","0,0,0"),n:n(i,"count",99)}}function o(){c=u.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,a=u.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight}function i(){l.clearRect(0,0,c,a);var n,e,t,o,u,d,x=[w].concat(y);y.forEach(function(i){for(i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>c||i.x<0?-1:1,i.ya*=i.y>a||i.y<0?-1:1,l.fillRect(i.x-.5,i.y-.5,1,1),e=0;e<x.length;e++)n=x[e],i!==n&&null!==n.x&&null!==n.y&&(o=i.x-n.x,u=i.y-n.y,d=o*o+u*u,d<n.max&&(n===w&&d>=n.max/2&&(i.x-=.03*o,i.y-=.03*u),t=(n.max-d)/n.max,l.beginPath(),l.lineWidth=t/2,l.strokeStyle="rgba("+m.c+","+(t+.2)+")",l.moveTo(i.x,i.y),l.lineTo(n.x,n.y),l.stroke()));x.splice(x.indexOf(i),1)}),r(i)}var c,a,u=document.createElement("canvas"),m=t(),d="c_n"+m.l,l=u.getContext("2d"),r=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(n){window.setTimeout(n,1e3/45)},x=Math.random,w={x:null,y:null,max:2e4};u.id=d,u.style.cssText="position:fixed;top:0;left:0;z-index:"+m.z+";opacity:"+m.o,e("body")[0].appendChild(u),o(),window.onresize=o,window.onmousemove=function(n){n=n||window.event,w.x=n.clientX,w.y=n.clientY},window.onmouseout=function(){w.x=null,w.y=null};for(var y=[],s=0;m.n>s;s++){var f=x()*c,h=x()*a,g=2*x()-1,p=2*x()-1;y.push({x:f,y:h,xa:g,ya:p,max:6e3})}setTimeout(function(){i()},100)}();

修改字体大小

打开\themes\next\source\css\ _variables\base.styl文件，将$font-size-base改成16px，如下所示：

1
$font-size-base           = 16px

把侧边栏头像变成圆形，并且鼠标停留在上面发生旋转效果

修改 themes\next\source\css_common\components\sidebar\sidebar-author.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
.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-color;
  /* start*/
  border-radius: 50%
  webkit-transition: 1.4s all;
  moz-transition: 1.4s all;
  ms-transition: 1.4s all;
  transition: 1.4s all;
  /* end */
}
/* start */
.site-author-image:hover {
  background-color: #55DAE1;
  webkit-transform: rotate(360deg) scale(1.1);
  moz-transform: rotate(360deg) scale(1.1);
  ms-transform: rotate(360deg) scale(1.1);
  transform: rotate(360deg) scale(1.1);
}
/* end */

文章加密访问

打开themes->next->layout->_partials->head.swig文件,在meta标签后面插入这样一段代码：

1
2
3
4
5
6
7
8
9
10
<script>
   <!-- (function(){
        if('{{ page.password }}'){
            if (prompt('请输入文章密码') !== '{{ page.password }}'){
                alert('密码错误！');
                history.back();
            }
        }
    })();
--></script>

然后文章中添加：

1
password: nmask

如果password后面为空，则表示不用密码。

博文置顶

修改 hero-generator-index 插件，把文件：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
    }
  });
};

在文章中添加 top 值，数值越大文章越靠前，如:

1
2
3
4
5
---
......
copyright: true
top: 100
---

默认不设置则为0，数值相同时按时间排序。

加速访问HEXO

修改博客所依赖的字体资源

打开 NexT 的主题配置文件「_config.yml」，找到如下图所示的字体设置区域，删除全局字体族「Lato」。

MakeDown语法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
[hexo](http://www.baidu.com)  表示超链接
##大标题
###小标题
<!-- more -->
<!-- 标签别名 -->
{% cq %}blah blah blah{% endcq %}
空格  中文全角空格表示
---
文章标题
---
>内容     区块引用
*1
*2
*3
列表
*内容*     表示强调内容
![Alt text](/path/to/img.jpg)  图片
![](/upload_image/20161012/1.png)

参考