hexo折腾记录

全宇宙最全hexo/next指南整合

须知

最全最清楚的hexo官方文档

https://easyhexo.com/

https://theme-next.org

注意:请不要用系统自带的记事本打开配置文件,因为编码问题会导致编译失败!
本人用的是Notepad++,需要的朋友可以到此处:npp_6.9.2下载。

预览

特性

  • Coding+Github+Gitee 三重无死角同时部署 Coding的快速+github的稳定+gitee的备份

编辑器typora

image-20200108121136351

配置 默认目录,这样每次打开软件直接显示目录

image-20200108121228565

image-20200108123719588

修改默认路经为为的博客根目录

1
cmd /k "%ConEmuDir%\..\init.bat"  -new_console:d: -new_console:d:D:\openSource\gitee\ysygitee\hexo

初次体验

环境要求NodeJS

默认你已经安装了的Git和的NodeJS(推荐使用CNPM)

下载安装Git

img

Git下载地址

安装步骤

img

个人选择全选

im g

选择第二个

然后一路默认

下载安装node.js

  • node.js下载地址 安装步骤:一路默认就行(安装路径根据自己需要更改)

安装Hexo

打开 shell 终端,输入命令npm install -g hexo

1
$ sudo cnpm install -g hexo

注:如果提示权限错误,命令前加sudo的,CNPM是淘宝的开源镜像,访问国内比NPM快。

  • 初始化Hexo 你在电脑的上创建³³Hexo文件夹数,在外壳中终端到e月刊Hexo目录,输入命令hexo init
1
$ cd /work/Hexo

完成初始化后Hexo的目录结构:

本地浏览博客

输入 如下命令:

1
hexo g && hexo s

这里有更多hexo常用命令

im g

在浏览器输入:localhost:4000 ,就可以进行访问,效果如下:

img

选择主题

刚开始搭的时候,选择一个适(zhuang)合(bi)的主题,那肯定是必须的,主题选择,在这个网站上先选择一个心仪的主题,我个人选择的是hexo-themes-matery,下面就已hexo-themes-matery主题来举例.

下载主题

如果选择跟我一样的,那么到这个网站下载hexo-themes-matery,然后再你的博客路径下面站到themes文件夹

我的路径

或者cd 到themes文件夹路径下,执行

1
git clone https://github.com/blinkfox/hexo-theme-matery.git

更换默认主题

修改 Hexo 根目录下的 _config.yml 的 theme 的值:theme: hexo-theme-matery

然后执行

1
$ hexo clean && hexo g && hexo s

hexo clean : 清除缓存文件 (db.json) 和已生成的静态文件 (public)。
hexo g : 生成静态文件。
hexo s : 启动服务器。

之后访问localhost:4000就可以看到你的博客更换过后的主题

自定义页面

分类

1.1 生成“分类”页并添加tpye属性

打开命令行,进入博客所在文件夹。执行命令

1
$ hexo new page categories

成功后会提示:

1
INFO  Created: ~/Documents/blog/source/categories/index.md

根据上面的路径,找到index.md这个文件,打开后默认内容是这样的:

1
2
3
4
---
title: 文章分类
date: 2017-05-27 13:47:40
---

添加type: "categories"到内容中,添加后是这样的:

1
2
3
4
5
---
title: 文章分类
date: 2017-05-27 13:47:40
type: "categories"
---

保存并关闭文件。

给文章添加“categories”属性

打开需要添加分类的文章,为其添加categories属性。下方的categories: web前端表示添加这篇文章到“web前端”这个分类。注意:hexo一篇文章只能属于一个分类,也就是说如果在“- web前端”下方添加“-xxx”,hexo不会产生两个分类,而是把分类嵌套(即该文章属于 “- web前端”下的 “-xxx ”分类)。

1
2
3
4
5
6
---
title: jQuery对表单的操作及更多应用
date: 2017-05-26 12:12:57
categories:
- web前端
---

至此,成功给文章添加分类,点击首页的“分类”可以看到该分类下的所有文章。当然,只有添加了categories: xxx的文章才会被收录到首页的“分类”中。

关于

https://tding.top/about/

标签

2.1 生成“标签”页并添加tpye属性

打开命令行,进入博客所在文件夹。执行命令

1
$ hexo new page tags

成功后会提示:

1
INFO  Created: ~/Documents/blog/source/tags/index.md

根据上面的路径,找到index.md这个文件,打开后默认内容是这样的:

1
2
3
4
---
title: 文章分类
date: 2017-05-27 13:47:40
---

添加type: "tags"到内容中,添加后是这样的:

1
2
3
4
5
---
title: 文章分类
date: 2017-05-27 13:47:40
type: "categories"
---

保存并关闭文件。

给文章添加“tags”属性

打开需要添加标签的文章,为其添加tags属性。下方的tags:下方的- jQuery - 表格
- 表单验证就是这篇文章的标签了

1
2
3
4
5
6
---
title: jQuery对表单的操作及更多应用
date: 2017-05-26 12:12:57
categories:
- web前端
---

至此,成功给文章添加分类,点击首页的“标签”可以看到该标签下的所有文章。当然,只有添加了tags: xxx的文章才会被收录到首页的“标签”中。

细心的朋友可能已经发现,这两个的设置几乎一模一样!是的,没错,思路都是一样的。所以我们可以打开scaffolds/post.md文件,在tages:上面加入categories:,保存后,之后执行hexo new 文章名命令生成的文件,页面里就有categories:项了。

scaffolds目录下,是新建页面的模板,执行新建命令时,是根据这里的模板页来完成的,所以可以在这里根据你自己的需求添加一些默认值

友情页面

创建页面

在 hexo 目录下的 source 文件夹内创建一个名为 links(只是建议,可根据自己喜好修改)的文件夹。

然后在文件内创建一个名为 index.md 的 Markdown 文件。

index.md 文件内写入如下内容即可。

1
2
3
4
5
---
title: links
date:
layout: links
---
1
2

links: /links || archive

添加:themes\next-v7.4.2\languages\zh-CN.yml

1
2
3
menu:
......
links: 友链

写文章

在E:\Hexo\source_posts文件下,新建.md文件就可以写文章

img

新建.md文件

1
2
3
---
title: 我的博客
---

img

简单测试下

文章模板

如果你是在站点文件夹根目录用 hexo new post 新建的文章,那么其实它就是将文章的模版文件 post.md「复制」了一份到 ~/blog/source/_posts/ 下,所以这也意味着:

  1. 你可以直接通过在 ~/blog/source/_posts/ 下新建 .md 结尾的文件来写新的文章。
  2. 你可以通过自定义文章的模版文件,从而每次命令行新建的文章都会有你自定义的内容。

注意:如果自己直接新建文件,一定要记得加上文件最上方的参数,即下面的相关内容,还有编码请用 UTF-8。

关于文件最上方的参数,参见 Hexo 官方文档的 Front-matter页面变量,下面是我的总结:

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
# !!!!!!!!!!
# 每一项的 : 后面均有一个空格
# 且 : 为英文符号
# !!!!!!!!!!

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://io-oi.me/tech/hello-world/

photos:
# Gallery support,用来支持画廊╱相册,用法如下:
# - photo_url_1
# - photo_url_2
# - photo_url_3
# https://io-oi.me/tech/hello-world/

link:
# 文章的外部链接
# https://io-oi.me/tech/hello-world/

image:
# 自定义的文章摘要图片,只在页面展示,文章内消失
# 此项只有参考本文 5.14 节配置好,否则请勿添加!

sticky:
# 文章置顶
# 此项只有参考本文 5.15 节配置好,否则请勿添加!

password:
# 文章密码,此项只有参考教程:
# http://shenzekun.cn/hexo的next主题个性化配置教程.html
# 第 24 节,配置好,否则请勿添加!
# 发现还是有 bug 的,就是右键在新标签中打开
# 然后无论是否输入密码,都能看到内容

图片

首先设置typ的自动粘贴图片设置。

image-20200131134927935

设置完之后 复制图片到文章就会自动创建 以md文件名一致的文件夹,并拷贝图片到里面

image-20200131135213807

部署到Github上

1、申请Github账号,(注意别忘了进行账号邮箱验证)

2.new repository

image-20200108215222486

image-20200107194550601

然后点击 Create repository

3、在_config.yml进行配置

image-20200108215415172

(注意:要保存)

4、安装hexo-deployer-git自动部署发布工具

1
cnpm install hexo-deployer-git --save

image-20200108215448532

(在Hexo文件夹下 Git Bash)

5、发布到Github

输入如下命令:

1
hexo clean && hexo g && hexo d

image-20200107194849413

image-20200108214829510

第一次发布需要验证github账号

image-20200108211816249

发布完成

image-20200108215643108

在仓库中我们也可以看到

6、测试访问

在浏览器输入: https://ysyluminous.github.io

image-20200108215727298

添加自定义菜单

以新建「相册」菜单为例:在博客目录下的 source 文件夹下新建名为 photo 文件夹,然后在 photo 文件夹下新建一个 index.md 文件,然后在该文件填写:

1
2
3
4
5
---
title: 相册
date: 2018-04-16 22:14:07
type: "photo"
---

然后打开主题配置文件 _config.yml,在 menu 中添加:

1
2
3
4
5
6
7
menu:
home: / || home
archives: /archives || archive
categories: /categories || th
tags: /tags || tags
#添加了「相册」菜单
相册: /photo || camera

解释下:这里的「相册」是博客中显示的菜单名称,紧跟的 photo 要和前面 index.md 文件的 type 值一致,|| 后面的菜单的图标,图标名称来自于 FontAwesome icon,若没有配置图标,默认会使用问号图标。

参考:hexo高阶教程:next主题优化之加入网易云音乐、网易云跟帖、炫酷动态背景、自定义样式,打造属于你自己的定制化博客

高级配置

根目录下_config.yml的配置

Site设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Site 站点
# 网站标题
title: 清欢的博客
# 网站副标题
subtitle: 为者常成,行者常至!<br> Just Do It!
# 网站描述, 主要用于 SEO,告诉搜索引擎一个关于您站点的简单描述,通常建议在其中包含您网站的关键词。
description: 清欢 的个人博客
keywords: "清欢, 个人博客"
# 您的名字, author 参数用于主题显示文章的作者。
author: YaoSiyuan
# 网站使用的语言
language: zh-CN
# 网站时区。Hexo 默认使用您电脑的时区。时区列表。比如说:America/New_York, Japan, 和 UTC 。
timezone: Asia/Shanghai

URL栏设置

翻页设置

Deployment设置

参考备份

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
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site 站点
# 网站标题
title: 清欢的博客
# 网站副标题
subtitle: 为者常成,行者常至!<br> Just Do It!
# 网站描述, 主要用于 SEO,告诉搜索引擎一个关于您站点的简单描述,通常建议在其中包含您网站的关键词。
description: 清欢 的个人博客
keywords: "清欢, 个人博客"
# 您的名字, author 参数用于主题显示文章的作者。
author: YaoSiyuan
# 网站使用的语言
language: zh-CN
# 网站时区。Hexo 默认使用您电脑的时区。时区列表。比如说:America/New_York, Japan, 和 UTC 。
timezone: Asia/Shanghai


# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://yaosiyuancoding.coding.me
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
trailing_index: true # Set to false to remove trailing index.html from permalinks

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link:
enable: true # Open external links in new tab
field: site # Apply to the whole site
exclude:
filename_case: 0
render_drafts: false
post_asset_folder: true
relative_link: false
future: true
highlight:
enable: true
line_number: true
auto_detect: false
tab_replace:

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
path: ''
per_page: 10
order_by: -date

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Metadata elements
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
meta_generator: true

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
## Use post's date for updated date unless set in front-matter
use_date_for_updated: false

# Pagination
## Set per_page to 0 to disable pagination
per_page: 15 # 分页每页显示的文章量 (0 = 关闭分页功能)
pagination_dir: page

# Include / Exclude file(s)
## include:/exclude: options only apply to the 'source/' folder
include:
exclude:
ignore:

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next-v7.4.2



# Deployment 远程部署设置
## Docs: https://hexo.io/docs/deployment.html
deploy:
- type: git
# github
# 码云
repo:
#码云
#gitee: git@gitee.com:ysygitee/ysygitee.git
coding: https://git.dev.tencent.com/yaosiyuancoding/yaosiyuancoding.git
github: https://github.com/ysyluminous/ysyluminous.github.io.git
# repo: https://git.dev.tencent.com/yaosiyuancoding/ysygitee.git
branch: master # 部署到主分支
- type: baidu_url_submitter

baidu_url_submit:
count: 100 ## 比如3,代表提交最新的三个链接
host: https://yaosiyuancoding.coding.me ## 在百度站长平台中注册的域名
token: 9YRYBFQpbMeCWpxj ## 请注意这是您的秘钥, 请不要发布在公众仓库里!
path: baidu_urls.txt ## 文本文档的地址, 新链接会保存在此文本文档里

douban:
user: 190434227
builtin: true
book:
title: '书如人生 人生如书'
quote: '由来富贵原如梦 未有神仙不读书'
movie:
title: 'This is my movie title'
quote: 'This is my movie quote'
timeout: 10000

使用 Next 主题

下载最新 release 版本

选择好相应的 release 版本。使用 curl、tar 和 wget 安装 (此处已加上版本号,使用时需要手动替换版本号):

复制

1
$ mkdir themes/next-v6.6.0$ curl -s https://api.github.com/repos/theme-next/hexo-theme-next/releases/latest | grep tarball_url | cut -d '"' -f 4 | wget -i - -O- | tar -zx -C themes/next-v6.6.0 --strip-components=1

启用 Next 主题

修改站点配置文件/_config.yml,启用Next主题:

复制

1
# Extensions## Plugins: https://hexo.io/plugins/## Themes: https://hexo.io/themes/# theme: landscapetheme: next-v6.6.0 # 启用 Next 主题

启用了Next主题后,就可以对Next主题进行相应的优化和个性化定制了。

以 Hexo 方式使用 Hexo 数据文件特性

将全部配置都将置于hexo站点配置文件/_config.yml中,将主题配置文件的所有项复制到站点配置文件中进行修改,不需要修改主题配置文件/themes/next-xxx/_config.yml,或者创建其他的配置文件。但是所有的主题选项必须放置在 theme_config: 后,并全部增加两个空格的缩进。

如果在新的 release 中出现了任何新的选项,那么你只需要从 next/_config.yml 中将他们复制到 hexo/_config.yml中并设置它们的值为你想要的选项。

nextV7.4主题目录下_config.yml的配置

网站Logo设置

页脚设置

版权信息

Github角标

侧边栏菜单设置 2.2.6. 主题选择 2.2.7. 社交网站链接设置 2.2.8. 头像设置 2.2.9. 侧边栏目录设置 2.2.10. 侧边栏显示设置 2.2.11. 返回顶部按钮 2.2.12. 开启阅读全文选项 2.2.13. 代码块复制按钮 2.2.14. 打赏 2.2.15. 代码块高亮主题 2.2.16. 书签 2.2.17. 开启RSS 2.2.18.

数据统计与分析

百度统计

  1. 登录 百度统计,定位到站点的代码获取页面
  2. 复制 hm.js? 后面那串统计脚本 id,如下图所示:
    img
  3. 编辑 主题配置文件, 修改字段 baidu_analytics,值设置成你的百度统计脚本 id。

