Hexo建站小记

置顶 | 发表于 | 更新于: | 分类于 | | 热度: ℃
字数统计: 9,989 | 阅读时长 ≈ 44

前言

三月四日，建站小记。
开学事情不算多，在这个还未适应学习的时间，得找一些事情来避免这段时间被浪费掉，正好搞个blog,有兴趣，也不算完全浪费时间。

博客基本已经不被大众使用了，还在使用的多半都是些it从业者，不知为何我会喜欢一些逐渐被人们抛弃的东西，很久之前就想搞一个博客，也尝试过用wordpress，直接用的模板，最后也没有在上面坚持写字。
现在这个blog陆陆续续花了一周的时间，虽然hexo系统建立博客已经相当简单了，一个是没有基础比较愚笨（随着年龄增长越发觉得自己智商低于平均值），另一个原因是把next的很多特性都折腾了一下。
折腾了很多，最后其实样式也和官方的差不多，没有设计能力不敢大改，生怕搞出个乡村非主流，所以只能在官方的基础上修改吧。大佬们的博客很漂亮，奈何技术能力不足，尝试过模仿最后还是四不像。
试了很多发现还是next主题最漂亮,简洁
我是一个不容易坚持的人，所以不敢轻易期望能够坚持什么，也是这样，凡是我认为能够坚持的一般也不会放弃。博客应该还是能够坚持下来的，因为有记录的需求。记录一些学习的成果问题，记录一些想说的字。

日志

20190315 因为文章变多了,添加了文章分类页面,添加了轮播背景图
20190316 添加了Appveyor持续集成
20190319 更换评论为valine

建议

这是给来到这里想要建站的朋友们的建议

博客目前没有加入搜索引擎收录，所以不太可能被搜索到，如果你有幸看到这里，奇迹了。我会当作有很多人在看来写这篇博客，这样会让我写的更仔细，以后自己也方便参考。

  1. next目前是使用的最多的主题，网上能找到的教程基本都是基于next的，所以入门组好先选择next，等熟悉了前端知识和hexo的特点后就可以使用其他主题甚至自己写配置文件。
  2. 使用next主题时最先查看next官方文档,你会学到一些名词，很多网上的教程都是基于官方文档。我对比了很多后我比较喜欢默认的主题,简洁却功能丰富.
  3. 看教程时最好看完一个再看别的，一个好的教程博主都会尽可能系统的构建，你看完一篇可以更好的了解hexo，不至于再各个页面切换浪费时间。
  4. 如果你对hexo有了初步的了解就可以学习下html/css的知识，如果你想系统的学习前端入门知识，建议去w3school学习。
  5. 善用git的版本控制，很多错误的操作都可以靠它便捷的回滚，如果要了解可以从这个廖雪峰老师的网站入门。
  6. 你需要学会使用markdown语言，可以参考这篇HEXO下的Markdown语法(GFM)写博客: https://zhuzhuyule.com/blog/HEXO/HEXO下的Markdown语法(GFM)写博客.html
  7. 如果你修改了配置/主题,但是无论怎么部署都不应用,或者本地部署有用但是推送给服务器后不起作用,你可以尝试hexo clean命令清除缓存和静态文件.然后再次部署/推送.

其他注意

  • 使用HTML标签注意关闭标签的斜杠后不能有空格,虽然这是HTML推荐写法,但是加上后就不会被识别为标签.
  • 文章在编辑的时候要注意一些预定义的字符需要转译,也有些字符会导致模板渲染错误,如大括号,使用时也要转译.否则部署文章会出错.

参考链接

实现内容

很多容易找到的东西我就不写出来了，这里只记录一些我建站过程中不好找到的内容。

必要的安装

这部分比较简单参考用来简单的搭建好hexo,反正第一步要让他跑起来：

使用Hexo+Github一步步搭建属于自己的博客（基础）
使用Hexo+Github一步步搭建属于自己的博客（进阶）

我的一部分配置文件

这部分是我的一部分custom.styl代码，你可以参考我的代码做一些简单的静态样式配色修改，当你掌握css后就可以使用开发者工具坐到页面内任何元素的调整，建议使用chrome浏览器。
这个文件内的注释可以找到很多配置,其他没有包含的配置会在后面的零散配置补充
实现方法： 修改文件 >*\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
124
125
126
127
128
129
130
131
132
133
134
135
 // Custom styles.



body{   //页面主体背景
        background:url(/images/wp1_1280x1024_jpg.jpg);
        background-size:cover;
        background-repeat:no-repeat;
        background-attachment:fixed;
        background-position:center;
     }
	 
.vwrap .vcard {//valine评论背景色
    background:rgba(255 255 255,0.95) none repeat scroll !important;
}
.content {	//文章背景色
            border-radius: 5px;
            margin-top: 60px;
			padding: 60px;
            background:rgba(255 255 255,0.8) none repeat scroll !important;
         }
.main-inner {width: 900px;}

.header {	//头部颜色
          background:rgba(0 0 0,0.8) none repeat scroll !important;
        }
.footer { //底部颜色
          background:rgba(0 0 0,0.8) none repeat scroll !important;
        }
		
#lv-container { //来必力背景色
       border-radius: 10px;
       background:rgba(255 255 255,0.8) none repeat scroll !important;
    }
	
#sidebar {
            background:rgba(0 0 0,0.8) none repeat scroll !important;
            
            //p,span,a {color: 颜色代码;}
}


.post-button {  //阅读全文位置
    margin-top: 20px;
    text-align: center;
	//border-radius: 2px;
	//radius: 10px;
}
a.btn{ 
	//border-radius: 5px;
	
}
.post-button a:hover { //阅读全文颜色样式
	background: rgba(255 255 255,0.0);
	color: #8f0008;
	border-radius: 8px;
    border-bottom-color: #8f0008;	
}



// 文章标题字体
.posts-expand .post-title {
    font-size: 26px;
    font-weight: 700;
}




// 分割线样式
hr {
    color: #a40000;
}

//运行时间样式
div#days {
	//color: #a40000;
	font-size: 15px;
}
div#days:hover {
	color: #a40000;
}

//标题横线样式

.posts-expand .post-title-link::before{
	background-color: #a40000;
}

//首页按钮颜色
.menu .menu-item a:hover {
   color: #a40000;
   background: #000000;

}

//侧边栏概览目录样式
.sidebar-nav .sidebar-nav-active{
    color: white;
    border-bottom-color: #a40000;
}
.sidebar-nav:hover .sidebar-nav-active:hover{
    color: #a40000;
   
}

//侧边栏按钮三横线颜色
.sidebar-toggle-line {
    background: #000000;
}
.page-post-detail .sidebar-toggle-line {
    background: #101010;
}
//侧边栏回到顶部样式
.back-to-top{
	color: #000000;
}

//文章内链接颜色
a:hover {
	border-bottom-color: #d60036;
}

//侧栏文章目录下的颜色
.post-toc .nav .active-current > a {
    color: #eee;
}
.post-toc .nav .active > a {
    color: white;
    border-bottom-color: #d60036;
}
.post-toc .nav .active-current > a:hover {
    color: #d60036;
}

注意 有些元素在这个custom内无法修改，而是在css文件夹内的其他文件夹内，内容过于零散就不一一列出，你可以使用f12自行修改，这里只列出最基础的几个修改。代码内有一些类可能你并没有比如运行时间样式，这个是需要在主题配置文件添加代码的，如果你没有添加，上文代码依然可以全部复制到你的custom文件并不会出现错误。

零散的一些设置

博文置顶

安装置顶插件

1
2
npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save

在需要置顶的文章头加入top: true
例如

1
2
3
4
5
6
---
title: haha
date: 
categories: 默认
top: true
---

同时为了之后方便我们在模板文件种添加一个 top:
添加方法参考: 模板文件增加项目

然后在文章标题下面添加一个置顶标签样式

打开：/blog/themes/next/layout/_macro 目录下的post.swig文件，定位到div class="post-meta"标签下，插入如下代码：

1
2
3
4
5
{% if post.top %}
  <i class="fa fa-thumb-tack"></i>
  <font color=7D26CD>置顶</font>
  <span class="post-meta-divider">|</span>
{% endif %}

live2d模块

本条参考自:https://blog.yeahoo.top/

首先检查博客主目录下面的 package.json里是否有
"hexo-helper-live2d": "^3.0.3",依赖，有的话可以先卸载
使用命令：npm uninstall hexo-helper-live2d
之后再安装：npm install --save hexo-helper-live2d
注意：命令都是在你的博客主目录执行

安装完成之后在package.json会看到安装的model

此时再去 node_moduels目录下，可以看到live2d-widget

然后下载各种动画model：
地址：https://github.com/xiazeyu/live2d-widget-models.git
动画对照网站:https://huaji8.top/post/live2d-plugin-2.0/

下载好之后将packages里的需要的动画模板拷贝到博客的node_modules目录里 例如live2d-widget-model-shizuku

配置博客站点配置文件，_config.yml

1
2
3
4
5
6
7
8
9
10
11
live2d:
  enable: true
  pluginModelPath: assets/
  model:
    use: live2d-widget-model-epsilon2_1  #模板目录，在node_modules里
  display:
    position: right
    width: 150 
    height: 300
  mobile:
    show: false  #是否在手机进行显示

设置侧栏默认加载

进入主题配置文件,搜索sidebar修改它的display,有值,post,always,hide,remove文件中有注释对其说明,我选择的默认,post,自动展开侧边栏

关闭某个页面的评论

直接在 你需要禁用评论的markdown文档(.md)头加入代码(三个短横线之上)

comments: false

例如

1
2
3
4
5
Title:helloworld
Data:2011-11-11 11:11:11
Comments:false
--
正文

为每篇文章添加”本文结束”标记

效果见本文末尾

实现方法
在路径 \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;">-------------本文结束-------------</div>
    {% endif %}
</div>

接着打开\themes\next\layout_macro\post.swig文件，在post-body 之后， post-footer 之前添加如下代码

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

然后打开主题配置文件（_config.yml),在末尾添加：

Passage-end-tag:
enabled: true

此处注意:passage-end-tag.swig文件中有中文字所以最好使用utf-8编码

设置站点图标

选择好图片放置在/themses/next/source/images内
通常为两张png图片一张”16x16”一张”32x32”像素
修改 主题配置文件 下favicon的子项目为图片路径(可参考默认代码)

页面底部添加 网站总字数统计

主题配置文件post_wordcount:下的参数修改为true

Totalcount:true

需要hexo-wordcount插件支持,hexo文件夹下运行cmd输入安装代码npm install hexo-wordcount --save

添加阅读全文

方法一（推荐）

在文章中需要截断的地方添加<!--more-->
之上的文章就会出现在首页摘要并在下方显示阅读全文按钮

方法二

在你要发表的博文md文件头中添加一行description:
在description后写你想要放在首页的文字，它会出现在文章题目下的摘要区域并在下方显示阅读全文按钮。
注意description:必须要有一个英文空格再输入内容。

你也可以直接在模板文件中插入description这样就不用每篇博文都手动添加这个关键字了。
在模板文件中插入的方法见下一条

模板文件增加项目

我们通常使用hexo new post “title”创建一个空的博文，post就是你要使用的模板如果不输入就是默认模板文件，我通常就使用的默认。
下面以默认模板为例子添加页面变量项目
我们修改如下位置

~/blog/scaffolds/post.md
这个文件下下也可以创建其他的模板文件，要使用只需要在new文件的时候声明使用的哪个文件就好了，很方便。

1
2
3
4
5
6
7
8
9
10
---
title: 
date: 2018-03-04 11:10:54
updated:
tags: 
description: 
keywords:
comments:
image:
---

以上变量是我的模板文件，是几个我最常用的项目，你也可以参照下面的描述来查看自己需要哪些变量项目，需要注意的是每个变量的冒号都是英文冒号，而且冒号后必须有一个英文空格。

这是模板文件的一些解释 摘自reuixiy:https://reuixiy.github.io/technology/computer/computer-aided-art/2017/06/09/hexo-next-optimization.html
你可以在reuixiy的文章中查看更加详细的关于模板文件的解释

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

/* ！！！！！！！！！！
** 每一项的 : 后面均有一个空格
** 且 : 为英文符号
** ！！！！！！！！！！
*/
title:
/* 文章标题，可以为中文 */
date:
/* 建立日期，如果自己手动添加，请按固定格式
** 就算不写，页面每篇文章顶部的发表于……也能显示
** 只要在主题配置文件中，配置了 created_at 就行
** 那为什么还要自己加上？
** 自定义文章发布的时间
*/
updated:
/* 更新日期，其它与上面的建立日期类似
** 不过在页面每篇文章顶部，是更新于……
** 在主题配置文件中，是 updated_at
*/
permalink:
/* 若站点配置文件下的 permalink 配置了 title
** 则可以替换文章 URL 里面的 title（文章标题）
*/
categories:
/* 分类，支持多级，比如：
- technology
- computer
- computer-aided-art
则为technology/computer/computer-aided-art
（不适用于 layout: page）
*/
tags:
/* 标签
** 多个可以这样写[标签1,标签2,标签3]
** （不适用于 layout: page）
*/
description:
/* 文章的描述，在每篇文章标题下方显示
** 并且作为网页的 description 元数据
** 如果不写，则自动取 <!-- more -->
** 之前的文字作为网页的 description 元数据
** 建议每篇文章都务必加上！
*/
keywords:
/* 关键字，并且作为网页的 keywords 元数据
** 如果不写，则自动取 tags 里的项
** 作为网页的 keywords 元数据
*/
comments:
/* 是否开启评论
** 默认值是 true
** 要关闭写 false
*/
layout:
/* 页面布局，默认值是 post，默认值可以在
** 站点配置文件中修改 default_layout
** 另：404 页面可能用到，将其值改为 false
*/
type:
/* categories，目录页面
** tags，标签页面
** picture，用来生成 group-pictures
** quote？
** https://reuixiy.github.io/uncategorized/2010/01/01/test.html
*/
photos:
/* Gallery support，用来支持画廊 / 相册，用法如下：
- photo_url_1
- photo_url_2
- photo_url_3
https://reuixiy.github.io/uncategorized/2010/01/01/test.html
*/
link:
/* 文章的外部链接
** https://reuixiy.github.io/uncategorized/2010/01/01/test.html
*/
image:
/* 自定义的文章摘要图片，只在页面展示，文章内消失
** 此项只有参考本文 5.14 节配置好，否则请勿添加！
*/
sticky:
/* 文章置顶
** 此项只有参考本文 5.15 节配置好，否则请勿添加！
*/
password:
/* 文章密码，此项只有参考教程：
** http://shenzekun.cn/hexo的next主题个性化配置教程.html
** 第 24 节，配置好，否则请勿添加！
** 发现还是有 bug 的，就是右键在新标签中打开
** 然后无论是否输入密码，都能看到内容
*/

mist风格下修改博客名称双横线风格

首先网上粗略搜索没有找到修改方式，于是使用f12开发者工具（推荐使用chrome）
定位元素的class为.logo-line-before i,.logo-line-after i和.brand定位css路径为*\next\source\css\_common\components\header\site-meta.styl
步骤：
在*\next\source\css\_common\components\header\site-meta.styl添加如下代码

