01_Hexo-Hexo + Pure搭建博客-自定义

[文章路径]: 
	\source\_posts
[站点配置文件]: 
	\_config.yml
[主题配置文件]: 
	\themes\pure\_config.yml	"关于、个人介绍、公告"
[友链文件]: 
	\source\_data\links.yml
[语言]: 
	\themes\pure\languages
[左下角运行时间]: 
	\themes\pure\layout\_common\footer.ejs	"时间、版权"
[评论角色配置]: 
	\themes\pure\layout\_script\_comment\valine.ejs
[css样式]:
	\themes\pure\source\css\style.css
[搜索栏限制]: 
	\themes\pure\source\js\insight.js	"160行"

六。内容样例#

---
title: Test
date: 2022-08-28 00:09:00
updated: 2022-08-28 00:09:01
thumbnail: https://image.cpen.top/image/test.png
tags:
    - Test
category:
    - Test
toc: true
top: true
---
描述<!-- more -->

文章指定多个 category#

多个分类

如果我们的要求是将文章同时分到两个或者多个不同的类目下呢？官方给出的方法是：
categories:
  - [Sports]
  - [Baseball]
参考文章：Hexo 一篇文章多个 categories https://www.jianshu.com/p/4438c417611e

七。自定义#

7.1 搜索框索引突破 5#

F12 定位到搜索框的类选择器为 ins-section-header
grep，定位到配置文件为 \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

参考文章：

https://blog.csdn.net/Fosu_Chenai/article/details/111192850 评论

7.4 滚动条加粗 + 加小箭头#

修改 css 样式，路径 .\hexo-source\themes\pure\source\css\style.css

Ctlrl + F 定位 scrollbar；
调高 height，使代码框右拉滚动条加粗；
右侧下拉条变粗；

7.4.1 代码框加粗

/*
 * scrollbar
 */

::-webkit-scrollbar {
  width: 15px;
  height: 14px;					# 调高
  background: transparent;
}

7.4.2 右侧下拉条变粗 + 添加小箭头

/*
 * 滚动条箭头							
 */
::-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 评论框添加一言#

参考文章

https://blog.justlovesmile.top/posts/27831.html

偶然看到的文章，然后自己就加了这个功能。

路径：.\themes\pure\layout\_script\_comment\valine.ejs；

加到最后 </script> 标签之前；c=j 请求获得网易云的句子，开始网抑云吧；

    fetch('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
在内部添加一段代码：
<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