如何搭建自己的hexo博客

发表于 | 更新于: | 分类于 | 次阅读
| 字数统计: 5k

  本文不讲详细搭建，小白只是记录一下自己主题是如何（有手就行）配置

一、搭建基于Github和hexo的个人博客

  如何搭建最基础的hexo博客，可以参照这位博主，他写的很详细：GitHub+hexo搭建个人博客

二、博客基础配置

  配置主要修改的是站点配置文件和主题配置文件（均为_config.yml文件），后面“站点”、“主题”内容均指对应配置文件；安装文件若没有特殊说明均在站点（博客）根目录下安装。

2.1 基本配置

  打开myblog根目录下的_config.yml文件（站点配置文件），找到Site模块修改如下基本信息（注意：冒号后面带有空格）

1
2
3
4
5
6
title: 标题
subtitle: 副标题
description: 描述
author: 作者
language: 语言（简体中文是zh-Hans）
timezone: 网站时区（Hexo 默认使用您电脑的时区，不用写）

2.2 Next主题安装

  进入到生成的博客路径，安装一个next主题

1
2
cd myblog
git clone https://github.com/iissnan/hexo-theme-next themes/next

  修改站点_config.yml中的theme

1
theme: next

做完记得清除Hexo的缓存：hexo clean
  安装完next主题，进入 根目录/themes/next 同样也会有一个_config.yml（主题配置文件）。

2.3主题样式

  在 主题 找到Scheme Settings

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

一共有四种主题风格可以选，对应的侧栏设置也不同。在 主题 找到sidebar

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
sidebar:
# Sidebar Position - 侧栏位置（只对Pisces | Gemini两种风格有效）
  position: left        //靠左放置
  #position: right      //靠右放置

# Sidebar Display - 侧栏显示时机（只对Muse | Mist两种风格有效）
  #display: post        //默认行为，在文章页面（拥有目录列表）时显示
  display: always       //在所有页面中都显示
  #display: hide        //在所有页面中都隐藏（可以手动展开）
  #display: remove      //完全移除

  offset: 12            //文章间距（只对Pisces | Gemini两种风格有效）

  b2t: false            //返回顶部按钮（只对Pisces | Gemini两种风格有效）

  scrollpercent: true   //返回顶部按钮的百分比

2.5 菜单，标签，分类，关于

  在 主题 找到Menu Setting

1
2
3
4
5
6
7
8
9
menu:
  home: / || home                          //首页
  archives: /archives/ || archive          //归档
  categories: /categories/ || th           //分类
  tags: /tags/ || tags                     //标签
  about: /about/ || user                   //关于
  #schedule: /schedule/ || calendar        //日程表
  #sitemap: /sitemap.xml || sitemap        //站点地图
  #commonweal: /404/ || heartbeat          //公益404

以archives: /archives/ || archive为例：
||之前的/archives/表示标题“归档”，关于标题的格式可以去themes/next/languages/zh-Hans.yml中参考或修改
||之后的archive表示图标，可以去 Font Awesome 中查看或修改，Next主题所有的图标都来自Font Awesome 。

  这个时候，菜单中的标签、分类、关于是进不去的，需要自己另外新建页面。
创建标签

1
hexo new page tags

在站点路径的source会生成对应页面文件,只时候才能进去菜单的标签页面；其他页面同理；页面标题可修改title，关闭页面评论可修改comments。

1
2
3
4
5
6
---
title: some tags
date: 2019-09-22 15:19:49
type: "tags"
comments: false		
---

增加一些自己特有页面，还要修改其对应的翻译文本，翻译文本放置在 Next主题 目录下的 languages/{language}.yml （{language} 为你所使用的语言）。

2.6 头像设置+旋转

  在 主题 找到Sidebar Avatar字段

1
2
# Sidebar Avatar
avatar: /images/header.jpg

这是头像的路径，只需把你的头像命名为header.jpg放入themes/next/source/images中就好了。
实现头像旋转
打开\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
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
.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为循环播放) ]*/
 

  /* 鼠标经过头像旋转360度 */
  -webkit-transition: -webkit-transform 1.0s ease-out;
  -moz-transition: -moz-transform 1.0s ease-out;
  transition: transform 1.0s 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);
  }
}

2.7 添加搜索功能

1.安装 hexo-generator-searchdb 插件

1
npm install hexo-generator-searchdb --save

2.修改 站点 ,找到Extensions

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

3.修改 主题 ，找到Local search，将enable使能 true。

三、博客高级配置

3.1 浏览量 访客量 阅读数

  在 主题 写入代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# Show PV/UV of the website/page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi/
