打造个性超赞博客Hexo+NexT+GitHubPages的超深度优化

hexo-next-optimization-title.jpg

为庆祝这篇文章浏览量  1000+ (๑•̀ㅂ•́)و✧,懒洋洋的博主最后终于决定:对这篇已经写了几个月的文章也来次超深度优化!

Todo list:

  • 优化博客整体效果 Colorful! [2017.11.11]

  • 完善第 4 节的 F12 调试说明 [2017.11.13]

  • 重写 6.5. 好玩的写作样式 [2017.11.14]

  • 重写 5.4. 博客推广及谷歌搜索优化(必读) [2017.11.15]

  • 用上新的写作样式重写本文 [2017.11.15]

  • 升级主题到 5.1.3 [2017.11.16]

  • 升级主题后修改本文 [2017.11.18]

  • 听取读者意见(@蝉时雨@zhuzhuyule.xyz、@胡维),修改博客颜色和文章背景,优化阅读文章的体验,再次感谢这些读者的反馈![2017.11.19]

  • 再次修改本文![2017.11.20]

  • 增加 5.14. 文章摘要图片 [2017.12.03]

  • 增加 5.15. 文章置顶 [2017.12.03]

  • 重新修改博客样式,更改博客背景的显示方式,更改字体大小和行间距,排除过多颜色的干扰,突出文章内容,使文章阅读起来更舒适,顺便优化移动端的阅读体验…… [2017.12.05]

  • 再次修改本文,!important…… [2017.12.13]

  • 更多细节  ……


如博主不慎改出 bugs,欢迎大家评论指出,完成更新后,本行文字将消失ヾ(≧O≦)〃~

2017-11-13 05:06:05
2017-11-15 06:45:35
< > with  @ 2017-12-13 01:13:30

文章浏览量已突破  10000+ 了!coffee NexT 主题也更新到 v6,所以文章中的有些内容可能 out 了,对此请大家多留意哈 ~ monkey

@ 2018-05-16 22:36:02

必读 写在前面

本文主要内容是 NexT 主题的个性化定制和一些细节的优化。搭建的过程,已有的优化,Markdown 的使用,都直接贴出大佬的文章链接。

bb 和目录

首先肯定是感谢各位大佬的文章,我一个小白,没学 HTML,没学 CSS,没学 JavaScript,连 C 也还没学会……如果你是一个和我一样的小白,且对本博客感觉还蛮满意,恭喜你!看完这篇文章,你自己也可以拥有一个这样的博客啦!

给小白(像我一样,也许还有完美主义和强迫症joy)却想搭建个性化博客提供参考,是我写这篇文章的主要目的,所以如果本文有幸被大佬读到,文中的不足还请大佬见谅。

本文参考的文章都会直接给出原文链接或者以注脚的形式标记出处,但 Google 参考了实在太多太多了,有些我当时没做记录,如有遗漏,欢迎指出。

tip:有一些优化的很好的博客,有很多很酷的功能,我当时没收藏,后来非常后悔,提醒大家如果看到很赞的博客,一定要马上收藏。

因为目录默认全展开不美观,而不展开又不能让读者对文章内容迅速了解,故在开头加上。

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
1. 必读 写在前面
1.1. bb 和目录
1.2. 重要的定义
1.3. 我操作的环境(2017.12.13更新)
2. 开始 搭建博客
2.1. 在本地安装 Hexo
2.2. 部署博客到 GitHub Pages
2.3. 更新提示(可以最后看)(2017.11.18更新)
2.3.1. 其它更新
2.3.2. 更新主题
3. 优化 基本功能配置
3.1. 选择主题
3.2. 站点配置文件(2017.11.14更新)
3.3. 主题配置文件(2017.12.13更新)
3.4. 动态背景
3.5. 注脚
4. 优化 网页样式布局
4.1. 怎么更改?
4.1.1. bb - for - bb
4.1.2. 快速由懵逼到熟悉
4.1.3. bb - for - fun
4.2. 附上我的 custom.styl(2017.12.31更新)
4.3. 修改字体(2017.12.13更新)
5. 进阶 高级功能配置
5.1. 大佬的文章
5.2. 更改上一篇,下一篇的顺序
5.3. 移动端显示 back-to-top 按钮和侧栏
5.4. 博客推广及谷歌搜索优化(必读)(2017.12.03更新)
5.4.1. 博客推广
5.4.2. 搜索引擎
5.4.3. 间接影响
5.4.4. 知识平台
5.4.5. 谷歌分析
5.5. 时间轴页面的年份分隔(2017.07.18更新)
5.5.1. category
5.5.2. tag
5.5.3. 说明
5.6. 文章底部加上评分小星星(2017.08.23更新)
5.7. 侧栏加入已运行的时间(2017.08.27更新)
5.8. 添加 TopX 页面(2018.07.18更新)
5.9. 利用 gulp 压缩代码(2017.08.27更新)
5.10. 让页脚的心跳动起来(2017.11.18更新)
5.11. 页脚加上微信二维码(2017.12.31更新)
5.12. 更改标签云(tagcloud)的颜色(2017.08.31更新)
5.13. 点击侧栏头像回到博客首页(2017.11.16更新)
5.14. 文章摘要图片(2017.12.03更新)
5.15. 文章置顶(2017.12.03更新)
5.16. 背景图片(2018.05.09更新)
5.17. 动态效果(2018.05.09更新)
5.18. 相关/热门/推荐文章(2018.05.09更新)
5.19. MathJax 的静态显示(svg) (2018.05.16更新)
5.20. 加速 Hexo 博客(2018.05.30更新)
5.21. 萌萌哒十二生肖(2018.08.27更新)
6. 进阶 写出优雅文章
6.1. 文章的模版文件(必读)(2017.12.13更新)
6.2. 使用 Markdown
6.2.1. Markdown 简介
6.2.2. Markdown 教程
6.2.3. 我个人的总结(2017.11.15更新)
6.3. 如何使用 emoji(2017.12.13更新)
6.4. 插入音乐和视频
6.4.1. 音乐(2017.12.13更新)
6.4.2. 视频(2017.11.18更新)
6.5. 好玩的写作样式(2017.12.13更新)
6.5.1. 主题自带样式 FontAwesome
6.5.2. 主题自带样式 代码块高亮
6.5.3. 主题自带样式 文本居中引用
6.5.4. 主题自带样式 note 标签
6.5.5. 主题自带样式 label 标签
6.5.6. 主题自带样式 tabs 标签
6.5.7. 主题自带样式 按钮
6.5.8. 自定义样式 引用
6.5.9. 自定义样式 数字块
7. 结尾 求大佬和结尾
7.1. 移动端顶部菜单
7.2. 替换 fancyBox(2017.11.18更新)
7.3. 最后的结束小语

重要的定义

了解这些定义,防止懵逼和大脑混乱。

站点配置文件和主题配置文件,名字都叫_config.yml,容易乱。

  • 站点配置文件,位于站点文件夹根目录内:
1
~/blog/_config.yml
  • 主题配置文件,位于主题文件夹根目录内:
1
~/blog/themes/next/_config.yml

我操作的环境

留这个,是因为有时我 Google 教程,发现按流程走,却达不到应有的效果。故当按照这篇的某流程却达不到预期效果,可以考虑考虑这个,然后自己灵活点去 Google 解决方案。

tip:由于众所周知的原因 Google 无法访问,推荐一下老 D 的 hosts,不过估计能看到这篇文章的人,都已具备这种能力。
[2017.12.13 更新]
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
/* 调试浏览器 */
Google Chrome Version 62.0.3202.94 (Official Build) (64-bit)

/* 版本信息 */
root@kali:~/blog# hexo version
(node:6675) [DEP0061] DeprecationWarning: fs.SyncWriteStream is deprecated.
hexo: 3.4.1
hexo-cli: 1.0.4
os: Linux 4.13.0-kali1-amd64 linux x64
http_parser: 2.7.0
node: 8.3.0
v8: 6.0.286.52
uv: 1.13.1
zlib: 1.2.11
ares: 1.10.1-DEV
modules: 57
openssl: 1.0.2l
icu: 59.1
unicode: 9.0
cldr: 31.0.1
tz: 2017b

/* 依赖包 */
root@kali:~/blog# cat package.json
{
"name": "hexo-site",
"version": "0.0.0",
"private": true,
"hexo": {
"version": "3.4.1"
},
"dependencies": {
"gulp": "^3.9.1", /* 压缩代码 */
"gulp-htmlclean": "^2.7.15", /* 压缩代码 */
"gulp-htmlmin": "^3.0.0", /* 压缩代码 */
"gulp-minify-css": "^1.2.4", /* 压缩代码 */
"hexo": "^3.4.1", /* 默认安装 */
"hexo-deployer-git": "^0.3.1", /* Git 部署工具 */
"hexo-filter-github-emojis": "^1.4.3", /* emoji 支持 */
"hexo-footnotes": "^1.0.1", /* 注脚 */
"hexo-generator-archive": "^0.1.5", /* 默认安装 */
"hexo-generator-category": "^0.1.3", /* 默认安装 */
"hexo-generator-feed": "^1.2.2", /* RSS */
"hexo-generator-index-pin-top": "^0.2.2", /* 替代默认安装的,支持文章置顶 */
"hexo-generator-searchdb": "^1.0.8", /* 本地搜索 */
"hexo-generator-sitemap": "^1.2.0", /* 生成 sitemap.xml,利于 SEO */
"hexo-generator-tag": "^0.2.0", /* 默认安装 */
"hexo-renderer-ejs": "^0.3.0", /* 默认安装 */
"hexo-renderer-marked": "^0.3.0", /* 默认安装 */
"hexo-renderer-stylus": "^0.3.1", /* 默认安装 */
"hexo-server": "^0.2.0", /* 默认安装 */
"hexo-tag-aplayer": "^2.0.5", /* 音乐播放插件,支持歌词 */
"hexo-tag-dplayer": "^0.2.1", /* 视频播放插件,支持弹幕 */
"hexo-wordcount": "^3.0.2" /* 字数统计 */
}
}

/* 主题NexT版本 */
version: 5.1.3

/* 优化主题NexT的设计版式 */
scheme: Muse

开始 搭建博客

终于进入正文了!但是这个我却不打算写,因为看到了一些很好的文章,这里直接给出这些文章的链接new_moon_with_face

在本地安装 Hexo

建议先把 Hexo 官方文档过一遍,毕竟是官方文档

然后是大佬的文章在 Linux 服务器上搭建 Hexo:OS X、Windows 与 Linux 本地环境,有选择的查看,因为此大佬直接部署在了自己的 Linux 服务器上,而不是部署到 GitHub Pages,所以对于萌新查看到安装好 Hexo 就行了。

安装好 Hexo 后,先任意目录新建个文件夹,名字可以为 blog,然后进入这个文件夹,输入命令:

所在目录:~/blog/
1
hexo init

等一会,如果出现橙色的 WARN 没关系,只要不出现红色的 ERROR 就行。好了后,输入命令:

所在目录:~/blog/
1
2
3
hexo g

hexo s

然后点开 http://localhost:4000/ ,恭喜你!已经在本地搭建好博客了(๑•̀ㅂ•́)و✧!距离成功只差下一步——部署博客到 GitHub Pages 了~

部署博客到 GitHub Pages

GitHub Pages 是开源协作社区 GitHub 的一个服务,将博客部署到它上面再合适不过了。

问题解答
为什么要部署到 GitHub Pages 上?首先免费,其次省心,最后可以学习使用 GitHub。
GitHub Pages 有容量限制吗?有,由 What is GitHub Pages? 可知:大小限制为 1 GB,一个月 100 GB 流量。
超出限制的容量怎么办?讲真,如果图片音乐视频等大文件都放在七牛云 KODO阿里云 OSS 或其它云存储上,那么压根不用担心,因为我的博客现在[2017.11.17]也才用了 6.73 MB sweat_smile,所以无需担心。
国内访问速度行不行,有必要同时部署在 Coding 上吗?个人感觉完全没必要,自己不用梯子时,感觉访问速度可以,毕竟站点的大文件都是放在了云存储上。
我可以用自己的域名吗?可以,并且原生支持 https,教程见这篇文章

注册 GitHub 帐号和创建 Repository 请查看这篇文章:基于Hexo+github+coding搭建个人博客——基础篇(从菜鸟到放弃),之后在站点文件夹根目录,安装 Git 部署插件(以后安装插件都先到这个目录),输入下面命令回车:

所在目录:~/blog/
1
npm install hexo-deployer-git --save

然后,打开站点文件夹根目录下的站点配置文件,编辑:

文件位置:~/blog/_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
# URL
url: https://reuixiy.github.io/
.
.
.省略……
.
.
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
- type:
+ type: git
+ repository: https://github.com/reuixiy/reuixiy.github.io.git
+ branch: master

将其中的reuixiy改成你的 GitHub 注册的帐号名就行,然后执行下面的命令:

所在目录:~/blog/
1
2
3
4
5
hexo clean

hexo g

hexo d

输入你的 GitHub 的用户名和密码,成功后复制https://帐号名.github.io/到浏览器打开就行。看!这就是你的博客了,只要能连接到互联网,就能随时查看它(๑•̀ㅂ•́)و✧!

当然,如果你不想每次都输入用户名和密码,不想每次更新时,在 GitHub 上显示invalid-email-address,可以按上面所提的那篇文章操作。

更新提示(可以最后看)

更新会有不确定因素,即讨厌又麻烦,但是不更新又怎么能享受新功能呢expressionless……

其它更新

  • npm 更新全局安装的包:
1
npm update -g
  • npm 更新站点文件夹根目录下安装的依赖包:
所在目录:~/blog/
1
npm update
  • 更新 npm 它自己:
1
npm install npm -g
  • 更新 Node.js 到最新版:
1
2
3
npm install n -g

n latest

更新主题

进入主题文件夹根目录,然后git pull,发现报错,怎么解决呢?可以先浏览这篇文章,然后参考我的操作。

先到主题文件夹根目录:

所在目录:~/blog/themes/next/
1
git pull

会发现报错,由于我们更改了相关文件,更新不成功,所以要将本地的所有修改先暂时存储起来:

所在目录:~/blog/themes/next/
1
git stash

然后再试一下:

所在目录:~/blog/themes/next/
1
git pull

可以了吧,接下来还原暂时存储的内容(即保存我们的所有修改):

所在目录:~/blog/themes/next/
1
git stash pop

如果报CONFLICT,是因为 Git 无法确定一些改动,所以要我们手动解决文件中冲突的部分,这个比较麻烦,可以参考我下面的流程。

首先打开报CONFLICT的文件,Ctrl + F 搜索>>>>>>> Stashed changes,查看从此处到=======之间保存的代码,回忆一下自己当时更改了什么,是为了达到什么功能。

然后查看=======<<<<<<< Updated upstream之间更新的代码,与下面保存的代码进行对比(也请浏览下所标出代码前后的代码):

  1. 如果改动较大,可能是主题增加了新功能,建议保留更新的代码,然后更改一下,达到自己想要在保存的代码中实现的功能,最后删除保存的代码。
  2. 如果改动较小,建议还是保留更新的代码,然后更改一下,最后删除保存的代码。

要是自己不确定,一定记得将<<<<<<< Updated upstream>>>>>>> Stashed changes之间的代码另存备份,然后进行调试,直到最后确定没有问题。

最后:

所在目录:~/blog/themes/next/
1
2
3
4
5
root@kali:~/blog/themes/next# git pull
error: Pulling is not possible because you have unmerged files.
hint: Fix them up in the work tree, and then use 'git add/rm <file>'
hint: as appropriate to mark resolution and make a commit.
fatal: Exiting because of an unresolved conflict.

哇,又报错了joyjoyjoy,咋办?

先查看:

所在目录:~/blog/themes/next/
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
root@kali:~/blog/themes/next# git status
On branch master
Your branch is up to date with 'origin/master'.

Changes to be committed:
(use "git reset HEAD <file>..." to unstage)

