记录寄己走过的路

Hexo(Pages)—优化博客「续更」

给自己一个记录 知识 和 时间 的空间。




Content progress


文字居中(写博客时)

在你博客文章中需要居中处加上下面这段代码即可,中间的文字改成你所需要的文字。

1
2
3
<blockquote class="blockquote-center">
不忘初心,这里可以写多行文字
</blockquote>

双引文章标题


为博客加上GitHub丝带

如果是Next主题(其他主题也差不多),添加GitHub丝带:在themes\next\layout\_layout.swig中加入相关代码,记得修改自己的链接。

相关代码你可以在GitHub官方网站 GitHub Ribbons 上进行选择。


加入作者版权信息

我们可以为博客文章加入作者版权信息。
例如本文地址:http://www......./ 转载请注明出处,谢谢!等等。
Next主题而言,先找到/themes/next/layout/_macro/post.swig,再找到其中的微信订阅部分,如下所示:

1
2
3
4
5
<div>
{% if not is_index %}
{% include 'wechat-subscriber.swig' %}
{% endif %}
</div>

然后直接在其上面添加如下代码段:

1
2
3
4
5
6
7
8
9
<div align="center">
{% if not is_index %}
<div class="copyright">
<p><span>
<b>本文地址:</b><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a><br /><b>转载请注明出处,谢谢!</b>
</span></p>
</div>
{% endif %}
</div>

当然,在上面这段代码,你可以进行一些个性化编写,可以展示你自己个性化的版权信息。


为博客加入动态背景

首先找到\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)}();

加入动态背景.gif

文字晃动动画.gif


为博客加入鼠标点击显示红心

鼠标点击小红心在\themes\next\source\js\src文件目录下添加love.js文件。内容为:

1
!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);

找到\themes\next\layout\_layout.swing文件,在文件的后面,</body>之前 添加以下代码:

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

鼠标点击显示红心.png


给博客添加LICENSE

在主题配置文件中添加下面这段代码(添加之前好好看看你的主题配置文件是否已经包含这段代码,已经包含就不用再加一遍了,因为重复会报错),这个LICENSE显示在侧边栏。

1
2
3
4
5
# Creative Commons 4.0 International License.
# http://creativecommons.org/
# Available: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
creative_commons: by-nc-sa
#creative_commons:


添加Local Search功能

安装 hexo插件
在你的站点文件夹中,用shell等运行下面这行代码:

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


编辑站点配置文件

添加以下字段:

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


启用本地搜索

编辑主题配置文件启用本地搜索

1
2
3
# Local search
local_search:
enable: true


修改字体大小

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

1
$font-size-base = 16px


修改网页配色

取色可以用QQ,打开QQ按Ctrl+Alt+A开始截图,将鼠标移到文字上,按住Ctrl键即可看到该颜色的16进制代码。也可以用chrome浏览器的develop tool取色,选取喜欢的颜色。

修改\themes\next\source\css\ _variables\base.styl文件,找到文件开头的colors for use across theme,加入自定义颜色,在$orange = #fc6423下加入下面这段代码:

1
2
3
// 下面是我自定义的颜色
$my-link-blue = #0593d3 //链接颜色
$my-link-hover-blue = #0477ab //鼠标悬停后颜色


修改超链接颜色

打开\themes\next\source\css\ _variables\base.styl文件,像下面这样改掉这几行:

1
2
3
4
5
/ Global link color.
$link-color = $my-link-blue
$link-hover-color = $my-link-hover-blue
$link-decoration-color = $gray-lighter
$link-decoration-hover-color = $my-link-hover-blue


修改小型代码块颜色

我修改<code>样式是因为我开启了highlighthighlight在渲染<pre><code>标签的同时也渲染了<code>标签,而且优先级高,所以才会出现方法一中这种不开启!important,样式就不起作用的问题。在方法一使用了!important使得此处对<code>的样式优先级最高,所以设置成功。

  • 方法一
    打开\themes\next\source\css\ _variables\base.styl文件,修改如下:
    在下面这段代码:
    1
    2
    3
    4
    5
    6
    // Code & Code Blocks
    // --------------------------------------------------
    $code-font-family = $font-family-monospace
    $code-font-size = 14px
    $code-font-size = unit(hexo-config('font.codes.size'), px) if hexo-config('font.codes.size') is a 'unit'
    $code-border-radius = 4px