busuanzi_count:
  # count values only if the other configs are false
  enable: true
  # custom uv span for the whole site
  site_uv: true
  site_uv_header: <i class="fa fa-user"></i> 有
  site_uv_footer: 人看过我的博客啦
  # custom pv span for the whole site
  site_pv: true
  site_pv_header: <i class="fa fa-eye"></i> 本站总访问量 
  site_pv_footer: 次
  # custom pv span for one page only
  page_pv: true
  page_pv_header: <i class="fa fa-file-o"></i> 
  page_pv_footer: 次阅读

修改统计规则及busuanzi失效修复
  打开\themes\next\layout_partials\footer.swig文件,在copyright前加上画红线这句话：
代码如下：

1
<script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

3.2 字数统计 阅读时长 总字数

  在站点根目录安装

1
npm i --save hexo-wordcount

然后再进入 主题 修改如下：

1
2
3
4
5
6
7
8
# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true   
  wordcount: true   #字数统计   
  min2read: false    #预览时间
  totalcount: false  #总字数，显示在页面底部
  separated_meta: false  #无作用

3.3 文章发表 更新时间

  打开 主题 ,搜索关键字updated_at

1
2
3
4
5
6
# Post meta display settings
post_meta:
  item_text: true
  created_at: true
  updated_at: true  #文章发表 更新时间
  categories: true

3.4 友链、社交网站

  友链可以在 主题 Blog rolls参照注释

1
2
3
4
5
6
7
# Blog rolls
links_icon: link
links_title: Links
links_layout: inline
links:
  火影.青春.梦想: https://www.bilibili.com/video/av42311652
  FATE.士郎: https://www.bilibili.com/video/av45828728

  社交网站同理在 主题 social参照注释，不过需要配置social_icons

1
2
3
4
5
6
7
#是否启用社交链接图标
social_icons:
  enable: true
#匹配图片名称，在 Font Awesome 查询 
  GitHub: github
  Twitter: twitter
  微博: weibo

3.5 博客运行时间

  打开next\layout_partials路径中的footer.swig,加入下面代码段（我加在了最后面）：

1
<span id="timeDate" title="网站运行时间">载入天数...</span><span id="times" title="网站运行时间">载入时分秒...</span>

在next\layout_layout.swig中插入下面代码块：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!--此处为建站时间 -->
<script>
  var now = new Date(); 
  function createtime() { 
      var grt= new Date("09/13/2019 12:00:00");
      now.setTime(now.getTime()+250); 
      days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days); 
      hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours); 
      if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum); 
      mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;} 
      seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum); 
      snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;} 
      document.getElementById("timeDate").innerHTML ="(ㆆᴗㆆ)本站建立了"+dnum+"&thinsp;天"; 
      document.getElementById("times").innerHTML = hnum + "&thinsp;时" + mnum + "&thinsp;分" + snum + "&thinsp;秒"; 
  } 
setInterval("createtime()",250);
</script>

3.6 评论功能

  打开来必力官网： https://livere.com
按套路注册,点击上方的安装，选择免费的city版本。
并点击现在安装，复制其中的uid字段。
打开 主题 ，定位到livere_uid，粘贴上刚刚复制的UID。

四、美化配置

4.1 隐藏网页底部 Hexo 强力驱动

  打开 主题 ,搜索关键字 copyright ，如下:

1
2
# Footer `powered-by` and `theme-info` copyright
copyright: false

4.2 浏览器恶搞标题

  在目录 \Hexo\themes\next\source\js\src 下新建一个 FunnyTitle.js 文件，在里面填写如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!--浏览器搞笑标题-->
 var OriginTitle = document.title;
 var titleTime;
 document.addEventListener('visibilitychange', function () {
     if (document.hidden) {
         $('[rel="icon"]').attr('href', "/img/trhx2.png");
         document.title = '(*/ω＼*)我藏好了';
         clearTimeout(titleTime);
     }
     else {
         $('[rel="icon"]').attr('href', "/img/trhx2.png");
         document.title =  OriginTitle;
         titleTime = setTimeout(function () {
             document.title = OriginTitle;
         }, 2000);
     }
 });

然后在 \Hexo\themes\next\layout\layout.ejs 文件中添加如下代码(我放在最后)：

1
2
<!--浏览器搞笑标题-->
<script type="text/javascript" src="/js/src/FunnyTitle.js"></script>

