NexT 主题以及集成了不蒜子的访客人数和文章阅读统计功能,所以我们只需要在主题的配置文件中进行设置即可。
busuanzi_count:
enable: true # 改为 true
total_visitors: true
total_visitors_icon: fa fa-user
total_views: true
total_views_icon: fa fa-eye
post_views: true
post_views_icon: far fa-eye
2. 页面相关设置
2.1 返回顶部以及阅读进度条
NexT 主题,在主题配置文件中,找到 back2top 和 reading_progress 并进行配置即可。
back2top:
enable: true # true 开启返回顶部
# Back to top in sidebar.
sidebar: false
# Scroll percent label in b2t button.
scrollpercent: false # 是否显示滚动百分比
# Reading progress bar
reading_progress:
enable: false # 关闭阅读进度条
# Available values: left | right
start_at: left # 进度条从哪侧开始
# Available values: top | bottom
position: top # 进度条设置位置
reversed: false
color: '#37c6c0' # 进度条颜色
height: 3px # 进度条的宽度
2.2 Github 图标显示
Github 图标默认显示在右上方。
# `Follow me on GitHub` banner in the top-right corner.
github_banner:
enable: false # 是否显示
permalink: https://github.com/yourname # github 地址
title: Follow me on GitHub # title 名称
# Sidebar Avatar
avatar:
# Replace the default image and set the url here.
url: #/images/avatar.gif
# If true, the avatar will be displayed in circle.
rounded: false # 是否使用圆形
# If true, the avatar will be rotated with the cursor.
rotated: false # 是否在鼠标放置时旋转图片
2.4 首页背景
修改主题配置文件,去除 style 前面的 #
# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
custom_file_path:
#head: source/_data/head.njk
#header: source/_data/header.njk
#sidebar: source/_data/sidebar.njk
#postMeta: source/_data/post-meta.njk
#postBodyEnd: source/_data/post-body-end.njk
#footer: source/_data/footer.njk
#bodyEnd: source/_data/body-end.njk
#variable: source/_data/variables.styl
#mixin: source/_data/mixins.styl
style: source/_data/styles.styl
# Social Links
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimiter is the target permalink, value after `||` delimiter is the name of Font Awesome icon.
social:
GitHub: https://github.com/hzzzzzzzq || fab fa-github
E-Mail: mailto:hzzzzzzzq@gmail.com || fa fa-envelope
#Weibo: https://weibo.com/yourname || fab fa-weibo
#Google: https://plus.google.com/yourname || fab fa-google
#Twitter: https://twitter.com/yourname || fab fa-twitter
#FB Page: https://www.facebook.com/yourname || fab fa-facebook
#StackOverflow: https://stackoverflow.com/yourname || fab fa-stack-overflow
#YouTube: https://youtube.com/yourname || fab fa-youtube
#Instagram: https://instagram.com/yourname || fab fa-instagram
#Skype: skype:yourname?call|chat || fab fa-skype
social_icons:
enable: true
icons_only: false
transition: false
我们在自己的主题文件目录下,找到 next/layout/_macro/post.njk,并将以下该代码,添加到 body 之后,footer 之前。
{#####################} {### END POST BODY ###} {#####################} {%- if
theme.post_end_tag.enable and not is_index %}
<div style="text-align:center;color:#bfbfbf;font-size:16px;">
<span>-------------------- 本文结束 </span>
<i class="fa fa-{{ theme.post_end_tag.icon }}"></i>
<span> 感谢阅读 --------------------</span>
</div>
{%- endif %}
我们来看效果:
3.4 打赏功能
我们打开配置页面,并找到 reward。
reward_settings:
# If true, a donate button will be displayed in every article by default.
enable: true # 是否开启打赏 默认 - false
animation: true # 是否有动画 默认 - false
comment: Buy me a coffee
# 图片是主题目录下的图片 node_modules/hexo-theme-next/source/images
reward:
wechatpay: /images/my_avatar.png
alipay: /images/my_avatar.png
#paypal: /images/paypal.png
#bitcoin: /images/bitcoin.png
我们来看看效果吧,首先会是折叠效果,点击之后,才会展示支付图片。
3.5 底部添加版权
creative_commons:
# Available values: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | cc-zero
license: by-nc-sa # 版权许可协议
# Available values: big | small
size: small
sidebar: false # 侧边栏设置版权
post: true # 在文章底部设置版权 - 一般使用这个
# You can set a language value if you prefer a translated version of CC license, e.g. deed.zh
# CC licenses are available in 39 languages, you can find the specific and correct abbreviation you need on https://creativecommons.org
language: zh-CN
我们来看看版权添加效果:
3.6 相关文章推荐
首先需要安装插件
$ npm install hexo-related-popular-posts --save
在主题配置文件中,找到这段代码,然后将 enable 修改为 true,将 title 改为相关文章推荐。
# Related popular posts
# Dependencies: https://github.com/tea3/hexo-related-popular-posts
related_posts:
enable: true
title: 相关文章推荐 # Custom header, leave empty to use the default one
display_in_home: false # 首页是否显示
params:
maxCount: 5 # 相关文章显示的最大上限
#PPMixingRate: 0.0 # 相关度
#isDate: false # 是否显示日期
#isImage: false # 是否显示配图
isExcerpt: false # 是否显示摘要
这样之后,我们就可以在文章的底部看到了。
3.7 标签添加 tag 图标
要注意,新版中的文件都是采用的 njk 而我为了展示代码色彩,使用的 是 html 来展示这段代码。
注释方式是不同的,njk 使用的注释是 {# 注释 #},html 使用的是 <!-- -->。
{%- if post.tags and post.tags.length %} {%- set tag_indicate = '<i
class="fa fa-tag"
></i
>' if theme.tag_icon else '#' %}
<div class="post-tags">
{%- for tag in post.tags.toArray() %}
<!-- 改动前 -->
<a href="{{ url_for(tag.path) }}" rel="tag"
>{{ tag_indicate }} {{ tag.name }}</a
>
<!-- 改动后 -->
<a href="{{ url_for(tag.path) }}" rel="tag"
><i class="fa fa-tags"></i>{{ tag.name }}</a
>
{%- endfor %}
</div>
{%- endif %}
1. 站点数据统计
1.1 文章字数/阅读时间
我们在根目录中配置
在
NexT
主题配置文件中设置。1.2 不蒜子 - 站点访问量/文章访问量统计
NexT
主题以及集成了不蒜子的访客人数和文章阅读统计功能,所以我们只需要在主题的配置文件中进行设置即可。2. 页面相关设置
2.1 返回顶部以及阅读进度条
NexT
主题,在主题配置文件中,找到back2top
和reading_progress
并进行配置即可。2.2 Github 图标显示
Github
图标默认显示在右上方。2.3 个人头像
设置个人头像,只要在主题配置文件中,找到
avatar
即可,但是这样要注意url
获取到的地址。可以是 http/https/本地文件,但是本地文件的目录是主题文件下的 source/images,并不是根目录下的。我们使用的是
npm
下载的主题,则是在node_modules/hexo-theme-next/source/images
文件中,添加图片去修改。如果是
clone
下来的主题,则是在根目录下的themes/next/source/imagse
文件中添加。2.4 首页背景
修改主题配置文件,去除
style
前面的#
我们在根目录下的
source
下新建一个_data
的文件下,然后新建styles.styl
文件。根据
css
的方式来添加背景图片就可以了,我这里,没有使用图片,使用了渐变。2.5 圆角
修改主题配置文件,去除
variable
前面的#
。我们在根目录下的
source
下新建一个_data
的文件下,然后新建variables.styl
文件,添加以下代码,即可完成圆角设置。2.6 透明度
在
source/_data_styles.styl
文件下,添加背景透明设置。2.7 侧边栏添加社交链接(微博/知乎/github)
在主题配置文件下,修改,打开想要显示的即可。
我这边打开了两个,所以显示如下:
3. 文章相关设置
3.1 首页显示部分或摘要,设置阅读全文
description
,这样就不会显示全部了<!-- more -->
在文章中,使用
<!-- more -->
即可,但是不能在顶部的---
下使用。修改我们的主题配置文件,添加以下内容。
我们来看显示结果:
3.2 文章顶部 meta 修改
修改文章是否显示创建时间、更新时间、是否显示分类等内容。
3.3 文章底部添加结束语(最新,手动修改
在主题配置文件中,添加下面的语句。
我们在自己的主题文件目录下,找到
next/layout/_macro/post.njk
,并将以下该代码,添加到body
之后,footer
之前。我们来看效果:
3.4 打赏功能
我们打开配置页面,并找到
reward
。我们来看看效果吧,首先会是折叠效果,点击之后,才会展示支付图片。
3.5 底部添加版权
我们来看看版权添加效果:
3.6 相关文章推荐
首先需要安装插件
在主题配置文件中,找到这段代码,然后将
enable
修改为true
,将title
改为相关文章推荐。这样之后,我们就可以在文章的底部看到了。
3.7 标签添加 tag 图标
要注意,新版中的文件都是采用的
njk
而我为了展示代码色彩,使用的 是html
来展示这段代码。注释方式是不同的,
njk
使用的注释是{# 注释 #}
,html 使用的是<!-- -->
。我们就可以在文章的底部,看到标签前面多了图标了,而且也没有
#
了。4. 添加个性特效
4.1 萌宠,或者看板娘
这里,我们介绍最简单的方式,不介绍高级化,有兴趣的可以去看高级一点的操作 - live2d-widget
我们要介绍的是 hexo-helper-live2d,首先,我们先安装一下插件。
然后在站点配置文件中,添加
live2d
,注意,不是在主题配置文件。然后,我们可以下载一个自己喜欢的
2d
模型,可以下载的模型选择地址 - live2d-widget-models。我们下载一个模型,然后修改配置文件中
model: use:
然后我们执行
hexo clean && hexo g && hexo s
。我们来看结果:
4.2 自定义返回顶部(小猫挂着
我们在修改透明度是修改的
source/_data/styles.styl
中添加以下代码,当然,我们需要一张图片,来添加背景图。将图片放置在theme/next/source/images
下,然后进行展示即可。下载图片地址,小猫挂着。
我们来看页面显示结果:
补充:在这里,我们会遇到一个问题,就是在移动端点击时,会出现蓝色的背景,所有我们来解决一下。
5. 添加腾讯公益 404 页面
在根目录的
source
文件下新建404.html
,然后将以下内容添加。然后我们在主题编辑页面中,将
commonweal
前面的#
去掉,点进去就可以看到了,页面无法访问时,也会跳转到404
。