modified: layout/_custom/header.swig
modified: layout/_custom/sidebar.swig
modified: layout/_layout.swig
modified: layout/category.swig
modified: layout/tag.swig
modified: source/css/_common/components/post/post-meta.styl
modified: source/css/_common/components/post/post-nav.styl
modified: source/css/_common/scaffolding/base.styl
modified: source/css/_custom/custom.styl
deleted: source/images/avatar.gif
modified: source/lib/Han/dist/han.min.css

Unmerged paths:
(use "git reset HEAD <file>..." to unstage)
(use "git add <file>..." to mark resolution)

both modified: _config.yml
both modified: languages/zh-Hans.yml
both modified: layout/_macro/post-copyright.swig
both modified: layout/_macro/post.swig
both modified: layout/_macro/sidebar.swig
both modified: layout/_partials/footer.swig
both modified: layout/page.swig
both modified: source/css/_variables/base.styl

Untracked files:
(use "git add <file>..." to include in what will be committed)

layout/_macro/passage-end-tag.swig
source/js/src/love.js

看下面Unmerged paths,说git reset HEAD <file>...来取消修改(大概),git add <file>...来 mark 决定(大概),我们当然要保存这些文件的更改,所以:

所在目录:~/blog/themes/next/
1
root@kali:~/blog/themes/next# git add _config.yml languages/zh-Hans.yml layout/_macro/post-copyright.swig layout/_macro/post.swig layout/_macro/sidebar.swig layout/_partials/footer.swig layout/page.swig source/css/_variables/base.styl layout/_macro/passage-end-tag.swig source/js/src/love.js

顺便把新加的passage-end-tag.swiglove.js也加进去,最后再来试一下吧:

所在目录:~/blog/themes/next/
1
2
root@kali:~/blog/themes/next# git pull
Already up to date.

哇,成功更新主题!

注意:更新有风险,一定要谨慎处理文件中冲突的部分!

另外:如果更新 NexT 主题后,配置文件有些新功能不会配置,可以查看 Releases 页面,去里面找说明。

优化 基本功能配置

通过上面的折腾,你应该能够在自己的 GitHub Pages 上看到自己的博客了,接下来就是配置和增加功能,如阅读统计、加上评论和安装插件啥的,还有就是添加一些博客的基本信息,这些配置建议在写文章之前先折腾好。

基本功能配置大部分就是改两个文件,都叫_config.yml,文章的开头位置已告诉大家。

我觉得与其将两个文件中的每点都分开来解释,倒不如直接将这两个文件贴出来,然后通过注释的方式告诉大家配置的方法,所以下面我会贴出这两个文件,怎么配置看注释就好了smile

选择主题

不过还有一件事要先说一说,就是选择合适自己的主题,这是搭建好博客后最重要的一件事。

默认的主题功能少,而且不太好看(个人感觉),而一些主题则有很多功能,也比较美观。

我选择的是 NexT,简洁且功能不少,也是在 GitHub 上被 Star 最多[2017.11.17]的一个 Hexo 主题。

第二多的是 hexo-theme-yilia,第三多的是 hexo-theme-material(还有一个很棒的 Material Design 风格主题 hexo-theme-material-indigo),还有一个我感觉比较有特色的,叫 Cactus Dark,这几个我感觉都不错,可以点开链接看看长啥样。

要是我上面说的还是没有合你胃口的sweat_smile,咋办?去 Hexo Themes 慢慢找。

至于换主题,很简单,我拿 NexT 主题举个栗子。

首先在这个主题的 GitHub 页面的右上方复制链接,如下图:

hexo-next-optimization-1.png

然后:

所在目录:~/blog/themes/
1
git clone https://github.com/iissnan/hexo-theme-next.git

把 hexo-theme-next 改名为 next,再在站点配置文件中修改成如下即可:

文件位置:~/blog/_config.yml
1
2
## Themes: https://hexo.io/themes/
theme: next

站点配置文件

请先查看 Hexo 官方文档,再查看下面我贴出的,如果这样后你还是对有些地方比较懵,可以自行 Google。

如果你的文件中没有相关内容,请勿直接添加,且所有的:都为英文字符,它后面都有一个空格。

[2017.11.14 更新] 文件位置:~/blog/_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: reuixiy
subtitle: Viva La Vida
description:
author: reuixiy
language: zh-Hans
timezone:

# URL
url: https://reuixiy.github.io/
root: /
# 博客文章的 URL 结构,请务必写文章之前就想好!
# 详细参数请查看:https://hexo.io/docs/permalinks.html
# 当然最好不要参考我的,我的太不利于 SEO 了,除非……
permalink: :category/:year/:month/:day/:title.html
permalink_defaults:

# 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: false
relative_link: false
future: true
# 代码高亮设置
highlight:
enable: true
line_number: true
# 代码自动高亮
auto_detect: true
tab_replace:
# 关于代码高亮的更多知识,可以查看本文 6.5.2 节

# 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
# URL 中的分类和标签“翻译”成英文
# 见:https://github.com/hexojs/hexo/issues/1162
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: 10
pagination_dir: page

## 修改归档页面、某一分类页面、某一标签页面的显示篇数
## 参考:http://theme-next.iissnan.com/faqs.html#setting-page-size
archive_generator:
per_page: 0
yearly: false
monthly: false
daily: false

category_generator:
per_page: 0

tag_generator:
per_page: 0

# Extensions
## Plugins: https://hexo.io/plugins/
# RSS,要先进入站点文件夹根目录安装插件
# npm install hexo-generator-feed --save 即可
# 无需更多配置
# 参数说明查看 README:https://github.com/hexojs/hexo-generator-feed
feed:
type: atom
path: atom.xml
# 文章数,0 为全部
limit: 0
hub:
# 是否包含文章内容
content: true

# emoji 支持,教程见本文 6.3 节
githubEmojis:
enable: true
idName: github-emoji
unicode: false
styles:
localEmojis:

## Themes: https://hexo.io/themes/
# 主题配置
theme: next

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repository: https://github.com/reuixiy/reuixiy.github.io.git
branch: master

主题配置文件

如果你的主题不是 NexT,那么请另 Google。建议先查看 NexT 官方文档,写的很好,多逗留会没坏处。

为了保证阅读效果,我把我没有配置的差不多都删了,有问题可以多 Google。如果你觉得里面有必要告诉大家,但我却没写,欢迎评论告诉我,我会及时加上滴~

[2017.12.13 更新] 文件位置:~/blog/themes/next/_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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
# ---------------------------------------------------------------
# Theme Core Configuration Settings
# ---------------------------------------------------------------

# 更新相关,参考:
# https://github.com/iissnan/hexo-theme-next/issues/328
# 博主没有使用,更新主题你可以使用本文 2.3 节的方法
override: false

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

# 站点图标啦,直接去 https://realfavicongenerator.net
# 选项弄好后,下载压缩包,解压复制粘贴
# 建议放在 hexo-site/source/images/ 里(没有自己建)
# 这样可以避免更新 NexT 主题的时候遇到麻烦
# 最后记得要稍微改下文件名,与下面的保持一致
favicon:
small: /images/favicon-16x16.png
medium: /images/favicon-32x32.png
apple_touch_icon: /images/apple-touch-icon.png
safari_pinned_tab: /images/safari-pinned-tab.svg
android_manifest: /images/manifest.json
ms_browserconfig: /images/browserconfig.xml

# Set default keywords (Use a comma to separate)
# 站点关键字,利于 SEO 大概,记得用英文逗号分隔
keywords: reuixiy,哲学,Hexo,博客,Coldplay

# Set rss to false to disable feed link.
# Leave rss as empty to use site's feed link.
# Set rss to specific value if you have burned your feed already.
# RSS,若参考上文 3.2 节站点配置文件里面的注释配置
# 则无需在这添加任何东西
rss:

footer:
# 页脚配置
# Specify the date when the site was setup.
# If not defined, current year will be used.
# 建站年份
since: 2017

# Icon between year and copyright info.
# 年份后面的图标,为 Font Awesome 图标
# 自己去纠结 https://fontawesome.com/v4.7.0/
# 然后更改名字就行,下面的有关图标的设置都一样
icon: heart

# If not defined, will be used `author` from Hexo main config.
# 如果不定义,默认用站点配置文件的 author 名
copyright:
# -------------------------------------------------------------
# Hexo link (Powered by Hexo).
# Hexo 的链接
powered: false

theme:
# Theme & scheme info link (Theme - NexT.scheme).
enable: false
# Version info of NexT after scheme info (vX.X.X).
version: false
# -------------------------------------------------------------
# Any custom text can be defined here.
# 自定义内容,要加记得把前面的 # 去掉
#custom_text:

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

canonical: true

seo: false

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


# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------

# 菜单设置 || 菜单图标设置(图标上面说了,不重复)
# 项目换行可以更改显示顺序
# 如果这个项前会显示 .menu
# 解决方法:编辑 ~/blog/themes/next/languages 下的相应文件
# 比如添加一个“留言”菜单,站点配置文件的 language 是 zh-Hans
# 则编辑 zh-Hans.yml,在 menu: 项内添加一行 留言: 留言
# 注意空格,且符号 : 为英文字符!
menu:
home: / || home
archives: /archives/ || archive
categories: /categories/ || th
tags: /tags/ || tags
top: /top/ || signal
about: /about/ || futbol-o
#schedule: /schedule/ || calendar
#sitemap: /sitemap.xml || sitemap
#commonweal: /404/ || heartbeat

# Enable/Disable menu icons.
# 是否开启菜单图标
menu_icons:
enable: true

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

# Schemes
# 设计板式,都长啥样,去 README 里面的链接里看看
# https://github.com/iissnan/hexo-theme-next#live-preview
scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini


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

# 侧栏社交链接设置,与上面菜单差不多,要生效记得把前面的 # 去掉
#social:
#GitHub: https://github.com/yourname || github
#E-Mail: mailto:yourname@gmail.com || envelope
#Google: https://plus.google.com/yourname || google
#Twitter: https://twitter.com/yourname || twitter
#FB Page: https://www.facebook.com/yourname || facebook
#VK Group: https://vk.com/yourname || vk
#StackOverflow: https://stackoverflow.com/yourname || stack-overflow
#YouTube: https://youtube.com/yourname || youtube
#Instagram: https://instagram.com/yourname || instagram
#Skype: skype:yourname?call|chat || skype

# 侧栏社交链接图标设置
social_icons:
enable: true
icons_only: false
transition: false

# Blog rolls
# 侧栏友链设置
links_icon: globe
links_title: 神奇的链接
#links_layout: block
links_layout: inline
links:
😆 网易云音乐 😆: https://music.163.com/#/user/home?id=86590096
Coldplay Official Website: http://coldplay.com/
获取 Elon Musk 的新闻: https://elonmusknews.org/
尼古拉·特斯拉:发明了现代世界的人: http://www.bilibili.com/video/av6211226/
关于此博客: https://reuixiy.github.io/about/

# Sidebar Avatar
# in theme directory(source/images): /images/avatar.gif
# in site directory(source/uploads): /uploads/avatar.gif
# 侧栏头像设置
# 圆形以及旋转效果在本文 4.2 节的代码里
# 点击回到博客首页教程见本文 5.13 节
# 建议放在 hexo-site/source/uploads/ 里(没有自己建)
# 这样可以避免更新 NexT 主题的时候遇到麻烦
avatar: /uploads/avatar.gif

# Table Of Contents in the Sidebar
# 侧栏文章目录设置(前提是 Markdown 书写正确)
# Markdown 教程见本文 6.2 节
toc:
enable: true

# Automatically add list number to toc.
# 自动加数字序号
number: true

# 如果标题太长,则放到下一行继续显示
# 开启后可能要在 custom.styl 里加代码,本文 4.2 节有
wrap: true

# Creative Commons 4.0 International License.
# http://creativecommons.org/
# Available: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
#creative_commons: by-nc-sa
#creative_commons:

sidebar:
# Sidebar Position, available value: left | right (only for Pisces | Gemini).
# 侧栏位置设置,可用值:左 | 右(只对 Pisces 和 Gemini 设计版式有效!)
position: left
#position: right

# Sidebar Display, available value (only for Muse | Mist):
# 侧栏显示方式,post 代表只有点进一篇文章内
# 且文章有目录,侧栏才会弹出显示
#display: post
#display: always
display: hide
#display: remove

# Sidebar offset from top menubar in pixels (only for Pisces | Gemini).
# 只对 Pisces 和 Gemini 设计版式有效!
offset: 12

# Back to top in sidebar (only for Pisces | Gemini).
# 只对 Pisces 和 Gemini 设计版式有效!
b2t: false

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

# Enable sidebar on narrow view (only for Muse | Mist).
# 移动端显示侧栏,只对 Muse 和 Mist 设计版式有效!
onmobile: true


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

# Automatically scroll page to section which is under <!-- more --> mark.
# 点击 [Read More],页面自动滚动到 <!-- more --> 标记处
scroll_to_more: false

# Automatically saving scroll position on each post/page in cookies.
# 用 cookies 保存浏览的位置信息,意味着重新打开这个页面后
# 页面就会自动滚动到上次的位置,除非读者清理浏览器 cookies
save_scroll: false

# Automatically excerpt description in homepage as preamble text.
# 将每篇文章 Front-matter 里 description 的文字作为页面显示的文章摘要
excerpt_description: false

# Automatically Excerpt. Not recommend.
# Please use <!-- more --> in the post to control excerpt accurately.
# 按字数自动加入 [Read More],不建议!
# 建议在文章中加入 <!-- more -->
# 自定义 [Read More] 按钮之前要显示的内容!
auto_excerpt:
enable: false
length: 150

# Post meta display settings
# 文章顶部显示的文章元数据设置
post_meta:
item_text: true
created_at: true
updated_at: false
categories: true

# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
# 显示统计字数和估计阅读时长
# 注意:这个要安装插件,先进入站点文件夹根目录
# 然后:npm install hexo-wordcount --save
post_wordcount:
item_text: true
wordcount: true
min2read: false
totalcount: false
separated_meta: false

# Wechat Subscriber

# Reward

# Declare license on posts
post_copyright:
enable: false
license: CC BY-NC-SA 3.0
license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/


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

# Reduce padding / margin indents on devices with narrow width.
# 移动端把页面两边留白去除,个人不建议
# 移动端样式可以参考本文 4.2 节的相关代码
mobile_layout_economy: false

# Android Chrome header panel color ($black-deep).
# Android 上 Chrome 浏览器顶部颜色设置
android_chrome_color: "#fff"

# 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 value:
# normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
# 代码高亮主题设置
# 都长啥样自己点开上面的链接查看
highlight_theme: normal
# 注意要先在站点配置文件中设置
# 怎么设置参考本文 3.2 节


# ---------------------------------------------------------------
# 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
# ---------------------------------------------------------------
# 字体设置,见本文 4.3 节
font:
enable: true

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

# 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 on <body> element.
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: Roboto Slab
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: Roboto Mono
size:


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

# MathJax Support
mathjax:
enable: false
per_page: false
cdn: //cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML

# Han Support docs: https://hanzi.pro/
# 汉字标准格式,没用过暂时不了解
han: false

# Swiftype Search API Key

# Baidu Analytics ID

# Duoshuo ShortName

# Disqus

# Hypercomments
# 我用的就是这种,特点是可以匿名评论,暂时还没有加入 GFW 名单
# https://www.hypercomments.com/
# 自己去网站用 Google 邮箱注册,有啥不懂请留言评论
# 建议你把 Quote(管理台右上角的 Settings 按钮,然后 Widget 里)关了
# 鼠标在一些段落上时,这个 Quote 会在后面显示一个图标
# 或者选中一段文字,会有……
hypercomments_id:

# changyan

# Valine.

# Support for youyan comments system.

# Support for LiveRe comments system.
# 来必力评论
# 参见教程:https://linan.blog/2017/LiveReCommentsSystem/
#livere_uid: your uid

# Gitment

# Baidu Share

# Share

# Google Webmaster tools verification setting
# See: https://www.google.com/webmasters/
# Google 站长工具校验
# 可以不用这种验证方式,直接先添加下面的 Google Analytics
# 然后用 Google Analytics 校验
#google_site_verification:

# Webmaster 是用来提交自己的文章链接给 Google
# 然后别人就有可能通过 Google 搜索到自己的博客
# 这个必须做,如果你的文章想被别人看到的话
# 教程查看本文 5.4 节