1
2
3
4
5
6
7
8
9
10
.brand {
  color: #a40000 !important; //头部标志颜色
  //color: $brand-color;
  position: relative;
  display: inline-block;
  padding: 0 40px;

.logo-line-before i,.logo-line-after i{ //头部双横线颜色
	background: #a40000 !important;;
}

内容居中

内容居中
见:http://wellliu.com/2016/12/29/Blog%E5%B1%85%E4%B8%AD%E8%B0%83%E6%95%B4-%E5%9F%BA%E4%BA%8ENext%E4%B8%BB%E9%A2%98/

回到顶部按钮添加百分比

修改主题配置文件如下代码:

1
2
3
# Scroll percent label in b2t button.
# 在回到顶部按钮里显示阅读百分比
  scrollpercent: true

加载条

方法一（推荐）

打开主题配置文件搜索pace，将pace的值修改为你喜欢的一个代码示例如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# Progress bar in the top during page loading.
pace: pace-theme-flash #集成的加载条
# Themes list:
#pace-theme-big-counter 大数字
#pace-theme-bounce  弹球
#pace-theme-barber-shop 全屏覆盖遮罩
#pace-theme-center-atom 中心数字
#pace-theme-center-circle
#pace-theme-center-radar
#pace-theme-center-simple 中心读条
#pace-theme-corner-indicator右上旋转
#pace-theme-fill-left   半透明遮罩
#pace-theme-flash   上读条右上角旋转
#pace-theme-loading-bar
#pace-theme-mac-osx 上读条粗
#pace-theme-minimal 上读条
# For example
# pace_theme: pace-theme-center-simple
#pace_theme: pace-theme-flash

方法二（自定义颜色）

集成的加载条我不知道怎么改变颜色所以使用的shenzekun给出的方案
实现步骤：
打开/themes/next/layout/_partials/head.swig文件
添加如下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
	
<script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
<link href="//cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css" rel="stylesheet">
	
<style>
.pace .pace-progress {
background: #1E92FB; /*进度条颜色*/
height: 3px;
}
.pace .pace-progress-inner {
box-shadow: 0 0 10px #1E92FB, 0 0 5px     #1E92FB; /*阴影颜色*/
}
.pace .pace-activity {
border-top-color: #1E92FB;    /*上边框颜色*/
border-left-color: #1E92FB;    /*左边框颜色*/
}
</style>

你可以参照代码示例自由修改颜色
注意：这样使用有小bug，如果你之前配置过主题集成的加载条请确保已经完全关闭

打开主题配置文件搜索pace，将pace值改为false，并且用“#”将 所有pace_theme:注释掉

主题添加背景图片

见:http://www.cnblogs.com/tiansha/p/6458894.html

添加轮播背景图片

jquery-backstretch是一款简单的jQuery插件，可以用来设置动态的背景图片，以下是官方网站的介绍。

A simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element.

可以直接在页面中引入该插件的cdn来调用函数，也可以直接下载下来使用，这是官方地址

通过 jquery-backstretch，具体操作呢，编辑文件/themes/next/layout/_layout.swig

1
2
3
4
5
6
7
8
9
<!--动态背景轮播-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>
<script>
  $.backstretch([  
          "/images/background/1.jpg",
          "/images/background/2.jpg",
          "/images/background/3.jpg"
    ], { duration: 10000, fade: 1500 });
</script>

直接加入到末尾就好

里可以随意添加你想要轮播的图片，但要确保图片路径是正确的，比如我的背景图片就存放在站点根目录下的images/background/目录下。

然后duration指的是轮换图片的时间，单位是毫秒，也就是说这里的代码表示一分钟就轮换到下一张图片；

fade指的是轮换图片时会有个渐进渐出的动作，而这个过程需要花费的时间单位也是毫秒，如果不加上这个参数，就表示离开轮换成下一张图片。

注意这里的$.backstretch指的是对整个页面设置背景图片，我们也可以专门给某个元素设置背景图片

1
2
$(".saber1").backstretch(\["/images/background/1.jpg"\]); 
$(".saber2").backstretch(\["/images/background/2.jpg"\]);

由于之前设置了首页背景图片博客加载的时候最先还是显示的配置的静态图片,过一会才切换

文字背景色以及半透明的设置（包含边距）

在theme/next/source/css/_custom文件夹下打开custom.styl文件，往里面添加以下代码：

1
2
3
4
5
.content {
border-radius: 10px;
margin-top: 60px;
background:rgba(颜色rgb,透明度) none repeat scroll !important;
}

由于修改后显示文字贴着边缘所以我又给上面的类.content添加了padding值如下：

1
2
3
4
5
6
.content {
border-radius: 10px;
margin-top: 60px;
background: rgba(颜色rgb,透明度) none repeat scroll !important;
padding: 60px;
}

添加鼠标飘字特效

新建一个js：

*/themes/next/source/js/src/jiazhiguan.js

在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
/* 鼠标飘字*/
var a_idx = 0;
jQuery(document).ready(function($) {
$("body").click(function(e) {
var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善");
var $i = $("<span/>").text(a[a_idx]);
a_idx = (a_idx + 1) % a.length;
var x = e.pageX,
y = e.pageY;
$i.css({
"z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": "#a40000"
});
$("body").append($i);
$i.animate({
"top": y - 180,
"opacity": 0
},
1500,
function() {
$i.remove();
});
});
});

然后在Blog\themes\next\layout\_layout.swig文件的最下方，</body>前面添加<script type="text/javascript" src="/js/src/jiazhiguan.js"></script>。

本条内容来自:https://newdee.cf/posts/

修改突出显示修改我样式

进入目录: \themes\next\source\css_custom
添加代码

1
2
3
4
5
6
//``小代码块样式
code{
  color: #A40000; // 字体颜色
  background: #bf7f8; //背景颜色
  margin: 2px;
}

修改代码高亮

首先修改站点配置文件,搜索highligth
启动文字自动检测

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

然后修改高亮主题,在主题配置文件中搜索highlight_theme

1
2
3
4
5
# Code Highlight theme
# Available value:
#    normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: night eighties

我觉得night eighties这个主题比较好看所以我用了他.

为代码块添加复制按钮

本条内容来自 恬雅过客:https://www.jianshu.com/p/3e9d614c1e77

下载脚本

首先下载第三方js脚本: clipboard.min.js

保存文件clipboard.min.js，目录如下：
.\themes\next\source\js\src

使用

在.\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);