4.3 鼠标点击特效（颜文字）

  也是 在目录 \Hexo\themes\next\source\js\src 下新建一个 emoji.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
    onload = function() {
        var click_cnt = 0;
        var $html = document.getElementsByTagName("html")[0];
        var $body = document.getElementsByTagName("body")[0];
        $html.onclick = function(e) {
            var $elem = document.createElement("b");
            $elem.style.color =  "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")";/*点击效果颜色*/
            $elem.style.zIndex = 9999;
            $elem.style.position = "absolute";
            $elem.style.select = "none";
            var x = e.pageX;
            var y = e.pageY;
            $elem.style.left = (x - 10) + "px";
            $elem.style.top = (y - 20) + "px";
            clearInterval(anim);
            switch (++click_cnt) {
                case 1:
                    $elem.innerText = "<(￣3￣)> 表！";
                    break;
                case 2:
                    $elem.innerText = "ʅ（´◔౪◔）ʃ";
                    break;
                case 3:
                    $elem.innerText = "(๑•́ ₃ •̀๑)";
                    break;
                case 4:
                    $elem.innerText = "(๑•̀_•́๑)";
                    break;
                case 5:
                    $elem.innerText = "（￣へ￣）";
                    break;
                case 6:
                    $elem.innerText = "(╯°口°)╯(┴—┴";
                    break;
                case 7:
                    $elem.innerText = "Ψ(￣∀￣)Ψ";
                    break;
                case 8:
                    $elem.innerText = "╮(｡>口<｡)╭";
                    break;
                case 9:
                    $elem.innerText = "( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃";
                    break;
                case 10:
                    $elem.innerText = "(ノへ￣、)";
                    break;
                case 11:
                    $elem.innerText = "o(￣ε￣*)";
                    break;
                case 12:
					$elem.innerText = "(ꐦ°᷄д°᷅)";
					break;
				case 13:
					$elem.innerText = "٩(●´৺`●)وbiu";
					break;
                case 14:
					$elem.innerText = "(ꐦ°᷄д°᷅)";
					break;
				 
//				case 15:  /*此处可以按照上面的格式添加表情*/
//					  break;
					 
                default:
					$elem.innerText = "(*/ω＼*)";
                    click_cnt=0;
                    break;
            }
            $elem.style.fontSize = "bold";
            var increase = 0;
            var anim;
            setTimeout(function() {
                anim = setInterval(function() {
                    if (++increase == 150) {
                        clearInterval(anim);
                        $body.removeChild($elem);
                    }
                    $elem.style.top = y - 20 - increase + "px";
                    $elem.style.opacity = (150 - increase) / 120;
                }, 8);
            }, 70);
            $body.appendChild($elem);
        };
    };

然后 也是 在 \Hexo\themes\next\layout\layout.ejs 文件中添加如下代码(我放在最后)：

1
2
<!-- 页面点击颜文字表情 -->
<script type="text/javascript" src="/js/src/emoji.js"></script>

  颜文字选取网站：http://www.yanwenzi.com/chihuo/，可以根据自己的喜好增加表情✧٩(ˊωˋ*)و✧

4.4 更换背景

  在 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
// Custom styles.
@media screen and (min-width:1200px) {

	body {
		background:url(https://source.unsplash.com/random/1600x900);
		background-repeat: no-repeat;
		background-attachment:fixed;
		background-position:50% 50%;
		background-size: cover;
		-webkit-background-size: cover;
		-o-background-size: cover;
		-moz-background-size: cover;
		-ms-background-size: cover;

		/*这是设置底部文字, 看个人需要修改*/
		 #footer > div > div {
			color:#eee;
		}
	}
}

上面图片链接是我的配置，也可以自己切换成本地图片链接（替换https）：/images/bg.jpg

4.5 背景动态粒子

  该功能已经嵌入到新版本 next主题 配置，所以只要使能就行；canvas_nest是一种（很常见）随机线条在鼠标位置凝聚；我的配置选的是canvas_nest: true。

1
2
3
4
5
6
7
8
# Canvas-nest
canvas_nest: false
# three_waves
three_waves: false
# canvas_lines
canvas_lines: true
# canvas_sphere
canvas_sphere: false

4.6 加入live2D看板娘

1
npm install --save hexo-helper-live2d

还需要选择下载自己喜欢的模型，如我的看板娘为live2d-widget-model-koharu ，则

1
npm install live2d-widget-model-koharu

其他live2D模型预览查看：https://github.com/xiazeyu/live2d-widget-models

在站点添加以下内容