# Google Analytics
# 去 https://analytics.google.com 注册,自备梯子
# 目前国内网络环境也可以使用,教程查看本文 5.4 节
google_analytics:

# Bing Webmaster tools verification setting

# Yandex Webmaster tools verification setting

# CNZZ count

# Application Insights

# Make duoshuo show UA

# Post widgets & FB/VK comments settings.
# ---------------------------------------------------------------
# Facebook SDK Support.

# Facebook comments plugin

# VKontakte API Support.

# Star rating support to each article.
# To get your ID visit https://widgetpack.com
# 评分,教程见本文 5.6 节
rating:
enable: true
id:
color: f79533
# ---------------------------------------------------------------

# Show number of visitors to each article.
# You can visit https://leancloud.cn get AppID and AppKey.
# 可以显示每篇文章的阅读量
# 然后可以通过阅读量建立 TopX 页面,教程链接:
# https://notes.wanghao.work/2015-10-21-为NexT主题添加文章阅读量统计功能.html
leancloud_visitors:
enable: true
app_id:
app_key:

# Another tool to show number of visitors to each article.

# Show PV/UV of the website/page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi/
# 不蒜子统计,用于在页脚显示总访客数和总浏览量,将 false 改为 true 就能直接使用
busuanzi_count:
# count values only if the other configs are false
enable: true
# custom uv span for the whole site
site_uv: true
site_uv_header: <i class="fa fa-user-circle-o"></i>
site_uv_footer:
# custom pv span for the whole site
site_pv: true
site_pv_header:
site_pv_footer: <i class="fa fa-eye"></i>
# custom pv span for one page only
# 页面浏览量,不建议开启,建议用上面的 leancloud_visitors
# 首先 leancloud 更稳定,其次 leancloud 便于管理
# 最后,可以利用 leancloud 的 api 建立 TopX 页面
page_pv: false
page_pv_header: <i class="fa fa-file-o"></i>
page_pv_footer:

# Tencent analytics ID

# Tencent MTA ID

# Enable baidu push
baidu_push: false

# Google Calendar

# Algolia Search

# Local search
# Dependencies: https://github.com/flashlab/hexo-generator-search
# 要安装插件才能使用,先进入站点文件夹根目录
# 然后:npm install hexo-generator-searchdb --save
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


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

# External URL with BASE64 encrypt & decrypt.
# Usage: {% exturl text url "title" %}
# Alias: {% extlink text url "title" %}
# 用法见:
# https://github.com/iissnan/hexo-theme-next/pull/1438
exturl: false

# Note tag (bs-callout).
# 主题的标签样式,有 note、label、tabs 三种
# 说明请查看本文 6.5 节
note:
style: flat
icons: true
border_radius: 3
light_bg_offset: 0

# Label tag.
label: true

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

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

# Use velocity to animate everything.
motion:
enable: true
async: true
transition:
post_block: perspectiveLeftIn
post_header: fadeIn
post_body: fadeIn
coll_header: perspectiveLeftIn
# Only for Pisces | Gemini.
sidebar: slideUpIn

# Fancybox
# 查看图片的
fancybox: true

# [2017.08.27]
# 效果太差了,没能力自己造轮子,先关了

# [2017.11.17]
# 原因是版本太低,已有大佬提交 Pr:
# https://github.com/iissnan/hexo-theme-next/pull/1989
# 目前还未被 Merge,博主跟进中,实在不行手动更新
# 暂时的解决方法:
# 下面的 Script Vendors 的 fancybox 那
# 加上新版本的 CDN 地址

# Progress bar in the top during page loading.
# 页面顶部加载条
pace: true
pace_theme: pace-theme-flash

# Canvas-nest
# 动态背景,见本文 3.4 节
# 被我关了 [2017.07.01]
canvas_nest: false

# three_waves
three_waves: false

# canvas_lines
canvas_lines: false

# canvas_sphere
canvas_sphere: false

# Only fit scheme Pisces
# 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.
# 相关内容用 CDN 地址取代,加速网站访问,注意版本尽可能要一致
vendors:
# Internal path prefix. Please do not edit it.
_internal: lib

# Internal version: 2.1.3
jquery: https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js

# Internal version: 2.1.5
# See: http://fancyapps.com/fancybox/
# 自定义 fancybox(暂时)
fancybox: https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js
fancybox_css: https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css

# Internal version: 1.0.6
# See: https://github.com/ftlabs/fastclick
fastclick: https://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js

# Internal version: 1.9.7
# See: https://github.com/tuupola/jquery_lazyload
lazyload: https://cdnjs.cloudflare.com/ajax/libs/jquery_lazyload/1.9.7/jquery.lazyload.min.js

# Internal version: 1.2.1
# See: http://VelocityJS.org
velocity: https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.1/velocity.min.js

# Internal version: 1.2.1
# See: http://VelocityJS.org
velocity_ui: https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.1/velocity.ui.min.js

# Internal version: 0.7.9
# See: https://faisalman.github.io/ua-parser-js/
ua_parser: https://cdnjs.cloudflare.com/ajax/libs/UAParser.js/0.7.9/ua-parser.min.js

# Internal version: 4.6.2
# See: http://fontawesome.io/
fontawesome: https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css

# Internal version: 1.0.2
# See: https://github.com/HubSpot/pace
# Or use direct links below:
pace: //cdn.bootcss.com/pace/1.0.2/pace.min.js
pace_css: //cdn.bootcss.com/pace/1.0.2/themes/blue/pace-theme-flash.min.css

# Assets
css: css
js: js
images: images

# Theme version
version: 5.1.3

# 文章末尾添加“本文结束”标记,请勿直接添加,教程链接:
# http://shenzekun.cn/hexo的next主题个性化配置教程.html
# 见第 7 节,在每篇文章末尾统一添加“本文结束”标记
passage_end_tag:
enabled: true

如果里面有些设置你还想进一步自定义,比如进一步自定义页脚文字的顺序,折腾完本文第 5 节你就会了wink

动态背景

效果图:

hexo-next-optimization-2.gif

主题配置文件中,靠后面,改canvas_nest: true,想要更改颜色和数量?修改文件:

文件位置
1
~/blog/themes/next/source/lib/canvas-nest/canvas-nest.min.js

怎么修改?参考 README

注脚

Hexo 插件搜索footnotes,发现目前有两种插件,右边的可以实现鼠标放在上面悬浮显示注释的功能,但是亲测有一个 Bug,有时对页面宽度有影响,强迫症难以忍受。

tip:Hexo 插件页面有很多不同功能的插件,可以自行尝试,说不定有惊喜。

hexo-next-optimization-footnotes.jpg

我安装的是左边的,先进入站点文件夹根目录,然后:

所在目录:~/blog/
1
npm install hexo-footnotes --save

安装后按 README 的方法书写,应该就可以了。

注意:注脚的内容一定要放在 Markdown 文档的最后面,否则可能会有错误。

优化 网页样式布局

发现页面有大量留白?颜色不合自己口味?那就 F12 开始吧,大换装开始!空白区?颜色?背景?圆角矩形?阴影?透明度?超链接样式?侧栏头像圆形并旋转?文章标题前面的竖线和颜色?只需按下 F12,改到自己想要的样式,然后 Copy 到custom.styl文件即可。

文件位置:~/blog/themes/next/source/css/_custom/custom.styl

怎么知道要修改这个文件呢?强烈推荐阅读2017年最新基于hexo搭建个人免费博客——自定义页面样式一

感觉这是 NexT 主题非常棒的设计,因为这让我们能够很方便自定义博客的样式。

怎么更改?

浏览器按 F12 即可,建议用 Google Chrome 浏览器(有梯子的直接去 Google 下载joy),或者火狐浏览器。如果你按下 F12 后简直特么一脸懵逼,那么别急,硬着头皮慢慢折腾吧哈哈哈嗝~

bb - for - bb

不管你信不信,其实博主就是这样直接折腾过来的,我之前没学过 HTML 和 CSS,所以当时按下 F12 真是一脸懵逼。

我一开始是 Google(关键字:Hexo NexT 自定义)到上面那篇文章,一点进去,卧槽!侧栏终于不是清一色的默认黑色,激动!这为大佬怎么改的啊?这篇文章一定有吧heart_eyes!?然后看下去,果然有!

然后眼睛先盯着贴的custom.styl,久久看着少数的注释,Copy 一段到自己的custom.styl,保存,然后hexo cleanhexo ghexo s(当时我还不知道可以hexo s后可以直接本地调试sob),再去浏览器刷新自己的本地调试页面,看看效果。效果是有了,但是不是我想要的效果啊……于是去百度其中一行 CSS 代码,再回去慢慢删改调试……

tip:hexo s后可以直接本地调试,也就是更改文件保存后,Hexo 后台会自动重新渲染文件,所以只要稍等片刻,浏览器刷新一下就能看到效果。

博主由懵逼到熟悉花了不少时间,但是我写这篇文章就是为了减少像我这样的小白折腾的时间,所以下面详细说明下按下 F12 后怎么快速由懵逼到熟悉!

快速由懵逼到熟悉

首先按下 F12 后的操作流程图,就是这篇文章中的三步骤,点小箭头定位元素,调试 CSS 代码,最后 Copy 到custom.styl

然后懵逼的地方,应该有下面两点:

  1. 按下 F12 后弹出的界面是什么鬼?!
  2. 界面中的{}前面的和里面的英文是什么鬼?!

第一点:弹出的界面是为调试设计的,如果你知道调试的是啥,也许就自然了解弹出的界面,所以我不多说,不过还是给一份 Google 官方的资料——Chrome 开发者工具

第二点:{}前面的是 HTML 的元素名,{}里面的是这个元素的 CSS 样式。

社交要先有自己原则,一段代码要先声明变量,一个数学问题有前提,一篇论文要先定义名词,到这里我们也必须要先了解一些 HTML 和 CSS 的基本语法知识了,才能继续折腾下去。

建议先浏览下这篇文章,但没必要记住里面的每一个语法知识,因为这样的记忆是不够深刻也并不高效的,只要浏览下留个印象(为了能找准元素)就行,而记忆是要在实践中记忆的。

bb - for - fun

实践?对!就是打开自己的本地调试页面,然后用你挑剔的眼光看看,哪里让你不爽,就按 F12,定位元素,最后调试,直到改到自己满意。这不是与一开始说的三步骤一样吗,为啥现在又说一遍?

不不不,想想如果你点开一个俄文网站,然后我给你个这页面上的一个俄文链接的中文翻译,让你找到这个俄文链接并点开,你会不会懵逼呢……一样的,如果我没有让先你浏览 HTML 和 CSS 的基本语法知识,那么对网页中出现的东东大脑压根就“翻译”不成 HTML 和 CSS 代码(反之一样)。

对 HTML 和 CSS 的语法定义不明,就可能会找不准元素,而找不准元素不仅可能达不到预期效果,还可能会产生一些新的 bugs,所以要先浏览上面那篇文章。

这也是我这个小白走过的坑中,最大的一个了,花费了我不少时间在无意义的搜索上,想达到一个效果,但是不知道输入什么搜索关键字……

css.gif

最后,要熟练还是要多折腾,给你右边这张图慢慢体会……喵?!多折腾,说好的快速呢!?快速是要有对比的,我填了定义不明这个大坑,你按我说的操作,与我的慢折腾经历相比,你的折腾当然是快速。

诡辩?好吧说实话也算是谎言,不过是个善意的谎言,只为给你一种神奇的能量——Hope,这种谎言在生活中很常见,但我的缺少一个目的——钱。

附上我的 custom.styl

一定是先 F12 找到要自定义的元素,调试成自己喜欢的值,然后再复制到custom.styl,而不是直接复制我给出的,我给出的仅供参考。

请先找对元素,不然可能会制造出新 bug,建议大家修改一个,就加个注释,方便以后调试修改。

