526互联

Hexo配置Next主题

发布时间 2023-08-14 01:27:36作者: eagle.supper

1. 安装环境说明

  • 首先粘贴本教程测试使用的环境，如果在安装配置中，环境有差异，请酌情修改或调整参数．
$hexo v
INFO  Validating config
hexo: 5.4.0
hexo-cli: 4.3.0
os: linux 5.4.70-amd64-desktop Deepin 20.1 20.1
node: 14.17.6
v8: 8.4.371.23-node.76

$tree -L 1
your_project_dir/blog
├── _config.landscape.yml
├── _config.yml
├── db.json
├── node_modules
├── package.json
├── package-lock.json
├── public
├── README.md
├── scaffolds
├── source
        └── _posts
                ├── hexo
                └── rust
└── themes

source目录下已经有两篇文章，项目能发布到github上，能在公网上通过https://pengtechs.net正常访问了．下一步实现尝试一下修改默认的主题，将其替换为next主题．

2. 安装Next主题

安装Next主题有两种方式:

  • 通过压缩包安装
  • 通过git clone安装

2.1. 安装方式一： 通过压缩包安装

  • 进入项目

    $cd blog
$pwd
your_project_dir/blog

    项目目录结构如上节所示

  • 找到对应的压缩包

  • 下载
    源代码包Source code(targ.gz)

  • 解压缩
    将源码包解压到themes/next目录下即可．

  • 一键安装

    • 前提是你的电脑支持curl, wget, grep等命令，针对大多数windows用户，建议还是参考上面的步骤一步一步安装主题，对于MacOs和windows用户，可以使用如下命令一键安装

    • 理解以上步骤，能更好地帮助你理解一键安装命令

    • 这里将以上步骤压缩成一条命令

      mkdir themes/next 
curl -s https://api.github.com/repos/theme-next/hexo-theme-next/releases/latest | grep tarball_url | cut -d '"' -f 4 | wget -i - -O- | tar -zx -C themes/next --strip-components=1

    • 安装完成后,　themes/next目录的结构如下所示

      $tree -L 2
      .
      └── next
      ├── _config.yml
      ├── crowdin.yml
      ├── docs
      ├── gulpfile.js
      ├── languages
      ├── layout
      ├── LICENSE.md
      ├── package.json
      ├── README.md
      ├── scripts
      └── source

安装方式二： 通过git克隆安装

  git clone --branch v7.8.0 https://github.com/theme-next/hexo-theme-next themes/next
  # 或者
  git clone --branch v7.8.0 git@github.com:theme-next/hexo-theme-next.git themes/next

3. 配置Next主题

3.1. 启用主题

与所有 Hexo 主题启用的模式一样。 当 克隆/下载 完成后，打开 站点配置文件_config.yml， 找到 theme 字段，并将其值更改为 next。

theme: next

3.2. 验证主题

  • 首先启动 Hexo 本地站点

    hexo server

  • 当命令行输出中提示出：
    INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

  • 此时即可使用浏览器访问 http://localhost:4000，检查站点是否正确运行。

3.3. 修改主题配置文件

经过以上配置，blog的主题反而变得更简陋了,　但是有了next主题后，我们可以深度定制它
接下我们来深度配置next主题，此时我们需要编辑themes/next/_config.yml文件

3.3.1. 第一项　修改schema

  • 目前有四种shema可以选择，分别是Muse, Mist, Pisces, Gemini
  • 这里我选择scheme: Gemini这个schema, 比较适合PC端和手机端

# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

# Schemes
# scheme: Muse
# scheme: Mist
#scheme: Pisces
scheme: Gemini

制作logo，并将其存放至/uploads/custom-logo.jpg

  # Custom Logo (Do not support scheme Mist)
  custom_logo: /uploads/custom-logo.jpg

说明:
【/uploads/logo.png】 对应的本地blog文件夹中位置是 【\blog\themes\next\source\uploads\logo.png】 其中【uploads】文件夹，和【logo.png】文件，都需要自己创建。

3.5. 版权信息声明

设定license, 设定版权信息显示位置

# Creative Commons 4.0 International License.
# See: https://creativecommons.org/share-your-work/licensing-types-examples
# Available values of license: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
# 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
creative_commons:
  license: by-nc-sa
  sidebar: true #侧边栏中的版权标识
  post: true #每篇文章底部都显示版权信息
  language:

  • 首先安装插件

     cnpm install hexo-generator-searchdb --save

  • 修改配置文件

    • 修改站点配置文件_config.yml, 新增以下内容到任意位置：
    search:
  path: search.xml
  field: post
  format: html
  limit: 10000
    • 编辑 theme next的配置文件，启用本地搜索功能：

    　themes/next/_config.yml

    # Local search
local_search:
  enable: true

3.7. 开启侧边栏社交链接

  • 编辑主题配置文件 themes/next/_config.yml
social:
  GitHub: https://github.com/your_github_id || fab fa-github
  E-Mail: mailto:your_email@gmail.com || fa fa-envelope
  Weibo: https://weibo.com/your_weibo || fab fa-weibo

3.8. 开启Utterances评论功能 (推荐)

3.9. 配置百度统计

登录 百度统计，定位到站点的代码获取页面
复制 hm.js? 后面那串统计脚本 id，如下图所示：

<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?xxxxxxxxxxxxxx";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

编辑 主题配置文件， 修改字段 baidu_analytics，值设置成你的百度统计脚本 id。

baidu_analytics:  # <app_id>

3.10. 开启google Analytics

  • 申请google账号, 创建Analytics账号, 修改themes/next/_config.
# Google Analytics
# See: https://analytics.google.com
google_analytics:
  tracking_id: # <app_id>

3.11. 开启页面访问量统计

这里使用不蒜子进行页面访问量统计
其实在 next 中已经集成了不蒜子的统计，在官网上也说了
在主题配置文件_config.yml 下搜索 busuanzi_count，enable 设置为 true

busuanzi_count:
  enable: 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

由于我的hexo v8.8.0, 不需要额外的配置, 即可以看到统计功能生效了.

3.12. 开启字数统计及阅读时长

安装插件hexo-symbols-count-time

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

修改主题配置文件_config.yml

symbols_count_time:
  separated_meta: true  # 是否换行显示 字数统计 及 阅读时长
  item_text_post: true  # 文章 字数统计 阅读时长 使用图标 还是 文本表示
  item_text_total: false # 博客底部统计 字数统计 阅读时长 使用图标 还是 文本表示
  awl: 4 # awl（Average Word Length）的数值是设定多少字符统计为一个字（word），中文博客建议设置为 2
  wpm: 275 # （Words Per Minute）是假设的读者阅读速度，多少字（word）统计为阅读时长一分钟。

说明:
在配置项中的:
awl（Average Word Length）的数值是设定多少字符统计为一个字（word），中文博客建议设置为 2。
wpm（Words Per Minute）是假设的读者阅读速度，多少字（word）统计为阅读时长一分钟。官方文档里的一些参考值：
慢速：200
中速：275（默认）
快速：350

实测需要清理一下缓存, 才能生效,否则会显示时长位置会显示NaNa字样

参考为NexT主题添加文章阅读量统计功能

3.13. 设置 侧边栏外链


# Blog rolls
links_settings:
  icon: fa fa-globe
  title: 赞助商链接
  # Available values: block | inline
  layout: block

links:
  "外链1": https://example.com

3.14. 返回顶部按钮显示阅读进度

back2top:
  enable: true
  # Back to top in sidebar.
  sidebar: true  #这里我把返回到顶部放在sidebar, 因为我的右下角还要留给分享按钮
  # Scroll percent label in b2t button.
  scrollpercent: true

3.15. 关闭动画效果

主题中的渐出展开等js特效，确实比较炫酷。但是操作延迟也比较高，容易形成一种页面卡顿的错觉。看久了会审美疲劳，我选择关闭。毕竟实用才是最重要的。如果你有同感，可以参考我的配置

 motion:
  enable: false
  async: false

3.16. 修改文章底部的那个带#号的标签

具体实现方法

# Use icon instead of the symbol # to indicate the tag at the bottom of the post
tag_icon: true

3.17. 设置用户头像

将要显示的头像保存在source下的imgs文件夹中并命名为avatar.jpg

修改next配置文件themes/next/_config.yml, 找到Avatar节点将其修改为如下


# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: /imgs/avatar.jpg
  # If true, the avatar will be displayed in circle.
  rounded: true
  # If true, the avatar will be rotated with the cursor.
  rotated: false

3.18. 添加google广告

注册Google Adsense账号
注册账号流程比较简单，入口在这里：Google Adsense
注册完成后,google 会提供一段广告脚本, 将他放到下面文件的头部位置
修改themes/next/layout/_partials/head.njk

<script data-ad-client="your-ad-client-id" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

确认无误之后，在google adsense上点击确认，开始验证，一般没问题的话几分钟就会出结果，有问题的话要等待一段时间。
参考hexo个人next主题博客接入谷歌广告

3.19. 忽略一些文章

需求是这样的, 文章还没有写完, 所以我打算把正在写的文章放在source/in_progress文件夹下, 等文章写完后准备发布时移动到它该去的位置.
这样我就不用担心未完成的文章被发布出去, 写作时使用markdown工具预览.
编辑站点的配置文件_config.yml

