【2024教程全】Hexo博客 + nexT主题

发表于 更新于 分类于 本文字数： 15k 阅读时长 ≈ 14 分钟
一篇文章教会你从0基础搭建博客+主题配置+主题优化

本教程会随着博客升级、主题升级，实时更新，建议收藏

新手快速搭建Hexo博客

Hexo博客-新手10分钟快速搭建

nexT主题配置篇

Hexo安装NexT主题

终端控制台cd到博客主题（/themes）目录下，然后输入git clone https://github.com/next-theme/hexo-theme-next按下回车键

即可将nexT主题最新代码克隆到本地themes目录下。

如图：（我克隆过，这里就不回车了）

image-20220810155045942

克隆成功后，将博客目录下的_config.yml配置文件的主题改为hexo-theme-next

成功安装后将 hexo 配置文件中的主题改为 next 就成功了。

# Extensions
# Plugins: https://hexo.io/plugins/
# Themes: https://hexo.io/themes/
#theme: landscape
theme: hexo-theme-next

一键4连，刷新配置：

hexo clean && hexo g && hexo d && hexo s

访问：http://localhost:4000查看是否生效

代码高亮

先看效果：

image-20220810161144551

博客下配置文件../blog/_config.yml设置为true

highlight:
  enable: true

主题下配置文件../blog/themes/hexo-theme-next/_config.yml 配置修改为：

codeblock:
  # Code Highlight theme
  # Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
  # See: https://github.com/chriskempson/tomorrow-theme
  highlight_theme: night eighties
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Show text copy result.
    show_result: true
    # Available values: default | flat | mac
    style: default

字数统计

先看效果：

image-20220810170207435

安装字数统计插件

npm install hexo-symbols-count-time

如图：

image-20220810170101341

博客下配置文件../blog/_config.yml 最后一行新增内容：

symbols_count_time:
  symbols: true
  time: true
  total_symbols: true
  total_time: true
  exclude_codeblock: false
  awl: 4
  wpm: 275
  suffix: "mins."

主题下配置文件../blog/themes/hexo-theme-next/_config.yml 配置修改为：

# 字数统计
symbols_count_time:
  separated_meta: false
  item_text_total: true

一键4连，刷新配置

hexo clean && hexo g && hexo d && hexo s

Valine评论系统+阅读数

先看效果：

image-20220810170230365

image-20220810172900634

  1. 去valine官网注册账号 -> 创建应用
  2. 进入创建的应用，打开设置 -> 应用Keys，获取AppID和AppKey

image-20220810161815972

  1. 设置 -> 安全中心 打开数据存储

    image-20220810162939988

  2. 主题下配置文件../blog/themes/hexo-theme-next/_config.yml 配置修改为：

    # Valine
    # For more information: https://valine.js.org, https://github.com/xCss/Valine
    valine:
      enable: true # 设置为true，默认为false
      appid: 刚刚提到的appid
      appkey: 刚刚提到的appkey
      notify: true # 邮箱通知 , https://github.com/xCss/Valine/wiki，默认为false
      verify: false # 验证码 默认为false
      placeholder: 欢迎留言评论，批评指正 ^_^ # 初始化评论显示，根据自己修改，这里默认，
      avatar: wavatar # 头像风格，默认为mm，可进入网址：https://valine.js.org/visitor.html查看头像设置，这里有许多头像风格，进行设置
      guest_info: nick,mail,link # 自定义评论标题
      pageSize: 10 # 分页大小，10页就自动分页
      language: # Language, available values: en, zh-cn
      visitor: true # 用于显示文章阅读量，具体见https://valine.js.org/visitor.html
      comment_count: true # If false, comment count will only be displayed in post page, not in home page
      recordIP: false # 是否记录评论者IP
      serverURLs: # 启用自定义域名时，在此处填写（默认会自动检测，无需填写
      #post_meta_order: 0

文章标题评论显示英文Valine的问题

image-20220810163626019

解决方案：在themes -> hexo-theme-next -> language -> zh-CN.yml文件中添加以下部分即可。

post:
  # 新添加
  comments:
    valine: 评论
  posted: 发表于
  edited: 更新于

站内即时聊天功能

主题下配置文件 ../blog/themes/hexo-theme-next/_config.yml配置修改为：

# next 主题支持在线聊天服务，支持两个插件 charta 和 tidioA,这一部分自认为没有必要，所以我也没有配置

# Chatra Support
# See: https://chatra.io
# Dashboard: https://app.chatra.io/settings/general
chatra: # charta 插件设置
  enable: false
  async: true
  id: # Visit Dashboard to get your ChatraID
  #embed: # Unfinished experimental feature for developers. See: https://chatra.io/help/api/#injectto

# Tidio Support
# See: https://www.tidiochat.com
# Dashboard: https://www.tidiochat.com/panel/dashboard
tidio: # tidio 插件设置
  enable: false
  key: # Public Key, get it from dashboard. See: https://www.tidiochat.com/panel/settings/developer

全文搜索

先看效果:

image-20220810181644985

安装插件：

npm install hexo-generator-searchdb --save

博客下配置文件 ../blog/_config.yml 最后一行新增内容：

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

主题下配置文件 ../blog/themes/hexo-theme-next/_config.yml配置修改为：

# Local Search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
  enable: true
  # 如果是自动，则通过更改输入触发搜索。
  # 如果是手动，则通过按回车键或搜索按钮触发搜索。
  trigger: auto
  # 显示每篇文章的前 n 个结果，设置为 -1 显示所有结果
  top_n_per_article: 1
  # 将 html 字符串转义为可读字符串。
  unescape: false
  # 在页面加载时预加载搜索数据。
  preload: false

一键4连，刷新配置

hexo clean && hexo g && hexo d && hexo s

主题下配置文件 ../blog/themes/hexo-theme-next/_config.yml配置修改为：

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

版权信息声明

主题下配置文件 ../blog/themes/hexo-theme-next/_config.yml配置修改为：

# Creative Commons 4.0 International License.
# See: https://creativecommons.org/about/cclicenses/
# 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:

开启打赏功能

主题下配置文件 ../blog/themes/hexo-theme-next/_config.yml配置修改为：

# Reward (Donate)
# Front-matter variable (unsupport animation).
reward_settings:
  # 如果为true，奖励将默认显示在每篇文章中。
  enable: true
  animation: true # 是否添加动画
  comment: 今天我想吃5毛钱的辣条！！！

reward:
  wechatpay: /images/wechatpay.webp
  alipay: /images/alipay.webp
  #paypal: /images/paypal.png
  #bitcoin: /images/bitcoin.png

nexT主题配置文件_config.yml解读

Hexo优化篇

新建博文时模版

给网站添加本站运行天数

统计网站与文章的浏览人数及次数

修改文章永久链接为随机编号

图片压缩、转webp加速

jsDelivr加速（jsDeliver在国内已经失效了，PASS）

Vercel托管加速

cloudflare-Pages###cdn加速

DNSPod-CDN加速

七牛云-CDN加速

又拍云CDN加速(域名需备案)

备份技巧

加速部署

404页面定义

vercel配置404

如何免费申请js.cool二级域名

docker运行hexo镜像

丝带背景

首页隐藏特定文章

加速部署

nexT优化篇

增加小顶栏(工具栏)

效果：

image-20220826164511441

/Users/zhangxin/blog/themes/hexo-theme-next/layout/index.njk 首页文件新增如下内容：

{% block content %}

<!-- 新增 -->hd

<ul class="sub-menu menu">
  <li class="menu-item menu-item-getting-started animated"><a href="/posts/f687/" rel="section" data-pjax-state=""><i class="fa fa-flag fa-fw"></i>在线工具、资源</a></li>
  <li class="menu-item menu-item-theme-settings animated"><a href="/posts/30c3/" rel="section" data-pjax-state=""><i class="fa fa-star fa-fw"></i>网络教程、解决方案</a></li>

<!--
  <li class="menu-item menu-item-third-party-services animated"><a href="/docs/third-party-services/" rel="section" data-pjax-state=""><i class="fa fa-puzzle-piece fa-fw"></i>Third Party Services</a></li>
  <li class="menu-item menu-item-tag-plugins animated"><a href="/docs/tag-plugins/" rel="section" data-pjax-state=""><i class="fa fa-rocket fa-fw"></i>Tag Plugins</a></li>
  <li class="menu-item menu-item-advanced-settings animated"><a href="/docs/advanced-settings/" rel="section" data-pjax-state=""><i class="fa fa-cog fa-fw"></i>Advanced Settings</a></li>
  <li class="menu-item menu-item-troubleshooting animated"><a href="/docs/troubleshooting.html" rel="section" data-pjax-state=""><i class="fa fa-life-ring fa-fw"></i>Troubleshooting</a></li>
-->
    </ul>
    
<!-- 新增结束 -->
  {%- for post in page.posts.toArray() %}
    {{ partial('_macro/post.njk', {post: post, is_index: true}) }}
  {%- endfor %}

其他页面同理。

Next8.0以上去除valine了，安装waline

官网教程：https://waline.js.org/guide/get-started.html 一系列操作拿到serverURL

然后安装next集成waline的插件即可

npm install @waline/hexo-next

主题配置文件新增：

# Waline 配置文件
# 更多信息:
# - https://waline.js.org
# - https://waline.js.org/reference/component.html
waline:
  # 新的！是否启用此插件
  enable: true
  
  # Waline服务器地址url，你应该设置为你自己的链接
  serverURL: https://waline.vercel.app
  
  # Waline 库 CDN url，您可以将其设置为您的首选 CDN
  # libUrl: https://unpkg.com/@waline/client@v2/dist/waline.js
  
  # Waline CSS 样式 CDN url，您可以将其设置为您喜欢的 CDN
  cssUrl: https://unpkg.com/@waline/client@v2/dist/waline.css
  
  # 自定义语言环境
  # locale:
  #   placeholder: Welcome to comment # Comment box placeholder

  # 如果为 false，则评论数将仅显示在帖子页面中，而不显示在主页中
  commentCount: true

  # 浏览量计数，注意：您不应同时启用 `waline.pageview` 和 `leancloud_visitors`。
  pageview: false

  # 自定义表情符号
  # emoji:
  #   - https://unpkg.com/@waline/emojis@1.0.1/weibo
  #   - https://unpkg.com/@waline/emojis@1.0.1/alus
  #   - https://unpkg.com/@waline/emojis@1.0.1/bilibili
  #   - https://unpkg.com/@waline/emojis@1.0.1/qq
  #   - https://unpkg.com/@waline/emojis@1.0.1/tieba
  #   - https://unpkg.com/@waline/emojis@1.0.1/tw-emoji

  # 评论信息，有效元是昵称，邮件和链接
  # meta:
  #   - nick
  #   - mail
  #   - link

  # 设置必需的元字段, e.g.: [nick] | [nick, mail]
  # requiredMeta:
  #   - nick

  # 语言，可用值: en-US, zh-CN, zh-TW, pt-BR, ru-RU, jp-JP
  # lang: zh-CN

  # 字数限制，设置为0时无限制
  # wordLimit: 0

  # 是否启用登录, can choose from 'enable', 'disable' and 'force'
  # login: enable

  # 每页评论多少条
  # pageSize: 10

评论管理 (管理端): /ui/register

Hexo的NexT8.8使用Gitalk

https://blog.csdn.net/a171232886/article/details/121206824

[gitalk] 解决配置gitalk插件后初始化登录时跳转回首页

gitalk 未找到相关的Issues进行评论解决方法

NexT 主题内置标签

https://blog.lihj.me/post/next-tag-plugin-instruction.html

{% tabs 选项卡 2 %}
<!-- tab 自定义名称1 -->
内容
<!-- endtab -->
<!-- tab 自定义名称2 -->
内容
<!-- endtab -->
<!-- tab 自定义名称3 -->
内容
<!-- endtab -->
{% endtabs %}

暗黑主题可界面切换

npm install hexo-next-darkmode --save

主题配置文件修改：

# Close NexT's darkmode
darkmode: false

主题配置文件新增：

# Darkmode JS
# For more information: https://github.com/rqh656418510/hexo-next-darkmode, https://github.com/sandoche/Darkmode.js
darkmode_js:
  enable: true
  bottom: '64px' # default: '32px'
  right: 'unset' # default: '32px'
  left: '32px' # default: 'unset'
  time: '0.5s' # default: '0.3s'
  mixColor: 'transparent' # default: '#fff'
  backgroundColor: 'transparent' # default: '#fff'
  buttonColorDark: '#100f2c' # default: '#100f2c'
  buttonColorLight: '#fff' # default: '#fff'
  isActivated: false # default false
  saveInCookies: true # default: true
  label: '🌓' # default: ''
  autoMatchOsTheme: true # default: true
  libUrl: # Set custom library cdn url for Darkmode.js

项目地址：https://github.com/rqh656418510/hexo-next-darkmode

参考：https://www.techgrow.cn/posts/abf4aee1.html

分类页将时间和文章名显示在同一行

效果：

image-20220821173845860

themes/hexo-theme-next/layout/_macro/post-collapse.swig 这两个div改成span

<span class="post-meta">
  <time itemprop="dateCreated"
        datetime="{{ moment(post.date).format() }}"
        content="{{ date(post.date, config.date_format) }}">
    {{ date(post.date, 'MM-DD') }}
  </time>
</span>

<span class="post-title">
  {%- if post.link %}{# Link posts #}
    {%- set postTitleIcon = '<i class="fa fa-external-link-alt"></i>' %}
    {%- set postText = post.title or post.link %}
    {{ next_url(post.link, postText + postTitleIcon, {class: 'post-title-link post-title-link-external', itemprop: 'url'}) }}
  {% else %}
    <a class="post-title-link" href="{{ url_for(post.path) }}" itemprop="url">
      <span itemprop="name">{{ post.title or __('post.untitled') }}</span>
    </a>
  {%- endif %}
</span>

页面加载期间顶部的进度条

cdfj theme/hexo-theme-next 目录下，然后

git clone https://github.com/theme-next/theme-next-pace source/lib/pace

主题配置文件修改：

#页面加载期间顶部的进度条。
# Dependencies: 
# For more information: https://github.com/HubSpot/pace
# 演示：https://www.jianshu.com/p/d08513d38786
pace:
  enable: true
  # Themes list:
  # big-counter | bounce | barber-shop | center-atom | center-circle | center-radar | center-simple
  # corner-indicator | fill-left | flat-top | flash | loading-bar | mac-osx | material | minimal
  theme: flash

可修改进度条颜色：

themes/hexo-theme-next/source/lib/pace/pace-theme-flash.min.css

文件内容 background:#f81ce5 搜索替换为 background:#fc6423

Gemini调整页面宽度

修改文件source/css/_variables/Pisces.styl，调整如下

$content-desktop              = 'calc(100% - %s)' % unit($content-desktop-padding / 2, 'px');
// $content-desktop-large        = 1160px;
// $content-desktop-largest      = 73%;

$content-desktop-large   = 85em
$content-desktop-largest = 85%

数值可以调整

其他主题:

NexT自带的4个主题的页面宽度调整方式不一样，其他模式可参考How to Change Content Width

站点地图

npm install hexo-generator-baidu-sitemap --save

更改完成后，每次进行打包的时候，会自动在public文件夹下生成sitemap.xml和baidusitemap.xml分别用于Google和百度。

将页面提交到服务器后，通过域名/sitemap.xml或者域名/baidusitemap.xml可以进行访问sitemap。

参考：https://zhuanlan.zhihu.com/p/150999914

nexT友联单独开个页面

nexT友联单独开个页面

about页优化（待更新。。。）

about页优化（待更新。。。）

添加看板娘

npm install --save hexo-helper-live2d

博客目录下配置文件 /Users/zhangxin/blog/_config.yml 添加：

# zhangxin 新增
# Live2D
# https://github.com/EYHN/hexo-helper-live2d
live2d:
  enable: true
  # enable: false
  pluginRootPath: live2dw/ # Root path of plugin to be on the site (Relative)
  pluginJsPath: lib/ # JavaScript path related to plugin's root (Relative)
  pluginModelPath: assets/ # Relative model path related to plugin's root (Relative)
  scriptFrom: local # Default
  # scriptFrom: jsdelivr # jsdelivr CDN
  # scriptFrom: unpkg # unpkg CDN
  # scriptFrom: https://cdn.jsdelivr.net/npm/live2d-widget@3.x/lib/L2Dwidget.min.js # Your custom url
  tagMode: false # Whether only to replace live2d tag instead of inject to all pages
  log: false # Whether to show logs in console
  model:
    #use: live2d-widget-model-lwet # npm-module package name
    # use: wanko # folder name in (hexo base dir)/live2d_models/
    # use: ./wives/wanko # folder path relative to hexo base dir
    # 模型：https://huaji8.top/post/live2d-plugin-2.0/
    use: live2d-widget-model-nico
#    use: https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json # Your custom url
  display:
    position: right
    width: 200
    height: 250
    hOffset: 50
    vOffset: 10
  mobile:
    show: false
  react:
    opacity: 0.7

相关资源：
https://github.com/EYHN/hexo-helper-live2d

更换鼠标样式

第一步：blog目录下新建 source/_data/styles.styl 文件，填入：

body {
  cursor: url("/curs/normal.cur"), default;
}

/*鼠标链接指针样式*/
a:hover {
  cursor: url("/curs/link.cur"), pointer;
}

如图：

image-20220819102338778

第二步：下载curs,放在 themes/hexo-theme-next/source 目录下即可

参考：https://xlenco.eu.org/posts/bdfd/

点击随机彩带背景

themes/hexo-theme-next/_config.yml 打开配置

canvas_ribbon:
  enable: true

cd themes/next 然后克隆即可

git clone https://github.com/theme-next/theme-next-canvas-ribbon source/lib/canvas-ribbon

如果不想每次点击界面都切换

themes/hexo-theme-next/source/lib/canvas-ribbon/canvas-ribbon.js 注释这一行

// document.onclick = redraw;

只修改文章内链接颜色

效果演示

themes/hexo-theme-next/source/css/_common/components/post/post-expand.styl .post-body {} 内加上：

a:not(.btn){
color: #42b983;
font-weight: 500;
}

Bug收集篇

解决live2d看板娘和busuanzi不蒜子计数冲突

https://www.boyinthesun.cn/post/error-live2d-busuanzi/

HEXO博客使用LeanCloud报错“Counter not initialized! See more at console err msg.”

https://blog.csdn.net/w573719227/article/details/100704952

其他杂记

Hexo-资源

butterfly主题

3-hexo主题

先fork原仓库，然后clone自己fork的仓库，这样后续改动可以提交到git仓库。

cd themes目录下git clone git@github.com:zx20219898/hexo-theme-3-hexo.git

Matery主题

nexT主题