Google 分析

编辑 主题配置文件, 修改字段 google_analytics, 值设置成你的 Google 跟踪 ID。跟踪 ID 通常是以 UA- 开头。 img

腾讯分析

请登录 腾讯分析,登录并获取分析的 ID。 然后在 主题配置文件 里将 ID 放置 tencent_analytics 字段。

CNZZ 统计

主题配置文件 中增加了一项 cnzz_siteid的配置项,值为 CNZZ 里面添加统计的站点ID。 这个ID可以在地址栏里,或者自动生成的脚本里面找到。

默认脚本生成的内容会产生“站长统计”几个字,感觉很丑而且和主题不太搭,我用了一个 display: none;把这几个字给隐藏了。

加载条

https://juejin.im/post/5c7d4700e51d4541d82d8b6b

页脚设置

网站创建时间

1
2
3
next/_config.yml
footer:
since: 2015

阅读进度

NexT supports the page scroll reading progress indicator.

You can enable it by setting value reading_progress.enable to true in theme config file.

1
2
3
4
5
next/_config.yml
reading_progress:
enable: true
color: "#37c6c0"
height: 2px

页面搜索

本地搜索

1
# 安装插件:cnpm install hexo-generator-searchdb --save

next自带

1
2
3
4
5
6
7
8
9
10
11
12
13
# Local Search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
enable: true
# If auto, trigger search by changing input.
# If manual, trigger search by pressing enter key or search button.
trigger: auto
# Show top n results per article, show all results by setting to -1
top_n_per_article: 1
# Unescape html strings to the readable one.
unescape: false
# Preload the search data when the page loads.
preload: false

PJAX

Change dir to NexT directory, and install module to source/lib directory.

1
2
$ cd themes/next
$ git clone https://github.com/theme-next/theme-next-pjax source/lib/pjax

If you want to use the CDN instead of clone this repo, then need to set vendors in theme config file:

1
2
3
4
5
next/_config.yml
vendors:
...
pjax: //cdn.jsdelivr.net/gh/theme-next/theme-next-pjax@0/pjax.min.js
...

After the plugin installed, you can enable it by setting value pjax to true in theme config file.

1
2
3
4
5
next/_config.yml
# Easily enable fast Ajax navigation on your website.
# Dependencies: https://github.com/theme-next/theme-next-pjax
# For moreinformation: https://github.com/MoOx/pjax
pjax: true

动态背景

目前NexT支持两类动态背景:canvas_nest和JavaScript 3D library。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
canvas_nest:
enable: true
onmobile: true # display on mobile or not
color: '255,255,255' # RGB values, use ',' to separate
opacity: 0.5 # the opacity of line: 0~1
zIndex: -1 # z-index property of the background
count: 99 # the number of lines

# three_waves
three_waves: false
# canvas_lines
canvas_lines: false
# canvas_sphere
canvas_sphere: false

这两种动态背景都需要先克隆git仓库:

1
2
3
4
5
6
7
cd themes/next

#canvas_nest
git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest

#JavaScript 3D library
git clone https://github.com/theme-next/theme-next-three source/lib/three

然后再进行设置。

评论系统

Valine (China)

Valine is a fast, simple & efficient Leancloud based no back end comment system.

  1. Create an account or log into LeanCloud, and then click on the bottom left corner to create the application in dashboard.

  2. Go to the application you just created, select Settings -> Apply Key in the lower left corner, and you will see your APP ID and APP Key.

  3. Set the value enable to true, add the obtained APP ID (appid) and APP Key (appkey), and edit other configurations in valine section in the theme config file as following:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    next/_config.yml# 
    # Valine
    # You can get your appid and appkey from https://leancloud.cn
    # more info please open https://valine.js.org
    valine:
    enable: false # When enable is set to be true, leancloud_visitors is recommended to be closed for the re-initialization problem within different leancloud adk version.
    appid: # your leancloud application appid
    appkey: # your leancloud application appkey
    notify: false # mail notifier , https://github.com/xCss/Valine/wiki
    verify: false # Verification code
    placeholder: Just go go # comment box placeholder
    avatar: mm # gravatar style
    guest_info: nick,mail,link # custom comment header
    pageSize: 10 # pagination size
    visitor: false # leancloud-counter-security is not supported for now. When visitor is set to be true, appid and appkey are recommended to be the same as leancloud_visitors' for counter compatibility. Article reading statistic https://valine.js.org/visitor.html
    comment_count: true # If false, comment count will only be displayed in post page, not in home page
    recordIP: false # Whether to record the commenter IP
    serverURLs: # When the custom domain name is enabled, fill it in here (it will be detected automatically by default, no need to fill in)

next使用

摘要

截断

eg:

1
2
3
4
5
6
---
title:demo
---

实用软件推荐,满满的干货,总有一款是你必备的
<!--more-->

https://theme-next.org/docs/tag-plugins/note

next-新版主题配置

https://walesexcitedmei.github.io/2018/08/30/HEXO-NexT-%E4%B8%BB%E9%A2%98%E6%8F%90%E9%AB%98%E5%8D%9A%E5%AE%A2%E9%A2%9C%E5%80%BC/

https://www.wumingx.com/tools/next-confgig-up

https://www.fuxiyuchen.xyz/2019/08/05/next-%E6%96%B0%E7%89%88%E4%B8%BB%E9%A2%98%E9%85%8D%E7%BD%AE/

深度定制

3.1. 顶部阅读进度条 3.2. 加载条 3.3. 动态背景 3.4. 鼠标点击特效 3.5. Live2D看板娘 3.6. 网易云挂件 3.7. 折叠代码块功能 3.8. 网站标题崩溃欺骗 3.9. 背景及半透明效果 3.10. 修改超链接样式 3.11. 修改文章底部标签样式 3.12. 在文章结尾添加本文结束标志 3.13. 博文压缩 3.14. 修改代码块颜色 3.15. 网站运行时间 3.16. 访客统计 3.17. 字数统计和阅读时长统计 3.18. 文章加密访问 3.19. 文章置顶 3.20. 修改默认字体大小 3.21. 自定义鼠标样式 3.22. 图片懒加载 3.23. 添加评论系统 3.24. 自定义404页面

Hexo框架Next主题的文章内音乐播放和视频播放

第三方插件

豆瓣插件

hexo-douban的Github链接:hexo-douban的Github地址

安装模块依赖

我们使用时可以先安装依赖模块,在GitBash中使用以下命令:

1
cnpm install hexo-douban --save

站点配置文件中添加配置

然后我们再在Hexo站点根目录配置文件_config.xml中的末尾添加如下配置:

1
2
3
4
5
6
7
8
9
10
11
12
13
douban:
user: 190434227
builtin: true
book:
title: 'This is my book title'
quote: 'This is my book quote'
movie:
title: 'This is my movie title'
quote: 'This is my movie quote'
game:
title: 'This is my game title'
quote: 'This is my game quote'
timeout: 10000

上面参数说明:

  • user: 你的豆瓣ID.打开豆瓣,登入账户,然后在右上角点击 “个人主页” ,这时候地址栏的URL大概是这样:”https://www.douban.com/people/xxxxxx/“ ,其中的”xxxxxx”就是你的个人ID了。
  • builtin: 是否将生成页面的功能嵌入hexo shexo g中,默认是false,另一可选项为true(1.x.x版本新增配置项)。
  • title: 该页面的标题.
  • quote: 写在页面开头的一段话,支持html语法.
  • timeout: 爬取数据的超时时间,默认是 10000ms ,如果在使用时发现报了超时的错(ETIMEOUT)可以把这个数据设置的大一点。

由于hexo-douban 是默认抓取豆瓣读书、豆瓣电影以及豆瓣游戏的,如果只想要其中一部分,可以把其它部分在上述配置文件中去掉即可。

启动

那么我们如何去使用这个呢?

我们只需要在GitBash中输入以下命令:

hexo clean && hexo douban -bgm && hexo g && hexo s

即可,注意其中开启hexo-douban的命令中,-bgm`代表的是book、game、movie三个参数,如果只需要其中的一部分就只带你想要的那些参数。

另外注意的是,由于hexo douban的简写也是hexo d,与hexo deploy的简写指令hexo d冲突,因此在进行二者部署的时候,只能都打全名而不能打简写形式。

测试

上面都没问题之后,我们只需要在站点目录下测试http://localhost:4000/books或者http://localhost:4000/movies等,如果看到页面了就说明成功了。

部署

如果上述都没有问题,我们就可以在菜单栏中添加按钮了,打开主题配置文件_config.xml,找到菜单按钮,可以选择性的添加下面内容:

1
2
3
4
5
6
7
8
9
10
11
menu:
home: / || home
tags: /tags/ || tags
categories: /categories/ || th
archives: /archives/ || archive
books: /books || archive # 这是链接到books页面
movies: /movies || archive # 这是链接到movies页面
about: /about/ || user
#schedule: /schedule/ || calendar
#sitemap: /sitemap.xml || sitemap
#commonweal: /404/ || heartbeat

注意添加完成之后按钮并不是中文的,这是由于在languages文件夹下面的zh-CN(中文语言配置文件)没有添加上述对应的中文参数信息,所以我们需要主动添加。

语言文件夹在你的主题配置文件夹下面,比如我的是使用的next主题,则是在E:\blog\hexo\themes\next\languages目录下,找到zh-CN文件,在menu菜单下添加:

1
2
3
4
menu:
books: 阅读
movies: 电影
games: 游戏

即可完成中文化自定义菜单。

Hexo-abbrlink生成唯一永久文章链接

前言

在做次优化之前,hexo-next文章链接默认的生成规则是::year/:month/:day/:title,是按照年、月、日、标题来生成的。
比如:https://leafjame.github.io/2019/08/12/hello-world/ 这样,如果文章标题是中文的话,URL链接是也会是中文,

img

image

复制后的链接是一长串,非常不利于阅读,也不简洁。。。?

http://localhost:4000/2019/08/13/tech/hexo/Hexo%20Next%E4%B8%BB%E9%A2%98%E6%B7%BB%E5%8A%A0%E5%93%88%E6%9E%97%E6%91%87%E7%89%B9%E6%95%88/

一种解决方案是:使用hexo-permalink-pinyin插件,将中文转英文,参考我的这篇文章:Hexo NexT中文链接转拼音(关于中文md文件名的问题)

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

那能不能生成唯一不变的URl链接呢?答案是可以的,已经有人给我们实现了。这就是我们要说的hexo-abbrlink插件,简单易用,为作者点赞(≧▽≦)/

参考github:hexo-abbrlink

使用

安装插件

1
cnpm install hexo-abbrlink --save

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

配置

修改根目录站点配置文件config.yml,改为:

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

生成的链接将会是这样的(官方样例):

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字段之后而不会改变链接地址。

通过 hexo-blog-encrypt 插件

github 地址:https://github.com/MikeCoder/hexo-blog-encrypt

教程:https://www.jianshu.com/p/44e211829447

安装

  • npm install --save hexo-blog-encrypt
  • yarn add hexo-blog-encrypt (需要) Yarn)

快速使用

  • 将 “password” 字段添加到您文章信息头就像这样.
1
2
3
4
5
---
title: Hello World
date: 2016-03-30 21:18:02
password: mikemessi
---
  • 再使用 hexo clean && hexo g && hexo s 在本地预览加密的文章.

设置优先级

文章信息头 > 按标签加密

高级设置

文章信息头

1
2
3
4
5
6
7
8
9
10
11
---
title: Hello World
tags:
- 作为日记加密
date: 2016-03-30 21:12:21
password: mikemessi
abstract: 有东西被加密了, 请输入密码查看.
message: 您好, 这里需要密码.
wrong_pass_message: 抱歉, 这个密码看着不太对, 请再试试.
wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容.
---

_config.yml

示例

1
2
3
4
5
6
7
8
9
10
# Security
encrypt: # hexo-blog-encrypt
abstract: 有东西被加密了, 请输入密码查看.
message: 您好, 这里需要密码.
tags:
- {name: tagName, password: 密码A}
- {name: tagName, password: 密码B}
template: <div id="hexo-blog-encrypt" data-wpm="{{hbeWrongPassMessage}}" data-whm="{{hbeWrongHashMessage}}"><div class="hbe-input-container"><input type="password" id="hbePass" placeholder="{{hbeMessage}}" /><label>{{hbeMessage}}</label><div class="bottom-line"></div></div><script id="hbeData" type="hbeData" data-hmacdigest="{{hbeHmacDigest}}">{{hbeEncryptedData}}</script></div>
wrong_pass_message: 抱歉, 这个密码看着不太对, 请再试试.
wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容.

配置优先级

文章信息头 > _config.yml (站点根目录下的) > 默认配置

对 TOC 进行加密

如果你有一篇文章使用了 TOC,你需要修改模板的部分代码。这里用 landscape 作为例子:

  • 你可以在 hexo/themes/landscape/layout/_partial/article.ejs 找到 article.ejs。
  • 然后找到 <% post.content %> 这段代码,通常在30行左右。
  • 使用如下的代码来替代它:
1
2
3
4
5
6
7
8
9
10
11
<% if(post.toc == true){ %>
<div id="toc-div" class="toc-article" <% if (post.encrypt == true) { %>style="display:none" <% } %>>
<strong class="toc-title">Index</strong>
<% if (post.encrypt == true) { %>
<%- toc(post.origin, {list_number: true}) %>
<% } else { %>
<%- toc(post.content, {list_number: true}) %>
<% } %>
</div>
<% } %>
<%- post.content %>

问题:与短连接的相对图片路径冲突。导致以前正常显示的图片在加密文章上不能正常显示,解决方案使用图床或者直接引用

加密top: https://yuyuforest.com/2018/10/18/encrypt-toc/

魔改

热门排行

新建页面

hexo n page top 新建页面,会生成 top 目录,编辑其中自动生成的 index.md 文件,将其中的代码替换如下:

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 id="top"></div>
<script src="https://cdn1.lncld.net/static/js/av-core-mini-0.6.4.js"></script>
<script>AV.initialize("leancloud_appid", "leancloud_appkey");AV.useAVCloudUS();</script>
<script type="text/javascript">
var time=0
var title=""
var url=""
var query = new AV.Query('Counter');
query.notEqualTo('id',0);
query.descending('time');
query.limit(1000);
query.find().then(function (todo) {
for (var i=0;i<1000;i++){
var result=todo[i].attributes;
time=result.time;
title=result.title;
url=result.url;
var content="<p>"+"<font color='#1C1C1C'>"+"【文章热度:"+time+"℃】"+"</font>"+"<a href='"+"页面链接"+url+"'>"+title+"</a>"+"</p>";
document.getElementById("top").innerHTML+=content
}
}, function (error) {
console.log("error");
});
</script>

并将其中的 leancloud_appidleancloud_appkey页面链接替换为你的。

配置菜单显示

编辑主题配置文件 themes\next_config.yml,添加 top:

复制

1
2
3
menu:
home: / || home
top: /top/ || signal

新增菜单栏的显示名称 hexo/theme/next/languages/zh-CN.yml,同样新增 top 对应的中文:

复制

1
2
3
menu:
home: 首页
top: 阅读排行

https://leaferx.online/2018/02/11/lc-security/

https://tding.top/archives/baf1ffd.html

http://qustkx.com/2019/08/05/HexoNextCountReadTimesWithLeanCloud_Garry/#5-1-%E6%96%B0%E5%BB%BA%E9%A1%B5%E9%9D%A2

站点访问量统计

该功能由 不蒜子 提供,效果如下图:

站点访问统计

站点访问统计

左侧数据表示独立访客数 UV,右侧数据表示网站浏览量 PV,访客数和浏览量的区别在于一个用户连续点击 n 篇文章,会记录 n 次浏览量,但只记录一次访客数。

由于不蒜子是基于域名来进行统计计算的,所以通过 localhost:4000 端口访问的时候统计数据 PV 和 UV 都会异常的大,属于正常现象。

在页脚布局模板文件首行添加如下代码:(可选)

1
2
themes\next\layout\_partial\footer.swig
<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

在主题配置文件中做出如下修改:

themes\next_config.yml

1
2
3
4
5
6
7
8
busuanzi_count:
enable: true
total_visitors: true # 访客数
total_visitors_icon: user
total_views: true # 访问量
total_views_icon: eye
post_views: false
post_views_icon: eye

刷新浏览器即可生效。

高阶用法:通过修改代码来自定义统计文案,如果你想使用本站统计文案,需要对不蒜子的代码做出如下修改:

\themes\next-v7.4.2\layout_third-party\statistics\busuanzi-counter.swig

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

{%- if theme.busuanzi_count.enable %}
<div class="busuanzi-count">
<script{{ pjax }} async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

{%- if theme.busuanzi_count.total_visitors %}
<span class="site-uv">
{{ __('footer.total_visitors', '<span class="busuanzi-value" id="busuanzi_value_site_uv" style="color:#1890ff" ></span>') }}
</span>
</span>
{%- endif %}

{%- if theme.busuanzi_count.total_views %}
<span class="site-pv">
{{ __('footer.total_views', '<span class="busuanzi-value" id="busuanzi_value_site_pv" style="color:#1890ff"></span>') }}
</span>
{%- endif %}
</div>
{%- endif %}

修改统计表述文案:

themes\next\languages\zh-CN.yml

1
2
3
4
5
footer:
powered: "由 %s 强力驱动"
theme: 主题
total_views: "历经 %s 次回眸才与你相遇"
total_visitors: "我的第 %s 位朋友,"

添加网页标题崩溃欺骗搞怪特效

给网页title添加一些搞怪特效

crash_cheat.js
在next\source\js\src文件夹下创建crash_cheat.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/TEP.ico");
document.title = '╭(°A°`)╮ 页面崩溃啦 ~';
clearTimeout(titleTime);
}
else {
$('[rel="icon"]').attr('href', "/favicon.ico");
document.title = '(ฅ>ω<*ฅ) 噫又好了~' + OriginTitle;
titleTime = setTimeout(function () {
document.title = OriginTitle;
}, 2000);
}
});

