Hexo的配置

Hexo的一些心得

Hexo 的部署心得

切记如果部署不生效记得执行

1
2
3
4
5
hexo clean
hexo g
hexo s
hexo d
hexo d -g //生成并上传

关于tags和categories

创建tags和categories

1
2
hexo new page categories
hexo new page tags

这两段在NexT中的_config.yml中自动设置menu了,然后可以跳转了

接下来在source中就有了tags和categories文件夹了

打开里面的index.md进行编辑

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

然后在文章的开头增加tags和categories就自动归类了

Nest 背景

国际惯例献上github

  1. 打开next/layout/_layout.swig

</body>之前添加如下代码

1
2
3
{% if theme.canvas_nest %}
<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}

也可以自己设置

1
2
3
4
{% if theme.canvas_nest %}
<script type="text/javascript"
color="224,222,41" opacity='0.5' zIndex="-2" count="300" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}
  • color :线条颜色, 默认: '0,0,0';三个数字分别为(R,G,B)
  • opacity: 线条透明度(0~1), 默认: 0.5
  • count: 线条的总数量, 默认: 150
  • zIndex: 背景的z-index属性,css属性用于控制所在层的位置, 默认: -1

Nest的具体js位置

source/lib/canvas-nest/canvas-nest.min.js

  1. 打开/next/_config.yml,添加以下代码

    1
    2
    3
    4
    5
    6
    7
    # --------------------------------------------------------------
    # background settings
    # --------------------------------------------------------------

    # add canvas-nest effect
    # see detail from https://github.com/hustcc/canvas-nest.js
    canvas_nest: true

关于github图标

http://tholman.com/github-corners/

粘贴刚才复制的代码到themes/next/layout/_layout.swig文件中(放在<div class="headband"></div>的下面),并把href改为你的github地址

旋转头像

打开\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);
}
}

链接颜色

修改文件 themes\next\source\css\_common\components\post\post.styl,在末尾添加如下css样式,:

1
2
3
4
5
6
7
8
9
10
11
// 文章内链接文本样式
.post-body p a{
color: #0593d3;
border-bottom: none;
border-bottom: 1px solid #0593d3;
&:hover {
color: #fc6423;
border-bottom: none;
border-bottom: 1px solid #fc6423;
}
}

其中选择.post-body 是为了不影响标题,选择 p 是为了不影响首页“阅读全文”的显示样式,颜色可以自己定义。

页脚

在路径 \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
{% if not is_index %}
<div>
{% include 'passage-end-tag.swig' %}
</div>
{% endif %}

关于图标

打开主题配置文件(_config.yml),搜索social_icons:,在图标库找自己喜欢的小图标,并将名字复制在如下位置

主页文章添加阴影效果

打开\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);
}

代码块颜色

1
highlight_theme: normal

内建标签

居中

1
2
3
4
5
6
7
<blockquote class="blockquote-center">blah blah blah</blockquote>

<!-- 标签 方式,要求版本在0.4.5或以上 -->
{% centerquote %}blah blah blah{% endcenterquote %}

<!-- 标签别名 -->
{% cq %} blah blah blah {% endcq %}

md展示

1
2
3
4
5
6
{% note default %} Content (md partial supported of default) {% endnote %}
{% note primary %} Content (md partial supported of primary) {% endnote %}
{% note success %} Content (md partial supported of success) {% endnote %}
{% note info %} Content (md partial supported of info) {% endnote %}
{% note warning %} Content (md partial supported of warning) {% endnote %}
{% note danger %} Content (md partial supported of danger) {% endnote %}

试一试 (md partial supported of primary)

内建标签显示错误

1
<div class="note class_name">Content</div>
Content
Content
Content
Content
Content
Content

image-20190125181131733

在markdown.json中加入

1
`"HTML Note": {    "prefix": "hnote",    "body": "<div class=\"note ${1:class_name}\"><p>${2:Content}</p></div>$0",    "description": "default,primary,success,info,warning,danger"},`

字数统计

1
$ npm install hexo-wordcount --save

在NexT的_config.yml中指定

1
2
3
4
5
6
post_wordcount:
item_text: true
wordcount: true
min2read: true
totalcount: true
separated_meta: true

添加加载进度