1
2
3
4
5
6
7
8
9
10
11
12
13
# Live2D
## https://github.com/EYHN/hexo-helper-live2d
live2d:
    enable: true
    scriptFrom: local
    model: 
        use: live2d-widget-model-koharu #模型选择
    display: 
        position: right  #模型位置
        width: 180       #模型宽度
        height: 360      #模型高度
    mobile: 
        show: false      #是否在手机端显示

五、优化配置

5.1 解决页面过小问题

  文章宽度过小，而两边宽度过大；修改themes\next\source\css_schemes\Pisces_layout.styl
  以下是Mayfly大佬的_layout.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
124
125
126
127
128
129
130
131
.header {
  position: relative;
  margin: 0 auto;
  //width: $main-desktop;
  width: 80%;

  +tablet() {
    width: auto;
  }
  +mobile() {
    width: auto;
  }
}

.header-inner {
  position: absolute;
  top: 0;
  overflow: hidden;
  padding: 0;
  width: 240px;
  background: rgba(255,255,255,0.8);
  box-shadow: $box-shadow-inner;
  border-radius: $border-radius-inner;

  +desktop-large() {
    .container & { width: 240px; }
  }
  +tablet() {
    position: relative;
    width: auto;
    border-radius: initial;
  }
  +mobile() {
    position: relative;
    width: auto;
    border-radius: initial;
  }
}

.main {
  clearfix();
  +tablet() {
    padding-bottom: 100px;
  }
  +mobile() {
    padding-bottom: 100px;
  }
}

.container .main-inner {
  //width: $main-desktop;
  width: 80%;
  +tablet() {
    width: auto;
  }
  +mobile() {
    width: auto;
  }
}

.content-wrap {
  float: right;
  box-sizing: border-box;
  padding: $content-desktop-padding;
  //width: $content-desktop;
  width: calc(100% - 260px);
  background: white;
  min-height: 700px;
  box-shadow: $box-shadow-inner;
  border-radius: $border-radius-inner;

  +tablet() {
    width: 100%;
    padding: 20px;
    border-radius: initial;
  }
  +mobile() {
    width: 100%;
    padding: 20px;
    min-height: auto;
    border-radius: initial;
  }
}

.sidebar {
  position: static;
  float: left;
  margin-top: 300px;
  width: $sidebar-desktop;
  background: $body-bg-color;
  box-shadow: none;

  +tablet() {
    display: none;
  }
  +mobile() {
    display: none;
  }
}

.sidebar-toggle { display: none; }


.footer-inner {
  //width: $main-desktop;
  padding-left: 260px;

  +tablet() {
    width: auto;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  +mobile() {
    width: auto;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}



.sidebar-position-right {
  .header-inner { right: 0; }
  .content-wrap { float: left; }
  .sidebar { float: right; }

  .footer-inner {
    padding-left: 0;
    padding-right: 260px;
  }
}

5.2 设置透明背景

1.内容板块透明
  博客根目录 themes\next\source\css_schemes\Pisces_layout.styl 文件 .content-wrap 标签下 background: white修改为：

rgba(255,255,255,0.7);link
1
2
3
2.菜单栏背景
&emsp;&emsp;博客根目录 themes\next\source\css\_schemes\Pisces\_layout.styl 文件 .header-inner 标签下 background: white修改为：
```background: rgba(255,255,255,0.7); //0.7是透明度

3.站点概况背景
  博客根目录 themes\next\source\css_schemes\Pisces_sidebar.styl 文件 .sidebar-inner 标签下 background: white修改为：

rgba(255,255,255,0.7);link
1
2
&emsp;&emsp;然后修改博客根目录 themes\next\source\css\_schemes\Pisces\_layout.styl 文件 .sidebar 标签下 background: $body-bg-color修改为：
```background: rgba(255,255,255,0.7); //0.7是透明度

4.按钮背景
  博客根目录 themes\next\source\css_common\components\post\post-button.styl 同上修改对应位置为 background: transparen

5.3 博客压缩加速访问

在站点的根目录下执行以下命令：

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

在根目录新建 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'
]);

注意， 修改上面的各个目录为你的真实目录， **代表0或多个子目录(需要注意一下自己的路径是否正确)
  在每次执行完 hexo g 之后，在执行 gulp 命令，就会压缩一次静态文件，例如：

1
hexo clean&&hexo g&&gulp&&hexo d

六、写博客

6.1 去掉文章目录标题的自动编号

  打开 主题 ，找到Table Of Contents,将number失能

6.2 主页文章添加阴影效果

  打开\themes\next\source\css_custom\custom.styl,向里面加入：

1
2
3
4
5
6
7
8
/*主页文章添加阴影效果*/
 .post {
   margin-top: 60px;
   margin-bottom: 60px;
   padding: 25px;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
  }