引用
在next\layout_layout.swig文件中,添加引用(注:在swig末尾添加):

1
2
<!--崩溃欺骗-->
<script type="text/javascript" src="/js/src/crash_cheat.js"></script>

failure.ico

关于编辑器

网上有不少人推荐typora,但我个人用的是webstorm,开发用的习惯了,也懒得装其他的(主要是电脑空间不太够),放一张图片,编辑markdown还是挺舒服的.

1563685221894

部署博客到Gitee上

1.创建Gitee账号到码云:HTTPS://gitee.com/上申请注册账号,码云类似国内版的GitHub的,所以操作界面跟GitHub的差不多,多了一些国产化的东西,这里不做更多介绍了,自己研究下。

2.项目创建³³ 创建³³项目

创建完成后,在项目中复制项目地址。

3.在_config.yml中配置Git deploy: type:git repo:https ://gitee.com/xiuxiuing/blog.git branch:master 注意:冒号后面一定要有空格,否则不能正确识别。

4.发布到Gitee 命令输入侧npm install hexo-deployer-git –save安装自动部署工具发布输入侧命令

1
hexo clean && hexo g && hexo d

发布博客,首次发布需要在外壳中输入账号和密码。

  1. Gitee Pages设置在项目的服务中选择页面选项网页

选择主分支,点击部署/更新部署

稍等一会儿博客就发布成功啦,访问博客地址:HTTPS://xiuxiuing.gitee.io/blog,就可预览在线博客啦!如果博客的样式不对,则需要在_config.yml中配置下博客地址和路径:url:https ://ysygitee.gitee.io/blog/ root:/ blog 执行再命令hexo clean && hexo g && hexo d就可以啦。

至此,我们的博客就搭建完成啦!在/ HEXO /源/ _posts目录下就可以写我们的博客啦!

[ 个人博客效果参考 ](https://ysygitee.gitee.io/blog/)

下一主题HEXO有很多开源的主题,我选了下一页,开始只是觉得很简洁清爽,后来发现它的功能挺齐全的,提前解决了很多搭建过程中会遇到的问题。这里强烈推荐一下。

安装我是用的git clone的方法,文档中还有其他方法

$ git clone https://github.com/theme-next/hexo-theme-next 设置主题在hexo根目录下的配置文件config.yml里设置主题

主题:下一个配置主题接下来我们就可以来按需配置主题内容了,所有内容都在themes / next文件夹下的config.yml文件里修改。

官方文档里写的是有些配置需要将一部分代码添加到配置文件中,但其实不用,我们逐行看配置文件就会发现,有很多功能都已经放在配置文件里了,只是注释掉了,我们只需要取消注释,把需要的相关信息补全即可使用

菜单栏菜单原生菜单栏有主页,关于,分类,标签等数个选项,但是在配置文件中是注释掉的状态,这里我们自行修改注释就行

菜单: 主页:/ || 家

1
2
3
4
5
6
7
8
# about:/ about / || 用户

标签:/ tags / || 标签 类别:/ categories / || 个 档案:/档案/ || 档案

# schedule:/ schedule / || 日历

#sitemap:/sitemap.xml || 网站地图
#commonweal:/ 404 / || 心跳

注意点:

如果事先没有通过HEXO新页<页面名称>来创建页面的话,即使在配置文件中取消注释,也。页面显示没法我们也。可以添加自己想要添加的页面,局限不用在配置文件里提供的选择里| |后面是fontAwesome里的文件对应的名称menu_icons记得选启用:true(默认应该是真)我在这部分添加了两个自定义的页面,后面在第三方插件部分我会再提到。

1
menu:  home:/ || home   #about:/ about / || 用户  标签:/ tags / || 标签  类别:/ categories / || th   读书:/ books || 书  电影:/ movies || 电影  档案:/档案/ || archive   #schedule:/ schedule / || calendar   #sitemap:/sitemap.xml || sitemap   #commonweal:/ 404 / || 心跳

主题风格scheme 主题提供了4个,我们把想要选择的取消注释,其他三个保持注释掉的状态即可。

建站底部时间状语从句:图标种植修改修改主题的配置文件:

1
2
3
4
footer:
#指定网站设置的日期。
#如果未定义,将使用当前年份。
since:2018 #年份和版权信息之间的图标。 icon:snowflake-o #如果没有定义,将使用来自Hexo主配置的`author`。 版权: #----------------------------------------------- -------------- #Hexo链接(由Hexo提供支持)。 powered:假 主题: #Theme&scheme info link(主题 - NexT.scheme)。 enable:false #方案信息后的NexT版本信息(vX.XX)。 #version:false

我在这部分做了这样几件事:

把用户的图标从小人user改成了雪花snowflake-o
copyright留空,显示成页面author即我的名字
powered: false把hexo的授权图片取消了
theme: enable:false 把主题的内容也取消了
这样底部信息比较简单。

个人社交信息 social
在social里我们可以自定义自己想要在个人信息部分展现的账号,同时给他们加上图标。

1
2


social:
GitHub: https://github.com/XuQuan-nikkkki || github
E-Mail: mailto:xuquan1225@hotmail.com || envelope
#Google: https://plus.google.com/yourname || google
#Twitter: https://twitter.com/yourname || twitter
#FB Page: https://www.facebook.com/yourname || facebook

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




注意点:

||后面对应的名称是fontAwesome里图标的名称,如果我们选择的账号没有对应的图标(如豆瓣、知乎),我们可以在fontAwesome库里去选择自己喜欢的图标
建议不要找太新的fontAwesome图标,主题关联的库版本没有那么新,很可能显示不了或者显示一个地球
网站动画效果
为了网站响应速度我们可以把网站的动画关掉

motion:
enable: false
但我觉得页面比较素,所以开了动画,选择了canvas-nest这一个,主题自带四种效果,可以选自己喜欢的。

motion: enable:true async:true`motion: enable:false 但我觉得页面比较素,所以开了动画,选择了canvas-nest这一个,主题自带四种效果,可以选自己喜欢的。

motion: enable:true async:true

# 开始写作





# 发布



## 远程部署

## 配置

- 在`Hexo 站点`下

$ npm install hexo-deployer-git –save

1
2

- 在 **站点配置文件** 中配置`deploy`

Deployment

Docs: https://hexo.io/docs/deployment.html

deploy:
type: git
repo: #your github.io.git ## https://gitee.com/ysygitee/JavaLeaning.git
branch: master

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17


## 预览

hexo clean && hexo g && hexo s



## 推送

预览如果没有问题就可以发布到远程

hexo d

## 自动部署命令

在package.json里面添加如下命令:

“scripts”: {
“build”: “hexo clean && hexo g && gulp && hexo d”,
“test”: “hexo clean && hexo g && gulp && hexo s”
},

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

- 然后运行`npm run build`,我们就会自动删除老文件,生成新文件,压缩html、css然后发布到github或其他静态服务器资源。
- 然后运行`npm run test`,我们就会自动删除老文件,生成新文件,压缩html、css然后发布到本地服务器做预览。

# 插件



## 优化

### 图片懒加载

原文转自: [https://troyyang.com/2017/08/06/hexo-lazyload-image/](https://link.jianshu.com/?t=https://troyyang.com/2017/08/06/hexo-lazyload-image/)



#### 动机

最近在看Google Chrome新出的一个API是无意间想到了对图片的懒加载,后来想想自己的网站还不支持呢,索性花了些时间让网站给支持上了,并发现Hexo上还没有一个支持懒加载的插件,又倒腾着写了个hexo的插件,并发布到NPM上供大家使用,名字就叫[hexo-lazyload-image](https://link.jianshu.com/?t=https://www.npmjs.com/package/hexo-lazyload-image),从这几天下载数来看看来大家还是很有这个需求 :)。

#### 图片懒加载

图片懒加载是提升网站性能和用户体验的一个非常很好方式,并且几乎所有的大型网站都使用到了,比如微博,仅把用户可见的部分显示图片,其余的都暂时不加载,做法就是:让所有图片元素src指向一个小的站位图片比如loading,并新增一个属性(如data-original)存放真实图片地址。每当页面加载(或者滚动条滚动),使用JS脚本将可视区域内的图片src替换回真实地址,并做请求重新加载。

Hexo-lazy-image 实现原理

因为文章都是使用markdown来编写的,所以不可能要求我们在markdown里将所有图片路径都指向站位图片,并附加另一个属性,所以,这个工作必须留给hexo的generate部分来做。

最终可分为两步:

1. 在hexo *after_post_render*事件或者*after_render:html*事件里将生产出来的文章html代码中所有img元素都加上 data-original 属性,并把src值付给他, 然后在将src值致为loading图片
2. 注入simple-lazyload脚本在每个页面最后面,当页面加载过后负责判定当前需要重新加载的图片。

这里重点提提正则表达式,在对第一步替换的时候,只是使用了简单的正则表达式去匹配查找所有的img节点,后来发现不仅如此,正则表达式结合string.replace更是如此强大,直接将我原来30行的代码减为3行,从此热爱上了正则表达式。

return htmlContent.replace(/<img(\s?)src=”(.?)”(.*?)>/gi, function (str, p1, p2) {
return str.replace(p2, loadingImage + ‘“ data-original=”‘ + p2);
});

1
2
3
4
5
6
7
8

关于simple-lazyload,这个是懒加载替换脚本的核心,原来使用jquery-lazyload插件,后来觉得没必要,最终还是自己写了个简单版。



Hexo-lazy-image 使用

安装步骤:

npm install hexo-lazyload-image –save

1
2

然后修改 _config.yml 文件

lazyload:
enable: true
onlypost: false
loadingImg: # eg. ./images/loading.png

1
2
3
4
5
6
7
8
9
10
11
12
13
14

既然要分享出来,那就得提供更多灵活的API来满足不同的需求,所以又加上了以下功能:

1. 自定义占位图片。(不指定使用默认值)
2. 只针对文章内容或者全网站图片使用图片懒加载

## 中文链接转拼音(可选的)

如果你的文章名称是中文的,那么 Hexo 默认生成的永久链接也会有中文,这样不利于 `SEO`,且 `gitment` 评论对中文链接也不支持。我们可以用 [hexo-permalink-pinyin](https://github.com/viko16/hexo-permalink-pinyin) Hexo 插件使在生成文章时生成中文拼音的永久链接。

安装命令如下:

```bash
npm i hexo-permalink-pinyin --save

在 Hexo 根目录下的 _config.yml 文件中,新增以下的配置项:

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

:除了此插件外,hexo-abbrlink 插件也可以生成非中文的链接。

文章置顶功能

安装插件及其使用方法

在站点根目录执行命令:

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

接下来在需要置顶的文章头部添加 top: true 或者 top: n,这里的n是数字,数字越大表示置顶等级越高。

1
2
3
4
5
6
7
8
---
title: java应用导致JVM内存溢出(OOM)的问题
top: 2
tags:
- JVM
categories:
- java
---

在文章标题下方添加置顶样式

打开 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 %}

精品文章

相对而言就比较简单了

1、在/themes/next/layout/_macro/路径,找到post.swig,在前文置顶功能后边,加上如下代码:

1
2
3
4
5
6
{% if post.essential%}
<span class="post-meta-item-icon">
<i class="fa fa-newspaper-o jingping">精品</i>
</span>
<span class="post-meta-divider">|</span>
{% endif %}

2、在themes/next/source/css/_custom/custom.styl中,增加如下样式:

1
2
3
4
5
.jingping{
background : #00a8c3;
padding:2px 4px 2px 4px;
color: #fff;
}

3、在需要设置精品的文章md文件中,加入如下代码

1
essential: true

压缩代码

(我使用的是all_minifier来优化代码)具体请参考:

https://github.com/chenzhutian/hexo-all-minifier

博客根目录下执行

1
npm install hexo-all-minifier --save

在nexT主题的_config.yml中添加

1
all_minifier:true

无需其他操作,便可在执行

1
hexo g

生成静态代码时候自动压缩

看到很多人用的gulp.js来压缩,但是会报错,而且网上很多人给出的解决方案已经不能用了,我这边解决方案是一月份我使用的,是ok的
具体参考其他人的gulp安装;在博客根目录下面新建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
var gulp = require('gulp');

