hexo搭建的博客 - 优化篇

hexo
,

1. 搭建基本hexo博客

→点这里←有详细的教程，我就不在重复叙述了。

2. hexo博客绑定域名

→点这里←有详细的教程，我也不再重复说明了。

3. 设置Hexo主题模式

在Hexo主题中，有四种不同的模式，通过切换模式，让你的主题显示不一样的样式。（有些主题没有这种设置）
在themes根目录下有一个同样名称为_config.yml，为了区分hexo根目录下的_config.yml，将前者称为主题配置文件 ，在其中找到scheme属性，如下所示：

1
2
3
4
5
# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini

主题默认使用Muse模式，这里采用的是Pisces模式，读者可根据自己的喜好，选择其中一种模式。

4. 添加评论功能

→点这里←有详细的教程，我也不再重复说明了。

5. 设置网站图标

打开主题配置文件 ，找到以下字段，进行相应的修改:

1
favicon: /favicon.png

其中，图片favicon.jpg存放在hexo-site/source/目录下。

6. 友情链接

复制theme/**/_source/目录下links文件夹到站点的/source/目录下

在hexo目录下的source文件夹内创建一个名为_data（禁止改名）的文件夹。

然后在文件内创建一个名为links.yml的文件,在其中添加相关数据即可。

单个友情链接的格式为：

1
2
3
4
Name:											//将 Name 改为友情链接的名字，例如 Cofess
    link: http://example.com 					//友情链接的地址
    avatar: http://example.com/avatar.png 		// 友情链接的头像
    desc: "这是一个描述"							//友情链接描述

7. 文章启用目录索引

1
2
3
4
5
6
title: 文章标题
categories:
  - 文章分类
tags:
  - 文章标签
toc: true  #是否启用内容索引

8.放一只萌宠到自己的博客吧~

（1）获取

1
npm install --save hexo-helper-live2d

（2）选择自己喜欢的萌妹子
这里可以查看一些萌宠的预览图，快来选择你喜欢的妹子造型吧~

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
live2d-widget-model-chitose
live2d-widget-model-epsilon2_1
live2d-widget-model-gf
live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haruto
live2d-widget-model-hibiki
live2d-widget-model-hijiki
live2d-widget-model-izumi
live2d-widget-model-koharu
live2d-widget-model-miku
live2d-widget-model-ni-j
live2d-widget-model-nico
live2d-widget-model-nietzsche
live2d-widget-model-nipsilon
live2d-widget-model-nito
live2d-widget-model-shizuku
live2d-widget-model-tororo
live2d-widget-model-tsumiki
live2d-widget-model-unitychan
live2d-widget-model-wanko
live2d-widget-model-z16

（3）安装

1
npm install live2d-widget-model-miku //live2d-widget-model-miku 是你喜欢的萌宠的名字

（4）配置
在站点的_config.yml文件中，添加如下的代码：

1
2
3
4
5
6
7
8
9
10
11
live2d:
  enable: true
  scriptFrom: local
  model:
    use: <你家萌宠的名字>
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true

（5）保存并部署看效果。

9.页面点击有小桃心技巧~

（1）在/themes/**/source/js下新建文件clicklove.js文件

（2）把下面的代码粘贴到clicklove.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);

（3）在/themes/**/layout/_layout.ejs文件末尾添加如下代码：

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

（4）成功，本地调试一下吧~