个人博客搭建之 NexT 主题功能页面相关设置

发表于 分类于 阅读次数： 10k 26 分钟
在这里你可以学到各种你想要的功能，比如：站点统计、访问量、置顶、背景等等内容，还有你们想要的看板娘！

站点数据统计

文章字数/阅读时间

  • 先下载一个额外的插件
1
$ npm install hexo-word-counter

我们在根目录中配置

1
2
3
4
5
6
7
8
9
10
11
# Post wordcount display settings
# Dependencies: https://github.com/next-theme/hexo-word-counter
symbols_count_time:
  symbols: true # 是否开启字符计数
  time: true # 是否显示阅读时间
  total_symbols: false # 是否开启博客总字符数
  total_time: false # 是否开启博客总阅读时间
  exclude_codeblock: false
  awl: 2 # 平均单词长度，默认 - 4
  wpm: 200 # 每分钟平均阅读单词数目，默认 - 275
  suffix: 'mins.'

在 NexT 主题配置文件中设置。

1
2
3
symbols_count_time:
  separated_meta: true
  item_text_total: false

不蒜子 - 站点访问量/文章访问量统计

NexT 主题以及集成了不蒜子的访客人数和文章阅读统计功能，所以我们只需要在主题的配置文件中进行设置即可。

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

页面相关设置

返回顶部以及阅读进度条

NexT 主题，在主题配置文件中，找到 back2top 和 reading_progress 并进行配置即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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 # 进度条的宽度

Github 图标显示

Github 图标默认显示在右上方。

1
2
3
4
5
# `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 名称

个人头像

设置个人头像，只要在主题配置文件中，找到 avatar 即可，但是这样要注意 url 获取到的地址。可以是 http/https/本地文件，但是本地文件的目录是主题文件下的 source/images，并不是根目录下的。

我们使用的是 npm 下载的主题，则是在 node_modules/hexo-theme-next/source/images文件中，添加图片去修改。

如果是 clone 下来的主题，则是在根目录下的 themes/next/source/imagse 文件中添加。

1
2
3
4
5
6
7
8
# 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 # 是否在鼠标放置时旋转图片

首页背景

修改主题配置文件，去除 style 前面的 #

1
2
3
4
5
6
7
8
9
10
11
12
13
# 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

我们在根目录下的 source 下新建一个 _data 的文件下，然后新建 styles.styl 文件。

根据 css 的方式来添加背景图片就可以了，我这里，没有使用图片，使用了渐变。

