01_Hexo-Hexo + Pure搭建博客-自定义
Hexo 搭建私人博客
一. 介绍
1.1 Hexo
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。Hexo 官网
1.2 Pure 主题
https://github.com/cofess/hexo-theme-pure
二. 参考
Hexo 官网 https://hexo.io/zh-cn/docs/index.html
Pure 项目地址 https://github.com/cofess/hexo-theme-pure/blob/master/README.cn.md
搭建 & 魔改
gitalk
三. 命令
1 | hexo clean ; hexo g ; hexo d ; hexo s |
四. 评论 & 收录
Valine 评论 https://www.leancloud.cn/
Valine 评论 https://www.leancloud.app/ 国外站点,国内账号受限,域名没白嫖成功,可能是这个原因 → https://forum.leancloud.cn/t/2022-8/25408
谷歌收录 https://search.google.com/search-console
MD5 在线加密 https://md5jiami.bmcx.com/ 评论区通过密文,识别博主身份
五. 相关路径
1 | [文章路径]: |
六. 内容样例
1 | --- |
文章指定多个 category
多个分类
如果我们的要求是将文章同时分到两个或者多个不同的类目下呢?官方给出的方法是:
1
2
3 categories:
- [Sports]
- [Baseball]参考文章:Hexo 一篇文章多个 categories https://www.jianshu.com/p/4438c417611e
七. 自定义
7.1 搜索框索引突破 5
F12
定位到搜索框的 类选择器 为 ins-section-headergrep,定位到配置文件为
\themes\pure\source\js\insight.js
Ctrl + F,搜索 5,定位到第 160 行,修改限制
7.2 左侧头像链接,target 修改为 _self
a 标签,修改 target: ‘_blank’ → ‘_self’
7.3 文章目录,一级标题不跳转
有时发现一级标题不会跳转
配置文件 \node_modules\hexo\lib\plugins\helper\toc.js
更新下 \node_modules\hexo\lib\plugins\helper\toc.js
文件,又正常了。时灵时不灵的。。。
参考 https://hwame.top/如何取消文章目录的自动编号
修改 “.\node_modules\hexo-renderer-markdown-it\index.js” level 为 1
7.4 滚动条加粗 + 加小箭头
修改 css 样式,路径
.\hexo-source\themes\pure\source\css\style.css
Ctlrl + F
定位scrollbar
;- 调高
height
,使代码框 右拉滚动条加粗; - 右侧下拉条变粗;
7.4.1 代码框加粗
1
2
3
4
5
6
7
8
9/*
* scrollbar
*/
::-webkit-scrollbar {
width: 15px;
height: 14px; # 调高
background: transparent;
}7.4.2 右侧下拉条变粗 + 添加小箭头
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/*
* 滚动条箭头
*/
::-webkit-scrollbar-button {
width: 0px;
height: 4px;
display: block;
background-color: #c3c3c3;
}
::-webkit-scrollbar {
width: 16px;
border: 5px solid white;
}
::-webkit-scrollbar-thumb {
background-color: #b0b0b0;
background-clip: padding-box;
border: 0.05em solid #eeeeee;
}
::-webkit-scrollbar-track {
background-color: #bbbbbb;
}
/* Buttons */
::-webkit-scrollbar-button:single-button {
background-color: #bbbbbb;
display: block;
border-style: solid;
height: 13px;
width: 16px;
}
/* Up */
::-webkit-scrollbar-button:single-button:vertical:decrement {
border-width: 0px 8px 8px 8px;
border-color: transparent transparent #555555 transparent;
}
::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
border-color: transparent transparent #777777 transparent;
}
/* Down */
::-webkit-scrollbar-button:single-button:vertical:increment {
border-width: 8px 8px 0 8px;
border-color: #555555 transparent transparent transparent;
}
::-webkit-scrollbar-button:vertical:single-button:increment:hover {
border-color: #777777 transparent transparent transparent;
}
参考文章
7.5 Valine 评论框添加一言
参考文章
偶然看到的文章,然后自己就加了这个功能。
路径:
.\themes\pure\layout\_script\_comment\valine.ejs
;加到最后
</script>
标签之前;c=j 请求获得网易云的句子,开始网抑云吧;1
2
3
4
5
6fetch('https://v1.hitokoto.cn/?c=j')
.then(response => response.json())
.then(data => {
document.getElementById("veditor").setAttribute("placeholder",data.hitokoto+"__"+data.from);
})
.catch(console.error)
修改方法:
找到博客对应添加valine的位置,例如Ayer主题的位于hexo\themes\ayer\layout_partial\post\valine.ejs
在内部添加一段代码:
1
2
3
4
5
6
7
8 <script type="text/javascript">
fetch('https://v1.hitokoto.cn')
.then(response => response.json())
.then(data => {
document.getElementById("veditor").setAttribute("placeholder",data.hitokoto+"__"+data.from);
})
.catch(console.error)
</script>Api接口说明:
(1)https://v1.hitokoto.cn/ (从7种分类中随机抽取)
(2)https://v1.hitokoto.cn/?c=b (请求获得一个分类是漫画的句子)
参数 说明
a 动画
b 漫画
c 游戏
d 文学
e 原创
f 来自网络
g 其他
h 影视
i 诗词
j 网易云
k 哲学
l 抖机灵
其他 作为动画类型处理
可选择多个分类,例如: ?c=a&c=c(3)https://v1.hitokoto.cn/?c=f&encode=text (请求获得一个来自网络的句子,并以纯文本格式输出)
返回的格式说明
返回参数名称 描述
id 一言标识
hitokoto 一言正文。编码方式 unicode。使用 utf-8。
type 类型
from 一言的出处
from_who 一言的作者
creator 添加者
creator_uid 添加者用户标识
reviewer 审核员标识
uuid 一言唯一标识;可以链接到 https://hitokoto.cn?uuid=[uuid] 查看这个一言的完整信息
commit_from 提交方式
created_at 添加时间
length 句子长度
例如:返回的data,通过data.hitokoto获取句子正文作者: Justlovesmile
链接: https://blog.justlovesmile.top/posts/27831.html
来源: Justlovesmile’s BLOG
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
PS:这位大佬的博客真好看~~
7.6 左侧 归档、分类 改为默认收起
默认是展开的
修改以下文件,改为收起状态。如图
- style=“height: 0px” 应该可以不用写,收起状态默认就是 0 ~~
.\themes\pure\layout\categories.ejs
.\themes\pure\layout\_partial\archive.ejs
八. 未解决的小需求
(已解决,#7.3)一级目录,右侧导航栏 有时跳转失败;
Valine 评论系统,下面的评论 被@后,未显示 @信息,而别人的是成功的;
我的
其他大佬的
引用时 使用 #,会被导航目录误认为 一级标题;
(已解决)生成在 /public 目录的静态文件都被压缩了,
我看别人的没被压缩,不清楚啥原因。因为配置了这个 https://github.com/cofess/hexo-theme-pure/blob/master/README.cn.md 博客优化 压缩了文件(已解决)文章内部一级、二级…标题左侧无锚点
理想效果图
似乎是环境配置问题,我用虚拟机推送静态文件,就有显示;用真实 win机 推送 就没有锚点,重装 git 也没显示(可能不是 git 的问题)。。。因为压缩了静态文件,全部注释
hexo-neat
配置。
参考
https://github.com/cofess/hexo-theme-pure#hexo-neat
https://github.com/rozbo/hexo-neat#options
无伤大雅,我一般一级标题写的是文章标题;评论区也就是个摆设;静态文件被压缩,可能别人还觉得我是故意,嘿~~
最后总结:魔改要适量,太费时 还得不到提升,不如多看几个前端视频 多写几篇文章。。。
- 感谢你赐予我前进的力量