# Directory
skip_render: ['in_progress/**/*']

3.20. SEO搜索引擎优化

搜索引擎优化，可以参考我的文章 Hexo博客搜索引擎优化

3.21. 收到google的邮件

出现次数最多的问题，我们在您的网站中发现了以下错误：
文字太小，无法阅读
可点击元素之间的距离太近

解决办法　修改next的配置文件, 将font.global.size 修改为1.1 相当于18px
fonts 设为国内站点https://fonts.lug.ustc.edu.cn 或者 https://fonts.loli.net

font:
  enable: true

  # Uri of fonts host, e.g. https://fonts.googleapis.com (Default).
  host: https://fonts.loli.net

  # Font options:
  # `external: true` will load this font family from `host` above.
  # `family: Times New Roman`. Without any quotes.
  # `size: x.x`. Use `em` as unit. Default: 1 (16px)

  # Global font settings used for all elements inside <body>.
  global:
    external: true
    family: Noto Serif SC, PingFang SC, Microsoft YaHei, sans-serif, Lato
    size: 1.1

修改 themes\next\source\css\_variables\base.styl


$font-family-chinese      = "Noto Serif SC", "PingFang SC", "Microsoft YaHei";
$font-family-base         = $font-family-chinese, sans-serif;
$font-family-base         = get_font_family('global'), $font-family-chinese, sans-serif if get_font_family('global');

将行间距$line-height-base修改为2.2 默认是２
该文件位于next > source > css > base.styl

// Global line height
$line-height-base         = 2.2;
$line-height-code-block   = 1.6; // Can't be less than 1.3;

3.22. 开启mermaid图表功能

开启mermaid图表功能，可以参考我的另一篇文章Hexo中插入mermaid图表

3.23. hexo命令行工具详解

管理站点，或创建博客可能经常会用到hexo命令行工具，
可参考我的另一篇文章 Hexo命令详解.

3.24. 添加打赏功能

启用主题配置文件中的打赏相关字段，并将个人收款码图片置于 \source\imgs\ 目录下，注意保持图片命名与配置文件中一致：

themes\next_config.yml


reward_settings:
  # If true, a donate button will be displayed in every article by default.
  enable: true
  animation: false #关闭悬停收款码上的文字抖动效果
  comment: Buy me a coffee

reward:
  wechatpay: /imgs/wechatpay.jpg
  alipay: /imgs/alipay.jpg

并非每个页面都需要开启打赏功能，可以在 Front-Matter 中添加 reward 字段来控制是否在本文章中添加打赏信息，然后修改文章布局模板中相关的判定条件：

themes/next/layout/_macro/post.njk

- {%- if post.reward_settings.enable %}
+ {%- if post.reward and post.reward_settings.enable %}
          {{ partial('_partials/post/post-reward.njk') }}
        {%- endif %}

为了方便可在草稿模板 scaffolds\draft.md 中统一添加 reward 字段默认值：
scaffolds\draft.md

  title: {{ title }}
  tags:
  categories:
+ reward: true

修改打赏按钮的提示

themes\next\languages\en.yml


reward:
- donate: Donate
+ donate: 打赏
-  wechatpay: WeChat Pay
+  wechatpay: 微信支付
-  alipay: Alipay
+  alipay: 支付宝
  paypal: PayPal
  bitcoin: Bitcoin

4. 参考文章

NexT主题制作团队的Github主页

Hexo配置NexT主题教程

2个小时教你hexo博客添加评论，打赏，Rss等功能

Hexo博客优化之实现来必力评论功能

NexT第三方服务集成

Hexo常用插件介绍 hexo-symbols-count-time

打赏功能参考 Hexo 搭建个人博客系列：进阶设置篇

5. Trouble Shooting

5.1. 链接包含中午不能正常跳转问题

  • 现象：当右侧大纲条目中包括中文时，点击不能正确跳转

    • 打开浏览器开发者模式发现以下错误

      utils.js:240 Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null
at HTMLAnchorElement.<anonymous> (utils.js:240)

  • 原因分析:
    中文链接在转码后不能正确的映射到相应的页面元素

  • 解决方案

    • 我已经通过此issue反馈给hexo社区，社区的回复是在新的Next theme中已经解决此问题，需要升级 next theme到新版本, 以下是来自社区的回复:

      This issue has been fixed in next-theme/hexo-theme-next@0d2b3af
Theme NexT version 7.8.0 is outdated. The latest version is v8.8.0 https://github.com/next-theme/hexo-theme-next/releases/tag/v8.8.0