1
2
3
4
5
6
body {
  background-image: linear-gradient(#e66465, #9198e5);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 50% 50%;
}

圆角

修改主题配置文件，去除 variable 前面的 #。

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

我们在根目录下的 source 下新建一个 _data 的文件下，然后新建 variables.styl 文件，添加以下代码，即可完成圆角设置。

1
2
$border-radius-inner = 20px 20px 20px 20px;
$border-radius = 20px;

透明度

在 source/_data_styles.styl 文件下，添加背景透明设置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//博客内容透明化
//文章内容的透明度设置
.main-inner {
  background: rgba(255, 255, 255, 0.8) none repeat scroll !important;
}

// 侧边栏的透明度设置
.sidebar-inner {
  background: rgba(255, 255, 255, 0.8) none repeat scroll !important;
}

// 菜单栏的透明度设置
// 这里的设置要注意，直接使用 opacity 会影响到 搜索框的透明度
// 所以使用设置背景颜色的透明度
.header-inner {
  background: rgba(255, 255, 255, 0.8) none repeat scroll !important;
}
// 搜索框透明度设置
.popup {
  opacity: 0.9;
}
// 评论区
.comments {
  background: rgba(255, 255, 255, 0.8) none repeat scroll !important;
}

侧边栏添加社交链接(微博/知乎/github)

在主题配置文件下，修改，打开想要显示的即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 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

我这边打开了两个，所以显示如下：

image-20220124115032597

文章相关设置

首页显示部分或摘要，设置阅读全文

  • 我们在每篇文章的顶部添加字段 description，这样就不会显示全部了
1
2
3
4
---
title: title
description: description
---
  • 使用 <!-- more -->

在文章中，使用 <!-- more --> 即可，但是不能在顶部的 --- 下使用。

1
2
3
4
5
6
7
---
title: title
---

**中间必须有内容**

<!-- more -->

修改我们的主题配置文件，添加以下内容。

1
2
3
4
# 首页不显示全文
auto_excerpt:
  enable: true
  #length: 150 # 截取长度 默认150

我们来看显示结果：

image-20220124161311114

文章顶部 meta 修改

修改文章是否显示创建时间、更新时间、是否显示分类等内容。

1
2
3
4
5
6
7
8
# Post meta display settings
post_meta:
  item_text: true # 文字信息
  created_at: true # 创建时间
  updated_at: # 文章顶部内容 - 更新时间
    enable: false
    another_day: true # 只有更新时间不是同一天时显示
  categories: true # 是否显示分类

文章底部添加结束语（最新，手动修改

在主题配置文件中，添加下面的语句。

1
2
3
4
# 是否添加文章结束
post_end_tag:
  enable: true # 是否显示文章结束
  icon: heart # 中间

我们在自己的主题文件目录下，找到 next/layout/_macro/post.njk，并将以下该代码，添加到 body 之后，footer 之前。

1
2
3
4
5
6
7
8
{#####################} {### 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 %}

我们来看效果：

image-20220124173335773

打赏功能

我们打开配置页面，并找到 reward。

1
2
3
4
5
6
7
8
9
10
11
12
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

我们来看看效果吧，首先会是折叠效果，点击之后，才会展示支付图片。

image-20220123185803404

底部添加版权

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

我们来看看版权添加效果：

image-20220124084030346

相关文章推荐

首先需要安装插件

1
$ npm install hexo-related-popular-posts --save

在主题配置文件中，找到这段代码，然后将 enable 修改为 true，将 title 改为相关文章推荐。

1
2
3
4
5
6
7
8
9
10
11
12
# 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 # 是否显示摘要

这样之后，我们就可以在文章的底部看到了。

image-20220124155840387

标签添加 tag 图标

要注意，新版中的文件都是采用的 njk 而我为了展示代码色彩，使用的 是 html 来展示这段代码。

注释方式是不同的，njk 使用的注释是 ``，html 使用的是 <!-- -->。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{%- 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 %}

我们就可以在文章的底部，看到标签前面多了图标了，而且也没有 # 了。

image-20220125104906272

添加个性特效

萌宠，或者看板娘

这里，我们介绍最简单的方式，不介绍高级化，有兴趣的可以去看高级一点的操作 - live2d-widget

我们要介绍的是 hexo-helper-live2d，首先，我们先安装一下插件。

1
$ npm install --save hexo-helper-live2d

然后在站点配置文件中，添加 live2d，注意，不是在主题配置文件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# Live2D
## https://github.com/EYHN/hexo-helper-live2d
live2d:
  enable: true
  scriptFrom: local # 默认
  pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
  pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
  pluginModelPath: assets/ # 模型文件相对与插件根目录路径
  # scriptFrom: jsdelivr # jsdelivr CDN
  # scriptFrom: unpkg # unpkg CDN
  # scriptFrom: https://cdn.jsdelivr.net/npm/live2d-widget@3.x/lib/L2Dwidget.min.js # 你的自定义 url
  tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
  debug: false # 调试, 是否在控制台输出日志
  model:
    use: live2d-widget-model-wanko # npm-module package name
    # use: wanko # 博客根目录/live2d_models/ 下的目录名
    # use: ./wives/wanko # 相对于博客根目录的路径
    # use: https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json # 你的自定义 url
  display:
    position: left
    width: 150
    height: 300
  mobile:
    show: true # 手机中是否展示

然后，我们可以下载一个自己喜欢的2d模型，可以下载的模型选择地址 - live2d-widget-models。

1
$ npm install live2d-widget-model-koharu

我们下载一个模型，然后修改配置文件中 model: use:

1
2
model:
  use: live2d-widget-model-koharu

然后我们执行 hexo clean && hexo g && hexo s。

我们来看结果：

image-20220124113551797

自定义返回顶部（小猫挂着

我们在修改透明度是修改的 source/_data/styles.styl 中添加以下代码，当然，我们需要一张图片，来添加背景图。将图片放置在 theme/next/source/images 下，然后进行展示即可。

下载图片地址，小猫挂着。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//自定义回到顶部样式
.back-to-top {
  width: 70px; // 图片的宽度
  height: 900px; // 图片的高度
  top: -900px;
  bottom: unset;
  transition: all .5s ease-in-out; // 添加移动动画
  background: url("/images/scroll.png");
  //隐藏箭头图标
  > i {
    display: none;
  }
  &.back-to-top-on {
    bottom: unset;
    top: 100vh < (900px + 200px) ? calc( 100vh - 900px - 400px ) : 0px;
  }
}

我们来看页面显示结果：

image-20220125110924416

补充：在这里，我们会遇到一个问题，就是在移动端点击时，会出现蓝色的背景，所有我们来解决一下。

1
2
3
4
.back-to-top:active,
.back-to-top:hover {
  -webkit-tap-highlight-color: transparent;
}

添加腾讯公益 404 页面

在根目录的 source 文件下新建 404.html，然后将以下内容添加。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8;" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="robots" content="all" />
    <meta name="robots" content="index,follow" />
    <link
      rel="stylesheet"
      type="text/css"
      href="https://qzone.qq.com/gy/404/style/404style.css"
    />
  </head>
  <body>
    <script
      type="text/plain"
      src="http://www.qq.com/404/search_children.js"
      charset="utf-8"
      homePageUrl="/"
      homePageName="回到我的主页"
    ></script>
    <script src="https://qzone.qq.com/gy/404/data.js" charset="utf-8"></script>
    <script src="https://qzone.qq.com/gy/404/page.js" charset="utf-8"></script>
  </body>
</html>

然后我们在主题编辑页面中，将 commonweal 前面的 # 去掉，点进去就可以看到了，页面无法访问时，也会跳转到 404。

image-20220123172140939

image-20220123172359003

相关文章推荐
-------------------- 本文结束 感谢阅读 --------------------