博客DIY

发表于 | 分类于
字数统计: 8.6k | 阅读时长 ≈ 46

博客DIY1.0

HTML页面编辑

新增菜单栏

新建文件夹

在hexo > source文件夹中会生成一个studylink文件夹

hexo new page “studylink”

在菜单中添加链接

编辑主题的_config.yml，在menu中的添加如下:

1
2
menu:
	studylink: /studylink/ || battery

||之前的值是目标链接，之后的是分类页面的图标，图标名称来自于FontAwesome icon。若没有配置图标，默认会使用问号图标。

新添加的菜单需要翻译对应的中文

打开hexo>theme>next>languages>zh-Hans.yml，在menu下添加：

1
2
menu:
	studylink: 充电

参考文章

Hexo+Next 添加菜单分类页面

添加revolvermaps

官方地址：点击进入

将代码复制到相应的页面

侧边栏设置在／themes/next/layout/_macro/sidebar.swig找到自己觉得合适的地方写入相应的代码

1
2
{# visitmap #}
<div align="center"><br><script type="text/javascript" src="xxxx" async="async"></script><br></div>

添加时钟flash

有趣的人体时钟HONE HONE CLOCK，作者是个日本人，点击此处访问作者博客。我将他添加在了侧边栏，方法同上

1
2
3
4
5
<!--人体时钟背景透明-->
<script charset="Shift_JIS" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.js"></script>

<!--人体时钟背景白-->
<script charset="Shift_JIS" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_wh.js"></script>

参考文章

或者创建 js 文件 hone_hone_clock.js

在next\source\js\src文件夹下创建hone_hone_clock.js，添加代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/*hone-hone-clock*/
!function (e, t, a) { 
  /* code */
  var initClock = function(){
    var sHtml = '';
    sHtml += '<div style="position: fixed;right: 10px;top: 20px;width: 160px;height: 70px;">';
    sHtml += '  <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="160" height="70" id="honehoneclock" align="middle">';
    sHtml += '    <param name="allowScriptAccess" value="always">';
    sHtml += '    <param name="movie" value="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.swf">';
    sHtml += '    <param name="quality" value="high">';
    sHtml += '    <param name="bgcolor" value="#ffffff">';
    sHtml += '    <param name="wmode" value="transparent">';
    sHtml += '    <embed wmode="transparent" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.swf" quality="high" bgcolor="#ffffff" width="160" height="70" name="honehoneclock" align="middle" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">';
    sHtml += '    </object>';
    sHtml += '</div>';
    
    t = t || document;    
    t.write(sHtml);
  }
  initClock();
}(window, document);

引用

在next\layout\_layout.swig文件中，添加引用（注：在 swig 末尾添加）：

1
2
<!--clock-->
<script type="text/javascript" src="/js/src/hone_hone_clock.js"></script>

参考文章

ps:用户访问手动开启flash支持,不太方便我实现后就把它删除了

博客seo优化

打开Next主题自带的seo配置

打开主题配置文件

1
2
3
4
canonical: true
seo: true
index_with_subtitle: true
baidu_push: true

添加sitemap

这一步目的在于告诉搜索引擎你的站点结构。

sitemap生成插件的安装和配置

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

在站点配置文件中添加sitemap的生成路径

1
2
3
4
sitemap: 
    path: sitemap.xml
baidusitemap:
    path: baidusitemap.xml

现在执行 hexo g 生成以后应该可以访问sitemap.xml和baidusitemap.xml

提交sitemap

github好像屏蔽了百度的爬虫，所以即使提交了sitemap，也可能出现无法爬下来的情况。于是我们需要主动向百度提交链接。
安装插件hexo-baidu-url-submit

1
npm install hexo-baidu-url-submit --save

在站点配置文件中添加如下内容：

1
2
3
4
5
baidu_url_submit:
  count: 1 ## 提交最新的一个链接
  host:  ## 在百度站长平台中注册的域名
  token: your_token ## 请注意这是您的秘钥， 所以请不要把博客源代码发布在公众仓库里!
  path: baidu_urls.txt ## 文本文档的地址， 新链接会保存在此文本文档里

在站点配置文件的deploy下仿照github的类型添加：

1
2
3
4
5
6
7
deploy:
  - type: git # 原来就有的
    repo: 巴拉巴拉
    branch: master
    message: blog update
  
  - type: baidu_url_submitter # 注意，这个为新增的

记得改成上面那种形式，type前面有一个-，然后下面的配置项和type对齐。

添加蜘蛛协议

蜘蛛协议就是告诉爬虫，你的哪些文件爬虫可以爬取，哪些不能的文件。

新建一个robots.txt文件，添加以下内容，然后放到/yoursite/source/文件夹下面：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#hexo robots.txt
User-agent: *

Allow: /
Allow: /archives/
Allow: /categories/
Allow: /tags/

Disallow: /js/
Disallow: /css/
Disallow: /fonts/

Sitemap: https://7iny.jxustctf.top/search.xml
Sitemap: https://7iny.jxustctf.top/sitemap.xml
Sitemap: https://7iny.jxustctf.top/baidusitemap.xml

执行hexo clean，hexo g -d，就同步到了coding上了。

百度HTML验证

在站点配置文件中，添加这样一个配置项:

1
baidu_site_verification: 刚刚复制的一串字符

修改文件，路径D\themes\next\layout\_partials\head.swig

1
2
3
{% if theme.baidu_site_verification %}
  <meta name="baidu-site-verification" content="HTML验证的一串字符" />
{% endif %}

谷歌SEO

同理，在谷歌收入站点提交即可

禁止爬虫跟踪外链

当你提交了链接，写好了蜘蛛爬取协议之后，搜索引擎的蜘蛛就会来爬取你的文章内容。但是，如果你的文章中有外链，蜘蛛就会通过这个链接到别人的站点去。如果这个站点是友情链接还好，如果是非友链，就回严重影响网站的爬取。

为了避免蜘蛛进入非友情链接，需要为非友链添加上nofollow属性。推荐使用hexo-autonofollow插件。

在站点根目录下执行：

1
npm install hexo-autonofollow --save

修改站点配置文件，添加如下内容：

1
2
3
4
5
nofollow:
    enable: true
    exclude: # 例外链接
    - 你自己的站点地址
    - 友链地址

这样，例外的链接就不会被加上nofollow属性。

  • 插件自动添加的属性为external nofollow noopener noreferrer。一般来说标准的nofollow属性只需要external nofollow即可，noopener noreferrer估计是新闻上说的钓鱼漏洞的补救方法，不过这条属性会影响站长工具的友链检测。

如果想要去掉noopener noreferrer，修改/yoursite/node_modules/hexo-autonofollowlib/filter.js：

1
rel: 'external nofollow noopener noreferrer'

去掉其中的noopener noreferrer，再生成即可。

参考文章

seo优化

实验室静态介绍页面

平台

使用github,方法与创建个人博客一致。实验室对外交流页面

git的用法

git clone到本机

1
2
//注意要换成自己的github仓库地址
git clone https://github.com/xxx/xxx.github.io.git

push到github

打开git客户端并执行以下命令

1
2
3
git add .
git commit -m "初始化个人主页仓库"
git push

强行更新

git push -u origin +master

参考文章

绑定域名

直接解析域名的CNAME记录到你的Git二级域名，不要使用方法一中的A记录，因为ip地址可能会一段时间之后会改变，所以建议记录类型选择CNAME进行解析，记录值填的就是username.github.io

参考文章

gif截图工具

gifcam中文版 : 官网

gif在线压缩：官网

sitemap.xml在线生成

1.打开网站地图制作工具

2.输入url，点击开始

3.下载放在根目录

页面添加密码

HTML顶部或headn之间添加以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script type="text/javascript">   
function password() {   
var testV = 1;   
var pass1 = prompt('请输入密码','');   
while (testV < 3) {   
if (!pass1)   
history.go(-1);   
if (pass1 == "123") {//初始密码123   
alert('密码正确');   
break;   
}   
testV+=1;   
var pass1 =   
prompt('密码错误!请重新输入:');   
}   
if (pass1!="password" & testV ==3)   
history.go(-1);   
return " ";   
}   
document.write(password());   
</script>  
<!--下面添加你要显示的内容或者代码-->

参考文章

博客DIY2.0

彩色标签页

在/themes/next/layout/目录下，新增tag-color.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
<script type="text/javascript">
     var alltags = document.getElementsByClassName('tag-cloud-tags');
     var tags = alltags[0].getElementsByTagName('a');
     for (var i = tags.length - 1; i >= 0; i--) {
       var r=Math.floor(Math.random()*75+130);
       var g=Math.floor(Math.random()*75+100);
       var b=Math.floor(Math.random()*75+80);
       tags[i].style.background = "rgb("+r+","+g+","+b+")";
     }
</script>

<style>
  .tag-cloud-tags{
    /*font-family: Helvetica, Tahoma, Arial;*/
    /*font-weight: 100;*/
    text-align: center;
    counter-reset: tags;
  }
  .tag-cloud-tags a{
    border-radius: 6px;
    padding-right: 5px;
    padding-left: 5px;
    margin: 8px 5px 0px 0px;
  }
  .tag-cloud-tags a:before{
    content: "🔖";
  }

  .tag-cloud-tags a:hover{
     box-shadow: 0px 5px 15px 0px rgba(0,0,0,.4);
     transform: scale(1.1);
     /*box-shadow: 10px 10px 15px 2px rgba(0,0,0,.12), 0 0 6px 0 rgba(104, 104, 105, 0.1);*/
     transition-duration: 0.15s;
  }
</style>

在同级目录的page.swig中引入tag-color.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
    <div class="tag-cloud">

        <!-- 目前共计xxx个标签
        <div class="tag-cloud-title">
            {{ _p('counter.tag_cloud', site.tags.length) }}
        </div>
        -->
    
        <div class="tag-cloud-tags">
          {{ tagcloud({min_font: 10, max_font: 15, amount: 300, color: true, start_color: '#ccc', end_color: '#111'}) }}
        </div>
      </div>
    
+     {% include 'tag-color.swig' %}
    
    {% elif page.type === 'categories' %}
      <div class="category-all-page">
        <div class="category-all-title">
            {{ _p('counter.categories', site.categories.length) }}
        </div>
        <div class="category-all">
          {{ list_categories() }}
        </div>
      </div>

文章底部的标签样式

代码拷入/themes/next/source/css/_custom/custom.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
25
26
/*文章底部标签样式*/
.posts-expand .post-tags a {
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
  font-family: 'Comic Sans MS', sans-serif;
  transition: .2s ease-out;
  padding: 3px 5px;
  margin: 5px;
  background: #f5f5f5;
  border-bottom: none;
  border-radius: 15px;

  +mobile(){
    padding: 1px 3px;
    font-size: 8px;
  }

  &:hover {
    background: rgba(100,154,182,0.902);
    color: #fff;
    -webkit-box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    -moz-box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  }
}

归档页美化

  1. 修改/themes/next/layout/_macro/post-collapse.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
{% macro render(post) %}

  <article class="my-post post-type-{{ post.type | default('normal') }}" itemscope itemtype="http://schema.org/Article">
    <header class="my-post-header">

      <div class="my-post-meta">
        <time class="my-post-time" itemprop="dateCreated"
              datetime="{{ moment(post.date).format() }}"
              content="{{ date(post.date, config.date_format) }}" >
          {{ date(post.date, 'MM-DD') }}
        </time>
      </div>

      <{% if theme.seo %}h3{% else %}h2{% endif %} class="my-post-title">
        {% if post.link %}{# Link posts #}
          <a class="my-post-title-link post-title-link-external" target="_blank" href="{{ url_for(post.link) }}" itemprop="url">
            {{ post.title or post.link }}
            <i class="fa fa-external-link"></i>
          </a>
        {% else %}
            <a class="my-post-title-link" href="{{ url_for(post.path) }}" itemprop="url">
              {% if post.type === 'picture' %}
                {{ post.content }}
              {% else %}
                <span itemprop="name">{{ post.title | default(__('post.untitled')) }}</span>
              {% endif %}
            </a>
        {% endif %}
      </{% if theme.seo %}h3{% else %}h2{% endif %}>

    </header>
  </article>

{% endmacro %}

主要修改：一是将post-meta这个div移到前面header标签下；二是将所有的class属性都加上my-，例如my-post-meta，这样改动是为了不影响其它页面引用的样式。

2.在/themes/next/source/css/_custom/custom.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
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
/* 归档页样式 began */
.page-archive .archive-page-counter {
  font-size: 18px;
  background-color: #49b1f5;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 8px;
  color: #fff;
  +mobile() {
    font-size: 16px;
  }
}
.my-post-time{
  font-size: 11px;
  position: absolute;
  color: #fff;
  background-color: #49b1f5;
  border-radius: 5px;
  padding-left: 5px;
  padding-right: 5px;
  margin-left: 15px;
}
.mypost{
  position: relative;
  margin-bottom: 1rem;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}
a.my-post-title-link:before{
  top: 10px;
  width: 18px;
  height: 18px;
  content: "📚";
  margin-right: 5px;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: 15px;
  line-height: 18px;
}
.my-post:hover{
  transform: scale(1.1);
  box-shadow: 10px 10px 15px 2px rgba(0,0,0,.12), 0 0 6px 0 rgba(104, 104, 105, 0.1);
  border-radius: 30px;
  width: 400px;
  padding: 1px 10px;
  margin-left: 25px;
  font-size: 16px;
  transition-duration: 0.15s;
  +mobile(){
    width: 260px;
    margin-left: 18px;
  }
  //display:flex;
}
a.my-post-title-link{
  text-decoration: none;
  font-size: 15px;
  font-weight: 400;
  +mobile() {
    font-size: 14px;
  }
}
.my-post-title{
  display: block;
  margin-left: 4.5rem;
  color: #4c4948;
  text-decoration: none;
  font-size: .8rem;
  cursor: pointer;
  +mobile() {
    //margin-left: 4rem;
  }
}
.my-post-header{
  position: top;
  margin-bottom: 1rem;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}
//.my-post-title-link{
//  font-size: 16px;
//  font-weight: 500;
//}
.my-post-meta{
  position: absolute;
  color: #99a9bf;
  width: 80px;
  color: #114142;
}
div.post-block.tag .collection-title h2 {
  border-width: 1px;
  border-style: solid;
  border-color: #3f3f3f;
  border-radius: 20px;
  font-size: 22px;
  background-color: #b4e8fa;
  padding: 2px 15px;
  letter-spacing: 1.5px;
  box-sizing: border-box;
  color: #3f3f3f;
  display: inline-block;
  margin: 10px 0 10px;
  text-align: center;
  +mobile(){
    font-size: 18px;
  }
}
.category-list-link:hover{
  transform: scale(1.1);
  box-shadow: 10px 10px 15px 2px rgba(0,0,0,.12), 0 0 6px 0 rgba(104, 104, 105, 0.1);
  border-radius: 8px;
  padding: 1px 1px;
  margin-left: 5px;
  font-size: 16px;
  transition-duration: 0.15s;
  //display:flex;
}
/* 归档页样式 end */

打字特效 （搜索框）

此功能主要通过 JS 监听页面的 input 输入框事件来实现。首先在主题_config.yml 中添加动态配置项 

1
2
3
4
typing_effect:
  enabled: true
  colorful: true  # 礼花
  shake: false  # 震动

在 /themes/next/layout/_custom/header.swig 中引入依赖 

1
2
3
4
5
6
7
8
{% if theme.typing_effect %}
  <script src="/js/src/activate-power-mode.min.js"></script>
  <script>
    POWERMODE.colorful = {{ theme.typing_effect.colorful }};
    POWERMODE.shake = {{ theme.typing_effect.shake }};
    document.body.addEventListener('input', POWERMODE);
  </script>
{% endif %}

其中的 activate-power-mode.min.js 位于/themes/next/source/js/src/目录，代码如下： 

1
(function webpackUniversalModuleDefinition(root,factory){if(typeof exports==='object'&&typeof module==='object')module.exports=factory();else if(typeof define==='function'&&define.amd)define([],factory);else if(typeof exports==='object')exports["POWERMODE"]=factory();else root["POWERMODE"]=factory()})(this,function(){return(function(modules){var installedModules={};function __webpack_require__(moduleId){if(installedModules[moduleId])return installedModules[moduleId].exports;var module=installedModules[moduleId]={exports:{},id:moduleId,loaded:false};modules[moduleId].call(module.exports,module,module.exports,__webpack_require__);module.loaded=true;return module.exports}__webpack_require__.m=modules;__webpack_require__.c=installedModules;__webpack_require__.p="";return __webpack_require__(0)})([function(module,exports,__webpack_require__){'use strict';var canvas=document.createElement('canvas');canvas.width=window.innerWidth;canvas.height=window.innerHeight;canvas.style.cssText='position:fixed;top:0;left:0;pointer-events:none;z-index:999999';window.addEventListener('resize',function(){canvas.width=window.innerWidth;canvas.height=window.innerHeight});document.body.appendChild(canvas);var context=canvas.getContext('2d');var particles=[];var particlePointer=0;POWERMODE.shake=true;function getRandom(min,max){return Math.random()*(max-min)+min}function getColor(el){if(POWERMODE.colorful){var u=getRandom(0,360);return'hsla('+getRandom(u-10,u+10)+', 100%, '+getRandom(50,80)+'%, '+1+')'}else{return window.getComputedStyle(el).color}}function getCaret(){var el=document.activeElement;var bcr;if(el.tagName==='TEXTAREA'||(el.tagName==='INPUT'&&el.getAttribute('type')==='text')){var offset=__webpack_require__(1)(el,el.selectionStart);bcr=el.getBoundingClientRect();return{x:offset.left+bcr.left,y:offset.top+bcr.top,color:getColor(el)}}var selection=window.getSelection();if(selection.rangeCount){var range=selection.getRangeAt(0);var startNode=range.startContainer;if(startNode.nodeType===document.TEXT_NODE){startNode=startNode.parentNode}bcr=range.getBoundingClientRect();return{x:bcr.left,y:bcr.top,color:getColor(startNode)}}return{x:0,y:0,color:'transparent'}}function createParticle(x,y,color){return{x:x,y:y,alpha:1,color:color,velocity:{x:-1+Math.random()*2,y:-3.5+Math.random()*2}}}function POWERMODE(){{var caret=getCaret();var numParticles=5+Math.round(Math.random()*10);while(numParticles--){particles[particlePointer]=createParticle(caret.x,caret.y,caret.color);particlePointer=(particlePointer+1)%500}}{if(POWERMODE.shake){var intensity=1+2*Math.random();var x=intensity*(Math.random()>0.5?-1:1);var y=intensity*(Math.random()>0.5?-1:1);document.body.style.marginLeft=x+'px';document.body.style.marginTop=y+'px';setTimeout(function(){document.body.style.marginLeft='';document.body.style.marginTop=''},75)}}};POWERMODE.colorful=false;function loop(){requestAnimationFrame(loop);context.clearRect(0,0,canvas.width,canvas.height);for(var i=0;i<particles.length;++i){var particle=particles[i];if(particle.alpha<=0.1)continue;particle.velocity.y+=0.075;particle.x+=particle.velocity.x;particle.y+=particle.velocity.y;particle.alpha*=0.96;context.globalAlpha=particle.alpha;context.fillStyle=particle.color;context.fillRect(Math.round(particle.x-1.5),Math.round(particle.y-1.5),3,3)}}requestAnimationFrame(loop);module.exports=POWERMODE},function(module,exports){(function(){var properties=['direction','boxSizing','width','height','overflowX','overflowY','borderTopWidth','borderRightWidth','borderBottomWidth','borderLeftWidth','borderStyle','paddingTop','paddingRight','paddingBottom','paddingLeft','fontStyle','fontVariant','fontWeight','fontStretch','fontSize','fontSizeAdjust','lineHeight','fontFamily','textAlign','textTransform','textIndent','textDecoration','letterSpacing','wordSpacing','tabSize','MozTabSize'];var isFirefox=window.mozInnerScreenX!=null;function getCaretCoordinates(element,position,options){var debug=options&&options.debug||false;if(debug){var el=document.querySelector('#input-textarea-caret-position-mirror-div');if(el){el.parentNode.removeChild(el)}}var div=document.createElement('div');div.id='input-textarea-caret-position-mirror-div';document.body.appendChild(div);var style=div.style;var computed=window.getComputedStyle?getComputedStyle(element):element.currentStyle;style.whiteSpace='pre-wrap';if(element.nodeName!=='INPUT')style.wordWrap='break-word';style.position='absolute';if(!debug)style.visibility='hidden';properties.forEach(function(prop){style[prop]=computed[prop]});if(isFirefox){if(element.scrollHeight>parseInt(computed.height))style.overflowY='scroll'}else{style.overflow='hidden'}div.textContent=element.value.substring(0,position);if(element.nodeName==='INPUT')div.textContent=div.textContent.replace(/\s/g,"\u00a0");var span=document.createElement('span');span.textContent=element.value.substring(position)||'.';div.appendChild(span);var coordinates={top:span.offsetTop+parseInt(computed['borderTopWidth']),left:span.offsetLeft+parseInt(computed['borderLeftWidth'])};if(debug){span.style.backgroundColor='#aaa'}else{document.body.removeChild(div)}return coordinates}if(typeof module!="undefined"&&typeof module.exports!="undefined"){module.exports=getCaretCoordinates}else{window.getCaretCoordinates=getCaretCoordinates}}())}])});

canvas粒子时钟

在/themes/next/layout/_custom/目录下，新建clock.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
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
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
<div style="">
  <canvas id="canvas" style="width:60%;">当前浏览器不支持canvas，请更换浏览器后再试</canvas>
</div>
<script>
(function(){

   var digit=
    [
        [
            [0,0,1,1,1,0,0],
            [0,1,1,0,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,0,1,1,0],
            [0,0,1,1,1,0,0]
        ],//0
        [
            [0,0,0,1,1,0,0],
            [0,1,1,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [1,1,1,1,1,1,1]
        ],//1
        [
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,0,1,1,0,0,0],
            [0,1,1,0,0,0,0],
            [1,1,0,0,0,0,0],
            [1,1,0,0,0,1,1],
            [1,1,1,1,1,1,1]
        ],//2
        [
            [1,1,1,1,1,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,0,1,1,1,0,0],
            [0,0,0,0,1,1,0],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//3
        [
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,1,0],
            [0,0,1,1,1,1,0],
            [0,1,1,0,1,1,0],
            [1,1,0,0,1,1,0],
            [1,1,1,1,1,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,0,1,1,0],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,1,1]
        ],//4
        [
            [1,1,1,1,1,1,1],
            [1,1,0,0,0,0,0],
            [1,1,0,0,0,0,0],
            [1,1,1,1,1,1,0],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//5
        [
            [0,0,0,0,1,1,0],
            [0,0,1,1,0,0,0],
            [0,1,1,0,0,0,0],
            [1,1,0,0,0,0,0],
            [1,1,0,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//6
        [
            [1,1,1,1,1,1,1],
            [1,1,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,1,1,0,0,0],
            [0,0,1,1,0,0,0],
            [0,0,1,1,0,0,0],
            [0,0,1,1,0,0,0]
        ],//7
        [
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//8
        [
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,1,1,0,0,0,0]
        ],//9
        [
            [0,0,0,0,0,0,0],
            [0,0,1,1,1,0,0],
            [0,0,1,1,1,0,0],
            [0,0,1,1,1,0,0],
            [0,0,0,0,0,0,0],
            [0,0,0,0,0,0,0],
            [0,0,1,1,1,0,0],
            [0,0,1,1,1,0,0],
            [0,0,1,1,1,0,0],
            [0,0,0,0,0,0,0]
        ]//:
    ];

var canvas = document.getElementById('canvas');

if(canvas.getContext){
    var cxt = canvas.getContext('2d');
    //声明canvas的宽高
    var H = 100,W = 700;
    canvas.height = H;
    canvas.width = W;
    cxt.fillStyle = '#f00';
    cxt.fillRect(10,10,50,50);

    //存储时间数据
    var data = [];
    //存储运动的小球
    var balls = [];
    //设置粒子半径
    var R = canvas.height/20-1;
    (function(){
        var temp = /(\d)(\d):(\d)(\d):(\d)(\d)/.exec(new Date());
        //存储时间数字，由十位小时、个位小时、冒号、十位分钟、个位分钟、冒号、十位秒钟、个位秒钟这7个数字组成
        data.push(temp[1],temp[2],10,temp[3],temp[4],10,temp[5],temp[6]);
    })();

    /*生成点阵数字*/
    function renderDigit(index,num){
        for(var i = 0; i < digit[num].length; i++){
            for(var j = 0; j < digit[num][i].length; j++){
                if(digit[num][i][j] == 1){
                    cxt.beginPath();
                    cxt.arc(14*(R+2)*index + j*2*(R+1)+(R+1),i*2*(R+1)+(R+1),R,0,2*Math.PI);
                    cxt.closePath();
                    cxt.fill();
                }
            }
        }
    }

    /*更新时钟*/
    function updateDigitTime(){
        var changeNumArray = [];
        var temp = /(\d)(\d):(\d)(\d):(\d)(\d)/.exec(new Date());
        var NewData = [];
        NewData.push(temp[1],temp[2],10,temp[3],temp[4],10,temp[5],temp[6]);
        for(var i = data.length-1; i >=0 ; i--){
            //时间发生变化
            if(NewData[i] !== data[i]){
                //将变化的数字值和在data数组中的索引存储在changeNumArray数组中
                changeNumArray.push(i+'_'+(Number(data[i])+1)%10);
            }
        }
        //增加小球
        for(var i = 0; i< changeNumArray.length; i++){
            addBalls.apply(this,changeNumArray[i].split('_'));
        }
        data = NewData.concat();
    }

    /*更新小球状态*/
    function updateBalls(){
        for(var i = 0; i < balls.length; i++){
            balls[i].stepY += balls[i].disY;
            balls[i].x += balls[i].stepX;
            balls[i].y += balls[i].stepY;
            if(balls[i].x > W + R || balls[i].y > H + R){
                balls.splice(i,1);
                i--;
            }
        }
    }

    /*增加要运动的小球*/
    function addBalls(index,num){
        var numArray = [1,2,3];
        var colorArray =  ["#3BE","#09C","#A6C","#93C","#9C0","#690","#FB3","#F80","#F44","#C00"];
        for(var i = 0; i < digit[num].length; i++){
            for(var j = 0; j < digit[num][i].length; j++){
                if(digit[num][i][j] == 1){
                    var ball = {
                        x:14*(R+2)*index + j*2*(R+1)+(R+1),
                        y:i*2*(R+1)+(R+1),
                        stepX:Math.floor(Math.random() * 4 -2),
                        stepY:-2*numArray[Math.floor(Math.random()*numArray.length)],
                        color:colorArray[Math.floor(Math.random()*colorArray.length)],
                        disY:1
                    };
                    balls.push(ball);
                }
            }
        }
    }

    /*渲染*/
    function render(){
        //重置画布宽度，达到清空画布的效果
        canvas.height = 100;
        //渲染时钟
        for(var i = 0; i < data.length; i++){
            renderDigit(i,data[i]);
        }
        //渲染小球
        for(var i = 0; i < balls.length; i++){
            cxt.beginPath();
            cxt.arc(balls[i].x,balls[i].y,R,0,2*Math.PI);
            cxt.fillStyle = balls[i].color;
            cxt.closePath();
            cxt.fill();
        }
    }

    clearInterval(oTimer);
    var oTimer = setInterval(function(){
        //更新时钟
        updateDigitTime();
        //更新小球状态
        updateBalls();
        //渲染
        render();
    },50);
}

})();
</script>

在/themes/next/layout/_macro/sidebar.swig中引入： 

1
{% include '../_custom/clock.swig' %}

网站 logo 炫彩效果

在 /themes/next/source/css/_custom/custom.styl 中添加以下 css ，如果之前已经设置了，根据情况进行替换：

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
.site-title{
  background-image: linear-gradient(
    to right,
    orangered,
    orange,
    gold,
    lightgreen,
    cyan,
    dodgerblue,
    mediumpurple,
    hotpink,
    orangered
  );
  background-size: 110vw;
  -webkit-background-clip: text;
  color: rgba(0,0,0,0.1); /* transparent IE 不支持 */
  animation: sliding 30s linear infinite;
}
@keyframes sliding{
  to{
    background-position:  -2000vw;
  }
}

.site-meta,
.site-subtitle {
  color: rgba(0,0,0,0.1); /* transparent IE 不支持 */
  animation: hue 1.5s linear infinite;
  background-image: linear-gradient(to right bottom, rgb(255,0,0), rgb(255,128,0), rgb(255,255,0), rgb(0,255,0), rgb(0,255,128), rgb(0,255,255), rgb(0,128,255), rgb(0,0,255), rgb(128,0,255), rgb(255,0,255), rgb(255,0,128));
  -webkit-background-clip: text;
}
@keyframes hue {
  from {
      filter: hue-rotate(0);
  }
  to {
      filter: hue-rotate(-360deg);
  }
}

.site-meta{
  background: #ecf9f8;
  +mobile(){
    padding: 10px 0;
    background-image: linear-gradient(90deg,#f79533 0,#f37055 15%,#ef4e7b 30%,#a166ab 44%,#5073b8 58%,#1098ad 72%,#07b39b 86%,#6dba82 100%)!important;
  }
}

鼠标样式

添加CSS样式代码：

文件位置：/themes/next/source/css/_custom/custom.styl

1
2
3
4
5
6
7
/* 鼠标样式 */
* {
  cursor: url(/images/default.cur),auto;
}
:link {
  cursor: url(/images/pointer.cur),auto
}

用到的两个文件：default.cur、pointer.cur 位于 images 目录下，因为是 .cur 这种静态光标文件，编辑器打开是一堆 ASCII 码，这里就不贴了，直接附上链接，当然，你也可以在浏览器里获取。

default.cur

pointer.cur

飘落特效

将文件保存在\themes\next\source\js\src\下命名为sakura.js;
然后在\themes\next\layout\_layout.swig 文件里引用即可：

1
2
3
4
5
6
7
<!-- 花飘落特效 -->
<script type="text/javascript">
  var windowWidth = $(window).width();
  if (windowWidth > 480) {
    document.write('<script type="text/javascript" src="/js/src/sakura.js"><\/script>');
  }
</script>

中文链接转拼音

项目地址

安装

1
npm i hexo-permalink-pinyin --save

启用

在站点配置文件中新增以下配置：

1
2
3
permalink_pinyin:
  enable: true
  separator: '-'   # default: '-'

enable：是否启用插件
separator：指定分隔符，默认为’-‘’

Hexo-abbrlink生成唯一文章链接

中文转拼音 这样方案也存在一定的缺陷，比如修改了文章标题，重新hexo三连后，URL就变了，以前的文章地址变成了404。而且这样生成的URL层级也很深，不利于SEO。

Hexo-abbrlink项目地址

安装

1
npm install hexo-abbrlink --save

执行此命令可能会不成功，提示你缺少相应的依赖，比如babel-eslint、mini-css-extract-plugin、webpack-cli…
使用npm命令安装即可，比如npm install eslint@4.x babel-eslint@8 --save-dev

配置

修改根目录站点配置文件config.yml，改为： 

1
2
3
4
abbrlink:
    alg: crc32   #算法： crc16(default) and crc32
    rep: hex     #进制： dec(default) and hex
permalink: :abbrlink.html  # 此处可以自己设置，也可以直接使用 :/abbrlink

注意一定要注释原有的permalink

官方样例

1
2
3
4
5
6
7
8
9
10
crc16 & hex
https://post.zz173.com/posts/66c8.html

crc16 & dec
https://post.zz173.com/posts/65535.html
crc32 & hex
https://post.zz173.com/posts/8ddf18fb.html

crc32 & dec
https://post.zz173.com/posts/1690090958.html

生成完后，原md文件的Front-matter内会增加abbrlink 字段，值为生成的ID 。这个字段确保了在我们修改了Front-matter 内的博客标题title或创建日期date字段之后而不会改变链接地址。

h1-h6前添加表情

在\themes\next\source\css\_custom\custom.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
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
/* 一到六级标题设置 */
.posts-expand .post-body h1,
.posts-expand .post-body h2,
.posts-expand .post-body h3,
.posts-expand .post-body h4,
.posts-expand .post-body h5,
.posts-expand .post-body h6 {
  padding-top: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

/*修改h1前面图标*/
.posts-expand .post-body h1:before {
  top: 10px;
  width: 18px;
  height: 18px;
  content: "⛅";
  font-size: 18px;
  line-height: 18px;
  margin-right: 16px;

}

/*修改h2前面图标*/
.posts-expand .post-body h2:before {
  top: 10px;
  width: 18px;
  height: 18px;
  content: "🌞";
  font-size: 18px;
  line-height: 18px;
  margin-right: 16px
}

/*修改h3前面图标*/
.posts-expand .post-body h3:before {
  top: 10px;
  width: 18px;
  height: 18px;
  content: "📖";
  font-size: 18px;
  line-height: 18px;
  margin-right: 16px;
}

/*修改h4前面图标*/
.posts-expand .post-body h4:before {
  top: 10px;
  width: 18px;
  height: 18px;
  content: "🔖";
  font-size: 18px;
  line-height: 18px;
  margin-right: 16px;
}

/*修改h5前面图标*/
.posts-expand .post-body h5:before {
  top: 10px;
  width: 18px;
  height: 18px;
  content: "☑";
  font-size: 18px;
  line-height: 18px;
  margin-right: 16px;
}

/*修改h6前面图标*/
.posts-expand .post-body h5:before {
  top: 10px;
  width: 18px;
  height: 18px;
  content: "🐅";
  font-size: 18px;
  line-height: 18px;
  margin-right: 16px;
}

可复制表情：网站

自定义友链页面

在博客根目录 /source 下手动创建 links 文件夹和里边的 index.md文件 

1
2
3
4
5
---
title: 友情链接
date: 2019-08-11 15:34:16
type: "links"
---

配置 menu

主题配置文件中menu下添加： 

1
links: /links/ || link

在 /themes/next/languages/zh-Hans.yml 文件中 menu 下增加中文描述 

1
links: 友链

在 /themes/next/layout/ 新建 links.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
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
<!-- 所在目录：~/themes/next/layout/ -->

{% block content %}
  {######################}
  {###  LINKS BLOCK   ###}
  {######################}
  
    <div id="links">
        <style>
            .links-content{
                margin-top:1rem;
            }
            
            .link-navigation::after {
                content: " ";
                display: block;
                clear: both;
            }
            
            .card {
                width: 240px;
                font-size: 1rem;
                padding: 10px 20px;
                border-radius: 4px;
                transition-duration: 0.15s;
                margin-bottom: 1rem;
                display:flex;
            }
            @media (max-width: 767px) {
				.card:nth-child(odd) {
                    float: left;
                }
                .card:nth-child(even) {
                    float: left !important;
                }
			}
			
            .card:nth-child(odd) {
                float: left;
            }
            .card:nth-child(even) {
                float: right;
            }
            .card:hover {
                transform: scale(1.1);
                box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
            }
            .card a {
                border:none; 
            }
            .card .ava {
                width: 3rem!important;
                height: 3rem!important;
                margin:0!important;
                margin-right: 1em!important;
                border-radius:4px;
                
            }
            .card .card-header {
                font-style: italic;
                overflow: hidden;
                width: 100%;
            }
            .card .card-header a {
                font-style: normal;
                color: #2bbc8a;
                font-weight: bold;
                text-decoration: none;
            }
            .card .card-header a:hover {
                color: #a166ab;
                text-decoration: none;
            }
            .card .card-header .info {
                font-style:normal;
                color:#a3a3a3;
                font-size:14px;
                min-width: 0;
                overflow: hidden;
                white-space: nowrap;
            }

            span.focus-links {
                font-style: normal;
                margin-left: 10px;
                position: unset;
                left: 0;
                padding: 0 7px 0 5px;
                font-size: 11px;
                border-color: #42c02e;
                border-radius: 40px;
                line-height: 24px;
                height: 22px;
                color: #fff !important;
                background-color: #42c02e;
                display: inline-block;
            }
            span.focus-links:hover{
                background-color: #318024;
            }

            .friends-btn{
                text-align: center;
                color: #555!important;
                background-color: #fff;
                border-radius: 3px;
                font-size: 15px;
                box-shadow: inset 0 0 10px 0 rgba(0,0,0,.35);
                border: none!important;
                transition-property: unset;
                padding: 0 15px;
                margin: inherit;
            }

            .friends-btn:hover{
                color: rgb(255, 255, 255) !important;
                border-radius: 3px;
                font-size: 15px;
                box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
                background-image: linear-gradient(90deg, #a166ab 0%, #ef4e7b 25%, #f37055 50%, #ef4e7b 75%, #a166ab 100%);
                margin: inherit;
            }
        </style>
        <div class="links-content">
            <div class="link-navigation">

                {% for link in theme.mylinks %}
                
                    <div class="card">
                        <img class="ava" src="{{ link.avatar }}"/>
                        <div class="card-header">
                        <div><a href="{{ link.site }}" target="_blank"> {{ link.nickname }}</a> <a href="{{ link.site }}"><span class="focus-links">关注</span></a></div>
                        <div class="info">{{ link.info }}</div>
                        </div>
                    </div>
                
                {% endfor %}

            </div>
            {{ page.content }}
            </div>
        </div>
  
  {##########################}
  {###   END LINKS BLOCK  ###}
  {##########################}
{% endblock %}

修改 page.swig

修改 /themes/next/layout/page.swig 文件，在开头的 block title 内部

1
#}{{ __('title.tag') + page_title_suffix }}{#下方添加
1
2
3
<!-- 友情链接-->
#}{% elif page.type === 'links' and not page.title %}{#
  #}{{ __('title.links') + page_title_suffix }}{#

参考

接着在 /themes/next/layout/page.swig 中 PAGE BODY 内部，引入刚才新建的 page.swig :

1
2
3
<!-- 友情链接-->
{% elif page.type === 'links' %}
    {% include 'links.swig' %}

配置友链

接下来，在 /themes/next/_config.yml 文件中配置友链，末尾处新增 mylinks ，如下:

1
2
3
4
5
6
7
8
9
10
11
12
# 友链
mylinks:

- nickname: Stalker战队
  avatar: https://lab.jxustctf.top/img/N407.jpg
  site: https://lab.jxustctf.top/stalker.html
  info: Stalker战队成员墙
  
- nickname: Daniel
  avatar: https://danie1.jxustctf.top/img/2.png
  site: https://danie1.jxustctf.top
  info: Stalker战队知名带头大哥

结尾

此处我将主题修改为了scheme: Pisces

参考文章

1.北宸的博客

2.添加友链页面

3.飘落特效

博客DIY3.0

归档页面加入 12 生肖

步骤

1）下载字体：chinese-zodiac.zip (23.2KB)，下载后将解压的三个字体文件全部放在 ~/blog/source/fonts/ 下（若无 fonts 文件夹请自建）。

2）新建文件：保存路径参考下文注释，文件名为chinese-zodiac.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
<!-- 文件位置：~/blog/themes/next/layout/_partials/chinese-zodiac.swig -->

{% if year % 12 == 0 %}
<i class="symbolic-animals icon-monkey"></i>
{% endif %}
{% if year % 12 == 1 %}
<i class="symbolic-animals icon-rooster"></i>
{% endif %}
{% if year % 12 == 2 %}
<i class="symbolic-animals icon-dog"></i>
{% endif %}
{% if year % 12 == 3 %}
<i class="symbolic-animals icon-pig"></i>
{% endif %}
{% if year % 12 == 4 %}
<i class="symbolic-animals icon-rat"></i>
{% endif %}
{% if year % 12 == 5 %}
<i class="symbolic-animals icon-ox"></i>
{% endif %}
{% if year % 12 == 6 %}
<i class="symbolic-animals icon-tiger"></i>
{% endif %}
{% if year % 12 == 7 %}
<i class="symbolic-animals icon-rabbit"></i>
{% endif %}
{% if year % 12 == 8 %}
<i class="symbolic-animals icon-dragon"></i>
{% endif %}
{% if year % 12 == 9 %}
<i class="symbolic-animals icon-snake"></i>
{% endif %}
{% if year % 12 == 10 %}
<i class="symbolic-animals icon-horse"></i>
{% endif %}
{% if year % 12 == 11 %}
<i class="symbolic-animals icon-goat"></i>
{% endif %}

3）修改文件：编辑archive.swig 文件，文件位置参考下面注释。删除(-)一行，增加(+)几行（复制粘贴后删除每行前面的 + 号）。

1
2
3
4
5
6
7
8
9
10
11
<!-- 文件位置：~/blog/themes/next/layout/archive.swig -->

          <div class="collection-title">
-            <{% if theme.seo %}h2{% else %}h1{% endif %} class="archive-year" id="archive-year-{{ year }}">{{ year }}</{% if theme.seo %}h2{% else %}h1{% endif %}>
+            <{% if theme.seo %}h2{% else %}h1{% endif %} class="archive-year" id="archive-year-{{ year }}">
+              {{ year }}
+              <div class="chinese-zodiac">
+                {% include '_partials/chinese-zodiac.swig' %}
+              </div>
+            </{% if theme.seo %}h2{% else %}h1{% endif %}>
          </div>

4）添加样式：将下面的 CSS 代码加入到 custom.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
25
26
27
28
29
30
31
32
33
34
35
/* 文件位置：~/blog/themes/next/source/css/_custom/custom.styl */

.chinese-zodiac {
    float: right;
}
@font-face {
  font-family: 'chinese-zodiac';
  font-display: swap;
  src: url('/fonts/chinese-zodiac.eot');
  src: url('/fonts/chinese-zodiac.eot') format('embedded-opentype'),
       url('/fonts/chinese-zodiac.woff2') format('woff2'),
       url('/fonts/chinese-zodiac.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
.symbolic-animals {
  display: inline-block;
  font: normal normal normal 14px/1 chinese-zodiac;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-dragon:before { content: '\e806'; }
.icon-tiger:before { content: '\e809'; }
.icon-pig:before { content: '\e810'; }
.icon-horse:before { content: '\e813'; }
.icon-rat:before { content: '\e816'; }
.icon-goat:before { content: '\e818'; }
.icon-snake:before { content: '\e820'; }
.icon-ox:before { content: '\e822'; }
.icon-dog:before { content: '\e825'; }
.icon-rabbit:before { content: '\e826'; }
.icon-monkey:before { content: '\e829'; }
.icon-rooster:before { content: '\e82f'; }

参考文章

具体细节或者其他报错，请参考：博客

侧边添加运行时间

在原来时间下面添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{# blogtime #}
	<span id="span_dt_dt">
		<script type="text/javascript">
			function show_date_time() {
				window.setTimeout("show_date_time()", 1e3),
				BirthDay = new Date("1/30/2019 00:00:00"),
				today = new Date,
				timeold = today.getTime() - BirthDay.getTime(),
				sectimeold = timeold / 1e3,
				secondsold = Math.floor(sectimeold),
				msPerDay = 864e5,
				e_daysold = timeold / msPerDay,
				daysold = Math.floor(e_daysold),
				e_hrsold = 24 * (e_daysold - daysold),
				hrsold = Math.floor(e_hrsold),
				e_minsold = 60 * (e_hrsold - hrsold),
				minsold = Math.floor(60 * (e_hrsold - hrsold)),
				seconds = Math.floor(60 * (e_minsold - minsold)),
				span_dt_dt.innerHTML = "7inyの博客已运行" + daysold + "天"
			}
			show_date_time()
		</script>
	</span>
-------------The End-------------