下方加入下面这段代码:

1
2
3
4
code {
color:#dd0055 !important;
background:#eee !important;
}

  • 方法二
    你也可以不用方法一(建议使用方法一,因为第二种可能会失效,被其他的样式定义覆盖),而是在source/css/_variables/custom.styl文件中设定$code-foreground$code-background的值,也是用的优先级。
    1
    2
    3
    $code-foreground = #fc6423
    $code-background = #fc6423
    #此处颜色只是例子,你自己设置。

修改小型代码块颜色.png


修改其他颜色

修改:themes\next\source\css\_variables\.base.styl文件:

1
2
3
grey-dim = #666 >>> $grey-dim = #353535
$black-light = #555 >>> $black-light = #353535
$blue-bright = #87daff >>> $blue-bright = #45c5ff


加入统计和提高索引量

添加sitemap插件

谷歌与百度的站点地图,前者适用于其他搜索引擎,用来手动提交以增加收录。

sitemap 安装
在你的站点文件夹中,用shell等分次运行下面这两行代码:

1
2
npm install hexo-generator-sitemap@1 --save
npm install hexo-generator-baidu-sitemap@0.1.1 --save

设置站点配置文件
在站点配置文件中添加代码:

1
2
3
4
5
# hexo sitemap网站地图
sitemap:
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml

  • 配置成功后,hexo编译时会在hexo站点根目录生成sitemap.xmlbaidusitemap.xml。其中sitemap.xml适合提交给谷歌搜素引擎,baidusitemap.xml适合提交百度搜索引擎。

  • 其次,在站点根目录下新建一个robots.txt文件,其中添加下面的一段代码(具体网站改为你自己的网址):

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    # hexo robots.txt
    User-agent: *
    Allow: /
    Allow: /archives/
    Disallow: /vendors/
    Disallow: /js/
    Disallow: /css/
    Disallow: /fonts/
    Disallow: /vendors/
    Disallow: /fancybox/
    Sitemap: http://dingxuewen.github.io/sitemap.xml
    Sitemap: https://dingxuewen.github.io/sitemap.xml

给非友情链添加标签

经过chinaz站长工具友情链接检测,发现有不必要的PR值输出,对于非友情链接的PR值输出,我们可以加上nofollow便签避免不必要的PR输出。方法是给链接加上rel="external nofollow"属性。例如:

找到\themes\next\layout\_partials\footer.swig文件,将下面代码:

1
{{ __('footer.powered', '<a class="theme-link" href="http://hexo.io">Hexo</a>') }}

改成:

1
{{ __('footer.powered', '<a class="theme-link" href="http://hexo.io" rel="external nofollow">Hexo</a>') }}

将下面代码:

1
<a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">

改成:

1
<a class="theme-link" href="https://github.com/iissnan/hexo-theme-next" rel="external nofollow">


加入Baidu站长统计

先准备一些代码。站长统计,注册并获取统计代码:

1
2
3
4
5
  |  
<script type="text/javascript">
var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' type='text/javascript'%3E%3C/script%3E"));
</script>

修改底栏:找到\themes\next\layout\_partials\footer.swig文件,加入上面这段代码,出于保护隐私的考虑,我编辑掉了部分关键代码,直接复制上面的无法使用。注意把上面的xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx换成你自己的站长统计代码。

在页脚加入地图

在页脚加入百度地图和谷歌地图链接:

找到\themes\next\layout\_partials\footer.swig文件,百度和Google网站地图,上面已经安装了,这是插入到底栏的代码:

1
2
  |  <span><a href="/sitemap.xml">Google网站地图</a></span>
  |  <span><a href="/baidusitemap.xml">百度网站地图


添加Baidu自动推送