在.\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;
}

引用

在.\themes\next\layout\_layout.swig文件中，添加引用（注：在swig末尾或body 结束标签（</body>）之前添加）：

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>

添加友情链接

在主题配置文件(Blog\themes\next_config.yml)中打开links 开关即可

1
2
3
4
5
6
7
# Blog rolls 友情链接
links_title: Links
links_layout: block
links_layout: inline
links:
  test: http://www.example.com
  test2: http://www.baidu.com

添加版权声明

本条参考:![Hexo Next下添加版权声明模块]:(https://arcecho.github.io/2017/04/08/Hexo-Next%E4%B8%8B%E6%B7%BB%E5%8A%A0%E7%89%88%E6%9D%83%E5%A3%B0%E6%98%8E%E6%A8%A1%E5%9D%97/)

首先建立HTML结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div>    
 {# 表示如果不在索引列表中加入后续的HTML代码 #}
 {% if not is_index %}
    <div class="post-copyright">
    	如果文章有问题欢迎指出,或者你也可以联系我
      <div class="post-copyright-author">
          <strong>本文作者：</strong>{{ theme.author }}
      </div>
      <div class="post-copyright-link">
        <strong>本文链接：</strong>
        <a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.path }}</a>
      </div>
      <div class="post-copyright-license">
        <strong>版权声明： </strong>
        本博客所有文章除特别声明外，均采用 <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/cn/" rel="external nofollow" target="_blank">CC BY-NC-SA 3.0 CN</a> 许可协议。转载请注明出处！
      </div>
    </div>
  {% endif %}
</div>

找到Theme文件夹(这里是next)下的layout/_Marco/post.swig文件,打开找到post-body所在的标签,在这个的标签的结束标签前加入上面的代码.这个代码是基于NexT主题的格式修改的,你也可以自己修改.

添加样式

进入Next下的source/css/_custom/custom.styl并在末尾添加如下代码

1
2
3
4
5
6
7
.post-copyright {
    margin: 2em 0 0;
    padding: 0.5em 1em;
    border-left: 3px solid #ff1700;
    background-color: #f9f9f9;
    list-style: none;
}

博文压缩

本条参考自 枫頔：https://www.jianshu.com/p/93b63852f0b3
安装gulp插件

1
npm install gulp -g  //全局安装,不加-g参数(非全局)测试失败

要实现gulp压缩需要安装以下五个模块：

  • gulp-htmlclean // 清理html
  • gulp-htmlmin // 压缩html
  • gulp-minify-css // 压缩css
  • gulp-uglify // 混淆js
  • gulp-imagemin // 压缩图片

安装模块

1
install gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-uglify gulp-imagemin --save

安装的模块可以在根目录下的package.json文件里面看到。

1
2
3
4
5
6
"gulp": "^3.9.1",
"gulp-htmlclean": "^2.7.14",
"gulp-htmlmin": "^3.0.0",
"gulp-imagemin": "^3.3.0",
"gulp-minify-css": "^1.2.4",
"gulp-uglify": "^3.0.0",

进入博客根目录，新建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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
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');
var imagemin = require('gulp-imagemin');

