NexT主题配置和优化

发表于 更新于 分类于 阅读次数： 本文字数： 4.6k 阅读时长 ≈ 4 分钟

修改NexT主题的配置，并添加一些常见的功能，让博客页面更加美观，功能更加齐全。

修改站点配置文件

在站点配置文件_config.yml中修改博客的基本信息，如标题，副标题，描述，作者等。此时要执行hexo g和hexo s之后才能刷新在本地看到效果。

1
2
3
4
5
6
7
title: tsq的博客
subtitle: ''
description: ''
keywords: "C#, C++, Lua, Unity, 数据结构, 算法"
author: TongShuqi
language: zh-CN
timezone: ''

修改主题配置文件

Next是常用的hexo主题，之前已经讲过如何使用新主题，今天说一下如何配置和优化NexT主题，修改配置需要修改NexT主题的_config.yml文件（区分于博客站点的配置文件，以下称为主题配置文件）。
查看配置修改效果只需要启动hexo服务器（在博客文件夹下打开git命令行，执行hexo s）,修改配置保存后通过localhost:4000刷新查看即可（部分内容需要重新hexo g生成静态文件才能看到效果）。

修改Schemes

Next有四种主题，通过修改scheme来进行修改：

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

设置站点icon

一个常用的icon下载地址：iconfont。

  • 把下载好的icon图片放在 /themes/next/source/img/ 文件夹下。
  • 修改主题配置文件中favicon的内容，也可以直接替换图片。

设置菜单栏选项

修改menu中的内容，把需要的菜单栏取消注释即可。

创建页面

菜单栏配置修改完后，需要分别创建菜单栏页面。

  • 在博客文件夹下打开git命令窗口，执行以下命令。

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

  • 以目录为例，执行命令后，成功会显示INFO Created: ~/Documents/blog/source/categories/index.md，可以在source文件夹下看见这几个新生成的目录。

  • 根据上面的路径，找到index.md这个文件，打开后默认内容是这样的：

    1
    2
    3
    4
    ---
    title: categories
    date: 2023-10-20 22:55:09
    ---

    添加type：

    1
    2
    3
    4
    5
    ---
    title: 文章分类
    date: 2023-10-20 22:55:09
    type: "categories"
    ---

    按这种方式为tags添加type。

  • 同理，我们也可以自己创建菜单，使用以上命令，并在配置文件的menu中添加即可。

修改博客头像

保存图片到 /themes/next/source/img/ 文件夹下，在主题配置文件中修改avatar的内容，填写url路径即可。

添加搜索功能

当博客文章变多后，找到一篇文章就很困难。NexT支持为博客添加搜索功能，可以通过文章内容词汇快速搜索。

  • 在博客根目录打开黑窗口输入命令：

npm install hexo-generator-search --save

  • 修改站点配置文件,加入以下内容（选项内容可适当修改）：

    1
    2
    3
    4
    5
    search:
      path: search.xml
      field: post
      format: html
      limit: 1000

  • 修改主题配置文件：

    1
    2
    local_search:
    enable: true

设置社交界面

可以添加一些常用的社交链接，例如Github、Twitter、CSDN等，也可以自定义链接。

  • 在主题配置文件中修改social字段，把想要展示的内容取消注释。
  • 也可以自己添加，格式为:显示文本: 链接地址 || Front Awesome图标名称

添加阅读时间和字数提示

Hexo支持添加单篇文章和全站点的阅读时间及字数提示。步骤如下：

  • 博客根目录黑窗口下载插件：
    npm install hexo-symbols-count-time

  • 在站点配置文件末尾加入如下内容：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    symbols_count_time:
      symbols: true
      time: true
      total_symbols: true
      total_time: true
      exclude_codeblock: false
      awl: 2    
      wpm: 275
      suffix: "mins."

  • 在主题配置文件中进行如下修改：

    1
    2
    3
    4
    symbols_count_time:
      separated_meta: true
      item_text_post: true
      item_text_total: true

添加阅读人次统计

在主题配置文件中进行如下修改：

1
2
busuanzi_count:
  enable: true

去掉网页Hexo自带底部信息

在主题配置文件中进行如下修改：

1
powered: false

右上角实现github按钮

在主题配置文件中进行如下修改：

1
2
3
github_banner:
  enable: true
  permalink: https://github.com/yourname

配置回到顶部按钮

在主题配置文件中进行如下修改：

1
2
back2top:
  enable: true

边栏和滚动百分比可以按照需求自行添加。

添加已读进度条

在主题配置文件中进行如下修改：

1
2
reading_progress:
  enable: true

