0%

Hexo的Next主题美化设置

Hexo主题我还是喜欢next,主要是简洁,我是初学者所以暂时做简单的改动。
主要通过修改next的配置文件_config.yml 来达成。我安装的next版本是v7.7.1。

Next7.0版本注意

参考:小丁的博客

选择next主题的布局

在主题配置文件中搜索Scheme

1
2
3
4
5
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

我选择的是Gemini,大家可以切换选择,找到自己喜欢的布局。

首页文章不展示全文显示摘要

官方公告:auto_excerpt 可以自动截断文章内容作为摘要。此功能不是一个 Hexo 主题应当负责的,这为主题的维护者带来了太大压力。自 7.6.0 版本开始,此功能被移除,请自行安装第三方插件,或阅读 Hexo 有关文档。当然,我们仍然建议通过 <!-- more --> 来精确控制 Read More 的位置。

因此,这个功能在新版的 NexT 已经被废弃了,大家可以直接在文章中添加 <!-- more --> 来精确控制摘要内容。

页面菜单

next默认只有两个页面菜单,首页home和归档archives,搜索menu我们按需选择。

1
2
3
4
5
6
7
8
9
menu:
home: / || home #首页
#about: /about/ || user #关于
#tags: /tags/ || tags #标签
#categories: /categories/ || th #分类
archives: /archives/ || archive #归档
#schedule: /schedule/ || calendar #日程表
#sitemap: /sitemap.xml || sitemap #站点地图
#commonweal: /404/ || heartbeat #公益404

斜线//之间的文字是该页面的名称,除了归档其他的如关于about标签tags分类categories是需要自行添加页面文件夹的。

生成abouttagscategories页面

在博客根目录下输入命令:;

1
2
3
hexo new page about
hexo new page tags
hexo new page categories

会在/source下对应生成页面文件夹和里面的index.md。对于tags和categories需要修改*index.md

内容如下:

  • tags:
1
2
title: 分类 #页面的头部显示
type: categories
  • categories:
1
2
title: 标签 #页面的头部显示
type: tags

添加站内搜索按钮

  • 安装搜索插件:
1
npm install hexo-generator-searchdb --save
  • 在站点配置文件中添加:
1
2
3
4
5
6
#添加站内搜索按钮
search:
path: search.xml
field: post
format: html
limit: 10000
  • 皮肤配置文件修改

    搜索local_search,enable修改为true

1
2
local_search:
enable: true

设置网站图标”favicon.ico”

找自己喜欢的ico图标文件,32x32,修改为favicon.ico

然后把图标文件放在/themes/next/source/images里面。

修改next配置文件,搜索favicon

1
2
3
4
5
6
7
favicon:
#原始small: /images/favicon-16x16-next.png
#原始medium: /images/favicon-32x32-next.png
medium: /images/favicon.ico
small: /images/favicon.ico
apple_touch_icon: /images/apple-touch-icon-next.png
safari_pinned_tab: /images/logo.svg

添加字数统计及阅读时长

安装hexo-symbols-count-time

在博客文件夹里执行命令:

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

修改相关配置文件

  • 站点配置文件添加:
1
2
3
4
5
6
7
symbols_count_time:
#文章内是否显示
symbols: true
time: true
# 网页底部是否显示
total_symbols: true
total_time: true
  • 在Next主题配置文件修改

    搜索symbols_count_time

1
2
3
4
5
6
symbols_count_time:
separated_meta: true # 是否换行显示 字数统计 及 阅读时长
item_text_post: true # 文章 字数统计 阅读时长 使用图标 还是 文本表示
item_text_total: true # 博客底部统计 字数统计 阅读时长 使用图标 还是 文本表示
awl: 4
wpm: 275

Next的其他小功能

代码块增加一件复制

该功能next主题已经内置,我们只要打开就行,主题配置文件搜索copy_button

1
2
3
4
5
# Add copy button on codeblock
copy_button:
enable: true #是否开启复制功能
# Show text copy result. #是否显示提示的复制结果
show_result: true

复制模式mac主题

就在上面一件复制代码的下面

1
2
3
4
5
6
copy_button:
enable: true #原始false
# Show text copy result.
show_result: true #原始false
# Available values: default | flat | mac
style: mac

增加打赏功能

这个也是next具备了。先把需要的收款码放到/themes/next/source/images里面。

搜索reward_settings修改:

1
2
3
4
5
6
7
8
9
10
reward_settings:
# If true, reward will be displayed in every article by default.
enable: true
animation: true
#comment: Donate comment here.

reward:
wechatpay: /images/wechatpay.png
alipay: /images/alipay.png
#bitcoin: /images/bitcoin.png

增加版权信息

搜索creative_commons

1
2
3
4
5
creative_commons:
license: by-nc-sa
sidebar: false #首页边栏是否显示
post: true #文章底部是否显示
language:

修改标签样式

默认的标签前面是一个#号,我们把它改成标签的符号并删除下划线:

打开/themes/next/layout/_macro/post.swig,搜索post-footer

找到:

1
{%- set tag_indicate = '#' %}

#修改为:<i class="fa fa-tag"></i>,这个样子:

1
2
3
4
5
6
<footer class="post-footer">
{%- if post.tags and post.tags.length %}
{%- if theme.tag_icon %}
{%- set tag_indicate = '<i class="fa fa-tag"></i>' %}
{% else %}
{%- set tag_indicate = '<i class="fa fa-tag"></i>' %}

添加本站运行时间

修改/blog/themes/next/layout/_partials/footer.swig文件,在末尾加入如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<br /> #换行
<!-- 网站运行时间的设置 -->
<span id="timeDate">载入天数...</span>
<span id="times">载入时分秒...</span>
<script>
var now = new Date();
function createtime() {
var grt= new Date("04/21/2019 15:54:40");//此处修改你的建站时间或者网站上线时间
now.setTime(now.getTime()+250);
days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
document.getElementById("timeDate").innerHTML = "本站已安全运行 "+dnum+" 天 ";
document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
}
setInterval("createtime()",250);
</script>

添加站点访问人数和总访问量

修改next主题配置文件,搜索busuanzi_count

1
2
3
4
5
6
7
8
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

代码块主题

Next主题内置了tomorrow代码块高亮主题,一共有五个,可以去Tomorrow查看预览效果,搜索highlight_theme,在highlight_theme:中改成自己想要的即可。

1
2
3
4
5
codeblock:
# Code Highlight theme
# Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
# See: https://github.com/chriskempson/tomorrow-theme
highlight_theme: night #原始normal

页面加载条

Next主题使用的是PACE功能,有多种加载动画可选。

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

需要安装pace模块到theme/next/source/lib文件夹下。

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

然后修改next主题配置文件,搜索pace定位到如下代码:

1
2
3
4
5
6
pace:
enable: true #原始false
# Themes list:
# big-counter | bounce | barber-shop | center-atom | center-circle | center-radar | center-simple
# corner-indicator | fill-left | flat-top | flash | loading-bar | mac-osx | material | minimal
theme: minimal

动态背景

Next主题默认提供了三种动态背景

按需选择,我选择的是canvas-nest,需要安装模块到theme/next/source/lib文件夹下。

1
2
cd themes/next
git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest

然后修改next主题配置文件,搜索Canvas-nest定位到如下代码:

1
2
3
4
5
6
7
canvas_nest:
enable: true
onmobile: true # Display on mobile or not
color: "0,0,255" # RGB values, use `,` to separate
opacity: 0.5 # The opacity of line: 0~1
zIndex: -1 # z-index property of the background
count: 99 # The number of lines
您的支持是我最大动力