// 压缩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'))
});
// 压缩css
gulp.task('minify-css', function() {
    return gulp.src('./public/**/*.css')
        .pipe(minifycss({
            compatibility: 'ie8'
        }))
        .pipe(gulp.dest('./public'));
});
// 压缩js
gulp.task('minify-js', function() {
    return gulp.src('./public/js/**/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
});
// 压缩图片
gulp.task('minify-images', function() {
    return gulp.src('./public/images/**/*.*')
        .pipe(imagemin(
        [imagemin.gifsicle({'optimizationLevel': 3}), 
        imagemin.jpegtran({'progressive': true}), 
        imagemin.optipng({'optimizationLevel': 7}), 
        imagemin.svgo()],
        {'verbose': true}))
        .pipe(gulp.dest('./public/images'))
});
// 默认任务
gulp.task('default', [
    'minify-html','minify-css','minify-js','minify-images'
]);

执行压缩

1
2
hexo g
gulp  // 执行压缩，两条命令可以合并：hexo g && gulp

然后就可以执行部署命令：

1
hexo d

正文文字设置

更改选中文字背景色

修改鼠标选中部分文字的背景颜色(同时会改变代码块中的选中颜色,注意和代码块的兼容色)
\themes\next\source\css\_custom\custom.styl

添加代码

1
2
3
4
5
6
7
8
9
10
11
// 修改选中字符的颜色
// webkit, opera, IE9 
::selection { 
    background: #A40000;
    color: #f7f7f70; 
}
// firefox 
::-moz-selection { 
    background: #A40000;
    color: #f7f7f7;    
}

效果可再本博客测试

浏览器侧边滚动条

来源:https://www.jianshu.com/p/5017abb0d0a2
修改浏览器侧边滚动条样式
\themes\next\source\css\_custom\custom.style

添加代码

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
// 更好的侧边滚动条
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-button {
  width: 0;
  height: 0;
}
::-webkit-scrollbar-button:start:increment,::-webkit-scrollbar-button:end:decrement {
  display: none;
}
::-webkit-scrollbar-corner {
  display: block;
}
::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: rgba(0,0,0,.2);
}
::-webkit-scrollbar-thumb:hover {
  border-radius: 8px;
  background-color: rgba(164,0,0,.5);
}
::-webkit-scrollbar-track,::-webkit-scrollbar-thumb {
  border-right: 1px solid transparent;
  border-left: 1px solid transparent;
}
::-webkit-scrollbar-track:hover {
  background-color: rgba(164,0,0,.15);
}
::-webkit-scrollbar-button:start {
  width: 10px;
  height: 10px;
  background: url(../images/scrollbar_arrow.png) no-repeat 0 0;
}
::-webkit-scrollbar-button:start:hover {
  background: url(../images/scrollbar_arrow.png) no-repeat -15px 0;
}
::-webkit-scrollbar-button:start:active {
  background: url(../images/scrollbar_arrow.png) no-repeat -30px 0;
}
::-webkit-scrollbar-button:end {
  width: 10px;
  height: 10px;
  background: url(../images/scrollbar_arrow.png) no-repeat 0 -18px;
}
::-webkit-scrollbar-button:end:hover {
  background: url(../images/scrollbar_arrow.png) no-repeat -15px -18px;
}
::-webkit-scrollbar-button:end:active {
  background: url(../images/scrollbar_arrow.png) no-repeat -30px -18px;
}

顶部阅读进度条

这个我失败了,所以把js引入删除了.没有实现这个功能

首先
\themes\next\layout\_partials\header.swig
模板文件里加上进度条的 div.

1
<div class="top-scroll-bar"></div>

位置处于class="custom-logo-site-title"的前面

然后在
\themes\next\source\css\_custom\custom.styl
添加代码

1
2
3
4
5
6
7
8
9
10
.top-scroll-bar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    display: none;
    width: 0;
    height: 2px;
    background: #6d6d6d;
}

然后新建js脚本 \themes\next\source\js\src\custom\custom.js

1
2
3
4
5
$(document).ready(function () {
  $(window).scroll(function(){
    $(".top-scroll-bar").attr("style", "width: " + ($(this).scrollTop() / ($(document).height() - $(this).height()) * 100) + "%; display: block;");
  });
});

最后，将我们新建的那个 js脚本引入到模板，使其生效
在\themes\next\layout\_scripts\commons.swig中加入

1
'src/custom/custom.js'

位置在这一行'src/motion.js'的下面

总共修改了四个文件

添加访客统计

busuanzi 进入busuanzi官网:https://busuanzi.ibruce.info/ 可以看到使用方法

配置方法
位置\themes\next\layout\_third-party\analytics\busuanzi-counter.swig
新建如下文件.

使用如下代码代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% if theme.busuanzi_count.enable %}
<div class="busuanzi-count">
  <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

  {% if theme.busuanzi_count.site_uv %}
    <span class="site-uv">
      {{ theme.busuanzi_count.site_uv_header }}
      <span class="busuanzi-value" id="busuanzi_value_site_uv"></span>
      {{ theme.busuanzi_count.site_uv_footer }}
    </span>
  {% endif %}

  {% if theme.busuanzi_count.site_pv %}
    <span class="site-pv">
      {{ theme.busuanzi_count.site_pv_header }}
      <span class="busuanzi-value" id="busuanzi_value_site_pv"></span>
      {{ theme.busuanzi_count.site_pv_footer }}
    </span>
  {% endif %}
</div>
{% endif %}

添加分类

新建一个页面，命名为 categories 。命令如下：

1
hexo new page categories

编辑刚新建的页面，将页面的类型设置为 categories ，主题将自动为这个页面显示所有分类。

1
2
3
4
title: 分类
date: 2018-12-22 12:39:04
type: "categories"
---