[2017.12.31 更新] 文件位置:~/blog/themes/next/source/css/_custom/custom.styl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
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
// Custom styles
// 页面最顶部的横线
.headband {
height: 1.5px;
background-image: linear-gradient(90deg, #F79533 0%, #F37055 15%, #EF4E7B 30%, #A166AB 44%, #5073B8 58%, #1098AD 72%, #07B39B 86%, #6DBA82 100%);
}
// 页面顶部行高
.header {
line-height: 1.5;
}
// 页面背景色
.container {
background-color: rgba(0, 0, 0, 0.75);
}
// 页面留白更改
.header-inner {
padding-top: 0px;
padding-bottom: 0px;
}
.posts-expand {
padding-top: 80px;
}
.posts-expand .post-meta {
margin: 5px 0px 0px 0px;
}
.post-button {
margin-top: 0px;
}
// 顶栏宽度
.container .header-inner {
width: 100%;
}
// 渐变菜带,CSS代码copy自https://githubuniverse.com
.site-meta {
background-image: linear-gradient(90deg, #F79533 0%, #F37055 15%, #EF4E7B 30%, #A166AB 44%, #5073B8 58%, #1098AD 72%, #07B39B 86%, #6DBA82 100%);
}
// 站点名背景
.brand{
background-color: rgba(255, 255, 255, 0);
margin-top: 15px;
padding: 0px;
}
// 站点名字体
.site-title {
font-size: 75px;
font-weight: bold;
color: rgb(255, 255, 255);
line-height: 80px;
letter-spacing: 3px;
}
// 站点子标题
.site-subtitle{
margin: 0px;
font-size: 16px;
letter-spacing: 1px;
padding-bottom: 3px;
font-weight: bold;
color: rgb(255, 255, 255);
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: rgb(161, 102, 171);
}
// 菜单
.menu {
text-align: center;
margin-top: 0px;
margin-bottom: 0px;
padding: 5px;
background-color: rgba(255, 255, 255, 0.75);
box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.15);
}
// 菜单超链接字体大小
.menu .menu-item a {
font-size: 15px;
}
// 菜单各项边距
.menu .menu-item {
margin: 5px 15px;
}
// 菜单超链接样式
.menu .menu-item a:hover {
border-bottom-color: rgba(161, 102, 171, 0);
}
// 文章
.post {
margin-bottom: 50px;
padding: 45px 36px 36px 36px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
background-color: rgb(255, 255, 255);
}
// 文章标题字体
.posts-expand .post-title {
font-size: 26px;
font-weight: 700;
}
// 文章标题动态效果
.posts-expand .post-title-link::before {
background-image: linear-gradient(90deg, #a166ab 0%, #ef4e7b 25%, #f37055 50%, #ef4e7b 75%, #a166ab 100%);
}
// 文章元数据(meta)留白更改
.posts-expand .post-meta {
margin: 10px 0px 20px 0px;
}
// 文章的描述description
.posts-expand .post-meta .post-description {
font-style: italic;
font-size: 14px;
margin-top: 30px;
margin-bottom: 0px;
color: #666;
}
// [Read More]按钮样式
.post-button .btn {
color: #555 !important;
background-color: rgb(255, 255, 255);
border-radius: 3px;
font-size: 15px;
box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
border: none !important;
transition-property: unset;
padding: 0px 15px;
}
.post-button .btn:hover {
color: rgb(255, 255, 255) !important;
border-radius: 3px;
font-size: 15px;
box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
background-image: linear-gradient(90deg, #a166ab 0%, #ef4e7b 25%, #f37055 50%, #ef4e7b 75%, #a166ab 100%);
}
// 去除在页面文章之间的分割线
.posts-expand .post-eof {
margin: 0px;
background-color: rgba(255, 255, 255, 0);
}
// 去除页面底部页码上面的横线
.pagination {
border: none;
margin: 0px;
}
// 页面底部页码
.pagination .page-number.current {
border-radius: 100%;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
background-color: rgba(255, 255, 255, 0.35);
}
.pagination .prev, .pagination .next, .pagination .page-number {
margin-bottom: 10px;
border: none;
}
.pagination .space {
color: rgb(255, 255, 255);
}
// 页面底部页脚
.footer {
line-height: 1.5;
background-color: rgba(255, 255, 255, 0.75);
color: #333;
border-top-width: 3px;
border-top-style: solid;
border-top-color: rgb(161, 102, 171);
box-shadow: 0px -10px 10px 0px rgba(0, 0, 0, 0.15);
}
// 文章底部的tags
.posts-expand .post-tags a {
border-bottom: none;
margin-right: 0px;
font-size: 13px;
padding: 0px 5px;
border-radius: 3px;
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
transition-delay: 0s;
}
.posts-expand .post-tags a:hover {
background: #eee;
}
// 文章底部留白更改
.post-widgets {
padding-top: 0px;
}
.post-nav {
margin-top: 30px;
}
// 文章底部页面跳转
.post-nav-item a {
color: rgb(80, 115, 184);
font-weight: bold;
}
.post-nav-item a:hover {
color: rgb(161, 102, 171);
font-weight: bold;
}
// 文章底部评论
.comments {
background-color: rgb(255, 255, 255);
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
margin: 80px 0px 40px 0px;
}
// 超链接样式
a {
color: rgb(80, 115, 184);
border-bottom-color: rgb(80, 115, 184);
}
a:hover {
color: rgb(161, 102, 171);
border-bottom-color: rgb(161, 102, 171);
}
// 分割线样式
hr {
margin: 10px 0px 30px 0px;
}
// 文章内标题样式(左边的竖线)
.post-body h2, h3, h4, h5, h6 {
border-left: 4px solid rgb(161, 102, 171);
margin-left: -36px;
padding-left: 32px;
}
// 去掉图片边框
.posts-expand .post-body img {
border: none;
padding: 0px;
}
.post-gallery .post-gallery-img img {
padding: 3px;
}
// 文章``代码块的自定义样式
code {
margin: 0px 4px;
}
// 文章```代码块顶部样式
.highlight figcaption {
margin: 0em;
padding: 0.5em;
background: #eee;
border-bottom: 1px solid #e9e9e9;
}
.highlight figcaption a {
color: rgb(80, 115, 184);
}
// 文章```代码块diff样式
pre .addition {
background: #e6ffed;
}
pre .deletion {
background: #ffeef0;
}
// 右下角侧栏按钮样式
.sidebar-toggle {
right: 10px;
bottom: 43px;
background-color: rgba(247, 149, 51, 0.75);
border-radius: 5px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
}
.page-post-detail .sidebar-toggle-line {
background: rgb(7, 179, 155);
}
// 右下角返回顶部按钮样式
.back-to-top {
line-height: 1.5;
right: 10px;
padding-right: 5px;
padding-left: 5px;
padding-top: 2.5px;
padding-bottom: 2.5px;
background-color: rgba(247, 149, 51, 0.75);
border-radius: 5px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
}
.back-to-top.back-to-top-on {
bottom: 10px;
}
// 侧栏
.sidebar {
box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
background-color: rgba(0, 0, 0, 0.75);
}
.sidebar-inner {
margin-top: 30px;
}
// 侧栏顶部文字
.sidebar-nav li {
font-size: 15px;
font-weight: bold;
color: rgb(7, 179, 155);
}
.sidebar-nav li:hover {
color: rgb(161, 102, 171);
}
.sidebar-nav .sidebar-nav-active {
color: rgb(7, 179, 155);
border-bottom-color: rgb(161, 102, 171);
border-bottom-width: 1.5px;
}
.sidebar-nav .sidebar-nav-active:hover {
color: rgb(7, 179, 155);
}
// 侧栏站点概况行高
.site-overview {
line-height: 1.3;
}
// 侧栏头像(圆形以及旋转效果)
.site-author-image {
border: 2px solid rgb(255, 255, 255);
border-radius: 100%;
transition: transform 1.0s ease-out;
}
img:hover {
transform: rotateZ(360deg);
}
.posts-expand .post-body img:hover {
transform: initial;
}
// 侧栏站点作者名
.site-author-name {
display: none;
}
// 侧栏站点描述
.site-description {
letter-spacing: 5px;
font-size: 15px;
font-weight: bold;
margin-top: 15px;
margin-left: 13px;
color: rgb(243, 112, 85);
}
// 侧栏站点文章、分类、标签
.site-state {
line-height: 1.3;
margin-left: 12px;
}
.site-state-item {
padding: 0px 15px;
border-left: 1.5px solid rgb(161, 102, 171);
}
// 侧栏RSS按钮样式
.feed-link {
margin-top: 15px;
margin-left: 7px;
}
.feed-link a {
color: rgb(255, 255, 255);
border: 1px solid rgb(158, 158, 158) !important;
border-radius: 15px;
}
.feed-link a:hover {
background-color: rgb(161, 102, 171);
}
.feed-link a i {
color: rgb(255, 255, 255);
}
// 侧栏社交链接
.links-of-author {
margin-top: 0px;
}
// 侧栏友链标题
.links-of-blogroll-title {
margin-bottom: 10px;
margin-top: 15px;
color: rgba(7, 179, 155, 0.75);
margin-left: 6px;
font-size: 15px;
font-weight: bold;
}
// 侧栏超链接样式(友链的样式)
.sidebar a {
color: #ccc;
border-bottom: none;
}
.sidebar a:hover {
color: rgb(255, 255, 255);
}
// 自定义的侧栏时间样式
#days {
display: block;
color: rgb(7, 179, 155);
font-size: 13px;
margin-top: 15px;
}
// 侧栏目录链接样式
.post-toc ol a {
color: rgb(7, 179, 155);
border-bottom: 1px solid rgb(96, 125, 139);
}
.post-toc ol a:hover {
color: rgb(161, 102, 171);
border-bottom-color: rgb(161, 102, 171);
}
// 侧栏目录链接样式之当前目录
.post-toc .nav .active > a {
color: rgb(161, 102, 171);
border-bottom-color: rgb(161, 102, 171);
}
.post-toc .nav .active > a:hover {
color: rgb(161, 102, 171);
border-bottom-color: rgb(161, 102, 171);
}
/* 修侧栏目录bug,如果主题配置文件_config.yml的toc是wrap: true */
.post-toc ol {
padding: 0px 10px 5px 10px;
}
/* 侧栏目录默认全展开,已注释
.post-toc .nav .nav-child {
display: block;
}
*/
// 时间轴样式
.posts-collapse {
margin: 50px 0px;
}
@media (max-width: 1023px) {
.posts-collapse {
margin: 50px 20px;
}
}
// 时间轴左边线条
.posts-collapse::after {
margin-left: -2px;
background-image: linear-gradient(180deg,#f79533 0,#f37055 15%,#ef4e7b 30%,#a166ab 44%,#5073b8 58%,#1098ad 72%,#07b39b 86%,#6dba82 100%);
}
// 时间轴左边线条圆点颜色
.posts-collapse .collection-title::before {
background-color: rgb(255, 255, 255);
}
// 时间轴文章标题左边圆点颜色
.posts-collapse .post-header:hover::before {
background-color: rgb(161, 102, 171);
}
// 时间轴年份
.posts-collapse .collection-title h1, .posts-collapse .collection-title h2 {
color: rgb(255, 255, 255);
}
// 时间轴文章标题
.posts-collapse .post-title a {
color: rgb(80, 115, 184);
}
.posts-collapse .post-title a:hover {
color: rgb(161, 102, 171);
}
// 时间轴文章标题底部虚线
.posts-collapse .post-header:hover {
border-bottom-color: rgb(161, 102, 171);
}
// archives页面顶部文字
.page-archive .archive-page-counter {
color: rgb(255, 255, 255);
}
// archives页面时间轴左边线条第一个圆点颜色
.page-archive .posts-collapse .archive-move-on {
top: 10px;
opacity: 1;
background-color: rgb(255, 255, 255);
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
}
// 分类页面
.post-block.page {
margin-top: 40px;
}
.category-all-page {
margin: -80px 50px 40px 50px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
background-color: rgb(255, 255, 255);
padding: 86px 36px 36px 36px;
}
@media (max-width: 767px) {
.category-all-page {
margin: -73px 15px 50px 15px;
}
.category-all-page .category-all-title {
margin-top: -5px;
}
}
// 标签云页面
.tag-cloud {
margin: -80px 50px 40px 50px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
background-color: rgb(255, 255, 255);
padding: 86px 36px 36px 36px;
}
.tag-cloud-title {
margin-bottom: 15px;
}
@media (max-width: 767px) {
.tag-cloud {
margin: -73px 15px 50px 15px;
padding: 86px 5px 36px 5px;
}
}
// 自定义的TopX页面样式
#top {
display: block;
text-align: center;
margin: -100px 50px 40px 50px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
background-color: rgb(255, 255, 255);
padding: 106px 36px 10px 36px;
}
@media (max-width: 767px) {
#top {
margin: -93px 15px 50px 15px;
padding: 96px 10px 0px 10px;
}
}
// 自定义ABOUT页面的样式
.about-page {
margin: -80px 0px 60px 0px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
background-color: rgb(255, 255, 255);
padding: 106px 36px 36px 36px;
}
@media (max-width: 767px) {
.about-page {
margin: -73px 0px 50px 0px;
padding: 96px 15px 20px 15px;
}
}
h2.about-title {
border-left: none !important;
margin-left: 0px !important;
padding-left: 0px !important;
text-align: center;
background-image: linear-gradient(90deg, #a166ab 0%, #a166ab 40%, #ef4e7b 45%, #f37055 50%, #ef4e7b 55%, #a166ab 60%, #a166ab 100%);
background-size: cover;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
user-select: none;
}
// 本地搜索框
.local-search-popup .search-icon, .local-search-popup .popup-btn-close {
color: rgb(247, 149, 51);
margin-top: 7px;
}
.local-search-popup .local-search-input-wrapper input {
padding: 9px 0px;
height: 21px;
background-color: rgb(255, 255, 255);
}
.local-search-popup .popup-btn-close {
border-left: none;
}
// 选中文字部分的样式
::selection {
background-color: rgb(255, 241, 89);
color: #555;
}
/* 设置滚动条的样式 */
/* 参考https://segmentfault.com/a/1190000003708894 */
::-webkit-scrollbar {
width: 5px;
height: 5px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
background: #eee;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
border-radius: 5px;
background-color: #ccc;
}
::-webkit-scrollbar-thumb:hover {
background-color: rgb(247, 149, 51);
}
// 音乐播放器aplayer
.aplayer {
font-family: Lato, -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Heiti SC", STHeiti, "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", "Droid Sans Fallback", "Microsoft YaHei", sans-serif !important;
}
.aplayer-withlrc.aplayer .aplayer-info {
background-color: rgb(255, 255, 255);
}
// 音乐播放器aplayer歌单
.aplayer .aplayer-list ol {
background-color: rgb(255, 255, 255);
}
// 修视频播放器dplayer页面全屏的bug
// 已不存在,注释掉了
// .use-motion .post-body {
// transform: inherit !important;
// }
// 自定义emoji样式
img#github-emoji {
margin: 0px;
padding: 0px;
display: inline !important;
vertical-align: text-bottom;
border: none;
cursor: text;
box-shadow: none;
}
// 文章超链接样式(为emoji特设)
.post-body a {
color: rgb(80, 115, 184);
border-bottom: none;
text-decoration: underline;
}
.post-body a:hover {
color: rgb(161, 102, 171);
border-bottom: none;
text-decoration: underline;
}
// 标签云页面超链接样式(为emoji特设)
.tag-cloud a {
border-bottom: 1px solid rgb(80, 115, 184);
text-decoration: none;
}
.tag-cloud a:hover {
border-bottom: 1px solid rgb(161, 102, 171);
text-decoration: none;
}
// 文章元数据中categories的样式(为emoji特设)
a.categories {
color: rgb(80, 115, 184);
border-bottom: none;
text-decoration: underline;
}
a.categories:hover {
color: rgb(161, 102, 171);
border-bottom: none;
text-decoration: underline;
}
// tabs标签(为emoji特设)
.post-body .tabs ul.nav-tabs li.tab a {
text-decoration: none;
}
// 图片下方标题设置(为emoji特设)
a.fancybox{
text-decoration: none !important;
}
// 按钮样式(为emoji特设)
.btn {
color: #fff !important;
text-decoration: none !important;
border: 2px solid #222 !important;
}
.btn:hover {
color: #222 !important;
}
// 自定义的页脚微信订阅号样式
.weixin-box {
position: absolute;
bottom: 43px;
left: 10px;
border-radius: 5px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
}
.weixin-menu {
position: relative;
height: 24px;
width: 24px;
cursor: pointer;
background: url(https://微信的logo.svg);
background-size: 24px 24px;
}
.weixin-hover {
position: absolute;
bottom: 0px;
left: 0px;
height: 0px;
width: 0px;
border-radius: 3px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
background: url(https://二维码.svg);
background-color: #fff;
background-repeat: no-repeat;
background-size: 150px 150px;
transition: all 0.35s ease-in-out;
z-index: 1024;
opacity: 0;
}
.weixin-menu:hover .weixin-hover {
bottom: 24px;
left: 24px;
height: 170px;
width: 150px;
opacity: 1;
}
.weixin-description {
opacity: 0;
position: absolute;
bottom: 3%;
left: 5%;
right: 5%;
font-size: 12px;
transition: all 0.35s cubic-bezier(1, 0, 0, 1);
}
.weixin-menu:hover .weixin-description {
opacity: 1;
}
// 自定义页脚跳动的心样式
@keyframes heartAnimate {
0%,100%{transform:scale(1);}
10%,30%{transform:scale(0.9);}
20%,40%,60%,80%{transform:scale(1.1);}
50%,70%{transform:scale(1.1);}
}
#heart {
animation: heartAnimate 1.33s ease-in-out infinite;
}
.with-love {
color: rgb(255, 113, 168);
}
// 自定义特别的样式
h2.love {
border-left: none;
color: rgb(255, 113, 168);
-webkit-text-fill-color: unset;
}
// 自定义的引用样式
blockquote.question {
color: #555;
border-left: 4px solid rgb(16, 152, 173);
background-color: rgb(227, 242, 253);
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
margin-bottom: 20px;
}
// 自定义的数字块
span#inline-toc {
display: inline-block;
border-radius: 80% 100% 90% 20%;
background-color: rgb(227, 242, 253);
color: #555;
padding: 0.05em 0.4em;
margin: 2px 5px 2px 0px;
line-height: 1.5;
}
// 自定义的文章摘要图片样式
img.img-topic {
width: 100%;
}
// 自定义的文章置顶样式
.post-sticky-flag {
font-size: inherit;
float: left;
color: rgb(0, 0, 0);
cursor: help;
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
transition-delay: 0s;
}
.post-sticky-flag:hover {
color: #07b39b;
}
// 自定义替代description的样式
p.description{
text-align: center;
font-size: 14px;
font-style: italic;
color: #666;
margin-top: 30px;
}
code.description {
padding: 1px 1px 1px 1px;
margin: 0px 1px 0px 4px;
}
// 移动端样式
@media (max-width: 1023px) {
.container {
background-color: rgba(0, 0, 0, 0);
}
.sidebar {
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.feed-link {
display: none !important;
}
}
@media (max-width: 767px) {
.main {
padding-bottom: 120px;
}
.posts-expand {
margin: 0px;
padding-top: 70px;
}
.posts-expand .post-title {
font-size: 22px;
}
.posts-expand .post-meta {
font-size: 10px;
}
.post {
margin-bottom: 30px !important;
padding: 20px 15px 15px 15px !important;
}
.post-body h2, h3, h4, h5, h6 {
margin-left: -15px;
padding-left: 11px;
}
.posts-expand .post-tags {
margin-top: 10px;
}
.post-widgets {
margin-top: 10px;
}
.comments {
margin: 40px 0px 40px 0px !important;
}
.footer {
box-shadow: 0px -5px 10px 0px rgba(0, 0, 0, 0.5);
}
}
.sidebar-active #sidebar-dimmer {
opacity: 0;
}
// 移动端左上角菜单按钮
.site-nav-toggle {
top: 35px;
left: 10px;
}
.btn-bar {
background-color: rgb(255, 255, 255);
}
// 移动端菜单
@media (max-width: 767px) {
.menu {
text-align: center;
box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
}
.site-nav {
top: initial;
background-color: rgba(255, 255, 255, 0.75);
border-top: none;
border-bottom: none;
position: relative;
z-index: 1024;
}
}
// 移动端顶部
@media (max-width: 767px) {
.site-title {
font-size: 70px !important;
letter-spacing: 0px !important;
}
.site-subtitle{
letter-spacing: 0px !important;
padding-bottom: 0px !important;
}
.site-meta {
box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
}
.menu .menu-item {
margin: 0px 10px !important;
}
}

修改字体

优化了这么多,但还有一个最影响博客形象和阅读体验的项没有优化,瓦特?字体!

文章字体大小可以编辑:

文件位置:~/blog/themes/next/source/css/_variables/base.styl
1
$font-size-base           = 16px

如果你是一个和我一样对字体一脸懵逼的人,推荐阅读:

  1. Web中文字体排版指南
  2. Web字体的选择和运用
  3. 如何优雅的选择默认字体(font-family)
  4. 中文字体网页开发指南
  5. 在Web内容中使用系统字体

首先对于汉字来说,因为其字体库太大,通常都是调用本地中文字体库。然而,不同设备有不同默认中文字体和中文字体库,想要尽可能在不同设备上有较好的显示效果,就要在调用不同设备的本地字体库中显示效果较好的中文字体。

下面附上我的供大家参考:

文件位置:~/blog/themes/next/source/css/_variables/base.styl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// Font families.
$font-family-chinese = -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "STHeiti", "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", "Droid Sans Fallback", "Microsoft YaHei"

$font-family-base = $font-family-chinese, sans-serif
$font-family-base = get_font_family('global'), $font-family-chinese, sans-serif if get_font_family('global')

$font-family-logo = $font-family-base
$font-family-logo = get_font_family('logo'), $font-family-base if get_font_family('logo')

$font-family-headings = $font-family-base
$font-family-headings = get_font_family('headings'), $font-family-base if get_font_family('headings')

$font-family-posts = $font-family-base
$font-family-posts = get_font_family('posts'), $font-family-base if get_font_family('posts')

$font-family-monospace = $font-family-chinese, monospace
$font-family-monospace = Menlo, Monaco, Consolas, get_font_family('codes'), $font-family-chinese, monospace if get_font_family('codes')

注意:要想 NexT 主题的简体中文字体配置生效,站点配置文件中的 language 必须为 zh-Hans。

然后对于英文字体,因为其字体库很小,所以想要个性化就简单多了。首先去 Google Fonts 找自己喜欢的英文字体,然后编辑主题配置文件,可以查看一下 NexT 官方文档

下面附上我的供大家参考:

文件位置:~/blog/themes/next/_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
font:
enable: true

# Uri of fonts host. E.g. //fonts.googleapis.com (Default)
# 亲测这个可用,如果不可用,自己搜索 [Google 字体 国内镜像],找个能用的就行
host: https://fonts.cat.net

# Global font settings used on <body> element.
global:
# external: true will load this font family from host.
external: true
family: Lato

# Font settings for Headlines (h1, h2, h3, h4, h5, h6)
# Fallback to `global` font settings.
headings:
external: true
family: Roboto Slab

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

# Font settings for Logo
# Fallback to `global` font settings.
# The `size` option use `px` as unit
logo:
external: true
family:
size:

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

进阶 高级功能配置

这些功能的配置,大部分都要修改 NexT 主题的一些文件,所以git pull升级主题的时候,会比较麻烦,解决方法见本文 2.3.2 节

大佬的文章

更多如外挂一样的功能配置,就直接贴大佬的文章了,哪些功能自己喜欢,按照大佬的教程来配置就行。不过也有坑,比如有些功能(超链接样式、侧栏头像圆形并旋转)可以直接通过在custom.styl添加 CSS 代码实现,无需更改其它文件!

  1. hexo高阶教程next主题优化
  2. hexo的next主题个性化教程:打造炫酷网站
  3. Hexo搭建博客的个性化设置

第一篇文章内有 NexT 主题的文件目录说明,这对自己自定义博客有很大帮助。

tip:大佬的博客可不仅仅有一篇文章,多在上面逗留会,也许会有甜品。

更改上一篇,下一篇的顺序

进入一篇文章,在文章底部,有上下篇的链接(< >),但是点 > 发现进入的是页面中的的上面那篇文章,与操作习惯不符,别扭。

我猜这是从时间角度设计的,> 英语叫 next,而 next 是更新的。不过别扭就改成习惯的好了,从空间位置角度设计。[1]

方法就是修改文件:

文件位置:~/blog/themes/next/layout/_macro/post.swig
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
{% if not is_index and (post.prev or post.next) %}
<div class="post-nav">
<div class="post-nav-next post-nav-item">
- {% if post.next %}
+ {% if post.prev %}
- <a href="{{ url_for(post.next.path) }}" rel="next" title="{{ post.next.title }}">
+ <a href="{{ url_for(post.prev.path) }}" rel="prev" title="{{ post.prev.title }}">
- <i class="fa fa-chevron-left"></i> {{ post.next.title }}
+ <i class="fa fa-chevron-left"></i> {{ post.prev.title }}
</a>
{% endif %}
</div>

<span class="post-nav-divider"></span>

<div class="post-nav-prev post-nav-item">
- {% if post.prev %}
+ {% if post.next %}
- <a href="{{ url_for(post.prev.path) }}" rel="prev" title="{{ post.prev.title }}">
+ <a href="{{ url_for(post.next.path) }}" rel="next" title="{{ post.next.title }}">
- {{ post.prev.title }} <i class="fa fa-chevron-right"></i>
+ {{ post.next.title }} <i class="fa fa-chevron-right"></i>
</a>
{% endif %}
</div>
</div>
{% endif %}

自己改单词请注意:是 prev 不是 perv,之前自己搞错了,然后盯着电脑屏幕尴尬半天,不停想特么老子哪里错了,怎么特么就是达不到效果!???

heirenwenhaolian.jpg

移动端显示 back-to-top 按钮和侧栏

[2017.07.22 更新]

今天更新一下 NexT 主题,发现已经添加这功能,前提是主题的设计模版是 Muse 或 Mist,然后可以直接在主题配置文件中配置:

文件位置:~/blog/themes/next/_config.yml
1
2
# Enable sidebar on narrow view
onmobile: true

如果你发现你的主题配置文件_config.yml中没有这段内容,可以尝试按本文 2.3.1 节的方法更新主题,或者按下面的方法。

[原方法]

个人感觉在移动端显示侧栏,有利于阅读,我的博客已经改了,你可以将浏览器窗口宽度缩小试试。还好 Google 到了一篇大佬的博客,想改的点击查看吧。

提示:最好还是更新主题,因为这样在移动端点击侧栏之外,侧栏会自动弹回,而按照上面的链接中的文章更改则无法实现。

博客推广及谷歌搜索优化(必读)

想自己写的文章被别人看到?希望得到别人的评论肯定?渴望用自己写的文章照亮他人,给整个文明光能?那么这个就不可或缺了。你能看到这篇文章,很大程度上也是因为这个smirk

博客推广

博客推广第一步,手动推广。

你可以多浏览别人的博客并留下你的爪印(博客地址),比如评论本文new_moon_with_face;你可以去 README.md 中提到的这个 issue 留下你的爪印;你可以去 Issues 页面试着回答下大家的问题并留下你的爪印。

博客推广第二步,SEO(Search Engine Optimization)。

搜索引擎

搜索引擎是互联网上寻找资源的重要手段,而要让别人能够在搜索结果中看到自己的博客文章链接,就必须让搜索引擎收录,怎么操作呢?

直接参考这篇文章,学会使用站长工具抓取自己的网页,然后请求搜索引擎收录。博主也是刚接触不久,不太懂,但推荐提交次数尽量多,而且每天尽量都提交一次。

我没有弄百度的,只弄了 Google 的,但是前几天百度hexo next 优化(其它关键字没试),发现第一页就有自己文章,而且文章图片也在上面,很显眼,让我非常惊喜laughing

hexo-next-optimization-3.jpg

看到链接是 SegmentFault 的,恍然大悟,原来是评论里的大佬推荐的,不仅帮我把此文推到了掘金,还有 SegmentFault,在此再次感谢大佬!这也给了一个启示,除了直接向搜索引擎提交自己的链接,还可以通过这种途径优化博客的 SEO。

间接影响

另外,SEO 固然重要,但不要小看另一种影响,相比搜索引擎,这种可以称之为间接影响。

这篇文章是一篇技术性的文章,而技术人员经常会用 Google,所以对这篇文章的浏览量,搜索引擎的功劳较大。但是,如果是其他的文章,比如一首诗,那么直接通过 Google 访问的读者几乎没有,那读者哪来?从其它文章上的读者“流”过来的。因为读者浏览着的不是一篇文章,而是一个博客。

而想让博客上的几乎不可能被 Google 的一首诗被浏览,就要这样间接拉读者了,可以称之“引流”。首先对博客上的每篇文章来说,肯定是读者花在自己博客的时间越长,被读到的可能性越大。这就意味着你要尽可能把用户留在自己的博客上,怎么留?

  1. 博客要装饰好
  2. 文章质量要高

读者的第二印象是博客的界面,如果界面够特别,也许马上就被加入了书签。第三印象是文章内容,这其实更加重要,如果文章质量很高,那么读者肯定不会让这么好的一篇文章消失在自己的记忆中,即使界面不咋地。第一印象?加载速度,试想点开半天还是空白,那么肯定马上关了。

如果做到上面三点,那么就算好不容易“骗”到一个 Google 浏览量,但是这个读者马上被博客和文章惊呆了,看完文章后,这读者心里美滋滋,认为这么好的文章(博客)必须分享啊(如上面的大佬推荐new_moon_with_face),于是可能马上来了一大批满怀期待的读者,然后这批读者又……这时文章的读者数(博客的访问量)就不是简单的加法了~

知识平台

直接或间接因为 Google 这样的搜索引擎而来的读者,绝大部分都是技术人员,而他们只希望尽快解决自己的技术问题,这也是他们的目的,这就意味着博客上的一首诗还是很难被欣赏。

而要想照亮他人,他人必须要能懂自己的文章,这样也才可能有更强的交互——评论。所以为了不浪费自己的光能,能把自己的光能完完整整的贡献给文明,那就必须也让一首诗也有评论,怎么做呢?让读者的类型多样化,不限于技术人员。

还好现在大部分读者也不用搜索引擎了,谁在吞食搜索引擎的用户?移动端。智能手机的迅速普及导致搜索引擎已经不是人们获取知识的主要途径,大部分人已经将手机 APP 上的知识平台作为自己获取知识的主要途径,比如:知乎、简书、微信订阅号……所以,你还可以将自己的文章发布在这些知识平台上的相应分类上,然后留个博客链接,吸引更多类型的读者smile

谷歌分析

你怎么知道自己推广的效果?你怎么知道有没有人看了自己的博客?哪篇文章最受欢迎?此时有没有人正浏览着自己的博客?自己的文章有没有被引用?这时最常用的就是强大免费的 Google Analytics,推荐博客建好后,就立即使用。

如何使用?请务必自备梯子查看 Google 官方的教程,开始使用后一定要按照里面的设置,先添加多份 view(数据视图)。

ATTENTION虽然有个复制 view 选项,但由 Google Analytics(分析)帮助中的具体复制内容再加上我的实践,发现(用我这个外行人的话来说):复制 view 时只会复制它的相关配置,不会复制数据!所以请使用后立即按照官方教程中的方式添加 view !

google-analytics.png

博客刚起步,博客的大部分访客都是自己,所以必须添加一个 filter(过滤器),过滤掉自己的访问(比如:过滤掉自己科学上网服务器的 IP)。

ATTENTION由 Google Analytics(分析)的工作原理可知,filter 是在数据处理时生效的(如上图),也就是说添加 filter 后只能过滤添加它之后的数据,而无法过滤添加它之前的数据(处理后),而 view 是利用处理后的数据生成的,所以要想去除自己访问的影响(在 view 中看不到自己的访问),请添加 view 之后就立即添加 filter !

时间轴页面的年份分隔

在 Archives(归档)页面,文章之间有年份分隔,而某一个 category 和 tag 的时间轴页面却没有。怎么办呢?修改两个文件,加代码即可relieved

category

加到哪?要加两个位置:

文件位置:~/blog/themes/next/layout/category.swig
1
2
3
4
5
6
7
8
9
10
    {% for post in page.posts %}
位置A
{{ post_template.render(post) }}
{% endfor %}
.
.
.(省略好多行)
.
.
位置B(没错最后面)

加什么?绿色的自己看着加:

文件位置:~/blog/themes/next/layout/category.swig我不要 + 号!
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
    {% for post in page.posts %}
+
+ {# Show year #}
+ {% set year %}
+ {% set post.year = date(post.date, 'YYYY') %}
+
+ {% if post.year !== year %}
+ {% set year = post.year %}
+ <div class="collection-title">
+ <h2 class="archive-year motion-element" id="archive-year-{{ year }}">{{ year }}</h2>
+ </div>
+ {% endif %}
+ {# endshow #}
+
{{ post_template.render(post) }}
{% endfor %}
.
.
.(省略好多行)
.
.
+{% block script_extra %}
+ {% if theme.use_motion %}
+ <script type="text/javascript" id="motion.page.archive">
+ $('.archive-year').velocity('transition.slideLeftIn');
+ </script>
+ {% endif %}
+{% endblock %}

tag

文件位置:~/blog/themes/next/layout/tag.swig,其它与的 category 修改完全一样。

说明

两段代码直接 Copy 同目录下的 archive.swig 文件里面的,而且 tag.swig 和 category.swig 好像都预留了位置似的,代码小白的我折腾了半天,才改好sobsobsob,不知道写代码的大佬怎么想的w(゚Д゚)w~

文章底部加上评分小星星

淘宝买东西,作为消费者的我们,看评价很重要。现在作为博主,写了一篇文章,很期待读者的反馈。而与淘宝一样,确认收货后,相比评论,更愿意五星好评。那么博客文章怎么加上呢?

首先打开主题配置文件:

文件位置:~/blog/themes/next/_config.yml
1
2
3
4
5
6
# Star rating support to each article.
# To get your ID visit https://widgetpack.com
rating:
enable: true
id:
color: f79533

先去注释中的网站,首页点 Rating,然后注册个帐号,填一下自己博客的信息,左上角有个 ID,填进主题配置文件中就行,color改成自己喜欢的即可。另:

  1. 可以配置评分方式,侧栏 > Rating > Setting,建议用 IP address 或 Device(cookie),免登录,毕竟 Socials 里面的选项几乎都被墙,不适合国内网络环境。
  2. 建议 侧栏 > Site > Setting 中勾选 Private 选项。
  3. 上面两步勾选后别忘了点击页面右下方的 SAVE SETTING 绿色按钮保存。

如果感觉上下留白太多,咋整?浏览器 F12 找元素,调成自己喜欢的值,然后 Copy 到custom.styl即可,参考本文 4.2 节

经过上面的配置,默认最下面只会显示 5 颗小星星,简洁但不明了joy,怎么加上文字说明呢?

首先打开文件:

文件位置:~/blog/themes/next/layout/_macro/post.swig
1
2
3
4
5
6
        {% if theme.rating.enable %}
<div class="wp_rating">
+ <div style="color: rgba(0, 0, 0, 0.75); font-size:13px; letter-spacing:3px">(&gt;看完记得五星好评哦亲&lt;)</div>
<div id="wpac-rating"></div>
</div>
{% endif %}

然后 Ctrl + F 搜索rating,找到这段,对比我给出的,在绿色这行所示的位置,加上自己想要的说明和样式即可。

最后,记得点这里给我好评哦亲kissing_heart

侧栏加入已运行的时间

我们都有自己的生日,都知道自己的岁数,那为什么不给博客加上,让读者知道博客的年纪呢?操作很简单,而且不是精确到年而是精确到秒,233333~

首先要加入下面代码:[2]

文件位置:~/blog/themes/next/layout/_custom/sidebar.swig
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
<div id="days"></div>
<script>
function show_date_time(){
window.setTimeout("show_date_time()", 1000);
BirthDay=new Date("05/27/2017 15:13:14");
today=new Date();
timeold=(today.getTime()-BirthDay.getTime());
sectimeold=timeold/1000
secondsold=Math.floor(sectimeold);
msPerDay=24*60*60*1000
e_daysold=timeold/msPerDay
daysold=Math.floor(e_daysold);
e_hrsold=(e_daysold-daysold)*24;
hrsold=setzero(Math.floor(e_hrsold));
e_minsold=(e_hrsold-hrsold)*60;
minsold=setzero(Math.floor((e_hrsold-hrsold)*60));
seconds=setzero(Math.floor((e_minsold-minsold)*60));
document.getElementById('days').innerHTML="已运行"+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒";
}
function setzero(i){
if (i<10)
{i="0" + i};
return i;
}
show_date_time();
</script>

上面Date的值记得改为你自己的,且按上面格式,然后修改:

文件位置:~/blog/themes/next/layout/_macro/sidebar.swig
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
        {# Blogroll #}
{% if theme.links %}
<div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.links_layout | default('inline') }}">
<div class="links-of-blogroll-title">
<i class="fa fa-fw fa-{{ theme.links_icon | default('globe') | lower }}"></i>
{{ theme.links_title }}&nbsp;
<i class="fa fa-fw fa-{{ theme.links_icon | default('globe') | lower }}"></i>
</div>
<ul class="links-of-blogroll-list">
{% for name, link in theme.links %}
<li class="links-of-blogroll-item">
<a href="{{ link }}" title="{{ name }}" target="_blank">{{ name }}</a>
</li>
{% endfor %}
</ul>
+ {% include '../_custom/sidebar.swig' %}
</div>
{% endif %}

- {% include '../_custom/sidebar.swig' %}

这样就可以了!当然,要是不喜欢颜色,感觉不好看,就可以在上文所提的custom.styl加入:

文件位置:~/blog/themes/next/source/css/_custom/custom.styl
1
2
3
4
5
6
7
// 自定义的侧栏时间样式
#days {
display: block;
color: rgb(7, 179, 155);
font-size: 13px;
margin-top: 15px;
}

里面的值 F12 调成自己喜欢的,然后更改即可。要是不想放在侧栏,想放在页脚,自己应该能折腾了吧smile

添加 TopX 页面

博客已有的分类,如 categories 和 tags,都是基于博主的,那么有没有一种分类是基于读者的呢?有,一种是搜索,另一种就是这里的文章阅读量排行榜。

前提是在主题配置文件中配置了 leancloud_visitors,配置方法见本文 3.3 节中我的主题配置文件中的教程链接。

首先新建页面:

所在目录:~/blog/
1
hexo new page "top"

然后在主题配置文件中加上菜单 top 和它的 icon:

文件位置:~/blog/themes/next/_config.yml
1
2
menu:
top: /top/ || signal

接着在语言翻译文件中加上菜单 top:

注意:如果你的站点配置文件中的 languages 写的不是 zh-Hans,那么这里请更改相应语言配置文件。

文件位置:~/blog/themes/next/languages/zh_Hans.yml
1
2
3
4
5
6
7
8
9
10
11
menu:
home: 首页
archives: 归档
categories: 分类
tags: 标签
about: 关于
search: 搜索
schedule: 日程表
sitemap: 站点地图
commonweal: 公益404
top: TopX /* 可以不为 TopX,随便取 */

最后,编辑第一步新建页面生成的文件:[3]

文件位置:~/blog/source/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
25
26
27
28
29
30
31
32
---
title: TopX /* 可以不为 TopX,随便取 */
comments: false
keywords: top,文章阅读量排行榜
description: 博客文章阅读量排行榜
---
<div id="top"></div>
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script>AV.initialize("app_id", "app_key");</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="<a href='"+"https://reuixiy.github.io"+url+"'>"+title+"</a>"+"<br />"+"<font color='#555'>"+"阅读次数:"+time+"</font>"+"<br /><br />";
document.getElementById("top").innerHTML+=content
}
}, function (error) {
console.log("error");
});
</script>

