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

发表于 更新于 分类于 ， 阅读次数： Valine：
本文字数： 1.8k 阅读时长 ≈ 2 分钟

本文章基于 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
---