进度条的位置，颜色，高度等属性可以自行设置。

配置代码样式

在主题配置文件中搜索codeblock，按需求进行样式修改即可。

更改背景图片

  • 在主题配置文件中找到custom_file_path，把style取消注释。

  • 在博客根目录的 source 文件夹下新建 _data 文件夹（不是主题目文件夹的 source）。

  • 文件夹里新建 styles.styl 文件。

  • styles 文件里加入如下内容，注意图片要放在next文件夹的next/source/images下:

    1
    2
    3
    4
    5
    6
    7
    //背景图片设置
    body {
        background-image: url(/images/background.jpg); 
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: 100% 100%;
    }

设置边框圆角矩形

  • 在主题配置文件中找到custom_file_path，把variable取消注释。

  • 主题文件夹的 source 文件夹里新建 variables.styl 文件。

  • variables 文件里加入如下内容:

    1
    2
    3
    // 圆角设置
    $border-radius-inner     = 30px 30px 30px 30px;
    $border-radius           = 30px;

打赏功能添加

  • 首先需要有一个微信或支付宝的二维码图片，放在 /next/source/images 下。

  • 修改主题配置文件，会在每篇文章末尾生成一个打赏按钮，可以根据情况选择打赏方式：

    1
    2
    3
    4
    5
    6
    7
    8
    reward_settings:
    # If true, a donate button will be displayed in every article by default.
    enable: true
    animation: false
    comment: づ♡ど

    reward:
      wechatpay: /images/wechatpay.png

评论功能添加

NexT 主题支持多种评论系统，如Disqus、GitTalk等。
这里介绍使用 gitalk 和 utterances 来实现评论功能。

gitalk

PS：官方服务器已炸，现在不能直接用了，建议使用别的评论系统，此时仅作记录，之后有时间再研究解决方案。

  • 在开始之前，你需要创建一个 GitHub OAuth App。这将用于 Gittalk 连接到你的 GitHub 仓库。
    登陆到自己的GitHub账户，点击头像-Settings-Developer settings。

  • 在 “Developer settings” 页面上，点击 “OAuth Apps” 选项卡，然后点击注册按钮。

  • 在 “Register a new OAuth application” 页面上，填写 OAuth App 的详细信息:
    Application name：应用名称，随便写。
    Homepage URL：博客主页。
    Application description：应用的简短描述。
    Authorization callback URL：回调 URL，可以是博客主页。

  • 获取 Client ID 和 Client Secret：
    在成功创建 OAuth App 后，你会看到一个页面，其中包含你的 OAuth App 的详细信息，包括 “Client ID” 和 “Client Secret”。这些是你的 OAuth App 的凭证，将用于与 GitHub 进行授权。
    OAuth

  • 在主题配置文件中，修改如下配置（NexT8内置了gittalk，无需安装）：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    gitalk:
      enable: true
      github_id: # GitHub 仓库的所有者（repo owner）的用户名
      repo: # 存储评论的 GitHub 仓库的名称
      client_id: # OAuth App 的 Client ID 
      client_secret: # OAuth App 的 Client Secret
      admin_user: # 评论管理者的 GitHub 用户名，通常是你自己，以便你可以管理评论
      distraction_free_mode: true # Facebook-like
      language: zh-CN
    1
    2
    3
    4
    5
    6
    7
    8
    comments:
      style: tabs
      active: gitalk
      storage: true
      lazyload: false
      nav:
        gitalk:
        order: -1

  • 执行以下代码：

    1
    2
    3
    hexo clean
    hexo g
    hexo d

  • 部署完成后，登录博客，任一一篇博文下应该变成了
    issue

  • 登录，验证。应该能看到评论了。假如出现：
    issue
    查一下主题配置文件中gitalk的proxy是不是 https://github.com/login/oauth/access_token 。
    如果是，改为 https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token 。

utterances

同样是依托于 github 的 issue 做评论区，但是索取的权限更少，也不需要指定某个人来初始化，因此好用得多。较新版本的NexT已经集成了utterances，使用非常简单。

  • 新建一个仓库用于存储博客评论。

  • 授权utterances，选择建立的仓库。

  • 在主题配置文件中进行如下修改：

    1
    2
    3
    comments:
      style: tabs
      active: utterances #激活utterances
    1
    2
    3
    4
    5
    6
    utterances:
      enable: true
      repo: tsq0316/blog-comments # Your Github repository owner and name
      issue_term: title
      label: utteranc
      theme: github-light

  • 在站点配置文件中进行如下修改：

    1
    url: http://tsq0316.github.io/ # Your Github site