注意：如果有启用多说 或者 Disqus 评论，默认页面也会带有评论。需要关闭的话，请添加字段 comments 并将值设置为 false，如：

1
2
3
4
5
title: 分类
date: 2018-12-22 12:39:04
type: "categories"
comments: false
---

在菜单中添加链接:
编辑主题配置文件 _config.yml ，将 menu 中的 categories: /categories注释去掉，如下:

1
2
3
4
5
menu:
  home: /
  categories: /categories
  archives: /archives
  tags: /tags

在每个文章的头上加入categories就可以添加分类了.

1
2
3
4
5
6
---
title: haha
date: 2019-03-16 08:12:43
tags: [haha,lala]
categories: [默认]
---

我们可以直接在模板文件中添加,这样新建的时候就不用手动添加分类了.
参看之前的 模板文件添加项目

1
2
3
4
5
6
7
8
9
10
11
---
title: {{ title }}
date: {{ date }}
updated:
tags:
description:
keywords:
comments: 
image:
categories: [默认]
---

添加搜索引擎收录

google的很简单不做介绍

问题

google的站点地图要避免出现&符号,否则站点地图会出现访问错误.所以最好在博文的标题中不要出现特殊字符.

Hexo跨博客文章推荐插件

来源:https://github.com/huiwang/hexo-recommended-posts

安装文章推荐插件：

1
npm install hexo-recommended-posts --save

配置

如果默认配置不能满足您的需求，您可以在博客根目录的_config.yml里覆盖默认配置：
原文给出的配置代码有问题,我做了修改.

1
2
3
4
5
6
7
8
9
10
# Hexo跨博客文章推荐插件
recommended_posts:
  server: https://api.truelaurel.com #后端推荐服务器地址
  timeoutInMillis: 10000 #服务时长，超过此时长，则使用离线推荐模式
  internalLinks: 3 #内部文章数量
  externalLinks: 1 #外部文章数量
  fixedNumber: false
  autoDisplay: true #自动在文章底部显示推荐文章
  excludePattern: []
  titleHtml: <h1>RECOMMEND<span style="font-size:0.45em; color:gray">(power by <a href="https://github.com/huiwang/hexo-recommended-posts">hexo recommend</a>)</span></h1> #自定义标题

其中 excludePattern 可以添加想要被过滤的链接的正则表达式, 如配置为 ["example.com"], 则所有包含 example.com 的链接都会从推荐文章中过滤掉.

fixedNumber 字段用来控制是否返回固定数量的推荐文章, 如果默认推荐文章不够的话会填充当前文章的前后文章作为推荐文章.

下载推荐文章列表

在编辑完新的文章之后，使用如下命令获取推荐列表

1
hexo recommend

为了简便我将这个命令封装到了
/hexo/appveyor.yml中

直接在hexo generate前添加一行hexo recommend

1
2
3
build_script:
  - hexo recommend
  - hexo generate

问题

乱码,不知什么原因,推荐的标题(h1标签内)乱码我就把它改成了英文

源码备份

部分来源:http://feg.netease.com/archives/634.html
使用AppVeyor持续集成你的Hexo博客

我们需要两个仓库一个是博客运行的仓库Content Repo一个源码备份仓库Source Repo

创建CI项目

注册: AppVeyor
直接使用github登陆,就会读取github的仓库数据,但是我使用github登陆失败,于是使用gitlab登陆了,然后再gitlab授权,就登陆了Appveyor

在PROJECTS页面点击【NEW PROJECT】,然后由于没有绑定github我们点击github->install….(或者是Authorize…记不太清了).绑定成功后github图标就被点亮了.

配置项目和环境变量


右侧选择你的Hexo博客所在的仓库(注意这里应该选择Source Repo),点击add

然后点击项目里的Settings->General

Default branch 如果没有设置分支,就是默认的master分支.由于我暂时没有设置其他分支就是master分支

然后点击末尾save

进入Setting->Environment标签
添加环境变量,点击Add variable
需要设置四个变量:GIT_USER_EMAIL、GIT_USER_NAME是你GitHub邮箱和用户名，STATIC_SITE_REPO是你的Content Repo地址，TARGET_BRANCH默认是master

记得点保存!

获取Access Token

参考这个文档:https://help.github.com/en/articles/creating-a-personal-access-token-for-the-command-line

Token description任意填写，下方的选项中全选repo即可。
最后，点击下方绿色的Generate token按钮。此时就能得到你的Access Token

在这个页面:https://ci.appveyor.com/tools/encrypt
加密accesstoken,的到加密后的tokeen

添加appveyor.yml到Hexo根目录

appveyor.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
clone_depth: 5
 
environment:
  nodejs_version: "8" #原始环境的node 是4.x的版本，最好升级到最新的版本，防止Hexo的插件无法安装
  access_token:
    secure: 你的加密后的accessToken
 
install:
  - ps: Install-Product node $env:nodejs_version
  - node --version
  - npm --version
  - npm install
  - npm install hexo-cli -g
 
build_script:
  - hexo generate
 
artifacts:
  - path: public
 