//Plugins模块获取
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
//压缩css
gulp.task('minify-css', function () {
return gulp.src('./public/**/*.css')
.pipe(minifycss())
.pipe(gulp.dest('./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'))
});
//压缩js 不压缩min.js
gulp.task('minify-js', function () {
return gulp.src(['./public/**/*.js', '!./public/**/*.min.js'])
.pipe(uglify())
.pipe(gulp.dest('./public'));
});

//4.0以前的写法
//gulp.task('default', [
// 'minify-html', 'minify-css', 'minify-js'
//]);
//4.0以后的写法
// 执行 gulp 命令时执行的任务
gulp.task('default', gulp.parallel('minify-html', 'minify-css', 'minify-js', function() {
// Do something after a, b, and c are finished.
return new Promise(function(resolve, reject) {
console.log("gulp finished");
resolve();
}
)}
));

Canvas-nest

canvas_nest:是的

#three_waves
three_waves:false

#canvas_lines
canvas_lines:false

#canvas_sphere canvas_sphere:假。

评论系统下一个原生支持多说,Disqus,hypercomments等多种评论系统我选择了如何方法也非常简单直接去寻求注册,注册完了在配置的时候会给你一个名对于短名称的ID,将这个ID填在配置文件里即可。

#Disqus disqus:enable:true shortname:xuquan count:true统计文章字数和阅读时间post_wordcount:item_text:true wordcount:true#文章字数min2read:true#阅读时间totalcount:true#总共字数separated_meta:true统计阅读次数这里我用的是leancloud的服务,具体方法参考NexT上的教程,添加完之后效果如下:image-20180809175133462

hexo-admin

准备工作

已安装好hexo,选择好自己的主题(我选择的主题是melody),并部署到GitHub等静态托管服务器上。

插件介绍

hexo-admin 是一个Hexo博客引擎的管理用户界面插件。这个插件最初是作为本地编辑器设计的,在本地运行hexo使用hexo-admin编写文章,然后通过hexo ghexo dhexo g是本地渲染,hexo d是将渲染的静态页面发布到GitHub)将生成的静态页面发布到GitHub等静态服务器。如果你使用的是非静态托管服务器,比如自己买的主机搭建的hexo,那么一定要设置hexo-admin 的密码,否则谁都可以编辑你的文章。

插件安装

  1. 首先进入hexo创建的博客项目的根目录下,执行

    1
    cnpm install --save hexo-admin

    mac可能需要root权限,前面加个sudo 就可以了。如果报错缺少组件,则缺少什么安装什么,npm install 加缺少的组件。

  2. 运行下列命令启动hexo-admin

    1
    hexo server -d

打开 http://localhost:4000/admin/ 就可以访问到hexo-admin管理页面了。

密码保护

打开setting,点击Setup authentification here输入用户名,密码,密钥,下面会自动生成配置文件,复制加在hexo根目录下的_config.yml中:

1
2
3
4
admin:
username: myfavoritename
password_hash: be121740bf988b2225a313fa1f107ca1
secret: a secret something

重启hexo,就可以看到登录页面了

发布文章

进入后台之后点击Deploy,里面的Deploy按钮是用来执行发布脚本的,所以我们先在博客根目录下新建个目录admin_script,然后在目录中新建一个脚本hexo-g.sh,里面写下下面代码然后保存,

1
hexo g && hexo d

然后给hexo-g.sh加入可执行权限

1
chmod +x hexo-d.sh

然后在_config.yml中的admin下添加

1
2
3
4
5
admin:
username: myfavoritename
password_hash: be121740bf988b2225a313fa1f107ca1
secret: a secret something
deployCommand: ./admin_script/hexo-d.sh

设置发布执行的脚本,点击Deploy就会执行这个命令并提交到GitHub上。

常见命令

1
2
# 一键生成并且部署到git
$ hexo clean && hexo g && hexo d

常见问题

'hexo'不是内部或外部命令,也不是可运行的程序或批处理文件

需要检查环境变量配置是否正确,如下图所示,编辑Path变量值,在结尾处加上:C:\Program Files\nodejs\node_global;(文件hexo.cmd所在目录)

Hexo之next主题设置首页不显示全文(只显示预览)

  • next是Hexo的一个博客主题,这个主题 ,首页显示的文章列表,每一遍都是全文,不方便概览。

希望达到的效果

  • 首页显示文章列表,列表里的每一篇文章只显示预览,不显示全文。

解决方法

百度了好久,折腾了半天,改了各种参数,算是撞破了头,最后试出来了。
哎,搞移动端的,不太懂网页的这些东西,不说废话了,直接上解决方法:

  • 进入hexo博客项目的themes/next目录
  • 用文本编辑器打开_config.yml文件
  • 搜索”auto_excerpt”,找到如下部分:
1
2
3
4
5
# Automatically Excerpt. Not recommand.
# Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
enable: false
length: 150

ERROR Local hexo not found

需要转移 Hexo 文件到另外一台电脑,把 Hexo 文件夹里的所有文件复制到另一台电脑上,配置好 Hexo,最后hexo s时却提示

1
2
ERROR Local hexo not found in G:\XcantloadX
ERROR Try running: 'npm install hexo --save'

的解决方法
错误提示

查找资料后,得知是因为node_modules文件夹的原因,需要删除重新安装

1.删除node_modules文件夹
删除node_modules文件夹

2.执行

1
npm install

npm install

如果执行后只有光标一直在闪,没有任何反应,输入

1
npm install cnpm -g --registry=https://registry.npm.taobao.org

来安装国内的淘宝 NPM 镜像

安装时间比较久,可能会没反应,多等一会

安装完之后,输入cnpm install,时间也比较久

3.再hexo s就不会报错了

图片无法显示

问题如下图所示。

在这里插入图片描述

花费了许久时间才解决这个问题。

因此将一些解决经验整理出来,希望能帮助到大家。

插件安装与配置

首先我们需要安装一个图片路径转换的插件,这个插件名字是hexo-asset-image

1
cnpm install https://github.com/CodeFalling/hexo-asset-image --save

但是这个插件的内容需要修改【不然可能会出Bug】

打开/node_modules/hexo-asset-image/index.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
'use strict';
var cheerio = require('cheerio');

// http://stackoverflow.com/questions/14480345/how-to-get-the-nth-occurrence-in-a-string
function getPosition(str, m, i) {
return str.split(m, i).join(m).length;
}

var version = String(hexo.version).split('.');
hexo.extend.filter.register('after_post_render', function(data){
var config = hexo.config;
if(config.post_asset_folder){
var link = data.permalink;
if(version.length > 0 && Number(version[0]) == 3)
var beginPos = getPosition(link, '/', 1) + 1;
else
var beginPos = getPosition(link, '/', 3) + 1;
// In hexo 3.1.1, the permalink of "about" page is like ".../about/index.html".
var endPos = link.lastIndexOf('/') + 1;
link = link.substring(beginPos, endPos);

var toprocess = ['excerpt', 'more', 'content'];
for(var i = 0; i < toprocess.length; i++){
var key = toprocess[i];

var $ = cheerio.load(data[key], {
ignoreWhitespace: false,
xmlMode: false,
lowerCaseTags: false,
decodeEntities: false
});

$('img').each(function(){
if ($(this).attr('src')){
// For windows style path, we replace '\' to '/'.
var src = $(this).attr('src').replace('\\', '/');
if(!/http[s]*.*|\/\/.*/.test(src) &&
!/^\s*\//.test(src)) {
// For "about" page, the first part of "src" can't be removed.
// In addition, to support multi-level local directory.
var linkArray = link.split('/').filter(function(elem){
return elem != '';
});
var srcArray = src.split('/').filter(function(elem){
return elem != '' && elem != '.';
});
if(srcArray.length > 1)
srcArray.shift();
src = srcArray.join('/');
$(this).attr('src', config.root + link + src);
console.info&&console.info("update link as:-->"+config.root + link + src);
}
}else{
console.info&&console.info("no src attr, skipped...");
console.info&&console.info($(this));
}
});
data[key] = $.html();
}
}
});

打开_config.yml文件,修改下述内容

1
post_asset_folder: true

二、问题推测

本地图片没有有效上传至github仓库中,导致引用无效

解决方案:安装插件(回看前文)

本地图片没有存放在同名文件夹中

解决方案:将需要引用的本地图片存放在与文章名相同的文件夹中

图片路径出错

这也是我出现的问题。

打开F12,发现下图问题。

在这里插入图片描述

因为我在github中关于Hexo的仓库名为850552586.github.io并不是Ericam.com,所以导致了访问无效。

【这个问题可能是因为我更换电脑后重新配置Hexo忽略的地方】

解决方案:打开_config.yml修改下述内容

在这里插入图片描述

  1. 相对路径引用的标签插件

通过常规的 markdown 语法和相对路径来引用图片和其它资源可能会导致它们在存档页或者主页上显示不正确。在Hexo 2时代,社区创建了很多插件来解决这个问题。但是,随着Hexo 3 的发布,许多新的标签插件被加入到了核心代码中。这使得你可以更简单地在文章中引用你的资源。

也就是说在存档页和主页不能使用和文章内容中的常规语法来引用图片。

比如说:当你打开文章资源文件夹功能后,你把一个 example.jpg 图片放在了你的资源文件夹中,如果通过使用相对路径的常规 markdown 语法 ![](/example.jpg) ,它将 不会 出现在首页上。(但是它会在文章中按你期待的方式工作)

正确的引用图片方式是使用下列的标签插件而不是 markdown :

1
{% asset_img example.jpg This is an example image %}

还原

前提准备

要使用Hexo创建博客项目,必须检查电脑中是否已安装下列应用程序:

  • Node.js
  • Git
  • curl、tar 和 wget
  • npm(国内使用 cnpm,即淘宝 npm 代替)
  • Hexo

具体如何安装可以百度,或者参考:Hexo | 文档

已有项目

对于已经托管在代码托管平台上的博客项目,或者在更换了不同电脑的情况下,只需要将项目克隆下来即可继续使用。

克隆项目

GitHub远程仓库为例,需要克隆source源码分支。

1
git clone -b source git@github.com:elinuxboy/elinuxboy.github.io.git

安装依赖模块

对于重新克隆下来的博客项目,想要使用,需要重新安装依赖:

1
cnpm install

这一步将会根据package.json文件安装所需要的模块。

安装hexo

1
cnpm install hexo-cli -g

新项目

对于需要重新创建项目时,可以按照如下方式进行。

新建 Hexo 博客项目

在工作空间创建并初始化Hexo博客项目,Hexo 将会新建所需要的文件:

1
hexo init hexoBlog

点击显示 / 隐藏内容

进入 hexo 根目录。这一目录中应当有 node_modulessourcethemes 等若干子目录和文件:

1
cd hexoBlog

点击显示 / 隐藏内容

本地版本控制仓库

初始化

1
$ git init已初始化空的 Git 仓库于 /home/elinuxboy/workspace/blog/hexo/hexoBlog/.git/

查看git本地版本控制仓库状态:

1
git status

点击显示 / 隐藏内容

git ignore 设置

1
$ cat .gitignore .DS_StoreThumbs.dbdb.json*.lognode_modules/public/.deploy*/

创建源码分支

创建新分支source用于管理Hexo博客源码,并切换到source分支:

1
$ git checkout -b source切换到一个新分支 'source

添加内容到暂存区

1
git add .

提交暂存区的内容

1
git commit -a

添加提交日志:

远程版本控制仓库

想要将博客项目托管在代码托管平台上,需要在代码托管平台上创建远程版本控制仓库并和本地版本控制仓库进行关联,然后推送本地版本控制仓库到远程仓库。

创建远程仓库

  • GitHub

    创建名为elinuxboy.github.io空仓库。

  • Gitee

    创建名为elinuxboy的空仓库。

  • Coding

    创建名为elinuxboy.coding.me的空仓库。

添加远程仓库关联

Github代码托管平台为例,使用Github的远程仓库作为默认远程仓库,其他代码托管品台的远程仓库作为备用,需要按照如下方式添加远程仓库关联:

1
git remote add origin git@github.com:elinuxboy/elinuxboy.github.io.git

再将其他托管平台的远程仓库作为push方式添加:

1
2
git remote set-url --add origin git@gitee.com:elinuxboy/elinuxboy.git
git remote set-url --add origin git@git.dev.tencent.com:elinuxboy/elinuxboy.coding.me.git

添加远程仓库关联完成后,可查看是否正确添加:

复制

1
2
origingit@github.com:elinuxboy/elinuxboy.github.io.git (fetch)origingit@github.com:elinuxboy/elinuxboy.github.io.git (push)origin
git@gitee.com:elinuxboy/elinuxboy.git (push)origingit@git.dev.tencent.com:elinuxboy/elinuxboy.coding.me.git (push)

如果使用其他托管平台作为默认远程仓库,方法与上面相同,只需要替换相应的地址即可。

推送源码到远程仓库

上面已经将博客项目源码提交到本地版本控制仓库了,要将代码托管在托管平台,需要将本地版本控制仓库推送到代码托管平台的远程仓库。

查看当前所在的分支:

复制

1
$ git status 位于分支 source您的分支与上游分支 'origin/source' 一致。

将本地版本控制仓库的source分支推送到远程仓库的source分支:

1
git push origin source

远程部署

上面已经将博客项目的源码推送到代码托管平台的远程版本控制仓库了,下面就是将博客静态网页相关文件部署到代码托管平台的远程仓库上了。

部署设置

为了将博客静态站点部署到不同的代码托管平台,需要按照如下方式在配置文件内(站点配置文件)设置部署信息:

点击显示 / 隐藏内容

安装部署插件

修改了部署设置信息,想要使用hexo进行部署,还需要安装部署插件:

1
cnpm install hexo-deployer-git --save

部署

根据Hexo文档说明,使用以下命令进行部署 (先清空后生成再部署):

1
hexo clean && hexo g -d

相关文章

  • Hello World
  • 基于 Hexo 框架 Next 主题的个人博客(文章内音乐播放和视频播放)

同时部署到Github、Gitee和Coding:

编辑Hexo _config.yml配置文件

1
2
3
4
5
6
7
8
9
10
11
12
# Deployment 远程部署设置
## Docs: https://hexo.io/docs/deployment.html
deploy:
- type: git
# github
# 码云
repo:
# 码云
gitee: git@gitee.com:ysygitee/ysygitee.git
coding: https://git.dev.tencent.com/yaosiyuancoding/yaosiyuancoding.git
# repo: https://git.dev.tencent.com/yaosiyuancoding/ysygitee.git
branch: master # 部署到主分支

图二:添加Coding和Gitee远程代码仓库地址(Origin为Github的);

图三:将源码推送到三个远程代码仓库(blog为Hexo的源码分支);

图四:部署和推送后的Coding页面效果(hexo d命令部署,);