打开/themes/next/layout/_partials/head.swig文件,在下添加代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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: #000000; /*进度条颜色*/
height: 2px;
}
.pace .pace-progress-inner {
box-shadow: 0 0 10px #FFFFFF, 0 0 10px #FFFFFF; /*阴影颜色*/
}
.pace .pace-activity {
border-top-color: #1E92FB; /*上边框颜色*/
border-left-color: #1E92FB; /*左边框颜色*/
}
</style>

google站点地图

https://www.jianshu.com/p/f8ec422ebd52

百度站点地图

首先用文件验证不行,因为swig会自动给html加入代码

其次网页代码用swig添加head也不行,https问题

CNAME验证,在阿里云的域名管理中,添加CDN解析,按照百度提供的东西添加CDN解析就可以验证了

或者让hexo不渲染文件

1
2
skip_render:
static/**

抓取

在head.swig根据百度提供的api添加对应的JS脚本就可以了

评论系统

主要是申请valine

然后在config.yml中填写相应的appid appkey

1
Code 403: 访问被api域名白名单拒绝,请检查你的安全域名设置.

白名单问题,后台设置 安全中心里面https://www.tianhao.info/填写成https://www.tianhao.info了

隐藏部分文章

github源码

首先npm两个库

1
2
$ npm install hexo-generator-index2 --save
$ npm uninstall hexo-generator-index --save

然后配置选项

1
2
3
4
5
6
7
8
9
10
11
# index2 generator是否包含官方的hexo-generator-index,默认true(包含)
index2_include_index: true # defult is true

# 配置index2 generator,可以是数组或对象
index2_generator:
per_page: 10
order_by: -date
include:
- category Web # 只包含Web分类下的文章
exclude:
- tag Hexo # 不包含标签为Hexo的文章

关于Gantt之mermaid

首先赞一下gantt还是mermaid大法好

用习惯了gantt的同学可能有些懵Hexo怎么集成Gannt呢?下面对于常用的NexT来说

官方网站

个人GitHub集成

安装hexo-filter-mermaid-diagrams

1
$ yarn add hexo-filter-mermaid-diagrams

修改_config.yml文件

首先在_config.yml文件中找到插入下面这段话

1
2
3
4
5
6
# mermaid chart 
mermaid: ## mermaid url https://github.com/knsv/mermaid
enable: true # default true
version: "7.1.2" # default v7.1.2
options: # find more api options from https://github.com/knsv/mermaid/blob/master/src/mermaidAPI.js
#startOnload: true // default true

写入插件

官方介绍要找到after_footer文件,但是NexT中没有这个文件,我试着插入到foot文件中成功!

1
/Users/toto/blog/themes/hexo-theme-next/layout/_partials/footer.swig

官方定义了两种语言后缀,github上有第三种分别是

嵌入式JS模板引擎-EJS

基于Node.js的模板引擎 分别是 jade改名后的pug 和swig

  • after_footer.pug

    1
    2
    3
    4
    5
    6
    7
    if theme.mermaid.enable == true
    script(type='text/javascript', id='maid-script' mermaidoptioins=theme.mermaid.options src='https://unpkg.com/mermaid@'+ theme.mermaid.version + '/dist/mermaid.min.js' + '?v=' + theme.version)
    script.
    if (window.mermaid) {
    var options = JSON.parse(document.getElementById('maid-script').getAttribute('mermaidoptioins'));
    mermaid.initialize(options);
    }
  • after-footer.ejs

    1
    2
    3
    4
    5
    6
    7
    8
    <% if (theme.mermaid.enable) { %>
    <script src='https://unpkg.com/mermaid@<%= theme.mermaid.version %>/dist/mermaid.min.js'></script>
    <script>
    if (window.mermaid) {
    mermaid.initialize({theme: 'forest'});
    }
    </script>
    <% } %>
  • foot.swig

    1
    2
    3
    4
    5
    6
    7
    8
    {% if theme.mermaid.enable %}
    <script src='https://unpkg.com/mermaid@{{ theme.mermaid.version }}/dist/mermaid.min.js'></script>
    <script>
    if (window.mermaid) {
    mermaid.initialize({{ JSON.stringify(theme.mermaid.options) }});
    }
    </script>
    {% endif %}

看效果图

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts 
prevail... John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!

写在最后

写法呢和在Typora中的mermaid一样三个点加mermaid

但是一定要注意!换行的缩进,否则显示不出来,这个蛋疼的问题查了很久。。。

好文章

https://blog.csdn.net/qq_33699981/article/details/72716951

谢谢您的鼓励~