Steve's
0%

Hexo 美化

发表于 更新于
本文字数： 2.9k 阅读时长 ≈ 3 分钟

主题设置

NexT 主题安装

首先先装上 Hexo 主题，官方的 Tutorial 在这里

1
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

然后在站点配置文件中

_config.yml
1
theme: next

主题设置

选择 Scheme

NexT 有几个不同的 Scheme 可供选择，这里我选择的是 Pisces

themes/next/_config.yml
1
scheme: Pisces

Social 账号设定

在主题配置文件中，设置上自己的社交账号

themes/next/_config.yml
1
2
3
social:
  GitHub: https://github.com/stevelee477 || github
  E-Mail: mailto:[email protected] || envelope

其中 | 后的指的是Font Awesome上的图标

字数统计 阅读时间

首先安装

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

然后在站点配置文件中添加

_config.yml
1
2
3
4
5
symbols_count_time:
  symbols: true
  time: true
  total_symbols: true
  total_time: true

在主题配置文件中设置

themes/next/_config.yml
1
2
3
4
5
6
7
8
# Post wordcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: false
  awl: 4
  wpm: 275

awl 是 average world length, wpm 是 word per minute

效果图是这样的

Leancloud 配置

虽然写文章也不是为了别人读的，不过总是要折腾一下

Leancloud 是一个可以统计文章阅读量的平台，关于 Hexo 上 Leancloud 的使用方法在这篇文章中说的很详细

这里需要注意的是设置 Leancloud 的时候不要手贱把主题配置文件中的 valine 的 visitor 选项打开，我折腾了好久才注意到这个问题

并且如果你喜欢「热度」而不是「阅读人数」话，可以在 theme/next/languages/zh-CN.yml 中添加

theme/next/languages/zh-CN.yml
1
2
3
4
post:
  heat: 热度
symbol:
  degree: "℃"

在 theme/next/layout/post.swig 中，将

theme/next/layout/post.swig
1
2
3
4
{% if theme.post_meta.item_text %}
<span class="post-meta-item-text">{{ __('post.views') + __('symbol.colon') }}</span>
{% endif %}
<span class="leancloud-visitors-count"></span>

改成

theme/next/layout/post.swig
1
2
3
4
5
6
7
{% if theme.post_meta.item_text %}
<span class="post-meta-item-text">{{ __('post.heat') + __('symbol.colon') }}</span>
{% endif %}
<span class="leancloud-visitors-count"></span>
{% if theme.post_meta.item_text %}
<span class="post-meta-item-text">{{ __('symbol.degree') }}</span>
{% endif %}

效果如图

同时你也可以更改其他的语言文件来完善多语言支持

优雅的进度条

在 NexT 中，你可以通过 Pace 来设置进度条

打开博客目录，执行

1
$ git clone https://github.com/theme-next/theme-next-pace themes/next/source/lib/pace

然后在主题配置文件中设置

themes/next/_config.yml
1
2
3
4
5
6
7
8
pace: false
# Themes list:
# pace-theme-big-counter | pace-theme-bounce | pace-theme-barber-shop | pace-theme-center-atom
# pace-theme-center-circle | pace-theme-center-radar | pace-theme-center-simple | pace-theme-corner-indicator
# pace-theme-fill-left | pace-theme-flash | pace-theme-loading-bar | pace-theme-mac-osx | pace-theme-minimal
# For example
# pace_theme: pace-theme-center-simple
pace_theme: pace-theme-minimal

使用 CDN 加速

在主题配置文件的 vendors 中，可以改变使用的脚本的 CDN 地址，使得网页可以更快得加载

themes/next/_config.yml
1
2
3
4
5
6
7
8
9
vendors:
  # Internal path prefix. Please do not edit it.
  _internal: lib

  # Internal version: 2.1.3
  # Example:
  jquery: //cdn.jsdelivr.net/npm/jquery@2/dist/jquery.min.js
  # jquery: //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  # jquery: