发表更新tools / hexo24 分钟读完 (大约3649个字)

Hexo配置Next主题

1. 安装环境说明

  • 首先粘贴本教程测试使用的环境，如果在安装配置中，环境有差异，请酌情修改或调整参数．
1
2
3
4
5
6
7
$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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$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://pengtech.net正常访问了．下一步实现尝试一下修改默认的主题，将其替换为 next 主题．

2. 安装 Next 主题

安装 Next 主题有两种方式:

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

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

  • 进入项目

    1
    2
    3
    $cd blog
    $pwd
    your_project_dir/blog

    项目目录结构如上节所示

  • 找到对应的压缩包

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

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

  • 一键安装

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

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

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

      1
      2
      3
      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 目录的结构如下所示

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    $tree -L 2
        .
        └── next
        ├── _config.yml
        ├── crowdin.yml
        ├── docs
        ├── gulpfile.js
        ├── languages
        ├── layout
        ├── LICENSE.md
        ├── package.json
        ├── README.md
        ├── scripts
        └── source

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

1
2
3
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。

1
theme: next

3.2. 验证主题

  • 首先启动 Hexo 本地站点

    1
    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 端和手机端
1
2
3
4
5
6
7
8
9
# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

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

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

1
2
# 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, 设定版权信息显示位置

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

  • 首先安装插件

    1
    cnpm install hexo-generator-searchdb --save

  • 修改配置文件

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

    themes/next/_config.yml

    1
    2
    3
    # Local search
    local_search:
      enable: true

3.7. 开启侧边栏社交链接

  • 编辑主题配置文件 themes/next/_config.yml
1
2
3
4
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

代码块配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
codeblock:
  # Code Highlight theme
  # All available themes: https://theme-next.js.org/highlight/
  theme:
    light: a11y-dark
    dark: a11y-dark
  highlight:
    enable: true
  prismjs:
    enable: true
    light: prism
    dark: prism-dark
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Available values: default | flat | mac
    style: flat

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

3.9. 配置百度统计

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

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

1
baidu_analytics: # <app_id>

3.10. 开启 google Analytics

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

3.11. 开启页面访问量统计

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

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

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

修改主题配置文件_config.yml

1
2
3
4
5
6
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. 设置 侧边栏外链

1
2
3
4
5
6
7
8
9
# Blog rolls
links_settings:
  icon: fa fa-globe
  title: 赞助商链接
  # Available values: block | inline
  layout: block

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

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

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

3.15. 关闭动画效果

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

1
2
3
motion:
  enable: false
  async: false

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

具体实现方法

1
2
# 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 节点将其修改为如下

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

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

1
2
# 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

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

1
2
3
4
5

$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

1
2
3
4
// 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

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

1
2
3
4
5
- {%- 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

1
2
3
4
5
title: {{ title }}
tags:
categories:

- reward: true

修改打赏按钮的提示

themes\next\languages\en.yml

1
2
3
4
5
6
7
8
9
10
11

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

5. Trouble Shooting

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

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

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

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

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

  • 解决方案

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

      1
      2
      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

相关阅读

使用 Hexo 搭建自己的博客网站

Hexo 命令详解

Hexo 博客添加评论功能

Hexo 配置 Next 主题

Hexo 博客搜索引擎优化

相关文章

Hexo配置Next主题

https://pengtech.net/hexo/hexo_advance_apply_next_theme.html

作者

鹏叔

发布于

2021-10-04

更新于

2024-07-10

许可协议

#
评论
关注我

follow.it

友情链接

分类

标签

AI2
Android2
Angular68
Ansible5
CMS1
English2
Fedora1
Gemini AI1
Golang7
Hexo8
IDEA3
Java4
Linux1
Material1
Matrix1
NAS1
NPM1
Nodejs13
OS1
Rust4
SEO2
Seo1
Ubuntu1
Windows5
angularjs2
backend1
bootstrap2
browser2
chartjs1
chrome3
css5
database11
design16
docker2
fedora2
firefox1
git2
gitlab11
golang4
gradle2
html4
java9
javascript63
k8s1
less1
life2
linux43
macOS2
marketing1
material design17
maven3
network10
nginx5
pgadmin1
pnpm1
product5
sass1
sentry2
shell2
source_control2
spring2
spring boot2
springboot1
strapi5
tailwindcss3
tauri9
tmux1
typescript1
virualbox1
vmware9
vscode6
web60
webpack2
websocket2
windows2
wordpress1

最新文章

归档

广告

×