on_success:
  - git config --global credential.helper store
  - ps: Add-Content "$env:USERPROFILE\.git-credentials" "https://$($env:access_token):x-oauth-basic@github.com`n"
  - git config --global user.email "%GIT_USER_EMAIL%"
  - git config --global user.name "%GIT_USER_NAME%"
  - git clone --depth 5 -q --branch=%TARGET_BRANCH% %STATIC_SITE_REPO% %TEMP%\static-site
  - cd %TEMP%\static-site
  - del * /f /q
  - for /d %%p IN (*) do rmdir "%%p" /s /q
  - SETLOCAL EnableDelayedExpansion & robocopy "%APPVEYOR_BUILD_FOLDER%\public" "%TEMP%\static-site" /e & IF !ERRORLEVEL! EQU 1 (exit 0) ELSE (IF !ERRORLEVEL! EQU 3 (exit 0) ELSE (exit 1))
  - git add -A
  - if "%APPVEYOR_REPO_BRANCH%"=="master" if not defined APPVEYOR_PULL_REQUEST_NUMBER (git diff --quiet --exit-code --cached || git commit -m "Update Static Site" && git push origin %TARGET_BRANCH% && appveyor AddMessage "Static Site Updated")

大致的意思是从github仓库的当前分支拉取下来，编译成静态文件后，在push到目标分支。由于AppVeyor环境中是通过Access Token访问我们的仓库的，而Hexo自带的部署则在访问的过程中需要我们输入帐号密码，所以Hexo g -d的命令就不适合在这里使用。需要先编译成静态文件，再把public文件夹的静态文件push到目标分支。

最后，把这个文件提交到Github上就可以测试了！在AppVeyor的首页可以看到部署的过程和结果~
最后显示sucess就算成功了

问题

有可能提交后我们发现博客完全空白,查看content repo仓库后发现index.html和them目录下的next目录空白.
原因是我们的next主题是clon下来的,是一个仓库,所以不能git pull.两个解决方法:
方法一:删除目录下的 .git隐藏文件夹(删除了我依然不行)
方法儿:修改next目录名称,我改为mnext,然后修改博客配置文件中的next为mnext
问题解决了.

使用这个自动部署后我的 鼠标点击飘字的js加载失败了,但是本地使用hexo d -g发布,这个js是有效的.不知道什么原因.

应用

以后push源文件(source repo)后博客(conten repo)会在几分钟内更新.
同时不再本地环境的时候我们可以直接上github我们的仓库里直接编辑文md件,虽然不方便但依然可以做简单的修改.

自动化push

上面我们使用了持续集成,之后发布文章就只需要git push而不需要 hexo d -g 了
为了更加简单我使用自动化push.
使用windows每次push的时候都要,git add, git commit, git push
所以我使用脚本封装了命令,使用.bat脚本提交
详见:封装Git命令

在新电脑恢复HEXO

准备文件

  • 保存HEXO博客根目录所有文件
  • GIT安装包
  • nodejs安装包

安装nodejs

安装好后 npm version查看时候安装成功,成功会显示版本号等信息

如果没有梯子,建议更换npm源维淘宝的,使用命令

1
npm config set registry http://registry.npm.taobao.org/

安装GIT

安装好后设置一下github的邮箱和账户名称:

1
2
git config --global user.name [username]
git config --global user.email [email]

然后设置一下代理

1
2
git config -–global http.proxy ‘http://127.0.0.1:1080’
git config -–global https.proxy ‘https://127.0.0.1:1080’

使用命令查看一下当前用户(global)的设置

1
git config --global  --list

这样就可以看到你的代理和名称了

我这样设置了代理,虽然能看到代理配置是成功的(包括gitconfig文件也是有的),但是代理不起作用,之后看看是什么问题

安装HEXO

1
npm install hexo-cli -g

初始化Hexo目录

1
hexo init

复制原HEXO文件到现在的HEXO目录下,覆盖.或者可以不HEXO init,直接复制文件到现在的hexo目录下,删除两个git缓存目录就可以了.

使用hexo s测试本地服务启动访问localhost:4000看是否成功

设置ssh

假设本地没有ssh密钥

生成密钥,中途按几下回车就好了

1
ssh-keygen -t rsa -C "your email"

在目录C:\Users\Administrator\.ssh下找到公钥,公钥通常为id_rsa.pub复制公钥的代码.

将代码添加到github的ssh keys(setting中)中.

使用git测试是否能连接:(可能会让你输入yes,输入就可)

1
ssh -T git@github.com

如果出现

1
Hi humingx! You’ve successfully authenticated, but GitHub does not provide shell access.

就说明成功了.

测试上传博客

1
hexo d -g

上传一下博客内容看看是否成功.

通过bat使用git直接打开hexo目录

在hexo根目录创建bat文件startGitHere.bat

1
start D:\Git\git-bash.exe --cd=F:\Code\Github\myfirst_hexo

两个第一个路径为gitbash的路径(也可以把bash加入环境变量,懒得加了),第二个路径为hexo博客的路径.

这样就不需要层层打开目录了.

结尾

还会随着使用更新

如果文章有问题欢迎指出,或者你也可以联系我
本文作者：E1se
本文链接： 2018/03/04/建站小记/
版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 CN 许可协议。转载请注明出处！
-------------本文结束-------------
0%