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

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

新手快速搭建Hexo博客

新手快速搭建Hexo博客

nexT主题配置篇

切换成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.xmlbaidusitemap.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主题