6.3 主页显示 阅读全文

  在文章中使用 < !--more--> 手动进行截断

6.4 文章结尾–加入感谢阅读

  在\themes\next\layout_macro 中新建 passage-end-tag.swig 文件,并添加以下内容：

1
2
3
4
5
<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>
    {% endif %}
</div>

接着打开\themes\next\layout_macro\post.swig文件，在post-body字样之后,post-footer字样之前添加如下代码（post-footer之前两个DIV）：

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

然后打开 主题配置文件,在末尾添加：

1
2
3
# 文章末尾添加“本文结束”标记
passage_end_tag:
  enabled: true

完成以上设置之后，在每篇文章之后都会添加如上效果图的样子。

6.5 文章加密访问

  打开themes/next/layout/_partials/head.swig文件,在以下位置插入这样一段代码：

代码如下：

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
---
title: 如何搭建自己的hexo博客
date: 2019-09-27 23:17:10
tags: [hexo,next,博客]
password: password
---

6.6 文章中插入代码

  在 站点 中，找到hightlight:

1
2
3
4
5
highlight:
  enable: true
  line_number: true
  auto_detect: true
  tab_replace:

再到 主题 ，找到highlight_theme: normal;注释显示有五种显示主题可用，我的配置为night blue。如何插入则如下图所示：

6.7 代码复制按钮

  1. 下载插件clipboard.js；

  2. 将下载的clipboard.js文件下的dist文件夹中的文件拖到.\themes\next\source\js\src 文件夹下

  3. 也是在.\themes\next\source\js\src目录下，创建clipboard-use.js，文件内容如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    /*页面载入完成后，创建复制按钮*/
    !function (e, t, a) { 
      /* code */
      var initCopyCode = function(){
        var copyHtml = '';
        copyHtml += '<button class="btn-copy" data-clipboard-snippet="">';
        copyHtml += '  <i class="fa fa-globe"></i><span>copy</span>';
        copyHtml += '</button>';
        $(".highlight .code pre").before(copyHtml);
        new ClipboardJS('.btn-copy', {
            target: function(trigger) {
                return trigger.nextElementSibling;
            }
        });
      }
      initCopyCode();
    }(window, document);

  4. 在.\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
    //代码块复制按钮
    .highlight{
      //方便copy代码按钮（btn-copy）的定位
      position: relative;
    }
    .btn-copy {
        display: inline-block;
        cursor: pointer;
        background-color: #eee;
        background-image: linear-gradient(#fcfcfc,#eee);
        border: 1px solid #d5d5d5;
        border-radius: 3px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-appearance: none;
        font-size: 13px;
        font-weight: 700;
        line-height: 20px;
        color: #333;
        -webkit-transition: opacity .3s ease-in-out;
        -o-transition: opacity .3s ease-in-out;
        transition: opacity .3s ease-in-out;
        padding: 2px 6px;
        position: absolute;
        right: 5px;
        top: 5px;
        opacity: 0;
    }
    .btn-copy span {
        margin-left: 5px;
    }
    .highlight:hover .btn-copy{
      opacity: 1;
    }

  5. 在.\themes\next\layout_layout.swig文件中（我加在最后）：

    1
    2
    3
    <!-- 代码块复制功能 -->
      <script type="text/javascript" src="/js/src/clipboard.min.js"></script>  
      <script type="text/javascript" src="/js/src/clipboard-use.js"></script>

6.8 博客插入本地图片

  1. 把 主页 的post_asset_folder这个选项设置为true
    2 .在根目录下执行这样一句话npm install hexo-asset-image --save，这是下载安装一个可以上传本地图片的插件，来自dalao：dalao的git
  2. 等待一小段时间后，再运行hexo n “xxxx”来生成md博文时，/source/_posts文件夹内除了xxxx.md文件还有一个同名的文件夹
  3. 把图片放进去后，在博文中插入图片如下：
    1
    {% asset_img image.jpg This is an image %}

七、总结

  以上就是我的hexo配置了，其实我也是个小白，上面都是从一个个大佬采集过来的，但是数量太多且杂，就不一一放对应链接了；网上也有很多搭建hexo的教程，其他的配置可以自己去找。到现在我自己还有些搞不明白的，例如在新建page插入图片这种基操都不会（![]这种makedown语法显示图片貌似已经不能用了），一些别人花里胡哨的特效也搞不出来，如果有大佬能指导一下就好了；如果你是小白，当然还是小白一起共勉啦✧٩(ˊωˋ*)و✧

-------------本文结束感谢您的阅读-------------