<style>.post-description { display: none; }</style>

必须将里面的里面的app_idapp_key替换为你的主题配置文件中的值,必须替换里面博客的链接,1000是显示文章的数量,其它可以自己看情况更改。

最后,修改样式可以在custom.styl中加入自定义代码,参考本文 4.2 节

Okay! 完成了!不过还有几点需要注意:

  1. 如果在 设置 > 安全中心 中,设置了 Web 安全域名,但没有将http://localhost:4000加入,那么本地调试将看不到,可以先将之加入,调试完后删除。
  2. 如果你发现文章标题显示不对,这是由于更改过文章标题导致的,在 存储 > Counter 双击title修改即可。

另外,应该也可以按类似的方式,利用 JS 代码,将评分(rating)高 / 多的文章,评论(HyperComments)多的文章,也加入这个页面,不过现在博客的阅读量还不多,我暂时没折腾(其实也不太会)。如果你实现了,麻烦告诉我哦kissing_heart

注意:如果你的博客使用了 Valine 评论系统,那么可能会有代码冲突问题,解决方法见这篇文章

利用 gulp 压缩代码

右键查看网页源代码发现有大量留白,咋整?利用 gulp。

首先任意目录全局安装:[4]

1
npm install gulp -g

然后到站点文件夹根目录:

所在目录:~/blog/
1
npm install gulp gulp-minify-css gulp-htmlmin gulp-htmlclean --save

接着在站点文件夹根目录新建 gulpfile.js:

文件位置:~/blog/gulpfile.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
gulp.task('minify-css', function() {
return gulp.src('./public/**/*.css')
.pipe(minifycss())
.pipe(gulp.dest('./public'))
});
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'))
});
gulp.task('default', ['minify-html', 'minify-css']);

最后部署到 GitHub Pages 上查看效果:

所在目录:~/blog/
1
hexo clean && hexo g && gulp && hexo d

我没有压缩 JavaScript,因为我发现会报错,实际也并不需要,因为大部分 JavaScript 都已压缩过。

这里的这段代码执行 gulp 后不支持 hexo s 本地调试,记得在哪看过解决方法,需要的自己 Google。

另外,可能会产生一些奇怪的 bugs,没看到最好,要是看到了的话就自己解决吧~[逃……]

让页脚的心跳动起来

世界上有一种伟大的力量,它的名字无人不晓,就是……爱~

更新 NexT 主题后,发现默认的icon变成了(user),不过这可阻挡不了的力量!

看看效果,首先编辑主题配置文件:

文件位置:~/blog/themes/next/_config.yml
1
2
3
footer:
- icon: user
+ icon: heart

然后编辑:

文件位置:~/blog/themes/next/layout/_partials/footer.swig
1
2
- <span class="with-love">
+ <span class="with-love" id="heart">

接着编辑custom.styl,加入:

文件位置:~/blog/themes/next/source/css/_custom/custom.styl
1
2
3
4
5
6
7
8
9
10
11
12
13
// 自定义页脚跳动的心样式
@keyframes heartAnimate {
0%,100%{transform:scale(1);}
10%,30%{transform:scale(0.9);}
20%,40%,60%,80%{transform:scale(1.1);}
50%,70%{transform:scale(1.1);}
}
#heart {
animation: heartAnimate 1.33s ease-in-out infinite;
}
.with-love {
color: rgb(255, 113, 168);
}

color 的值可以改成你自己喜欢的,灵感来自 DIYgod 大佬的博客,CSS 代码参考这篇文章

页脚加上微信二维码

主题默认的微信订阅个人感觉不美观,看到很多网站都是在页脚有个微信的 Logo,然后鼠标移动到上面便会显示二维码,这样感觉很棒。

首先编辑文件,在文件最后加上下面代码:

文件位置:~/blog/themes/next/layout/_partials/footer.swig
1
2
3
4
5
6
7
<div class="weixin-box">
<div class="weixin-menu">
<div class="weixin-hover">
<div class="weixin-description">微信扫一扫,订阅本博客</div>
</div>
</div>
</div>

然后编辑custom.styl,加入:

文件位置:~/blog/themes/next/source/css/_custom/custom.styl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
// 自定义的页脚微信订阅号样式
.weixin-box {
position: absolute;
bottom: 43px;
left: 10px;
border-radius: 5px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
}
.weixin-menu {
position: relative;
height: 24px;
width: 24px;
cursor: pointer;
background: url(https://微信的logo.svg);
background-size: 24px 24px;
}
.weixin-hover {
position: absolute;
bottom: 0px;
left: 0px;
height: 0px;
width: 0px;
border-radius: 3px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
background: url(https://二维码.svg);
background-color: #fff;
background-repeat: no-repeat;
background-size: 150px 150px;
transition: all 0.35s ease-in-out;
z-index: 1024;
opacity: 0;
}
.weixin-menu:hover .weixin-hover {
bottom: 24px;
left: 24px;
height: 170px;
width: 150px;
opacity: 1;
}
.weixin-description {
opacity: 0;
position: absolute;
bottom: 3%;
left: 5%;
right: 5%;
font-size: 12px;
transition: all 0.35s cubic-bezier(1, 0, 0, 1);
}
.weixin-menu:hover .weixin-description {
opacity: 1;
}

图片务必用矢量图 svg 格式,否则手机上显示效果很差,其它的自己看情况更改。

微信 Logo 的图片我准备好了,点击下载 wechat.svg (1.6 KB)。微信订阅号的二维码怎么弄成 svg 格式呢,安利个网站,下载 svg 格式的就行。

我参考了这个代码,欢迎扫一扫订阅我的博客grin

更改标签云(tagcloud)的颜色

如果你和我一样个性化了博客的整体布局颜色,那么默认的标签云页面可能看起来很丑,怎么更改?

修改下文件:

文件位置:~/blog/themes/next/layout/page.swig
1
{{ tagcloud({min_font: 13, max_font: 31, amount: 1000, color: true, start_color: '#9733EE', end_color: '#FF512F'}) }}

修改对应参数值即可,参数说明见 Hexo 官方文档,颜色可以参考这个网站,自己去纠结……

点击侧栏头像回到博客首页

不知道为什么,我看到侧栏头像的第一反应是点击,然后心理预期会跳到博客首页,可惜也仅是预期,那么开始动手吧~

首先要在主题配置文件中配置好,比如我把头像avatar.gif放在~/blog/source/uploads/下,则:

文件位置:~/blog/themes/next/_config.yml
1
2
3
4
5
# Sidebar Avatar
# in theme directory(source/images): /images/avatar.gif
# in site directory(source/uploads): /uploads/avatar.gif
-#avatar: /images/avatar.gif
+avatar: /uploads/avatar.gif

然后编辑文件:

文件位置:~/blog/themes/next/layout/_macro/sidebar.swig
1
2
3
4
5
+        <a href="/">
<img class="site-author-image" itemprop="image"
src="{{ url_for( theme.avatar | default(theme.images + '/avatar.gif') ) }}"
alt="{{ theme.author }}" />
+ </a>

最后就 OK 了~

文章摘要图片

俗话说:“图文并茂”,现实中用笔书写文章实现起来比较困难,但在博客上可以很轻松实现sunglasses

首先,文章摘要(excerpt)是指每篇文章在页面(page)上显示的那部分内容,也就是 [Read More] 之前的文章内容。由于它会展示在页面,因此在每篇文章的文章摘要中加一张图片,页面看起来就很美观。

但是有时候可能会出现一个问题:你想从文章中选一张图片作为文章摘要图片,而这张图片由于写作要求,必须添加在文章的末尾,这样点 [Read More] 查看文章时,这张图片就会重复出现了。咋办?

前提是在主题配置文件中:

文件位置:~/blog/themes/next/_config.yml
1
2
3
4
excerpt_description: false

auto_excerpt:
enable: false

首先加代码:

文件位置:~/blog/themes/next/layout/_macro/post.swig
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
      {% if is_index %}
{% if post.description and theme.excerpt_description %}
{{ post.description }}
<!--noindex-->
<div class="post-button text-center">
<a class="btn" href="{{ url_for(post.path) }}">
{{ __('post.read_more') }} &raquo;
</a>
</div>
<!--/noindex-->
{% elif post.excerpt %}
{{ post.excerpt }}
+
+ {% if post.image %}
+ <div class="out-img-topic">
+ <img src={{ post.image }} class="img-topic" />
+ </div>
+ {% endif %}
+
<!--noindex-->
<div class="post-button text-center">
<a class="btn" href="{{ url_for(post.path) }}{% if theme.scroll_to_more %}#{{ __('post.more') }}{% endif %}" rel="contents">
{{ __('post.read_more') }} &raquo;
</a>
</div>
<!--/noindex-->

为了防止有的图片宽度不够导致风格不够统一,页面不美观,需要在custom.styl中加入:

文件位置:~/blog/themes/next/source/css/_custom/custom.styl
1
2
3
4
// 自定义的文章摘要图片样式
img.img-topic {
width: 100%;
}

最后编辑有这需求的相关文章时,在Front-matter(文件最上方以---分隔的区域)加上一行:

1
image: url

url即图片的链接地址~

参考:

  1. issue:https://github.com/iissnan/hexo-theme-next/issues/1190
  2. 文章:http://wellliu.com/2016/12/30/【转】Blog摘要配图/

文章置顶

由于博客的首页可能是被浏览最多的页面,所以首页的前几篇文章被阅读的可能性比较大。可以利用这个特点,通过将自己认为重要的文章放在首页,从而让重要的文章被阅读的可能性增大smile

但是,默认的排序只有一个维度——时间,两种选择——正序和倒序,这就造成自己的得意之作被“埋没”了,怎么办呢,如何实现文章的置顶?

NexT 主题以前有过这个功能,然而由于一些bugs(issue)被去掉了。不过在这个丰富的 issue 中,我自己摸索出了一种解决方法,参考了 issue 中的那篇文章

首先移除默认安装的插件:

所在目录:~/blog/
1
npm uninstall hexo-generator-index --save

然后安装新插件:

所在目录:~/blog/
1
npm install hexo-generator-index-pin-top --save

最后编辑有这需求的相关文章时,在Front-matter(文件最上方以---分隔的区域)加上一行:

1
top: true

然后就行了,如果你置顶了多篇,怎么控制顺序呢?设置top的值(大的在前面),比如:

1
2
3
4
5
6
7
# Post a.md
title: a
top: 1

# Post b.md
title: b
top: 10

那么文章 b 便会显示在文章 a 的前面。

可是,没有任何标记啊,读者怎么知道文章置顶了joy

还好 NexT 原有的置顶功能有考虑到这个,且置顶的样式没有被移除,所以可以直接利用,编辑文件:

文件位置:~/blog/node_modules/hexo-generator-index-pin-top/lib/generator.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
'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals){
var config = this.config;
var posts = locals.posts;
posts.data = posts.data.sort(function(a, b) {
if(a.sticky && b.sticky) { // 两篇文章sticky都有定义
if(a.sticky == b.sticky) return b.date - a.date; // 若sticky值一样则按照文章日期降序排
else return b.sticky - a.sticky; // 否则按照sticky值降序排
}
else if(a.sticky && !b.sticky) { // 以下是只有一篇文章sticky有定义,那么将有sticky的排在前面(这里用异或操作居然不行233)
return -1;
}
else if(!a.sticky && b.sticky) {
return 1;
}
else return b.date - a.date; // 都没定义按照文章日期降序排
});
var paginationDir = config.pagination_dir || 'page';
return pagination('', posts, {
perPage: config.index_generator.per_page,
layout: ['index', 'archive'],
format: paginationDir + '/%d/',
data: {
__index: true
}
});
};

也就是将插件的top全部替换为 NexT 原有的sticky,然后将Front-matter中的top替换为sticky,就能调用 NexT 主题原有的置顶样式了

最后可以自定义一下样式:

文件位置:~/blog/themes/next/source/css/_custom/custom.styl
1
2
3
4
5
6
7
8
9
10
11
12
13
// 自定义的文章置顶样式
.post-sticky-flag {
font-size: inherit;
float: left;
color: rgb(0, 0, 0);
cursor: help;
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
transition-delay: 0s;
}
.post-sticky-flag:hover {
color: #07b39b;
}

已发现的 bug:新安装的插件无法实现站点配置文件中order_by: date,即文章按时间从旧到新排列的配置,也就意味着文章只能按默认的时间从新到旧排列。

背景图片

通过 jquery-backstretch,具体操作呢,编辑文件:

文件位置:~/blog/themes/next/layout/_layout.swig
1
2
3
4
5
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>;
+ <script>
+ $("body").backstretch("https://背景图.jpg");
+ </script>
</body>

加入到文件最后面</body>前面即可。

你可以浏览器按 F12 查看我的页面,就可以在</body>前发现。

幻灯片等更多用法请自行查看 GitHub 上的 README

动态效果

可以在主题配置文件_config.yml里的motion中配置,但是如果你和我一样更改了博客的背景色,可能不能达到很好的效果,怎么办呢?参考这里,修改下面两个文件的相应内容。

  1. ~/blog/themes/next/source/css/_common/components/post/post.styl
  2. ~/blog/themes/next/source/js/src/motion.js

相关/热门/推荐文章

https://reuixiy.github.io/technology/computer/computer-aided-art/2018/05/09/related-popular-recommended-posts.html

MathJax 的静态显示(svg)

https://reuixiy.github.io/technology/computer/computer-aided-art/2018/05/16/hexo-mathjax-svg.html

加速 Hexo 博客

https://reuixiy.github.io/technology/computer/computer-aided-art/2018/05/30/speed-up-hexo.html

萌萌哒十二生肖

https://reuixiy.github.io/technology/computer/computer-aided-art/2018/08/27/add-chinese-zodiac-to-next.html

进阶 写出优雅文章

博客搭好了,只能说有个漂亮的外壳,内容丰富且颜值高的文章才是真正的精华。文章内容只能靠自己,不过这里教你几招提高文章颜值的方法。

写文章前请先查看 Hexo 官方文档之写作,写的很棒!然后再来细细讲讲文章(post)的模版文件,因为文章模版文件的个性化会直接影响文章(post)的主要布局,甚至是页面(page)的主要布局。

文章的模版文件(必读)

如果你是在站点文件夹根目录用hexo new post <title>新建的文章,那么其实它就是将文章的模版文件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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
/* !!!!!!!!!!
** 每一项的 : 后面均有一个空格
** 且 : 为英文符号
** !!!!!!!!!!
*/

title:
/* 文章标题,可以为中文 */

date:
/* 建立日期,如果自己手动添加,请按固定格式
** 就算不写,页面每篇文章顶部的发表于……也能显示
** 只要在主题配置文件中,配置了 created_at 就行
** 那为什么还要自己加上?
** 自定义文章发布的时间
*/

updated:
/* 更新日期,其它与上面的建立日期类似
** 不过在页面每篇文章顶部,是更新于……
** 在主题配置文件中,是 updated_at
*/

permalink:
/* 若站点配置文件下的 permalink 配置了 title
** 则可以替换文章 URL 里面的 title(文章标题)
*/

categories:
/* 分类,支持多级,比如:
- technology
- computer
- computer-aided-art
则为technology/computer/computer-aided-art
(不适用于 layout: page)
*/

tags:
/* 标签
** 多个可以这样写[标签1,标签2,标签3]
** (不适用于 layout: page)
*/

description:
/* 文章的描述,在每篇文章标题下方显示
** 并且作为网页的 description 元数据
** 如果不写,则自动取 <!-- more -->
** 之前的文字作为网页的 description 元数据
** 建议每篇文章都务必加上!
*/

keywords:
/* 关键字,并且作为网页的 keywords 元数据
** 如果不写,则自动取 tags 里的项
** 作为网页的 keywords 元数据
*/

comments:
/* 是否开启评论
** 默认值是 true
** 要关闭写 false
*/

layout:
/* 页面布局,默认值是 post,默认值可以在
** 站点配置文件中修改 default_layout
** 另:404 页面可能用到,将其值改为 false
*/

type:
/* categories,目录页面
** tags,标签页面
** picture,用来生成 group-pictures
** quote?
** https://reuixiy.github.io/uncategorized/2010/01/01/test.html
*/

photos:
/* Gallery support,用来支持画廊 / 相册,用法如下:
- photo_url_1
- photo_url_2
- photo_url_3
https://reuixiy.github.io/uncategorized/2010/01/01/test.html
*/

link:
/* 文章的外部链接
** https://reuixiy.github.io/uncategorized/2010/01/01/test.html
*/

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

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

password:
/* 文章密码,此项只有参考教程:
** http://shenzekun.cn/hexo的next主题个性化配置教程.html
** 第 24 节,配置好,否则请勿添加!
** 发现还是有 bug 的,就是右键在新标签中打开
** 然后无论是否输入密码,都能看到内容
*/
tip:灵活利用 permalink,如果你是一个和我一样希望文章 URL 中不会出现中文的人。

为什么一定要添加文章的描述(description)呢?
回答之前,先反问一句:为什么你的文章一定要加标题?

吸引读者,为了让读者快速了解文章内容。

对了,这就是答案。但由于文章的标题非常短,很多时候读者看完标题后,仍然对文章内容不了解,这时就要用到文章的描述。

什么?你只是写给自己看的?!那请你也务必添加文章的描述,因为你自己也是读者啊,这对自己以后回顾文章很有作用!

基于你自己博客的功能需求,以及自己对页面布局和文章布局的理解(审美观),将上面这些自己需要的加到自己的文章模版文件中即可,最后贴出我的文章模版文件:

文件位置:~/blog/scaffolds/post.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
---
title: {{ title }}
date: {{ date }}
permalink:
categories:
tags: []
description:
image:
---
<p class="description"></p>

<img src="https://" alt="" style="width:100%" />

<!-- more -->

##

##

##

<hr />

但为什么说文章模版文件的个性化会直接影响文章(post)的主要布局,甚至是页面(page)的主要布局呢?哈哈哈,让我来解释一番我的文章模版文件,你就知道了~

  • Front-matter

先起好文章的title(中文),然后补上permalink(英文),这是因为我在站点配置文件将 title 加进了文章的 URL 中,然而我不希望文章的 URL 中出现中文,相当于将 URL 中的中文翻译成英文。

date可以方便自定义文章的发布时间,接下来是两种不同的分类方式——categoriestags(分类和标签),description是文章的描述,建议务必写上!原因上面说了~

image的话,暂时保密smile

  • <p>

由于文章的描述(description)有时候并不能满足我的需求(比如加个 emojinew_moon_with_face……),所以有时候我需要将“文章的描述”写在文章中,并放在<!-- more -->之前作为文章摘要,但为了保证在文章( post )中与正文区分开来,我自己在custom.styl中自定义了一个<p>标签的样式(参考本文 4.2 节的相关代码),用来模仿 description 的显示效果。

而且,由于如果不写description,则自动取<!-- more -->之前的文字作为网页的 description 元数据,外观和功能兼得,完美替代啊,美滋滋

(可能要更改相关样式才能达到比较好的效果,参考本文第 4 节

  • 图片

由于<!-- more -->之前的文章内容会作为文章摘要(excerpt)显示在页面(page)中,会影响页面的主要布局,所以我在它前面加上了图片,为显示在页面的每篇文章的文章摘要配一张图片,保证博客页面的美观。有的图片宽度不够导致风格不够统一,页面不美观咋办?加上width:100%

但是,有些情况下,也许你会从文章中选一张图片作为文章摘要图片,而这张图片由于写作要求,必须添加在文章的末尾,这样点 [Read More] 查看文章时,这张图片就会重复出现了,那怎么办?用文章摘要图片 image

  • <!-- more -->

之后的是文章的主要内容,文章的主要内容一般都可以分成几个部分,每一部分都可以概括出一个小标题,所以先将三个##(二级标题)加上咯~

  • hr

最后加上<hr />作为分隔线,可以将文章内容与它下面的非文章内容分隔开来,感觉美观new_moon_with_face

既然自定义的<p>能替代description,那还有必要用description吗?

“文章的描述”是较短的描述性文字,建议主要还是用description,毕竟 title(标题)、description(描述)和 excerpt(摘要)都是为了将文章内容简要概括,让读者快速了解文章内容,所以更简要description优先使用(好像诡辩new_moon_with_face),除非你要加 emoji 或者其它样式~

使用 Markdown

用 Hexo 写文章是直接用 Markdown 写的,而不是像 WordPress 有一个类似 Word 一样的文字编辑器,所以第一次用会感觉有点难,但你熟练之后,就会觉得文字编辑器都是辣鸡new_moon_with_face……

Markdown 简介

Markdown 的目标是实现「易读易写」。

不过最需要强调的便是它的可读性。一份使用 Markdown 格式撰写的文件应该可以直接以纯文字发布,并且看起来不会像是由许多标签或是格式指令所构成。Markdown 语法受到一些既有 text-to-HTML 格式的影响,包括 Setext、atx、Textile、reStructuredText、Grutatext 和 EtText,然而最大灵感来源其实是纯文字的电子邮件格式。

因此 Markdown 的语法全由标点符号所组成,并经过严谨慎选,是为了让它们看起来就像所要表达的意思。像是在文字两旁加上星号,看起来就像**强调**。Markdown 的清单看起来,嗯,就是清单。假如你有使用过电子邮件,区块引言看起来就真的像是引用一段文字。[5]

Markdown 教程

这是写文章必须掌握的技能哦,一开始可能比较懵,因为大脑没有相关概念,无法将 Markdown 语法“翻译”成相应样式,不过多写几篇就好啦speak_no_evil

  1. Markdown 语法说明
  2. Hexo下的Markdown语法(GFM)写博客
  3. Markdown 教程

我个人的总结

首先是基础但重要:

  1. 文章内标题请从二级标题(##)开始!
  2. 英语单词、数字左右看情况加上空格!
  3. Markdwon 文档写完一段回车后务必再回车一次空一行!

然后如果有些用 Markdwon 的语法却达不到预期效果(甚至产生奇怪的 bugs),或者用 Markdwon 的语法无法实现,这时就可以考虑用 HTML 和 CSS。

  • 分隔线和空行
1
2
3
4
5
6
7
/* 分隔线 */
<hr />
/* 注意事项[6]:在XHTML 中,<hr> 必须被正确地关闭,比如 <hr /> */

/* 空行 */
<br />
/* 注意事项同上 */
  • 引用
1
2
3
4
<blockquote>引用内容</blockquote>

/* 如果上下间距很小,可以像下面这样写 */
<p><blockquote>引用内容</blockquote></p>
  • 居中和右对齐
1
2
3
4
5
/* 居中 */
<center>内容</center>

/* 右对齐 */
<p style="text-align:right">内容</p>
  • 字体大小和颜色
1
2
<font color="#xxxxxx" size="number">内容</font>
/* 详细请查看 http://www.w3school.com.cn/tags/tag_font.asp */
  • Todo list
1
2
3
4
<ul>
<li><i class="fa fa-check-square"></i> 已完成</li>
<li><i class="fa fa-square"></i> 未完成</li>
</ul>

如何使用 emoji

[原方法]

在这个表情横行的时代,使用 emoji 似乎已经是日常。之前一直搜索相关插件,安装了很多,但都失败了。后来发现,直接 Copy & Paste 就能用😆,可以去这个网站 Copy。

但是有个缺点,就是不同系统,不同浏览器,渲染的效果不同,有些甚至不能显示。

[2017.08.20 更新] [2017.12.13 更新]

上面方法 Copy 的是 Unicode,因此显示时有上面这个缺点,但是我们也可以直接调用图片,保证显示效果一致。

另:无论主题配置文件中的 fancybox 的值是 true 还是 false,对此方法都没太大影响v

首先安装插件:

所在目录:~/blog/
1
npm install hexo-filter-github-emojis --save

然后在站点配置文件的适当位置中加入:

文件位置:~/blog/_config.yml
1
2
3
4
5
6
7
githubEmojis:
enable: true
- className: github-emoji
+ idName: github-emoji
unicode: false
styles:
localEmojis:

没错,加入的是idName这行而非className这行,为什么我要这样写?因为要编辑文件:

  1. Ctrl + F 搜索class,全部替换为id
  2. Ctrl + F 搜索title,更改相关代码,如下:
文件位置:~/blog/node_modules/hexo-filter-github-emojis/index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
    var codepoints = emojis[emojiName].codepoints
if (options.unicode && codepoints) {
codepoints = codepoints.map(function (code) {
return '&#x' + code + ';'
}).join('')

return '<span id="' + options.idName + '" ' +
styles +
- ' title="' + emojiName +
- '" data-src="' + emojis[emojiName].src +
+ ' data-src="' + emojis[emojiName].src +
'">' + codepoints + '</span>'
} else {
return '<img id="' + options.idName + '" ' +
styles +
- ' title="' + emojiName + '" alt="' + emojiName + '" src="' +
+ ' alt="' + emojiName + '" src="' +
emojis[emojiName].src + '" height="20" width="20" />'
}

由于 NexT 主题的相关样式会干扰 emoji 图片的显示效果,所以要在custom.styl中加代码:

文件位置:~/blog/themes/next/source/css/_custom/custom.styl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
/* 里面的 color 值请改为你博客的! */
// 自定义emoji样式
img#github-emoji {
margin: 0px;
padding: 0px;
display: inline !important;
vertical-align: text-bottom;
border: none;
cursor: text;
box-shadow: none;
}
// 文章超链接样式(为emoji特设)
.post-body a {
color: rgb(80, 115, 184);
border-bottom: none;
text-decoration: underline;
}
.post-body a:hover {
color: rgb(161, 102, 171);
border-bottom: none;
text-decoration: underline;
}
// 标签云页面超链接样式(为emoji特设)
.tag-cloud a {
color: rgb(80, 115, 184);
border-bottom: 1px solid rgb(80, 115, 184);
text-decoration: none;
}
.tag-cloud a:hover {
color: rgb(161, 102, 171);
border-bottom: 1px solid rgb(161, 102, 171);
text-decoration: none;
}
// 文章元数据中categories的样式(为emoji特设)
a.categories {
color: rgb(80, 115, 184);
border-bottom: none;
text-decoration: underline;
}
a.categories:hover {
color: rgb(161, 102, 171);
border-bottom: none;
text-decoration: underline;
}
// tabs标签(为emoji特设)
.post-body .tabs ul.nav-tabs li.tab a {
text-decoration: none;
}
// 图片下方标题设置(为emoji特设)
a.fancybox{
text-decoration: none !important;
}
// 按钮样式(为emoji特设)
.btn {
color: #fff !important;
text-decoration: none !important;
border: 2px solid #222 !important;
}
.btn:hover {
color: #222 !important;
}

然后直接去 Emoji Cheat Sheet 点一下自己想要的表情复制,再粘贴到自己的文章中即可ghost

而且用途不止于 emoji,手机里的各种表情包,传到自己的云存储,然后按照插件 README 中的写法:

1
<img id="github-emoji" src="https://表情包.gif" height="30" width="30" />

改下 URL,看情况改下 height 和 width 的值即可啦,GIF也可以哦~

当然,还有萌即正义的颜文字 (ノ*・ω・)ノ~

问题解答
调用的是哪里的 emoji 图片?由这个插件的 README 可知,调用 GitHub 的 API,写法也是按照 GitHub 的wink
为什么要将插件源码里的class改为id按下 F12 可看到,开启 fancyBox 后,NexT 会为默认的图片标签(img)加上一个fancyboxclass,里面有一个样式:display: block !important;,因为我们要让 emoji 显示在文字之间(display: inline;),但是由于默认的class已经加了!important,所以必须用样式规则的应用优先权高于classid
为什么要删除插件源码里的title因为开启 fancyBox 后,NexT 会将图片的title显示在图片下方,显然不满足 emoji 的显示要求。
为什么要修改.post-body a的样式?因为开启 fancyBox 后,NexT 会将图片标签包裹在一个a标签内,而a标签是有下划线的,emoji 下面竟然有根线?显然不满足要求。
加进custom.styl的其它一大堆代码是什么鬼?补 bugsexpressionless……

插入音乐和视频

音乐的话,网易云音乐的外链很好用,不仅有可以单曲,还能有歌单,有兴趣的自己去网易云音乐找首歌尝试。但是有一些音乐因为版权原因放不了,还有就是不完全支持 https,导致小绿锁不见了。要解决这些缺点,就需要安装插件alien

音乐

可以直接用 HTML 的标签,写法如下:

1
<audio src="https://什么什么什么.mp3" style="max-height :100%; max-width: 100%; display: block; margin-left: auto; margin-right: auto;" controls="controls" loop="loop" preload="meta">Your browser does not support the audio tag.</audio>

用插件,有显示歌词功能,也美观,建议使用这种方法。

首先在站点文件夹根目录安装插件:

所在目录:~/blog/
1
npm install hexo-tag-aplayer --save

然后文章中的写法:

1
{% aplayer "歌曲名" "歌手名" "https://什么什么什么.mp3" "https://封面图.jpg" "lrc:https://歌词.lrc" %}

效果,在这博客的 music 标签里自己找一篇文章看看。

另外可以支持歌单:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{% aplayerlist %}
{
"autoplay": false,
"showlrc": 3,
"mutex": true,
"music": [
{
"title": "歌曲名",
"author": "歌手名",
"url": "https://什么什么什么.mp3",
"pic": "https://封面图.jpg",
"lrc": "https://歌词.lrc"
},
{
"title": "歌曲名",
"author": "歌手名",
"url": "https://什么什么什么.mp3",
"pic": "https://封面图.jpg",
"lrc": "https://歌词.lrc"
}
]
}
{% endaplayerlist %}

效果可以见我的 Hello World,里面的详细参数见 README 和这插件的“母亲” Aplayer 的官方文档

关于 lrc 歌词,可以用工具下载网易云音乐的歌词,另发现暂时不支持offset参数。

当然,如果那歌词很操蛋,有错误(比如字母大小写和标点符号乱加)或者时间完全对不上,然后你也和我一样是个完美主义者,那接下来就是令人窒息的操作了,一句一句自己查看修改……

lingrenzhixidecaozuo.jpg

什么,你想把网易云的几百首歌手动同步到博客fearful?!慢慢慢,有一种非常简单的方法,效果见我的 ABOUT 页面。

视频

可以直接用 HTML 的标签,写法如下:

1
<video poster="https://封面图.jpg" src="https://什么什么什么.mp4" style="max-height :100%; max-width: 100%; display: block; margin-left: auto; margin-right: auto;" controls="controls" loop="loop" preload="meta">Your browser does not support the video tag.</video>

用插件,功能更加强大,比如可以弹幕,非常建议食用。

首先在站点文件夹根目录安装插件:

所在目录:~/blog/
1
npm install hexo-tag-dplayer --save

然后文章中的写法:

1
{% dplayer "url=https://什么什么什么.mp4" "https://封面图.jpg" "api=https://api.prprpr.me/dplayer/" "id=" "loop=false" %}

要使用弹幕,必须有apiid两项,并且若使用的是官方的 api 地址(即上面的),id 的值不能与这个列表的值一样。id 的值自己随便取,唯一要求就是前面这点。

如果唯一要求难倒了你,可以使用这个工具将一段与众不同的文字joy生成一段看起来毫无意义的哈希值,这样看起来是不是好多了。

效果,在这博客的 video 标签里自己找一篇文章看看。

当然,这个插件的功能还有很多,可以去 README 和这插件的“母亲” Dplayer 的官方文档看看。

视频插件在 NexT 主题下有 bug!页面全屏有问题,issue 页面,可以通过在custom.styl中加代码解决(见本文 4.2 节内的相关代码),或者在主题配置文件中关闭motion已不存在。

好玩的写作样式

用一些特殊的样式,可以增加文章的可读性。不过也不是越多越好,没必要写一篇文章就把下面的样式全部用一遍,这样只会适得其反,从下面的样式中选几个自己觉得比较好的、经常会用的就行。而且写博客重点是文章的文字内容,而不是这些样式,样式只是为了让文章更美观,更适合阅读。这和我们用 Markdown 写文章是一样的道理,用 Markdown 而不是直接写 HTML 代码,就是为了将更多时间花在文字上monkey

主题自带样式 FontAwesome

效果:

  1. 支持 Markdown
    Hexo 支持 GitHub Flavored Markdown 的所有功能,甚至可以整合 Octopress 的大多数插件。
  2. 一件部署
    只需一条指令即可部署到 GitHub Pages,或其他网站。
  3. 丰富的插件
    Hexo 拥有强大的插件系统,安装插件可以让 Hexo 支持 Jade,CoffeeScript。[7]

源码:

1
2
3
4
5
6
1. <i class="fa fa-pencil"></i> 支持 Markdown
<i>Hexo 支持 GitHub Flavored Markdown 的所有功能,甚至可以整合 Octopress 的大多数插件。</i>
2. <i class="fa fa-cloud-upload"></i> 一件部署
<i>只需一条指令即可部署到 GitHub Pages,或其他网站。</i>
3. <i class="fa fa-cog"></i> 丰富的插件
<i>Hexo 拥有强大的插件系统,安装插件可以让 Hexo 支持 Jade,CoffeeScript。</i>

采用的是 Font Awesome 的图标,下面给出一些简单的使用例子,更多请查看官网的使用示例

1
2
3
- <i class="fa fa-pencil"></i> 铅笔
- <i class="fa fa-cloud-upload"></i> 上传
- <i class="fa fa-download"></i> 下载
  • 铅笔
  • 上传
  • 下载
1
2
3
- <i class="fa fa-download"></i> 下载
- <i class="fa fa-download fa-lg"></i> 下载变大 33%
- <i class="fa fa-download fa-2x"></i> 下载两倍大
  • 下载
  • 下载变大 33%
  • 下载两倍大

主题自带样式 代码块高亮

先看效果:

Java代码来自这
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/**
* @author John Smith <john.smith@example.com>
*/
package l2f.gameserver.model;

public abstract class L2Char extends L2Object {
public static final Short ERROR = 0x0001;

public void moveTo(int x, int y, int z) {
_ai = null;
log("Should not be called");
if (1 > 5) { // wtf!?
return;
}
}
}

这里指的是```代码块,而不是行内代码块(`代码`),它的用法如下:

```[language] [title] [url] [link-text]

代码

```

  • [language] 是代码语言的名称,用来设置代码块颜色高亮,非必须;
  • [title] 是顶部左边的说明,非必须;
  • [url] 是顶部右边的超链接地址,非必须;
  • [link text] 如它的字面意思,超链接的名称,非必须。

亲测这 4 项应该是根据空格来分隔,而不是[],故请不要加[]。除非如果你想写后面两个,但不想写前面两个,那么就必须加[]了,要这样写:[] [] [url] [link text]

首先关于代码块颜色高亮,高亮的模式可以在主题配置文件中设置:

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

highlight_theme: normal

要颜色正确高亮,代码语言的名称肯定要写对,各种支持语言的名称可以查看这篇文章。当然,如果你和我一样懒,可以在站点配置文件_config.yml中设置自动高亮:

文件位置:~/blog/_config.yml
1
2
3
4
5
6
highlight:
enable: true
line_number: true
# 代码自动高亮
- auto_detect: false
+ auto_detect: true

咦?发现了什么没有flushed,红色-和绿色+的样式哪来的?哈哈哈,原来这也是一种语言,叫diff,所以你只需在 [language] 这写diff,然后在相应代码前面加上-+就行了。不过默认的-是绿色,+是红色,与 GitHub 上相反,别扭就自己改成 GitHub 的咯:

文件位置:~/blog/themes/next/source/css/_custom/custom.styl
1
2
3
4
5
6
7
// 文章```代码块diff样式
pre .addition {
background: #e6ffed;
}
pre .deletion {
background: #ffeef0;
}

当然,要是你不满意顶部的文字样式,也可以自己在custom.styl自定义:

文件位置:~/blog/themes/next/source/css/_custom/custom.styl
1
2
3
4
5
6
7
8
9
10
// 文章```代码块顶部样式
.highlight figcaption {
margin: 0em;
padding: 0.5em;
background: #eee;
border-bottom: 1px solid #e9e9e9;
}
.highlight figcaption a {
color: rgb(80, 115, 184);
}

参考了 Hexo 官方文档的标签插件页面,这个页面还有更多的 Hexo 标签插件(Tag Plugins)的用法,请自行查看。

关于代码块高亮的高级个性化,请查看大佬的文章——HEXO下的语法高亮拓展修改

主题自带样式 文本居中引用

效果:

人生乃是一面镜子,
从镜子里认识自己,
我要称之为头等大事,
也只是我们追求的目的!

源码:

1
2
3
4
5
6
{% cq %}
人生乃是一面镜子,
从镜子里认识自己,
我要称之为头等大事,
也只是我们追求的目的!
{% endcq %}

更多 NexT 主题自带的标签样式,请点击:http://theme-next.iissnan.com/tag-plugins.html

主题自带样式 note 标签

主题配置文件_config.yml里有一个关于这个的配置,但官方文档没有提供 HTML 的使用方式,个人认为这种方式更简单,也不会产生一些奇怪的显示 bugs……

default

1
<div class="note default"><p>default</p></div>

primary

1
<div class="note primary"><p>primary</p></div>

success

1
<div class="note success"><p>success</p></div>

info

1
<div class="note info"><p>info</p></div>

warning

1
<div class="note warning"><p>warning</p></div>

danger

1
<div class="note danger"><p>danger</p></div>

danger no-icon

1
<div class="note danger no-icon"><p>danger no-icon</p></div>

首先可以在主题配置文件中需要配置下,贴上我的:

文件位置:~/blog/themes/next/_config.yml
1
2
3
4
5
6
7
8
9
# Note tag (bs-callout).
note:
# 风格
style: flat
# 要不要图标
icons: true
# 圆角矩形
border_radius: 3
light_bg_offset:

里面的三种风格长啥样?开启图标长啥样?可以查看这个页面,更多的介绍也在这个页面,请自行查看。

主题自带样式 label 标签

首先可以在主题配置文件中有配置,需要配置下,贴上我的:

文件位置:~/blog/themes/next/_config.yml
1
2
# Label tag.
label: true

然后效果如下(@ 前面的是label的名字,后面的是要显示的文字):

  • default
1
{% label default@default %}
  • primary
1
{% label primary@primary %}
  • success
1
{% label success@success %}
  • info
1
{% label info@info %}
  • warning
1
{% label warning@warning %}
  • danger
1
{% label danger@danger %}

目前博主发现个 bug,如果把它加在一段文字的段首,则会有点问题,issue 页面。

主题自带样式 tabs 标签

名字是不是很耳熟?对,就是浏览器的那个 tab,显示效果嘛,看起来是不是和最近很火的 iPhone X 很像?有个刘海joy,所以我故意new_moon_with_face……

效果:

这是选项卡 1 呵呵哈哈哈哈哈哈哈哈呵呵哈哈哈哈哈哈哈哈呵呵哈哈哈哈哈哈哈哈呵呵哈哈哈哈哈哈哈哈呵呵哈哈哈哈哈哈哈哈呵呵哈哈哈哈哈哈哈哈……

这是选项卡 2

这是选项卡 3 哇,你找到我了!φ(≧ω≦*)♪~

源码:

1
2
3
4
5
6
7
8
9
10
11
{% tabs 选项卡, 2 %}
<!-- tab -->
**这是选项卡 1** 呵呵哈哈哈哈哈哈哈哈呵呵哈哈哈哈哈哈哈哈呵呵哈哈哈哈哈哈哈哈呵呵哈哈哈哈哈哈哈哈呵呵哈哈哈哈哈哈哈哈呵呵哈哈哈哈哈哈哈哈……
<!-- endtab -->
<!-- tab -->
**这是选项卡 2**
<!-- endtab -->
<!-- tab -->
**这是选项卡 3** 哇,你找到我了!φ(≧ω≦*)♪~
<!-- endtab -->
{% endtabs %}

首先可以在主题配置文件中有配置,需要配置下,贴上我的:

文件位置:~/blog/themes/next/_config.yml
1
2
3
4
5
6
7
# Tabs tag.
tabs:
enable: true
transition:
tabs: true
labels: true
border_radius: 0

然后上面源码中, 2表示一开始在第二个选项卡,非必须,若数值为-1则隐藏选项卡内容。更多用法请查看这个页面

主题自带样式 按钮

源码:

1
{% btn https://www.baidu.com, 点击下载百度, download fa-lg fa-fw %}

效果:点击下载百度

关于按钮的更多使用可以前往这个页面查看。

自定义样式 引用

首先由于是自定义的样式,故要自己将 CSS 代码加到custom.styl中,下文的自定义样式都是如此。为什么可以自定义呢?如果你是一个和我一样的小白,可以点击这里了解了解 CSS 中idclass的知识。

需加入custom.styl的代码:

文件位置:~/blog/themes/next/source/css/_custom/custom.styl
1
2
3
4
5
6
7
8
9
// 自定义的引用样式
blockquote.question {
color: #555;
border-left: 4px solid rgb(16, 152, 173);
background-color: rgb(227, 242, 253);
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
margin-bottom: 20px;
}
  • 文字颜色改color的值
  • 背景色改background-color的值
  • 边框颜色和粗细改border-left的值

效果:

内容
1
<blockquote class="question">内容</blockquote>

自定义样式 数字块

需加入custom.styl的代码:

文件位置:~/blog/themes/next/source/css/_custom/custom.styl
1
2
3
4
5
6
7
8
9
10
// 自定义的数字块
span#inline-toc {
display: inline-block;
border-radius: 80% 100% 90% 20%;
background-color: rgb(227, 242, 253);
color: #555;
padding: 0.05em 0.4em;
margin: 2px 5px 2px 0px;
line-height: 1.5;
}

1.左边是效果。

源码:

1
<span id="inline-toc">1.</span>

参考:https://qianling.pw/style/#TOC数字块

结尾 求大佬和结尾

终于结束了,哈哈哈哈哈~折腾一番,有了自己的博客,另外知道了一点 HTML,CSS 和 JavaScript 的知识,收藏夹里多了很多大佬的博客。

移动端顶部菜单

NexT 主题移动端的顶部菜单个人感觉没啥特色,但自己的能力又还没到自己造轮子的地步,所以求大佬。个人比较喜欢这两个 Hexo 主题的移动端顶部菜单:

  1. hexo-theme-tranquilpeak,demo
  2. hexo-theme-yilia,demo

替换 fancyBox

[2017.11.18 更新]

原因是版本太低,我似乎听到了下面的 fancyBox 在说着:这锅我不背joy

并且已有大佬提交 Pr,但是目前还未被 Merge,博主跟进中,实在不行手动更新。

博主暂时的解决方法是在主题配置文件中,加上新版本的 CDN 地址:

文件位置:~/blog/themes/next/_config.yml
1
2
3
4
5
# Internal version: 2.1.5
# See: http://fancyapps.com/fancybox/
# 自定义 fancybox(暂时)
fancybox: https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js
fancybox_css: https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css

当然这样粗鲁的做法还是有 bugs 的,不过暂时先这样,一起期待被 Merge 吧~

[原内容]

个人感觉 fancyBox 用着不太爽,上面两个主题的感觉就很棒:

  1. hexo-theme-yilia,demo
  2. hexo-theme-tranquilpeak,demo

特别是 yilia 的移动端手势操作,很赞,求大佬移植到 NexT!还有一个 GitHub 很棒的项目 Fluidbox

最后的结束小语

其实写这篇文章时,犯了一个很大的错误,把定制(customization)写成了优化(optimization),本文的内容都是个性化的定制,而非优化new_moon_with_face……

然后毕竟只是小白,本文如有错误,欢迎评论指出~也欢迎你把这篇文章加入收藏夹,毕竟 NexT 主题一直在更新,会有一些新的功能和配置,这篇文章自然也会一直保持更新laughing

不知道这篇文章有木有照亮你呢?如果你觉得这篇文章很赞,欢迎分享本文给更多像我一样的小白看到!为修改这篇文章博主光通宵就来了两次,但如果文章还是有不足,也求给我个好评哦亲kissing_heartφ(≧ω≦*)♪~

最后如果转载,麻烦留个本文的链接,因为如果读者或我自己发现文章有错误,我会在这里更正,留个本文的链接,防止我暂时的疏漏耽误了他人宝贵的时间。

本文结束啦感谢您阅读
0%