百度自动推送代码,在页面被访问时,页面URL将立即被推送给百度,可以增加百度收录:找到\themes\next\layout\_partials\footer.swig\themes\next\layout\_macro\post.swig文件,(Next主题已经有了\themes\next\layout\_scripts\baidu-push.swig)添加下面的代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
(function(){
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https'){
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else{
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>


不蒜子统计

找到\themes\next\layout\_partials\footer.swig文件,加入下面不蒜子统计代码:

1
2
3
4
5
  |  本页点击 <span id="busuanzi_value_page_pv"></span> 次
  |  本站总点击 <span id="busuanzi_value_site_pv"></span> 次
  |  您是第 <span id="busuanzi_value_site_uv"></span> 位访客
<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>


在标题下添加【阅读量】等

现在要添加的阅读量统计也依赖下面这段代码。

1
2
<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>

打开/themes/next/layout/_macro/post.swig,找到标签<div class="post-meta"></div>,在该标签内部合适的位置(如timecategories之间或categories后面)添加:

1
2
3
{% if not is_index %}
<span id="busuanzi_container_page_pv">  |  阅读量 <span id="busuanzi_value_page_pv"></span> 次</span>
{% endif %}


将阅读量改为热度(更个性)

还可以继续修改,看到好多人的博客不是阅读次数(阅读量),而是热度 188 ℃,那么可以继续这样修改,首先在Next主题的/themes/next/languages/zh-Hans文件中查找”阅读次数“这几个字,可以看到,在post中的visitors被定义为“阅读次数”,把这里的“阅读次数”改为“热度”。

那么怎么在页面中显示呢。打开Next主题文件夹中layout/_macro/post.swig,在这个文件里加上摄氏度的标志,在<span class="leancloud-visitors-count"></span>下面增加一行<span>℃</span>即可。


修改标题下分类等的样式

在Next主题中,我用的是LeanCloud数据统计,默认样式是在统计数据前有个小眼睛,我感觉不好看,想把它去掉,那么打开/themes/next/layout/_macro/post.swig,找到标签<i class="fa fa-eye"></i>,去掉下面这段代码即可:

1
2
3
<span class="post-meta-item-icon">
<i class="fa fa-eye"></i>
</span>


SEO优化

更改首页标题格式为「关键词-网站名称-网站描述」。打开\themes\next\layout\index.swig文件,找到这行代码:

1
{% block title %} {{ config.title }} {% endblock %}

把它改成:

1
2
3
{% block title %}
{{ theme.keywords }} - {{ config.title }} - {{ theme.description }}
{% endblock %}

首页标题格式.png


博客部署的message设置

\hexo\node_modules\hexo-deployer-git\lib\deployer.js文件末尾找到这一句:

1
Site updated: {{ now('YYYY-MM-DD HH:mm:ss') }}.

改得个性化一点:

1
勤奋的博主又更新啦: {{ now(\'YYYY-MM-DD HH:mm:ss\') }}.

为项目主页添加README

在 Github 上的博客仓库主页空荡荡的,没有README。如果把README.md放入source文件夹,hexo g生成时会被解析成html文件,放到public文件夹,生成时又会自动删除。
  解决方法很简单,在站点配置文件中,搜索skip_render:,在其冒号后加一个空格然后加上README.md即可。


优化主题 sidebar 头像

就是为主题 sidebar 头像添加圆形化旋转的效果。修改 /themes/next/source/css/_common/components/sidebar/sidebar-author.styl 文件,我的整个 sidebar-author.styl文件的代码如下,你可以直接复制这段代码去替换你这个文件中的所有代码。
有一个注意事项,就是你要保证你的头像,也就是 avatar.jpg 这个图片是正方形,不是的话你要将其修改成正方形,这样才能通过样式将其展现为很好看的正圆,否则会是一个椭圆形。

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
.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-width solid $site-author-image-border-color;
/* 头像圆形 */
border-radius: 80px;
-webkit-border-radius: 80px;
-moz-border-radius: 80px;
box-shadow: inset 0 -1px 0 #333sf;
/* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束 (1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/
-webkit-animation: play 2s ease-out 1s 1;
-moz-animation: play 2s ease-out 1s 1;
animation: play 2s ease-out 1s 1;
/* 鼠标经过头像旋转360度 */
-webkit-transition: -webkit-transform 1.5s ease-out;
-moz-transition: -moz-transform 1.5s ease-out;
transition: transform 1.5s ease-out;
}
img:hover {
/* 鼠标经过停止头像旋转
-webkit-animation-play-state:paused;
animation-play-state:paused;*/
/* 鼠标经过头像旋转360度 */
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
/* Z 轴旋转动画 */
@-webkit-keyframes play {
0% {
-webkit-transform: rotateZ(0deg);
}
100% {
-webkit-transform: rotateZ(-360deg);
}
}
@-moz-keyframes play {
0% {
-moz-transform: rotateZ(0deg);
}
100% {
-moz-transform: rotateZ(-360deg);
}
}
@keyframes play {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(-360deg);
}
}
.site-author-name {
margin: $site-author-name-margin;
text-align: $site-author-name-align;
color: $site-author-name-color;
font-weight: $site-author-name-weight;
}
.site-description {
margin-top: $site-description-margin-top;
text-align: $site-description-align;
font-size: $site-description-font-size;
color: $site-description-color;
}

头像圆形旋转.gif


小红心优化

为博客加入鼠标点击显示小红心,但是如果我们只想在博客的某个页面添加这个功能呢?
那么就可以在 \themes\next\source\js\src 文件目录下添加 love.js 文件。内容为:

1
!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);

之后呢,不在\themes\next\layout\_layout.swing 文件中添加代码,而是在你想要显示红心的页面的 Markdown 文件中加入下面这段代码,例如我就在我的留言板页面的 Markdown 文件中加入了下面这段代码。

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


文章内文本样式

Markdown 毕竟是为了方便写作,在样式上过于单调。我们可以自己来给文章加一些样式。NexT 作者提供了一个供用户自己定义样式的文件:\themes\next\source\css\_custom\custom.stly。可以按照自己的需要写。下参考:

设置动态title

\themes\next\source\js\src 目录下新建 dytitle.js 。添加以下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!--崩溃欺骗-->
var OriginTitile = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
if (document.hidden) {
$('[rel="icon"]').attr('href', "/img/TEP.ico");
document.title = ' 页面崩溃啦 ~ | cwyaml!';
clearTimeout(titleTime);
}
else {
$('[rel="icon"]').attr('href', "/favicon.ico");
document.title = ' 噫又好了~ ' + OriginTitile;
titleTime = setTimeout(function () {
document.title = OriginTitile;
}, 2000);
}
});

更改 \themes\next\layout\_layout.swig 。在 </body 之前添加:

1
2
<!--卖萌-->
<script type="text/javascript" src="/js/src/dytitle.js"></script>

设置动态标题.gif


添加听音乐

代码设置
\themes\next\layout\_macro目录下新建 high.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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<a title="收藏到书签,偶尔High一下^_^" rel="alternate" class="mw-harlem_shake_slow wobble shake" href='javascript:(
/*
* Copyright (C) 2015 Rocko (rocko.xyz) <rocko.zxp@gmail.com>
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
function go() {
var songs = [
"http://m2.music.126.net/3uHnH7uQAeFwUfuvEB9lrg==/3265549619475054.mp3",
"http://m2.music.126.net/NnHwR2HV-1OoKZ6R5LVy4Q==/18502581673300023.mp3",
"http://m2.music.126.net/qv3RI4K7ABKJ0TyAdb3taw==/3250156397064860.mp3",
"......"
];
function S() {
var e = document.getElementById("audio_element_id");
if(e != null){
var index = parseInt(e.getAttribute("curSongIndex"));
if(index > songs.length - 2) {
index = 0;
} else {
index++;
}
e.setAttribute("curSongIndex", index);
}
e.src = i;
e.play()
}
function initAudioEle() {
var e = document.getElementById("audio_element_id");
if(e === null){
e = document.createElement("audio");
e.setAttribute("curSongIndex", 0);
e.id = "audio_element_id";
e.loop = false;
e.bgcolor = 0;
e.innerHTML = " <p>If you are reading this, it is because your browser does not support the audio element. We recommend that you get a new browser.</p> <p>";
document.body.appendChild(e);
e.addEventListener("ended", function() {
go();
}, true);
}
}
initAudioEle();
var curSongIndex = parseInt(document.getElementById("audio_element_id").getAttribute("curSongIndex"));
var i = songs[curSongIndex];
S();
})()'>
<i class="fa fa-music"></i> 听音乐</a>

在侧边栏引用该文件:修改 \themes\next\layout\_macro\sidebar.swig ,添加以下代码:

1
{% include 'high.swig' %}

304a6aa610327fff.png

样式修改:使 听音乐 和 RSS 并排展示。
修改 \themes\next\source\css\_schemes\Pisces\_sidebar.styl文件:

1
display: inline-block;

24d733afd079686e.png

添加自己喜欢的音乐:修改其中的歌曲链接即可.

1
2
3
4
5
6
var songs = [
"http://m2.music.126.net/3uHnH7uQAeFwUfuvEB9lrg==/3265549619475054.mp3",
"http://m2.music.126.net/NnHwR2HV-1OoKZ6R5LVy4Q==/18502581673300023.mp3",
"http://m2.music.126.net/qv3RI4K7ABKJ0TyAdb3taw==/3250156397064860.mp3",
"......"
];

首页听音乐摇晃:需要加载 css 样式。在 themes\next\layout\_layout.swig文件的 </body>标签前 添加以下代码:

1
2
<!-- 听音乐摇晃 -->
<link href="http://s3.amazonaws.com/moovweb-marketing/playground/harlem-shake-style.css" rel="stylesheet" type="text/css">

注意:有时候使用 FirefoxChrome时会提示非法插件并禁止使用,遇到这种情况我们把样式代码引入到 \themes\next\source\css\_custom\custom.stly文件即可解决。


音乐链接获取

22583060-file_1489500819022_c2b2.png

  • 将上一步中获取到的网址放到地址栏中,若能正常播放音乐说明获取到的网址是正确的。然后你就可以把这些歌曲添加到自己的网页中了!用这种方法有些歌曲并不能获得,不过时效很长(只要网易云能听)。

博文压缩

目前知道的有两个插件可以压缩博文,hexo-all-minifier 插件和 gulp 插件。hexo-all-minifier 虽然使用比较简单,而且也可以压缩图片,但是对文章缩进(输入法全拼模式下按 Tab)不支持,所以暂时使用 gulp 压缩手段。

hexo-all-minifier 使用方法
安装 hexo-all-minifier,在站点的根目录下执行以下命令:

1
$ npm install hexo-all-minifier --save

hexo g 编译的时候就会自动压缩 HTML、JS、图片。详情参考插件介绍 hexo-all-minifier


glup 使用方法

hexo 依赖 gulp 插件安装,在站点的根目录下执行以下命令:

1
2
$ npm install gulp -g
$ npm install gulp-minify-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp --save

package.json 同级目录下,新建 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
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.task('default', [
'minify-html','minify-css','minify-js'
]);

生成博文是执行 hexo g &&amp; gulp 就会根据 gulpfile.js 中的配置,对 public目录中的静态资源文件进行压缩。


博文置顶

修改 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
}
});
};


设置文章置顶

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

1
2
3
4
5
6
7
---
title: 图集
categories: [图片]
tags: [picture]
date: 2015-04-02 14:36:04
top: 10
---


embed.js本地化

embed.js 是多说使用的远程脚本,你可以访问 http://static.duoshuo.com/embed.js 这个网址。右键另存为 \theme\next\source\js\src\这个文件夹。

然后打开 \themes\next\layout\_scripts\third-party\comments\duoshuo.swig 这个文件,在文件里搜索 //static.duoshuo.com/embed.js ,把它改成 /js/src/embed.js。搞定啦!


Hexo更改默认Google字体库

因为一些国内的客观原因,google字体库 的访问速度一直很慢,所以生成页面后,访问系统总是会耗费一大部分的时间在加载google字体库上,而且经常加载不成功。

解决的办法是可以用国内的CDN库来替代主题中的google字体库,更改方法如下:
shell中运行如下命令:

1
grep -ir fonts.google themes/

找到对应的google字体库地方,用国内的CDN字体库替换,如360字体库:360前端公共库CDN


首页分割线

\themes\next\source\css\_custom\custom.styl 文件中添加以下代码,可以修改博客首页中每篇文章的分割线长度,我设置为了100%长度。

1
2
3
4
5
6
7
8
9
10
11
//index页面中每篇文章相隔的那条线
.posts-expand {
.post-eof {
display: block;
margin: $post-eof-margin-top auto $post-eof-margin-bottom;
width: 100%;
height: 3px;
background: $grey-light;
text-align: center;
}
}

首页分割线.png


字体、颜色等设置

\themes\next\source\css\_variables\custom.styl 文件中添加以下代码。具体功能我已经做了注释。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 标题,修改成你期望的字体族
$font-family-headings = Georgia, sans
// 修改成你期望的字体族
$font-family-base = "Microsoft YaHei", Verdana, sans-serif
// 代码字体
$code-font-family = "Input Mono", "PT Mono", Consolas, Monaco, Menlo, monospace
// 正文字体的大小
$font-size-base = 16px
// 代码字体的大小
$code-font-size = 14px
// 代码块颜色
$code-foreground = #dd0055
// Background color for <body>
$body-bg-color = #e7e5dc //theme mist use #fdfdfd
// text-color
$text-color = #353535


语言配置

_config.yml中的language要配置为选定的主题cilia文件夹下的language目录下的文件,如:

1
2
3
4
language: zh-Hans
language: en
language: zh-hk
language: zh-tw

这里修改 zh-Hans为标准的zh-cn,并添加一些汉化内容
语言配置用法:

1
2
3
4
# 不带参数的
__('xxxx')
# 带参数的
_p('xxx',xx)


不蒜子统计显示

添加站点统计配置为不蒜子统计,并且可开关

1
busuanzi: true


配置自己的分享

国内的jiathis
themes/yilia/_partial/share_jia.ejs中的内容替换为:

1
2
3
4
5
6
7
8
9
10
<div class="jiathis_style">
<span class="jiathis_txt"><%= __('post.share') %>:   </span>
<a class="jiathis_button_weixin">微信</a>
<a class="jiathis_button_cqq">QQ好友</a>
<a class="jiathis_button_qzone">QQ空间</a>
<a class="jiathis_button_tsina">新浪微博</a>
<a href="http://www.jiathis.com/share?uid=2080230" class="jiathis jiathis_txt jiathis_separator jtico jtico_jiathis" target="_blank">更多</a>
<a class="jiathis_counter_style"></a>
</div>
<script type="text/javascript" src="http://v3.jiathis.com/code/jia.js?uid=2080230" charset="utf-8"></script>

其中uid为自己在jiathis注册的uid

国外的add this
themes/yilia/_partial/share_jia.ejs中的内容替换为:

1
2
3
<!-- Go to www.addthis.com/dashboard to customize your tools -->
<div class="addthis_sharing_toolbox"></div>
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-568f54bcfd6a7b04" async="async"></script>


Rss

添加Rss,需要先安装rss生成模块:

1
npm install hexo-generator-feed --save

然后在themes/yilia/_config.yml开启rss

1
rss: /atom.xml

站点配置文件

1
2
3
# Extensions
## Plugins: http://hexo.io/plugins/
plugins: hexo-generate-feed

添加站点地图插件

1
npm install hexo-generator-sitmap --save

会在每次hexo generator后自动生成到网站根目录


通过网站favicon在线制作 制作favicon图片,logo最好设置32*32。
next主题:将图片放在next主题source/images目录下

1
2
# 在next主题配置文件中添加:
favicon: /uploads/images/favicon.png

设置网站logo.png


Hexo文章简单加密访问

找到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
2
3
4
5
6
7
8
9
10
11
---
title: Hexo文章简单加密访问
date: 2016-12-02
tags: hexo
categories: 博客
keywords:
- Hexo
- 加密
description: 文章访问密码:password
password: password
---

Hexo文字加解密.gif


Hexo high一下

是直接把这段代码当成一个菜单项加在博客主题配置的_config.yml文件中

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<li> <a title="把这个链接拖到你的Chrome收藏夹工具栏中" href='javascript:(function() {
function c() {
var e = document.createElement("link");
e.setAttribute("type", "text/css");
e.setAttribute("rel", "stylesheet");
e.setAttribute("href", f);
e.setAttribute("class", l);
document.body.appendChild(e)
}
function h() {
var e = document.getElementsByClassName(l);
for (var t = 0; t < e.length; t++) {
document.body.removeChild(e[t])
}
}
function p() {
var e = document.createElement("div");
e.setAttribute("class", a);
document.body.appendChild(e);
setTimeout(function() {
document.body.removeChild(e)
}, 100)
}
function d(e) {
return {
height : e.offsetHeight,
width : e.offsetWidth
}
}
function v(i) {
var s = d(i);
return s.height > e && s.height < n && s.width > t && s.width < r
}
function m(e) {
var t = e;
var n = 0;
while (!!t) {
n += t.offsetTop;
t = t.offsetParent
}
return n
}
function g() {
var e = document.documentElement;
if (!!window.innerWidth) {
return window.innerHeight
} else if (e && !isNaN(e.clientHeight)) {
return e.clientHeight
}
return 0
}
function y() {
if (window.pageYOffset) {
return window.pageYOffset
}
return Math.max(document.documentElement.scrollTop, document.body.scrollTop)
}
function E(e) {
var t = m(e);
return t >= w && t <= b + w
}
function S() {
var e = document.createElement("audio");
e.setAttribute("class", l);
e.src = i;
e.loop = false;
e.addEventListener("canplay", function() {
setTimeout(function() {
x(k)
}, 500);
setTimeout(function() {
N();
p();
for (var e = 0; e < O.length; e++) {
T(O[e])
}
}, 15500)
}, true);
e.addEventListener("ended", function() {
N();
h()
}, true);
e.innerHTML = " <p>If you are reading this, it is because your browser does not support the audio element. We recommend that you get a new browser.</p> <p>";
document.body.appendChild(e);
e.play()
}
function x(e) {
e.className += " " + s + " " + o
}
function T(e) {
e.className += " " + s + " " + u[Math.floor(Math.random() * u.length)]
}
function N() {
var e = document.getElementsByClassName(s);
var t = new RegExp("\\b" + s + "\\b");
for (var n = 0; n < e.length; ) {
e[n].className = e[n].className.replace(t, "")
}
}
var e = 30;
var t = 30;
var n = 350;
var r = 350;
var i = "//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake.mp3";
var s = "mw-harlem_shake_me";
var o = "im_first";
var u = ["im_drunk", "im_baked", "im_trippin", "im_blown"];
var a = "mw-strobe_light";
var f = "//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake-style.css";
var l = "mw_added_css";
var b = g();
var w = y();
var C = document.getElementsByTagName("*");
var k = null;
for (var L = 0; L < C.length; L++) {
var A = C[L];
if (v(A)) {
if (E(A)) {
k = A;
break
}
}
}
if (A === null) {
console.warn("Could not find a node of the right size. Please try a different page.");
return
}
c();
S();
var O = [];
for (var L = 0; L < C.length; L++) {
var A = C[L];
if (v(A)) {
O.push(A)
}
}
})() '>High一下</a> </li>

1
2
3
4
5
6
7
8
9
10
menu:
high: javascript:void(0)
menu_icons:
high: play
// 第一个 high 的javascript:void(0)是指a标签的跳转链接,其实这里的功能就是为了让它不跳转的,另外还有一个功能,可以把空链接的a标签悬浮变成手型的鼠标。
第二个 high对应的play是展示的图标,NexT主题使用的是fontawesome图标,这里的play就是其对应的图标,想自己 diy 一下就去fontawesome上找个自己喜欢的。
这样的方法简单粗暴有效,并且还有一个好处,可以直接把这个链接保存成浏览器的书签,这样就能在任何网页都能够调用这个 High一下 的方法。

high 一下自定义页面歌曲

首先是在需要自定义曲子的文章中加上:

1
<div id="musicUrl" url="***"><div>

然后最终版high.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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
document.getElementsByClassName('menu-item-high')[0].addEventListener('click', (function(){
var play = false;
var musicUrl = document.getElementById('musicUrl');
if(musicUrl){
musicUrl = musicUrl.getAttribute('url');
}else{
musicUrl = null;
}
return function(){
if(play){
console.log('Enjoying');
return;
}
play = true;
function c() {
var e = document.createElement("link");
e.setAttribute("type", "text/css");
e.setAttribute("rel", "stylesheet");
e.setAttribute("href", f);
e.setAttribute("class", l);
document.body.appendChild(e)
}
function h() {
var e = document.getElementsByClassName(l);
for (var t = 0; t < e.length; t++) {
document.body.removeChild(e[t])
}
}
function p() {
var e = document.createElement("div");
e.setAttribute("class", a);
document.body.appendChild(e);
setTimeout(function() {
document.body.removeChild(e)
}, 100)
}
function d(e) {
return {
height: e.offsetHeight,
width: e.offsetWidth
}
}
function v(i) {
var s = d(i);
return s.height > e && s.height < n && s.width > t && s.width < r
}
function m(e) {
var t = e;
var n = 0;
while (!!t) {
n += t.offsetTop;
t = t.offsetParent
}
return n
}
function g() {
var e = document.documentElement;
if (!!window.innerWidth) {
return window.innerHeight
} else if (e && !isNaN(e.clientHeight)) {
return e.clientHeight
}
return 0
}
function y() {
if (window.pageYOffset) {
return window.pageYOffset
}
return Math.max(document.documentElement.scrollTop, document.body.scrollTop)
}
function E(e) {
var t = m(e);
return t >= w && t <= b + w
}
function S() {
var e = document.createElement("audio");
e.setAttribute("class", l);
e.src = i;
e.loop = false;
e.addEventListener("canplay", function() {
setTimeout(function() {
x(k)
}, 500);
setTimeout(function() {
N();
p();
for (var e = 0; e < O.length; e++) {
T(O[e])
}
}, 15500)
}, true);
e.addEventListener("ended", function() {
N();
h();
paly = false;
}, true);
e.innerHTML = " <p>If you are reading this, it is because your browser does not support the audio element. We recommend that you get a new browser.</p> <p>";
document.body.appendChild(e);
e.play()
}
function x(e) {
e.className += " " + s + " " + o
}
function T(e) {
e.className += " " + s + " " + u[Math.floor(Math.random() * u.length)]
}
function N() {
var e = document.getElementsByClassName(s);
var t = new RegExp("\\b" + s + "\\b");
for (var n = 0; n < e.length; ) {
e[n].className = e[n].className.replace(t, "")
}
}
var e = 30;
var t = 30;
var n = 350;
var r = 350;
var i = musicUrl || "//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake.mp3";
var s = "mw-harlem_shake_me";
var o = "im_first";
var u = ["im_drunk", "im_baked", "im_trippin", "im_blown"];
var a = "mw-strobe_light";
var f = "/vendors/high/high.css";
var l = "mw_added_css";
var b = g();
var w = y();
var C = document.getElementsByTagName("*");
var k = null;
for (var L = 0; L < C.length; L++) {
var A = C[L];
if (v(A)) {
if (E(A)) {
k = A;
break
}
}
}
if (A === null) {
console.warn("Could not find a node of the right size. Please try a different page.");
return
}
c();
S();
var O = [];
for (var L = 0; L < C.length; L++) {
var A = C[L];
if (v(A)) {
O.push(A)
}
}
};
})(), false);


修改文章链接

HEXO 默认的文章链接形式为domain/year/month/day/postname,默认就是一个四级url,并且可能造成url过长,对搜索引擎是十分不友好的,我们可以改成domain/postname的形式。编辑站点_config.yml文件,修改其中的permalink字段改为permalink: :title.html即可。


夜间模式

🐥 🐥 🐥 咯咯哒


Hexo-Next-Mist主题头部顶栏背景图片

图片存放位置:选择一张心仪的图片,命名为 background.jpg,放到 source 文件夹下的 image 文件夹内。

1
2
Hexo\source\image
// 图片大小我选择的是“50厘米*5厘米”,太小的话无法覆盖整个背景

背景图片设置:找到如下位置:

1
2
3
4
5
6
7
hexo\themes\next\source\css\_schemes\Mist\_header.styl
打开 _header.styl,将第一行 background: 后的内容改为如下形式:
方式一:本地图片
.header { background: url('Hexo\source\image/background.jpg'); }
方式一:网络图片
.header { background: url('http://upload-images.jianshu.io/upload_images/2230763-265f0df7e75d706a.gif?imageMogr2/auto-orient/strip'); }

保存,重新生成网页即可。
.gif


打赏字体不闪动

修改文件next/source/css/_common/components/post/post-reward.styl,然后注释其中的函数wechat:hover和alipay:hover,如下:

1
2
3
4
5
6
7
8
9
10
11
12
/* 注释文字闪动函数
#wechat:hover p{
animation: roll 0.1s infinite linear;
-webkit-animation: roll 0.1s infinite linear;
-moz-animation: roll 0.1s infinite linear;
}
#alipay:hover p{
animation: roll 0.1s infinite linear;
-webkit-animation: roll 0.1s infinite linear;
-moz-animation: roll 0.1s infinite linear;
}
*/

博客文章链接无中文乱码


未完待续 ! 未完待续 ! 未完待续 !


参考原著:摘录
1、【Levi.Blog】 http://www.dingxuewen.com
2、【lancelot_lewis】 https://lancelot_lewis.coding.me
3、【http://www.jianshu.com/p/f054333ac9e6】
4、【】


❄︎ 本文结束    感谢简阅 ^_^. ❄︎

本文标题:Hexo(Pages)—优化博客「续更」

文章作者:寄己的路

原始链接:https://sunyonghui.github.io/HexoBlog/HexoPagesOptimize.html

版权声明: 署名-非商业性使用-禁止演绎 4.0 国际 本博客所有文章除特别声明外均为原创,转载务必请「注明出处链接(可点击) - 作者」,并通过E-mail等方式告知,谢谢合作!