Hexo-自定义样式
Hexo-自定义样式
网站使用 Hexo-NexT 主题:
0. NexT主题自定义
NexT 主题提供了使用数据文件来自定义默认样式的能力,可以避免侵入修改源码,相关设置在 NexT 主题配置文件内:
1 | custom_file_path: |
并且 NexT 内置了多种文章内的特殊格式:Tag Plugins
1. 侧栏头像动画
使用自定义头像,将图片放入 /source/images/
下,然后在主题配置文件中修改:
1 | avatar: |
1.1 自定义头像旋转效果
头像的样式是通过 CSS 控制的,所以可以通过注入 custom.style
来修改。
1.1.1 鼠标Hover时旋转
如果想让鼠标一过去头像就控记不住记几鬼畜疯狂旋转,则在 custom.style
中添加自定义 CSS 动画:
1 | if hexo-config('avatar.rotated') { |
1.1.2 唱片式旋转
如果想让头像一直缓慢旋转,不受其他操作影响,同样在 custom.style
中添加自定义 CSS 动画:
1 | if hexo-config('avatar.rotated') { |
2. 浏览器标签页动态标题
由于只在打开某篇文章时才需要这个动画效果,因此可以在自定义数据文件 post-body-end.njk
中加载一个 JS:
1 | {# 可写进 js 文件中并放在【hexo/source/xxx/】目录下或【next/source/xxx/】目录下 #} |
具体的文件名和路径请按照实际情况修改。其实这种三个定时器的嵌套比较 Low,不知道有没有办法可以重用定时器。
icon
处可以自定义一个小图像,可以是本地图像也可以是网络图片。不过需要注意的是,这里如果选择本地图片,“/”表示的就不是博客根目录而是主题根目录,所以/images/
其实等价于/next/images/
。同理,在主题配置文件中的favicon
选项设置的也是浏览器标签页小图标,指定的路径也是以主题根目录为起始路径的。
3. 页码导航栏增加显示数量
默认情况下,Next 的页码导航栏只会显示以下页码,而其他页码将被隐藏:
- 首页和尾页;
- 当前页;
- 当前页的前一页(如果有)和后一页(如果有);
例如:
1 | // 当前选中第 1 页时: |
但总页数较少时,会导致中间页码很容易被隐藏,切换页面时很麻烦,因此可以修改配置增加可显示范围:
Next-8.0.0
及之后版本的配置文件在Next/layout/_partials/pagination.njk
,并在该文件中通过引用Next/scripts/helpers/next-paginator.js
实现;1
2
3
4
5
6
7
8hexo.extend.helper.register('next_paginator', function() {
......
let paginator = this.paginator({
......
mid_size : 1,
});
......
});Next-8.0.0
之前版本的配置文件在Next/layout/_partials/pagination.swig
;1
2
3
4
5
6
7
8
9
10{%- if page.prev or page.next %}
<nav class="pagination">
{{
paginator({
......
mid_size : 1,
})
}}
</nav>
{%- endif %}
其中 mid_size
即表示显示「当前页的前 mid_size
个页码」和「当前页的后 mid_size
个页码」,增大该值即可。
4. 自动更新站点发布时间
由于 Hexo 一般使用静态发布,网站更新后如果浏览器有本地缓存可能不会立即刷新,为了更好的判断网站版本,可以在发布 Hexo 时在控制台输出当前时间、并自动将该时间显示在网站中。实现该效果需要满足以下条件:
- 可以感知 Hexo 的发布流程并执行自定义代码;
- 可以将时间记录在某个 Hexo 定义的公共元素中,而与使用的主题 Theme 无关;
- 不侵入主题 Theme 的代码,防止 切换/更新 主题时需要重新配置;
经过查找,网站的 title
和 subtitle
均可满足,由于 title
通常需要作为品牌标识,最终选择使用 subtitle
来记录发布时间。
(1)将发布时间作为 subtitle
的默认值
编辑 Site/node_modules/hexo/lib/hexo/default_config.js
:
1 | // 直接给 Date 类添加原型方法 format(),用于解析传入的格式。 |
(2)删除 Hexo 网站配置中的 subtitle
字段,使其读取默认值
编辑 Site/_config.yml
:
1 | title: XXX |
(3)根据主题显示时间
大部份主题(例如 Next)会直接读取 Hexo 定义的 subtitle
字段值并显示,无需额外适配。
其他收录
- 文章加密:hexo-blog-encrypt
- 点击爱心(会导致双击选中、三击选中整行失效):Hexo NexT主题添加点击爱心效果
- 页面加载进度条:Hexo博客NexT主题美化之顶部加载进度条
- GitHub 角标:GitHub Corners
- 文章编辑器:HexoEditor