图五:部署和推送后的Gitee页面效果(

图六:部署和推送后的Github页面效果

妈妈再也不怕我的Hexo源码丢失了~

通用

Hexo百度主动提交链接
http://guoyanjun.top/blog/2016/01/05/hexo-baidu-actively-submit-links.html

配置文件备份

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
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
1001
1002
1003
1004
1005
1006
1007
1008
1009
1010
1011
1012
1013
1014
1015
1016
1017
1018
1019
1020
1021
1022
1023
1024
1025
1026
1027
1028
1029
1030
1031
1032
1033
1034
1035
1036
1037
1038
1039
1040
1041
1042
1043
1044
1045
1046
1047
1048
1049
1050
1051
1052
1053
1054
1055
1056
1057
1058
1059
1060
1061
1062
1063
1064
1065
1066
1067
1068
1069
1070
1071
1072
1073
1074
1075
1076
1077
1078
1079
1080
1081
1082
1083
1084
1085
1086
1087
1088
1089
1090
1091
1092
1093
1094
1095
1096
1097
1098
1099
1100
1101
1102
1103
1104
1105
1106
1107
1108
1109
1110
1111
1112
1113
1114
1115
1116
1117
1118
1119
1120
1121
1122
1123
1124
1125
1126
1127
1128
1129
1130
1131
1132
1133
1134
1135
1136
1137
1138
1139
1140
1141
1142
1143
1144
1145
1146
1147
1148
1149
1150
1151
1152
1153
1154
1155
1156
1157
1158
1159
1160
1161
1162
1163
1164
1165
1166
1167
1168
1169
1170
1171
1172
1173
1174
1175
1176
1177
1178
1179
1180
1181
1182
1183
1184
1185
1186
1187
1188
1189
1190
1191
1192
1193
1194
1195
1196
1197
1198
1199
1200
1201
1202
1203
1204
1205
1206
1207
1208
1209
1210
1211
1212
1213
1214
1215
1216
1217
1218
1219
1220
1221
1222
1223
1224
1225
1226
1227
1228
1229
1230
1231
1232
1233
1234
1235
1236
1237
1238
1239
1240
1241
1242
1243
1244
1245
1246
1247
1248
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site 站点
# 网站标题
title: 清欢的博客
# 网站副标题
subtitle: 为者常成,行者常至!<br> Just Do It!
# 网站描述, 主要用于 SEO,告诉搜索引擎一个关于您站点的简单描述,通常建议在其中包含您网站的关键词。
description: 清欢 的个人博客
keywords: "清欢, 个人博客"
# 您的名字, author 参数用于主题显示文章的作者。
author: YaoSiyuan
# 网站使用的语言
language: zh-CN
# 网站时区。Hexo 默认使用您电脑的时区。时区列表。比如说:America/New_York, Japan, 和 UTC 。
timezone: Asia/Shanghai

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://ysygitee.gitee.io
root: /
#permalink: :year/:month/:day/:title/
permalink: :title.html
#permalink: :year:month:day/:translate_title.html
permalink_defaults: https://ysygitee.gitee.io

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: true
relative_link: false
future: true
highlight:
enable: true
line_number: true
auto_detect: false
tab_replace:

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
path: ''
per_page: 12 #主页每页显示的文章量 (0 = 关闭分页功能)
order_by: -date

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination
## Set per_page to 0 to disable pagination
per_page: 12 # 分页每页显示的文章量 (0 = 关闭分页功能)
pagination_dir: page

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
# theme: landscape
theme: next-v6.6.0 # 启用 Next 主题

# Deployment 远程部署设置
## Docs: https://hexo.io/docs/deployment.html
deploy:
# github
# 码云
- type: git
repo: git@gitee.com:ysygitee/ysygitee.git
branch: master # 部署到主分支

# 字数统计(站点配置部分),需要安装插件
# cnpm install hexo-symbols-count-time --save
# Post wordcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time: #这部分必须放在站点配置文件里
symbols: true
time: true
total_symbols: true
total_time: true

# 文章内音乐播放器 不能在自定义配置文件里添加,只能在站点配置文件里添加
aplayer:
meting: true

Plugins:
- hexo-generator-baidu-sitemap
- hexo-generator-sitemap

baidusitemap:
path: baidusitemap.xml
sitemap:
path: sitemap.xml

# https://github.com/viko16/hexo-permalink-pinyin
permalink_pinyin:
enable: true
separator: '-' # default: '-'


# 搜索功能,需要安装插件
# 安装插件:cnpm install hexo-generator-searchdb --save
search:
path: search.xml
field: post
format: html
limit: 10000



lazyload:
enable: true
#是否仅文章中的图片做懒加载, 如果为 false, 则主题中的其他图片, 也会做懒加载, 如头像, logo 等任何图片.
onlypost: true
# loadingImg: /images/loading.png



###########################################################################
# 主题配置部分,对应主题配置文件 themes/next-xxx/_config.yml
###########################################################################
#
# 将相应的主题选项复制到此处并进行相应的修改
#
# 所有的主题选项必须放置在 theme_config: 后,并全部增加两个空格的缩进。
#
theme_config:

# ---------------------------------------------------------------
# Theme Core Configuration Settings
# ---------------------------------------------------------------

# If false, merge configs from `_data/next.yml` into default configuration (rewrite).
# If true, will fully override default configuration by options from `_data/next.yml` (override). Only for NexT settings.
# And if true, all config from default NexT `_config.yml` must be copied into `next.yml`. Use if you know what you are doing.
# Useful if you want to comment some options from NexT `_config.yml` by `next.yml` without editing default config.
override: false

# Allow to cache content generation. Introduced in NexT v6.0.0.
cache:
enable: true

# Redefine custom file paths. Introduced in NexT v6.0.2.
# If commented, will be used default custom file paths.

# For example, you want to put your custom styles file
# outside theme directory in root `source/_data`, set
# `styles: source/_data/styles.styl`
#custom_file_path:
# Default paths: layout/_custom/*
#head: source/_data/head.swig
#header: source/_data/header.swig
#sidebar: source/_data/sidebar.swig

# Default path: source/css/_variables/custom.styl
#variables: source/_data/variables.styl
# Default path: source/css/_mixins/custom.styl
#mixins: source/_data/mixins.styl
# Default path: source/css/_custom/custom.styl
#styles: source/_data/styles.styl


# ---------------------------------------------------------------
# Site Information Settings
# ---------------------------------------------------------------

# To get or check favicons visit: https://realfavicongenerator.net
# Put your favicons into `hexo-site/source/` (recommend) or `hexo-site/themes/next/source/images/` directory.

# Default NexT favicons placed in `hexo-site/themes/next/source/images/` directory.
# And if you want to place your icons in `hexo-site/source/` root directory, you must remove `/images` prefix from pathes.

# 浏览器标签图标设置
# For example, you put your favicons into `hexo-site/source/images` directory.
# Then need to rename & redefine they on any other names, otherwise icons from Next will rewrite your custom icons in Hexo.
favicon:
small: /images/favicon-16x16.png
medium: /images/favicon-32x32.png
apple_touch_icon: /images/apple-touch-icon.png
safari_pinned_tab: /images/safari-logo.svg
#android_manifest: /images/manifest.json
#ms_browserconfig: /images/browserconfig.xml

# Set rss to false to disable feed link.
# Leave rss as empty to use site's feed link, and install hexo-generator-feed: `npm install hexo-generator-feed --save`.
# Set rss to specific value if you have burned your feed already.
rss:

# 页脚部分建站年份,年份和版权之间的图标设置
footer:
# Specify the date when the site was setup.
# If not defined, current year will be used.
since: 2018 #建站年份
# Icon between year and copyright info.
icon:
# Icon name in fontawesome, see: https://fontawesome.com/v4.7.0/icons
# `heart` is recommended with animation in red (#ff0000).
name: heart #图标名称
# If you want to animate the icon, set it to true.
animated: true #动画
# Change the color of icon, using Hex Code.
color: "#ff0000" #颜色
# copyright 和 powered 以及 theme 信息显示设置
# If not defined, will be used `author` from Hexo main config.
copyright: elinuxboy 版权所有
# -------------------------------------------------------------
powered:
# Hexo link (Powered by Hexo).
enable: true
# Version info of Hexo after Hexo link (vX.X.X).
version: true
theme:
# Theme & scheme info link (Theme - NexT.scheme).
enable: true
# Version info of NexT after scheme info (vX.X.X).
version: true
# -------------------------------------------------------------
# Beian icp information for Chinese users. In China, every legal website should have a beian icp in website footer.
# http://www.miitbeian.gov.cn
beian:
enable: false
icp:

# -------------------------------------------------------------
# Any custom text can be defined here.
#custom_text: Hosted by <a target="_blank" rel="external nofollow" href="https://pages.coding.me"><b>Coding Pages</b></a>

# 版权许可协议设置
# Creative Commons 4.0 International License.
# https://creativecommons.org/share-your-work/licensing-types-examples
# Available: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
creative_commons:
license: by-nc-sa #协议
sidebar: true #侧边栏显示
post: true #文章中显示


# ---------------------------------------------------------------
# SEO Settings
# ---------------------------------------------------------------

# Canonical, set a canonical link tag in your hexo, you could use it for your SEO of blog.
# See: https://support.google.com/webmasters/answer/139066
# Tips: Before you open this tag, remember set up your URL in hexo _config.yml ( ex. url: http://yourdomain.com )
canonical: true

# Change headers hierarchy on site-subtitle (will be main site description) and on all post/pages titles for better SEO-optimization.
seo: true

# If true, will add site-subtitle to index page, added in main hexo config.
# subtitle: Subtitle
index_with_subtitle: false

# Automatically add external URL with BASE64 encrypt & decrypt.
exturl: false


# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------
# 菜单栏设置
# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash from link value (/archives -> archives).
# Usage: `Key: /link/ || icon`
# Key is the name of menu item. If translate for this menu will find in languages - this translate will be loaded; if not - Key name will be used. Key is case-senstive.
# Value before `||` delimeter is the target link.
# Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, question icon will be loaded.
menu:
home: / || home
about: /about/ || user
tags: /tags/ || tags
categories: /categories/ || th
archives: /archives/ || archive
#schedule: /schedule/ || calendar
# sitemap: /sitemap.xml || sitemap
#commonweal: /404/ || heartbeat

# Enable/Disable menu icons / item badges.
menu_settings:
icons: true
badges: true

# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

# Schemes 主题风格设置
#scheme: Muse # 默认 Scheme,这是 NexT 最初的版本,黑白主调,大量留白
scheme: Mist # Muse 的紧凑版本,整洁有序的单栏外观
#scheme: Pisces # 双栏 Scheme,小家碧玉似的清新
#scheme: Gemini # 类似 Pisces


# ---------------------------------------------------------------
# Sidebar Settings
# ---------------------------------------------------------------

# Posts / Categories / Tags in sidebar.
site_state: true

# Social Links. 社交链接设置
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimeter is the target permalink.
# Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, globe icon will be loaded.
social:
QQ: http://wpa.qq.com/msgrd?v=3&uin=914925166&site=qq&menu=yes
Wechat: /images/wxmp.jpg || weixin
Tel: tel:17639589539 || phone
简书: https://www.jianshu.com/u/96b3997be5e8 || book
CSDN: https://blog.csdn.net/qq_33840251 || leanpub
GitHub: https://github.com/ysyluminous || github
E-Mail: mailto:yaosiyuanmail@163.com || envelope
# Weibo: https://weibo.com/p/1005056887217453 || weibo


social_icons:
enable: true
icons_only: false
transition: true
# Icon Mappings
GitHub: github
Twitter: twitter
微博: weibo



# github 导航彩带设置
# Follow me on GitHub banner in right-top corner.
# Usage: `permalink || title`
# Value before `||` delimeter is the target permalink.
# Value after `||` delimeter is the title and aria-label name.
# github_banner: https://github.com/elinuxboy || Follow me on GitHub

# Blog rolls 友情链接设置
links_title: 友情链接
#links_layout: block
links_layout: inline
links:
# 博客园: https://www.cnblogs.com/elinuxboy
# Gitee: https://gitee.com/elinuxboy

国学Q群: https://jq.qq.com/?_wv=1027&k=5klqHFj
科技Q群: https://jq.qq.com/?_wv=1027&k=5KVEQ2o
阅读Q群: https://jq.qq.com/?_wv=1027&k=5aION7d

# 头像设置
# Sidebar Avatar
avatar:
# in theme directory(source/images): /images/avatar.gif
# in site directory(source/uploads): /uploads/avatar.gif
# You can also use other linking images.
url: /images/head.jpg #头像
# If true, the avatar would be dispalyed in circle.
rounded: true #圆形边框
# The value of opacity should be choose from 0 to 1 to set the opacity of the avatar.
opacity: 1
# If true, the avatar would be rotated with the cursor.
rotated: true #旋转

# Table Of Contents in the Sidebar
toc:
enable: true

# Automatically add list number to toc.
number: true

# If true, all words will placed on next lines if header width longer then sidebar width.
wrap: false

# 侧边栏设置
sidebar:
# Sidebar Position, available value: left | right (only for Pisces | Gemini).
position: left
#position: right

# Manual define the sidebar width.
# If commented, will be default for:
# Muse | Mist: 320
# Pisces | Gemini: 240
width: 300 #侧边栏宽度

# Sidebar Display, available value (only for Muse | Mist):
# - post expand on posts automatically. Default.
# - always expand for all pages automatically
# - hide expand only when click on the sidebar toggle icon.
# - remove Totally remove sidebar including sidebar toggle.
display: post
#display: always
#display: hide
#display: remove

# Sidebar offset from top menubar in pixels (only for Pisces | Gemini).
offset: 12

# Back to top in sidebar (only for Pisces | Gemini).
b2t: false

# Scroll percent label in b2t button.
scrollpercent: true #滚动百分比

# Enable sidebar on narrow view (only for Muse | Mist).
onmobile: true


# ---------------------------------------------------------------
# Post Settings
# ---------------------------------------------------------------

# Automatically scroll page to section which is under <!-- more --> mark.
scroll_to_more: true

# Automatically saving scroll position on each post/page in cookies.
save_scroll: false

# Automatically excerpt description in homepage as preamble text.
excerpt_description: true

# 文章自动截断设置
# Automatically Excerpt. Not recommend.
# Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
enable: true
length: 150 #截断字数

# Read more button
# If true, the read more button would be displayed in excerpt section
read_more_btn: true

# Post meta display settings
post_meta:
item_text: true
created_at: true
updated_at:
enabled: true
# If true, show updated date label only if `updated date` different from 'created date' (post edited in another day than was created).
# And if post will edited in same day as created, edited time will show in popup title under created time label.
# If false show anyway, but if post edited in same day, show only edited time.
another_day: true
categories: true

# 字数统计(主题配置部分),需要安装插件,
# cnpm install hexo-symbols-count-time --save
# Post wordcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
separated_meta: true
item_text_post: true
item_text_total: true
awl: 4
wpm: 275

codeblock:
# Manual define the border radius in codeblock
# Leave it empty for the default 1
border_radius:
# Add copy button on codeblock
copy_button: # 代码块一键复制设置
enable: true
# Show text copy result
show_result: true

# Wechat Subscriber
#wechat_subscriber:
#enabled: true
#qcode: /path/to/your/wechatqcode ex. /uploads/wechat-qcode.jpg
#description: ex. subscribe to my blog by scanning my public wechat account

# 打赏功能设置
# Reward
# If true, reward would be displayed in every article by default.
# And you can show or hide one article specially through add page variable `reward: true/false`.
reward:
enable: true
comment: 文章不错哟,快快打赏吧!
wechatpay: /images/wechatpay.jpg
alipay: /images/alipay.jpg
#bitcoin: /images/bitcoin.png

# 相关文章功能,需要安装插件
# cnpm install hexo-related-popular-posts --save
# Related popular posts
# Dependencies: https://github.com/tea3/hexo-related-popular-posts
related_posts:
enable: true
title: # custom header, leave empty to use the default one
display_in_home: false
params:
maxCount: 5
#PPMixingRate: 0.0
#isDate: false
#isImage: false
#isExcerpt: false

# Post edit
# Dependencies: https://github.com/hexojs/hexo-deployer-git
post_edit:
enable: false
url: https://github.com/theme-next/theme-next.org/_posts/tree/master/ # Link for view source.
# url: https://github.com/theme-next/theme-next.org/_posts/edit/master/ # Link for fork & edit.


# ---------------------------------------------------------------
# Misc Theme Settings
# ---------------------------------------------------------------

# Reduce padding / margin indents on devices with narrow width.
mobile_layout_economy: false

# Android Chrome header panel color ($brand-bg / $headband-bg => $black-deep).
android_chrome_color: "#222"

# Custom Logo.
# !!Only available for Default Scheme currently.
# Options:
# enabled: [true/false] - Replace with specific image
# image: url-of-image - Images's url
custom_logo:
enabled: false
image:

# Code Highlight theme
# Available values: normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: normal

# Enable "cheers" for archive page.
cheers_enabled: true


# ---------------------------------------------------------------
# Font Settings
# - Find fonts on Google Fonts (https://www.google.com/fonts)
# - All fonts set here will have the following styles:
# light, light italic, normal, normal italic, bold, bold italic
# - Be aware that setting too much fonts will cause site running slowly
# - Introduce in 5.0.1
# ---------------------------------------------------------------
# CAUTION! Safari Version 10.1.2 bug: https://github.com/iissnan/hexo-theme-next/issues/1844
# To avoid space between header and sidebar in Pisces / Gemini themes recommended to use Web Safe fonts for `global` (and `logo`):
# Arial | Tahoma | Helvetica | Times New Roman | Courier New | Verdana | Georgia | Palatino | Garamond | Comic Sans MS | Trebuchet MS
# ---------------------------------------------------------------
font:
enable: false

# Uri of fonts host. E.g. //fonts.googleapis.com (Default).
host:

# Font options:
# `external: true` will load this font family from `host` above.
# `family: Times New Roman`. Without any quotes.
# `size: xx`. Use `px` as unit.

# Global font settings used for all elements in <body>.
global:
external: true
family: Lato
size:

# Font settings for Headlines (H1, H2, H3, H4, H5, H6).
# Fallback to `global` font settings.
headings:
external: true
family:
size:

# Font settings for posts.
# Fallback to `global` font settings.
posts:
external: true
family:

# Font settings for Logo.
# Fallback to `global` font settings.
logo:
external: true
family:
size:

# Font settings for <code> and code blocks.
codes:
external: true
family:
size:


# ---------------------------------------------------------------
# Third Party Services Settings
# ---------------------------------------------------------------

# Math Equations Render Support
math:
enable: false

# Default(true) will load mathjax/katex script on demand
# That is it only render those page who has 'mathjax: true' in Front Matter.
# If you set it to false, it will load mathjax/katex srcipt EVERY PAGE.
per_page: true

engine: mathjax
#engine: katex

# hexo-rendering-pandoc (or hexo-renderer-kramed) needed to full MathJax support.
mathjax:
# Use 2.7.1 as default, jsdelivr as default CDN, works everywhere even in China
cdn: //cdn.jsdelivr.net/npm/mathjax@2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML
# For newMathJax CDN (cdnjs.cloudflare.com) with fallback to oldMathJax (cdn.mathjax.org).
#cdn: //cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML
# For direct link to MathJax.js with CloudFlare CDN (cdnjs.cloudflare.com).
#cdn: //cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML

# hexo-renderer-markdown-it-plus (or hexo-renderer-markdown-it with markdown-it-katex plugin)
# needed to full Katex support.
katex:
# Use 0.7.1 as default, jsdelivr as default CDN, works everywhere even in China
cdn: //cdn.jsdelivr.net/npm/katex@0.7.1/dist/katex.min.css
# CDNJS, provided by cloudflare, maybe the best CDN, but not works in China
#cdn: //cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css

# PDF Support
# Dependencies: https://github.com/theme-next/theme-next-pdf
pdf:
enable: false

# Default(true) will load PDFObject/PDF.js script on demand
# That is it only render those page who has 'pdf: true' in Front Matter.
# If you set it to false, it will load PDFObject/PDF.js srcipt EVERY PAGE.
per_page: true

height: 500px

pdfobject:
# Use 2.1.1 as default, jsdelivr as default CDN, works everywhere even in China
cdn: //cdn.jsdelivr.net/npm/pdfobject@2.1.1/pdfobject.min.js
# CDNJS, provided by cloudflare, maybe the best CDN, but not works in China
#cdn: //cdnjs.cloudflare.com/ajax/libs/pdfobject/2.1.1/pdfobject.min.js

# Han Support
# Dependencies: https://github.com/theme-next/theme-next-han
han: false

# Pangu Support 中英文之间自动加空格
# Dependencies: https://github.com/theme-next/theme-next-pangu
# For more information: https://github.com/vinta/pangu.js
pangu: true

# Swiftype Search API Key
#swiftype_key:

# Baidu Analytics ID
#baidu_analytics:

# Growingio Analytics ID
# Copyright 2015-2018 GrowingIO, Inc. More info available at http://www.growingio.com
#growingio_analytics: #your projectId

# Disqus
disqus:
enable: false
shortname:
count: true
lazyload: false

# changyan
changyan:
enable: false
appid:
appkey:


# Valine.
# You can get your appid and appkey from https://leancloud.cn
# more info please open https://valine.js.org
valine:
enable: false # When enable is set to be true, leancloud_visitors is recommended to be closed for the re-initialization problem within different leancloud adk version.
appid: # your leancloud application appid
appkey: # your leancloud application appkey
notify: false # mail notifier , https://github.com/xCss/Valine/wiki
verify: false # Verification code
placeholder: Just go go # comment box placeholder
avatar: mm # gravatar style
guest_info: nick,mail,link # custom comment header
pageSize: 10 # pagination size
visitor: false # leancloud-counter-security is not supported for now. When visitor is set to be true, appid and appkey are recommended to be the same as leancloud_visitors' for counter compatibility. Article reading statistic https://valine.js.org/visitor.html

# Support for LiveRe comments system.
# You can get your uid from https://livere.com/insight/myCode (General web site)
livere_uid: MTAyMC80MTkzMC8xODQ3Ng==

# Gitment
# Introduction: https://imsun.net/posts/gitment-introduction
gitment:
enable: false
mint: true # RECOMMEND, A mint on Gitment, to support count, language and proxy_gateway
count: true # Show comments count in post meta area
lazy: false # Comments lazy loading with a button
cleanly: false # Hide 'Powered by ...' on footer, and more
language: # Force language, or auto switch by theme
github_user: # MUST HAVE, Your Github Username
github_repo: # MUST HAVE, The name of the repo you use to store Gitment comments
client_id: # MUST HAVE, Github client id for the Gitment
client_secret: # EITHER this or proxy_gateway, Github access secret token for the Gitment
proxy_gateway: # Address of api proxy, See: https://github.com/aimingoo/intersect
redirect_protocol: # Protocol of redirect_uri with force_redirect_protocol when mint enabled

# Gitalk
# Demo: https://gitalk.github.io
# Reference: https://asdfv1929.github.io/2018/01/20/gitalk/, https://liujunzhou.cn/2018/8/10/gitalk-error/#more
gitalk:
enable: false
github_id: # Github repo owner
repo: # Repository name to store issues.
client_id: # Github Application Client ID
client_secret: # Github Application Client Secret
admin_user: # GitHub repo owner and collaborators, only these guys can initialize github issues
distraction_free_mode: true # Facebook-like distraction free mode

# Baidu Share
# Available value:
# button | slide
# Warning: Baidu Share does not support https.
#baidushare:
## type: button

# addthis Share, see: https://www.addthis.com
#add_this_id:

# NeedMoreShare2
# Dependencies: https://github.com/theme-next/theme-next-needmoreshare2
# See: https://github.com/revir/need-more-share2
# Also see: https://github.com/DzmVasileusky/needShareButton
# iconStyle: default | box
# boxForm: horizontal | vertical
# position: top / middle / bottom + Left / Center / Right
# networks: Weibo,Wechat,Douban,QQZone,Twitter,Linkedin,Mailto,Reddit,
# Delicious,StumbleUpon,Pinterest,Facebook,GooglePlus,Slashdot,
# Technorati,Posterous,Tumblr,GoogleBookmarks,Newsvine,
# Evernote,Friendfeed,Vkontakte,Odnoklassniki,Mailru
needmoreshare2:
enable: true
postbottom:
enable: true
options:
iconStyle: box
boxForm: horizontal
position: bottomCenter
networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook
float:
enable: false
options:
iconStyle: box
boxForm: horizontal
position: middleRight
networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook

# Google Webmaster tools verification setting
# See: https://www.google.com/webmasters
#google_site_verification:

# Google Analytics
#google_analytics:

# Bing Webmaster tools verification setting
# See: https://www.bing.com/webmaster
#bing_site_verification:

# Yandex Webmaster tools verification setting
# See: https://webmaster.yandex.ru
#yandex_site_verification:

# Baidu Webmaster tools verification setting
# See: https://ziyuan.baidu.com/site
#baidu_site_verification:

# CNZZ count
#cnzz_siteid:

# Application Insights
# See https://azure.microsoft.com/en-us/services/application-insights
# application_insights:

# Post widgets & FB/VK comments settings.
# ---------------------------------------------------------------
# Facebook SDK Support.
# https://github.com/iissnan/hexo-theme-next/pull/410
facebook_sdk:
enable: false
app_id: #<app_id>
fb_admin: #<user_id>
like_button: #true
webmaster: #true

# Facebook comments plugin
# This plugin depends on Facebook SDK.
# If facebook_sdk.enable is false, Facebook comments plugin is unavailable.
facebook_comments_plugin:
enable: false
num_of_posts: 10 # min posts num is 1
width: 100% # default width is 550px
scheme: light # default scheme is light (light or dark)

# VKontakte API Support.
# To get your AppID visit https://vk.com/editapp?act=create
vkontakte_api:
enable: false
app_id: #<app_id>
like: true
comments: true
num_of_posts: 10

# Star rating support to each article.
# To get your ID visit https://widgetpack.com
rating:
enable: false
id: #<app_id>
color: fc6423
# ---------------------------------------------------------------

# Show number of visitors to each article.
# You can visit https://leancloud.cn get AppID and AppKey.
leancloud_visitors:
enable: false
app_id: #<app_id>
app_key: #<app_key>
# Dependencies: https://github.com/theme-next/hexo-leancloud-counter-security
# If you don't care about security in lc counter and just want to use it directly
# (without hexo-leancloud-counter-security plugin), set the `security` to `false`.
security: true
betterPerformance: false

# Another tool to show number of visitors to each article.
# visit https://console.firebase.google.com/u/0/ to get apiKey and projectId
# visit https://firebase.google.com/docs/firestore/ to get more information about firestore
firestore:
enable: false
collection: articles #required, a string collection name to access firestore database
apiKey: #required
projectId: #required
bluebird: false #enable this if you want to include bluebird 3.5.1(core version) Promise polyfill

# 卜蒜子访问量显示设置
# Show Views/Visitors of the website/page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi
busuanzi_count:
enable: true
total_visitors: true
total_visitors_icon: user
total_views: true
total_views_icon: eye
post_views: true
post_views_icon: eye


# Tencent analytics ID
# tencent_analytics:

# Tencent MTA ID
# tencent_mta:


# Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO
baidu_push: true

# Google Calendar
# Share your recent schedule to others via calendar page
#
# API Documentation:
# https://developers.google.com/google-apps/calendar/v3/reference/events/list
# Enabled APIs and services
# api_key: https://console.developers.google.com
# Create & manage a public Google calendar: https://support.google.com/calendar/answer/37083?hl=en
calendar:
enable: false
calendar_id: <required> # Your Google account E-Mail
api_key: <required>
orderBy: startTime
offsetMax: 24 # Time Range
offsetMin: 4 # Time Range
timeZone:
showDeleted: false
singleEvents: true
maxResults: 250

# Algolia Search
# See: https://github.com/theme-next/hexo-theme-next/blob/master/docs/ALGOLIA-SEARCH.md
# Dependencies: https://github.com/theme-next/theme-next-algolia-instant-search
algolia_search:
enable: false
hits:
per_page: 10
labels:
input_placeholder: Search for Posts
hits_empty: "We didn't find any results for the search: ${query}"
hits_stats: "${hits} results found in ${time} ms"

# Local search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
enable: true
# if auto, trigger search by changing input
# if manual, trigger search by pressing enter key or search button
trigger: auto
# show top n results per article, show all results by setting to -1
top_n_per_article: 1
# unescape html strings to the readable one
unescape: false



translate_title:
translate_way: baidu_with_appid # google,youdao,baidu_with_appid,baidu_no_appid
is_need_proxy: false # true | false
# proxy_url: http://localhost:50018 # Your proxy_url
# youdao_api_key: '' # Your youdao_api_key
# youdao_keyfrom: xxxx-blog # Your youdao_keyfrom
# baidu_appid: '' # Your baidu_appid
# baidu_appkey: '' # Your baidu_appkey




# Bookmark Support
# Dependencies: https://github.com/theme-next/theme-next-bookmark
bookmark:
enable: true
# if auto
# - save the reading position when closing the page
# - or clicking the bookmark-icon
# if manual, only save it by clicking the bookmark-icon
save: auto


# ---------------------------------------------------------------
# Tags Settings
# ---------------------------------------------------------------

# Note tag (bs-callout).
note:
# Note tag style values:
# - simple bs-callout old alert style. Default.
# - modern bs-callout new (v2-v3) alert style.
# - flat flat callout style with background, like on Mozilla or StackOverflow.
# - disabled disable all CSS styles import of note tag.
style: simple
icons: false
border_radius: 3
# Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
# Offset also applied to label tag variables. This option can work with disabled note tag.
light_bg_offset: 0

# Label tag.
label: true

# Tabs tag.
tabs:
enable: true
transition:
tabs: false
labels: true
border_radius: 0

# Reading progress bar
# Dependencies: https://github.com/theme-next/theme-next-reading-progress
reading_progress:
enable: false
color: "#37c6c0"
height: 2px


#! ---------------------------------------------------------------
#! DO NOT EDIT THE FOLLOWING SETTINGS
#! UNLESS YOU KNOW WHAT YOU ARE DOING
#! ---------------------------------------------------------------

# Use velocity to animate everything.
motion:
enable: true
async: false
transition:
# Transition variants:
# fadeIn | fadeOut | flipXIn | flipXOut | flipYIn | flipYOut | flipBounceXIn | flipBounceXOut | flipBounceYIn | flipBounceYOut
# swoopIn | swoopOut | whirlIn | whirlOut | shrinkIn | shrinkOut | expandIn | expandOut
# bounceIn | bounceOut | bounceUpIn | bounceUpOut | bounceDownIn | bounceDownOut | bounceLeftIn | bounceLeftOut | bounceRightIn | bounceRightOut
# slideUpIn | slideUpOut | slideDownIn | slideDownOut | slideLeftIn | slideLeftOut | slideRightIn | slideRightOut
# slideUpBigIn | slideUpBigOut | slideDownBigIn | slideDownBigOut | slideLeftBigIn | slideLeftBigOut | slideRightBigIn | slideRightBigOut
# perspectiveUpIn | perspectiveUpOut | perspectiveDownIn | perspectiveDownOut | perspectiveLeftIn | perspectiveLeftOut | perspectiveRightIn | perspectiveRightOut
post_block: fadeIn
post_header: slideDownIn
post_body: slideDownIn
coll_header: slideLeftIn
# Only for Pisces | Gemini.
sidebar: slideUpIn

# Fancybox. There is support for old version 2 and new version 3.
# Please, choose only any one variant, do not need to install both.
# For install 2.x: https://github.com/theme-next/theme-next-fancybox
# For install 3.x: https://github.com/theme-next/theme-next-fancybox3
fancybox: true

# Added switch option for separated repo in 6.0.0.
# Dependencies: https://github.com/theme-next/theme-next-fastclick
fastclick: false

# Added switch option for separated repo in 6.0.0.
# Dependencies: https://github.com/theme-next/theme-next-jquery-lazyload
lazyload: true

# Progress bar in the top during page loading.
# Dependencies: https://github.com/theme-next/theme-next-pace
pace: true
# 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-minimal

# Canvas-nest
# Dependencies: https://github.com/theme-next/theme-next-canvas-nest
canvas_nest:
enable: false
onmobile: true # display on mobile or not
color: '0,0,255' # RGB values, use ',' to separate
opacity: 0.5 # the opacity of line: 0~1
zIndex: -1 # z-index property of the background
count: 99 # the number of lines

# JavaScript 3D library.
# Dependencies: https://github.com/theme-next/theme-next-three
# three_waves
three_waves: false
# canvas_lines
canvas_lines: false
# canvas_sphere
canvas_sphere: false

# Only fit scheme Pisces
# Dependencies: https://github.com/theme-next/theme-next-canvas-ribbon
# Canvas-ribbon
# size: The width of the ribbon.
# alpha: The transparency of the ribbon.
# zIndex: The display level of the ribbon.
canvas_ribbon:
enable: false
size: 300
alpha: 0.6
zIndex: -1

# Script Vendors.
# Set a CDN address for the vendor you want to customize.
# For example
# jquery: https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js
# Be aware that you should use the same version as internal ones to avoid potential problems.
# Please use the https protocol of CDN files when you enable https on your site.
vendors:
# Internal path prefix. Please do not edit it.
_internal: lib

# Internal version: 2.1.3
# Example:
# jquery: //cdn.jsdelivr.net/npm/jquery@2.1.3/dist/jquery.min.js
# jquery: //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
jquery:

# Internal version: 2.1.5
# See: http://fancyapps.com/fancybox
# Example:
# fancybox: //cdn.jsdelivr.net/npm/fancybox@3.0.0/dist/js/jquery.fancybox.pack.js
# fancybox_css: //cdn.jsdelivr.net/npm/fancybox@3.0.0/dist/css/jquery.fancybox.min.css
# fancybox: //cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js
# fancybox_css: //cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css
fancybox:
fancybox_css:

# Internal version: 1.0.6
# See: https://github.com/ftlabs/fastclick
# Example:
# fastclick: //cdn.jsdelivr.net/npm/fastclick@1.0.6/lib/fastclick.min.js
# fastclick: //cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js
fastclick:

# Internal version: 1.9.7
# See: https://github.com/tuupola/jquery_lazyload
# Example:
# lazyload: //cdn.jsdelivr.net/npm/jquery_lazyload@1.9.7/jquery.lazyload.min.js
# lazyload: //cdnjs.cloudflare.com/ajax/libs/jquery_lazyload/1.9.7/jquery.lazyload.min.js
lazyload: //cdnjs.cloudflare.com/ajax/libs/jquery_lazyload/1.9.7/jquery.lazyload.min.js

# Internal version: 1.2.1
# See: http://VelocityJS.org
# Example:
# velocity: https://cdn.jsdelivr.net/npm/velocity-animate@1.2.1/velocity.min.js
# velocity: https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.1/velocity.min.js
velocity:

# Internal version: 1.2.1
# See: http://VelocityJS.org
# Example:
# velocity_ui: //cdn.jsdelivr.net/npm/velocity-animate@1.2.1/velocity.ui.min.js
# velocity_ui: //cdnjs.cloudflare.com/ajax/libs/velocity/1.2.1/velocity.ui.min.js
velocity_ui:

# Internal version: 0.7.9
# See: https://faisalman.github.io/ua-parser-js
# Example:
# ua_parser: //cdn.jsdelivr.net/npm/ua-parser-js@0.7.17/src/ua-parser.min.js
# ua_parser: //cdnjs.cloudflare.com/ajax/libs/UAParser.js/0.7.9/ua-parser.min.js
ua_parser:

# Internal version: 4.6.2
# See: http://fontawesome.io
# Example:
# fontawesome: //cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css
# fontawesome: //cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.2/css/font-awesome.min.css
fontawesome:

# Internal version: 2.4.1
# See: https://www.algolia.com
# Example:
# algolia_instant_js: //cdn.jsdelivr.net/npm/instantsearch.js@2.4.1/dist/instantsearch.js
# algolia_instant_css: //cdn.jsdelivr.net/npm/instantsearch.js@2.4.1/dist/instantsearch.min.css
algolia_instant_js:
algolia_instant_css:

# Internal version: 1.0.2
# See: https://github.com/HubSpot/pace
# Example:
# pace: //cdn.jsdelivr.net/npm/pace-js@1.0.2/pace.min.js
# pace: //cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js
# pace_css: //cdn.jsdelivr.net/npm/pace-js@1.0.2/themes/blue/pace-theme-minimal.css
# pace_css: //cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/themes/blue/pace-theme-minimal.min.css
pace: //cdn.jsdelivr.net/npm/pace-js@1.0.2/pace.min.js
pace_css: //cdn.jsdelivr.net/npm/pace-js@1.0.2/themes/blue/pace-theme-minimal.css

# Internal version: 1.0.0
# See: https://github.com/theme-next/theme-next-canvas-nest
# Example:
# canvas_nest: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-nest@1.0.0/canvas-nest.min.js
# canvas_nest_nomobile: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-nest@1.0.0/canvas-nest-nomobile.min.js
canvas_nest:
canvas_nest_nomobile:

# Internal version: 1.0.0
# See: https://github.com/theme-next/theme-next-three
# Example:
# three: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1.0.0/three.min.js
# three_waves: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1.0.0/three-waves.min.js
# canvas_lines: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1.0.0/canvas_lines.min.js
# canvas_sphere: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1.0.0/canvas_sphere.min.js
three:
three_waves:
canvas_lines:
canvas_sphere:

# Internal version: 1.0.0
# See: https://github.com/zproo/canvas-ribbon
canvas_ribbon:

# Internal version: 3.3.0
# See: https://github.com/ethantw/Han
Han:

# Internal version: 3.3.0
# See: https://github.com/vinta/pangu.js
# Example:
# pangu: //cdn.jsdelivr.net/npm/pangu@3.3.0/dist/browser/pangu.min.js
# pangu: //cdnjs.cloudflare.com/ajax/libs/pangu/3.3.0/pangu.min.js
pangu:

# needMoreShare2
# See: https://github.com/revir/need-more-share2
# Example:
# needmoreshare2_js: //cdn.jsdelivr.net/gh/theme-next/theme-next-needmoreshare2@1.0.0/needsharebutton.min.js
# needmoreshare2_css: //cdn.jsdelivr.net/gh/theme-next/theme-next-needmoreshare2@1.0.0/needsharebutton.min.css
needmoreshare2_js:
needmoreshare2_css:

# bookmark
# See: https://github.com/theme-next/theme-next-bookmark
# Example:
# bookmark: //cdn.jsdelivr.net/gh/theme-next/theme-next-bookmark@1.0.0/bookmark.min.js
bookmark: //cdn.jsdelivr.net/gh/theme-next/theme-next-bookmark@1.0.0/bookmark.min.js

# reading_progress
# See: https://github.com/theme-next/theme-next-reading-progress
# Example:
# reading_progress: //cdn.jsdelivr.net/gh/theme-next/theme-next-reading-progress@1.1/reading_progress.min.js
reading_progress:

# valine comment
# See: https://github.com/xCss/Valine
# Example:
# valine: //cdn.jsdelivr.net/npm/valine@1.3.3/dist/Valine.min.js
# valine: //cdnjs.cloudflare.com/ajax/libs/valine/1.3.3/Valine.min.js
valine:

# Internal version: 1.4.0
# See: https://github.com/gitalk/gitalk
# Examples:
# gitalk_js: https://cdn.jsdelivr.net/npm/gitalk@1.4.0/dist/gitalk.min.js
# gitalk_css: https://cdn.jsdelivr.net/npm/gitalk@1.4.0/dist/gitalk.css
gitalk_js:
gitalk_css:

# Internal version: 0.7.3
# See: https://github.com/emn178/js-md5/
# Example:
# md5: https://cdn.jsdelivr.net/npm/js-md5@0.7.3/src/md5.min.js
md5:

# Assets
css: css
js: js
images: images

 

添加折叠功能

前言

有大段的东西想要放上去,但又不想占据大量的位置。折叠是最好的选择。下面在Hexo的主题上定制添加折叠功能。

本文基于Hexo Next的主题修改。其他主题应该也差不多。

在main.js中添加折叠js

next主题的主要js位于themes/next/source/js/src/post-details.js,
在里面找合适的位置,添加如下代码:

点击显/隐内容

1
$(document).ready(function(){    $(document).on('click', '.fold_hider', function(){        $('>.fold', this.parentNode).slideToggle();        $('>:first', this).toggleClass('open');    });    //默认情况下折叠    $("div.fold").css("display","none");});

自定义内建标签

在主题scripts下添加一个tags.js, 位于themes/next/scripts/tags.js

1
/*  @haohuawu  修复 Nunjucks 的 tag 里写 ```代码块```,最终都会渲染成 undefined 的问题  https://github.com/hexojs/hexo/issues/2400*/const rEscapeContent = /<escape(?:[^>]*)>([\s\S]*?)<\/escape>/g;const placeholder = '\uFFFD';const rPlaceholder = /(?:<|&lt;)\!--\uFFFD(\d+)--(?:>|&gt;)/g;const cache = [];function escapeContent(str) {  return '<!--' + placeholder + (cache.push(str) - 1) + '-->';}hexo.extend.filter.register('before_post_render', function(data) {  data.content = data.content.replace(rEscapeContent, function(match, content) {    return escapeContent(content);  });  return data;});hexo.extend.filter.register('after_post_render', function(data) {  data.content = data.content.replace(rPlaceholder, function() {    return cache[arguments[1]];  });  return data;});

再继续添加一个fold.js

1
/* global hexo */// Usage: {% fold ???? %} Something {% endfold %}function fold (args, content) {    var text = args[0];    if(!text) text = "点击显/隐";    return '<div><div class="fold_hider"><div class="close hider_title">' + text + '</div></div><div class="fold">\n' + hexo.render.renderSync({text: content, engine: 'markdown'}) + '\n</div></div>';}hexo.extend.tag.register('fold', fold, {ends: true});

最后,添加几个自定义样式,位置themes/next/source/css/_custom/custom.styl

1
.hider_title{    font-family: "Microsoft Yahei";    cursor: pointer;}.close:after{    content: "▼";}.open:after{    content: "▲";}

最后,在我们需要折叠的地方前后添加便签,示例用法:

1
{% fold 点击显/隐内容 %}something you want to fold, include code block.{% endfold %}

每篇文章末尾统一添加“本文结束”标记

在路径 /themes/next/layout/_macro 中新建 passage-end-tag.swig 文件,并添加以下内容

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

https://www.jianshu.com/p/3ff20be8574c

给hexo个人博客 next主题添加背景图片

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/wang631106979/article/details/51375184

前几天没事自己通过hexo加github搭建了一个自己的个人博客,用的是next主题,发现挺好用,捣鼓了半天终于把全部全部配置完了,但是想改给自己的博客添加一张背景图片,在网上找了很久没找到相关的资料,就自己开始捣鼓,下面将修改方案贴出来。

  1. 首先找到一个背景图片放到 hexo(hexo工程文件)-> themes -> next -> source -> images 的路径下;
  2. hexo(hexo工程文件)-> themes -> next -> source -> css -> _custom ,找到路径下的custom.styl文件,在文件的最上方加上一代码 body { background:url(/images/backGround.jpg(这是你之前加的背景图片的名字));} 就完事了。

seo

http://www.ehcoo.com/seo.html

设置

通过对 Hexo 站点 Next 主题的静态网站做 SEO 优化,以提升个人博客排名。

默认情况下,中国的搜索引擎百度将缓存并重写您的网站,以为移动用户提供网页快照。您可以通过将该值设置禁用此disable_baidu_transformationtrue在主题配置文件。

1
2
next/_config.yml
disable_baidu_transformation: true

默认情况下,在站点配置文件中设置URL后,可以canonical通过true在主题配置文件中将值设置为Hexo来创建规范链接标记。可以在合并重复的URL中找到更多详细信息。url: http://yoursite.com

1
2
next/_config.yml
canonical: true

将值设置enabletrueseo节更改页眉尊卑上subtitle的网站配置文件,并在所有职位/页的标题为更好的SEO 主题的配置文件如下:

1
`seo: true`

将该值设置enabletruein index_with_subtitle部分,以将站点配置文件中的subtitle信息添加到索引页面。

1
2
next/_config.yml
index_with_subtitle: true

添加 sitemap.xml

1
2
3
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save
hexo g # 生成的静态资源就会包含sitemap.xml

添加 robots.txt

robots.txt是搜索引擎蜘蛛协议,告诉引擎哪些要收录,哪些禁止收录。
source文件夹下新建 robots.txt,内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
User-agent: *
Allow: /
Allow: /categories/
Allow: /tags/
Allow: /archives/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /vendors/
Disallow: /fancybox/

Sitemap: https://yaosiyuancoding.coding.me/sitemap.xml
Sitemap: https://yaosiyuancoding.coding.me/baidusitemap.xml

可以及时主动地向搜索引擎提交你站的新增文章 url,对于搜索引擎的及时收录有一定的帮助。如果是一个高质量的老站,而且蜘蛛爬取频次很快的站的话,并不需要该插件。

  1. 安装插件

    复制

    1
    cnpm install hexo-baidu-url-submit --save
  2. 站点配置文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    # URL
    ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
    url: http://tophat.top
    root: /
    permalink: posts/:abbrlink.html # 默认项 :year/:month/:day/:title/
    permalink_defaults:

    # 链接持久化插件abbrlink,添加插件:npm install hexo-abbrlink --save
    abbrlink:
    alg: crc32 # 算法:crc16(default) and crc32
    rep: hex # 进制:dec(default) and hex
  3. 站点配置文件中 deploy 的配置
    其中 deploy 的 type 只能同时存在一个,这就需要在部署与提交 url 之间相互切换了。

    复制

    1
    deploy:#  type: git  type: baidu_url_submitter  # 百度自动提交URL  branch: master       # 分支名称。如果您使用的是 GitHub 或 GitCafe 的话,程序会尝试自动检测。  repo:                # 库(Repository)地址    coding:     github:    message:        # 自定义提交信息 (默认为 Site updated: {{ now('YYYY-MM-DD HH:mm:ss') }})

网站管理员工具

Google网站管理员工具

Bing网站管理员工具

Yandex网站管理员工具

百度网站管理员工具

验证

设置百度网站管理员工具的验证字符串 用于提交站点地图。

录百度网站管理员工具,然后转到验证方法并选择HTML Tag,您将获得一些代码:

1
< meta  name = “ baidu-site-verification”  内容 = “ XXXXXXXXXXXXXXXXXXXXXXX” />

复制XXXXXXXXXXXXXXXXXXXXXXX的价值content的关键。
编辑主题配置文件并添加或更改baidu_site_verification部分:

1
下一个/_config.ymlbaidu_site_verification: XXXXXXXXXXXXXXXXXXXXXXX

NexT还支持百度推送,以便博客将URL自动推送到百度,这对于SEO非常有用。您可以通过在主题配置文件中将value设置baidu_push为启用它。true

1
2
next/_config.yml
baidu_push: true

Baidu主动提交链接方法

该方法可直接推送.github.io结尾的网页的链接给百度而避免百度无法爬取github中链接的问题。
该方法需要安装hexo插件,参考官方说明Hexo插件之百度自动提交链接

安装插件

  • 在Hexo根目录下,安装本插件:

    1
    npm install hexo-baidu-url-submit --save
配置
  • 配置博客根目录下的_config.yml文件

    1
    baidu_url_submit:  count: 3 ## 比如3,代表提交最新的三个链接  host: https://hoxis.github.io ## 在百度站长平台中注册的域名  token: your_token ## 请注意这是您的秘钥, 请不要发布在公众仓库里!  path: baidu_urls.txt ## 文本文档的地址, 新链接会保存在此文本文档里

自动提交token

  • 检查确认_config.yml中的url值与图片中host后的值一致

    1
    # URL## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'url: https://hoxis.github.io
  • 最后修改deploy
    添加一段baidu_url_submitter

    1
    deploy: - type: git  repo: https://github.com/hoxis/hoxis.github.io.git  branch: master  - type: git  repo: https://git.coding.net/hoxis/hoxis.git  branch: master- type: baidu_url_submitter
推送

之后进行部署c推送成功。

ExtURL

带有BASE64加密和解密功能的外部URL,可为搜索引擎添加``标签。

描述

搜索引擎会优先扫描标签。您可以添加`external`/ `nofollow`/ `noopener`/ `noreferrer`或任何类似的技巧,无论如何,您网站上的所有外部链接都将在您的网站上建立索引。但是这里存在另一个技巧:搜寻器不会重现任何javascript,而是在其本地设备上执行客户端操作。该标签提供了一种方法来设置没有标签的任何外部链接。因此,Yandex之类的某些爬网程序不会放弃您网站的链接权重,这对于SEO非常有用。该标签执行:

  • aspanHTML标签替换HTML标签。
  • 使用BASE64加密并解密URL。用户无法在浏览器src中看到此链接的base64格式,但是他将看到此URL指向的工具提示,或将显示可在titletag参数中指定的自定义标题。
  • 此标签的反向链接不会被任何监视扫描。就像您在新标签页上使用javascript打开新链接一样。
  • 是的,也可以在移动设备上使用。

创建此标签的目的是为了更好地优化SEO。禁止通过网络钓鱼链接来混淆最终用户的任何尝试!

设定值

必须Tags Settings在主题配置文件中的部分下打开一个设置:

1
下一个/_config.ymlexturl: true

参考文章


https://luanzhuxian.github.io/post/82d92ad4.html

https://blog.csdn.net/yaoyao_liu/article/details/85948136

https://io-oi.me/tech/hexo-next-optimization/

https://otuki.top/Hexo%E5%92%8CNexT%E4%B8%BB%E9%A2%98%E4%B8%AA%E6%80%A7%E9%85%8D%E7%BD%AE%E5%92%8C%E4%BC%98%E5%8C%96/

美化

代码高亮

博客的文章要好(zhuang)看(bi),那代码高亮必不可少,黑乎乎的一坨看下去的欲望都没有.

代码高亮在我这个主题中,作者有推荐一个插件,可能是我太笨了吧,一直不知道怎么用,有知道如何用的可以直接qq或邮箱联系我,随时接受打扰(晚上1点之后就另说了).额,说下这个插件的名字hexo-prism-plugin

因为我是一个iOS开发的码农,这个插件OC语法一直不能高亮(可能是因为我不会用),所以就另寻蹊径,有一个很多人都在用的highlight.js

访问该主页highlight.js

用法也很简单,不像网上大部分人说的需要下载放到plugins目录下面,直接在主题的ejs文件中导入使用就行

首先,在博客的配置文件中关闭默认的代码高亮

1
2
highlight:
enable: false

我使用的主题是在hexo-theme-matery/layout/_partial/header.js和footer.js中的<head></head>中引入引用

1
2
3
4
5
6
7
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.8/styles/vs2015.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.8/highlight.min.js">
</script>
<script>
hljs.initHighlightingOnLoad();
</script>

可以看到,我这边使用的主题是vs2015(毕竟我是一个传统的人)

对了,另外跟萌新说下,在哪边选这些主题

点击这里浏览各种主题的效果

再多嘴一句,选完之后最好在浏览器中访问一下css是否存在

像这个cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.8/styles/vs2015.min.css

图片上传

在网上查了有两种方式,哪种好用,则自己选择,个人是主推第二种方式

第一种方式,在第三方网站上上传图片,譬如七牛,然后在你博客中已下面格式即可插入图片,

1
![图片简介](https://图片链接)
  • 优点:不占git空间.
  • 缺点:图片管理的想自杀

第二种方式,在本地插入,hexo官网也有相关说明,hexo图片上传说明

  1. 设置站点配置_config.yml:将post_asset_folder: false改为post_asset_folder: true
  2. 执行hexo new [xxxx],生成xxxx.md和xxxx文件夹
  3. 把要引用的图片拷贝到xxxx文件夹中
  4. 来引用本地图片

如果想使用markdown语法来保持文章编辑整洁,那么可以使用hexo-asset-image插件来实现

那么配置的顺序则为:

  1. 设置站点配置_config.yml:将post_asset_folder: false改为post_asset_folder: true
  2. 执行 npm install hexo-asset-image –save 装插件
  3. 执行hexo new [xxxx],生成xxxx.md和xxxx文件夹
  4. 把要引用的图片拷贝到xxxx文件夹中
  5. 使用![](xxxx/example.jpg)来引用本地图片

然后么,你可能会遇到一个问题,发现图片没有上传,嘿嘿嘿,那走的坑就跟我的一样了.

后面就跟你们说下这个问题的解决方案是怎么发现的

插件的issue

插件的issue

哎,1.0.0版本有问题,那就切到0.0.1版本试试

打开博客根目录下的package.json文件

package.json

package.json

把hexo-asset-image的版本号改成0.0.1,然后windows打开cmd,cd到博客根目录下执行npm install或者yarn install(你装过yarn的话),mac也是同样的操作.

装完之后,看下图片上传的效果,执行下面语句

1
hexo clean && hexo g && hexo s

刷新localhost:4000来看看图片在本地是否已经上传了

1
hexo clean && hexo g && hexo d

打开你的github博客地址,看看远程是否已经上传了本地图片

  • 优点:图片管理清楚舒服
  • 缺点:git空间随着图片越来越满

护眼主题,护眼色


_layout.swig
在body下面

  • 豆沙绿
  • 杏仁黄
  • 银河白
  • 极光黑
满天星
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
custom.styl
.eye{
position: fixed;
bottom: 68px;

height: 66px;
//background-color:transparent;
font-size :12px;
line-height :33px;
text-align :center;
z-index :99;

}
.eye1{
float :left;
display :none;
height :50px;
}
.eye1 ul {
height :50px;
list-style: none;
padding :0;
margin :0
}
.eye1 ul li{
float :left;
width :23px;
line-height :22px
text-align :center;
font-size :12px;
}
.eye1 ul li:hover {
border-bottom : 0 !important;
background-color: #fff;
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}

.eye2{
float :left;
width :18px;
line-height :22px
text-align :center;
font-size :12px;
background-color:#e6e6e6;

}
.eye2:hover{
border-bottom : 0 !important;
background-color: #eee;
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}

eye.js
function eye(){
$(".eye .eye2").click(function () {
$(".eye .eye1").slideToggle();
})

$(".eye ul li").click(function () {
$(".eye .eye1").slideToggle();
$color=$(this).css("background-color")
console.log($color);
$(".eye .eye1").css("background",$color);
$("#canvas").css("background",$color);
$("article").css("background",$color);
})
}
eye()


引用eye.js
直接引用
在_layout.swig

<script src="xxxxxxxxxx.eye.js">

没有用到require.js和pjax的到这里就结束了,用了的往下看
1
2
3
4
5
6
7
8
9
10
11
12
13
14
main.js
//
require.config({
paths: {
"eye":"/js/src/pjax/eye",
},
});
require(['eye'], function (){
});

pjax的函数中重写
function eye_js() {
$color=$("#canvas").css("background");
$("article").css("background",$color);

https://leafjame.github.io/posts/507826828.html

升级

Hexo版本升级

Hexo版本升级可以通过npm实现,相关命令如下:
先全局升级hexo-cli:-g表示全局升级。hexo本身是一个静态博客生成工具,具备编译Markdown、拼接主题模板、生成 HTML、上传 Git 等基本功能。hexo-cli能够将这些功能封装为命令,提供给用户通过hexo server / hexo deploy等命令调用的模块。CLI = Command Line Interface命令行界面。

npm i hexo-cli -g
然后直接输入:(其实这个命令应该不正确),输入之后发现出现了一系列的warn。

1
npm update

再输入hexo vesion查看当前版本,发现版本已经更新成功了。

再输入hexo vesion查看当前版本,发现版本已经更新成功了。

hexo: 3.7.1 # 之前为3.2.0
hexo-cli: 1.1.0
os: Windows_NT 10.0.16299 win32 x64
http_parser: 2.8.0
node: 8.11.3
v8: 6.2.414.54
uv: 1.19.1
zlib: 1.2.11
ares: 1.10.1-DEV
modules: 57
nghttp2: 1.32.0
napi: 3
openssl: 1.0.2o
icu: 60.1
unicode: 10.0
cldr: 32.0
tz: 2017c

但是其实上面的更新命令并不是很准确。
  1.npm-check检查更新

npm install -g npm-check
npm-check

  1. npm-upgrade更新
1
2
npm install -g npm-upgrade
npm-upgrade
  1. 更新全局包:
1
npm update <name> -g
  1. 更新生产环境依赖包:
1
npm update <name> --save

save参数:npm install X –save:

会把X包安装到node_modules目录中
会在package.json的dependencies属性下添加X
之后运行npm install命令时,会自动安装X到node_modules目录中
如果不加save参数的话,之后把X包安装到node_modules目录中,不会添加到dependencies文件中。再查看hexo文件夹下面的dependencies文件,可以看到hexo的版本已经更新了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
"name": "hexo-site",
"version": "0.0.0",
"private": true,
"hexo": {
"version": "3.7.1"
},
"dependencies": {
"hexo": "^3.7.1",
"hexo-deployer-git": "^0.3.1",
"hexo-fs": "^0.2.3",
"hexo-generator-archive": "^0.1.5",
"hexo-generator-category": "^0.1.3",
"hexo-generator-index": "^0.2.1",
"hexo-generator-tag": "^0.2.0",
"hexo-renderer-ejs": "^0.3.1",
"hexo-renderer-marked": "^0.3.2",
"hexo-renderer-stylus": "^0.3.3",
"hexo-server": "^0.3.2"
}

## }

其他

如何在Hexo中折叠代码

https://thea-r.github.io/2018/07/01/%E5%A6%82%E4%BD%95%E5%9C%A8Hexo%E4%B8%AD%E6%8A%98%E5%8F%A0%E4%BB%A3%E7%A0%81/

参考

https://www.jianshu.com/p/21c94eb7bcd1

https://blog.pangao.vip/top/

优化教程

https://otuki.top/Hexo%E5%92%8CNexT%E4%B8%BB%E9%A2%98%E4%B8%AA%E6%80%A7%E9%85%8D%E7%BD%AE%E5%92%8C%E4%BC%98%E5%8C%96/

  • https://www.fuxiyuchen.xyz/2019/08/05/next-%E6%96%B0%E7%89%88%E4%B8%BB%E9%A2%98%E9%85%8D%E7%BD%AE/

  • https://siriusq.top/Next%E4%B8%BB%E9%A2%98%E7%BE%8E%E5%8C%96

  • https://www.jianshu.com/p/9f0e90cc32c2

  • https://io-oi.me/tech/hexo-next-optimization/

  • http://eternalzttz.com/hexo-next.html

  • https://segmentfault.com/a/1190000013660164/

  • https://www.jianshu.com/p/efbeddc5eb19

  • https://www.jianshu.com/p/6f77c96b7eff

  • https://io-oi.me/technology/computer/computer-aided-art/2017/06/09/hexo-next-optimization.html#%E6%9B%B4%E6%96%B0%E6%8F%90%E7%A4%BA%EF%BC%88%E5%8F%AF%E4%BB%A5%E6%9C%80%E5%90%8E%E7%9C%8B%EF%BC%89

  • https://io-oi.me/tech/hexo-next-optimization/

优秀博客参考

  • http://larscheng.coding.me
  • https://www.sqlsec.com/
  • https://inspurer.github.io/2018/11/11/hexo-next%E4%B8%BB%E9%A2%98%E4%BC%98%E5%8C%96/#more
  • https://elinuxboy.gitee.io/

豆沙护眼背景

  • https://hooray.github.io/
  • http://www.dragonstyle.win/categories/%E5%B7%A5%E5%85%B7%E8%B5%84%E6%BA%90/
  • https://walesexcitedmei.github.io/about/

其他主题

  • http://www.91h5.cc/

  • https://itimetraveler.github.io/hexo-theme-hiero/archives/

  • http://chaoo.oschina.io/

  • http://haojen.github.io/

  • https://www.haomwei.com/

  • https://blog.minhow.com/

  • http://notes.iissnan.com/

  • http://raytaylorlin.com/

  • http://sabrinaluo.github.io/tech/

  • http://blog.minfive.com/

  • https://vevlins.github.io/

  • https://geekplux.com/

  • https://yanm1ng.github.io/

  • http://moxfive.xyz/

  • http://bubuzou.com/

  • https://www.buhuoblog.com/

  • https://www.imys.net/

  • https://luuman.github.io/

参考博客

https://www.jianshu.com/p/1ff2fcbdd155

本文原创,商业转载请联系作者获得授权,非商业转载请注明出处。

评论

发送评论 编辑评论


                        

建站相关分类热门文章

标签热门文章排行

☛免责声明 ☛本站使用教程
Theme Argon With Ry-Plus By 清欢
我的第16355位朋友,历经92439次回眸才与你相遇