NexT(v7.0+)美化(二)

本文章基于 Next v7.7 版本编辑, 自定义文件与主题文件分离是个好的实践,这样可以在不修改任何主题原始代码的情况下加入自定义内容。所有 CSS 修改都使用 custom_file_path

修改超链接样式

在 hexo 的 source 下新建 _data 文件夹新建 custom.styl 文件
主题配置文件 _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
custom_file_path:
#head: source/_data/head.swig
#header: source/_data/header.swig
#sidebar: source/_data/sidebar.styl
#postMeta: source/_data/post-meta.swig
#postBodyEnd: source/_data/post-body-end.swig
#footer: source/_data/footer.swig
#bodyEnd: source/_data/body-end.swig
#variable: source/_data/variables.styl
#mixin: source/_data/mixins.styl
styl客统计
Next 主题已经内置了不蒜子统计,在 `Next` 主题的配置文件 `_config.yml` 中搜索 `busuanzi_count` 并将 `enable` 设置为 `true`,`icon` 可以自定义设置,下面是我的配置

``` yml
# Show Views / Visitors of the website / page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi
busuanzi_count:
enable: true
total_visitors: true # 总访客数量,在页脚显示
total_visitors_icon: user
total_views: true # 总阅读数量,在页脚显示
total_views_icon: eye
post_views: true # 单篇文章阅读数量,在标题下显示
post_views_icon: eye

字数统计和阅读时长统计

安装

在博客根目录下执行命令安装统计插件

1
npm install hexo-symbols-count-time --save

配置

在博客根目录配置文件 _config.yaml 中加入下列代码

1
2
3
4
5
symbols_count_time:
symbols: true # 文章字数
time: true # 阅读时长
total_symbols: true # 所有文章总字数
total_time: true # 所有文章阅读中时长

在 Next 主题配置文件 _config.yaml 中搜索 symbol_count 并修改为

1
2
3
4
5
6
symbols_count_time:
separated_meta: true
item_text_post: true
item_text_total: false
awl: 4
wpm: 275

文章置顶

安装

在博客根目录执行下列命令安装插件

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

配置

打开 .\themes\next\layout\_macro\post.swig 并搜索 ``,在其中添加下列代码以开启标签

1
2
3
4
5
{% if post.top %}
<i class="fa fa-thumb-tack"></i>
<font color="7D26CD">置顶</font>
<span class="post-meta-divider">|</span>
{% endif %}

使用

在需要置顶的文章中加入 top: true 即可,如

1
2
3
4
5
6
---
title: hexo
date: 2019-05-02 19:00:00
categories: Blog
top: true
---