# 搭建 Shokax 主题的 Hexo 博客
# 一、安装 hexo
node version v18+
# hexo-cli install | |
npm i hexo-cli -g | |
# hexo init | |
npx hexo init [projectname] |
# 二、安装主题
我们采用 shokax 主题
npm i skokax-cli -g |
进入初始化好的 hexo 项目目录
SXC install shokax |
修改_config.yml
# Hexo Configuration | |
## Docs: https://hexo.io/docs/configuration.html | |
## Source: https://github.com/hexojs/hexo/ | |
# 站点设置 | |
title: ' ' # 博客标题 | |
subtitle: ' 无限进步 ' # 博客副标题 | |
description: '欢迎来到 anixuil 的世界,这里你可以阅览我的学习笔记以及生活动态分享' # 描述 | |
keywords: web, 前端, 后端, 学习, 笔记, 生活, 分享 # 关键字 | |
author: Anixuil # 作者 | |
language: zh-CN # 语言 | |
timezone: 'Asia/Shanghai' # 时区 | |
# URL | |
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project' | |
url: http://localhost:4000/ | |
permalink: :year/:month/:day/:title/ | |
permalink_defaults: | |
pretty_urls: | |
trailing_index: true # Set to false to remove trailing 'index.html' from permalinks | |
trailing_html: true # Set to false to remove trailing '.html' from permalinks | |
# Directory | |
source_dir: source | |
public_dir: public | |
tag_dir: tags | |
archive_dir: archives | |
category_dir: categories | |
code_dir: downloads/code | |
i18n_dir: :lang | |
skip_render: | |
# Writing | |
new_post_name: :title.md # File name of new posts | |
default_layout: post | |
titlecase: false # Transform title into titlecase | |
external_link: | |
enable: true # Open external links in new tab | |
field: site # Apply to the whole site | |
exclude: '' | |
filename_case: 0 | |
render_drafts: false | |
post_asset_folder: false | |
relative_link: false | |
future: true | |
# 记住这里要设置 false,并把 highlight 和 prismjs 的 enable 调整为 false,因为主题内置有 | |
syntax_highlighter: false | |
highlight: | |
enable: false | |
line_number: true | |
auto_detect: false | |
tab_replace: '' | |
wrap: true | |
hljs: false | |
prismjs: | |
enable: false | |
preprocess: true | |
line_number: true | |
tab_replace: '' | |
# Home page setting | |
# path: Root path for your blogs index page. (default = '') | |
# per_page: Posts displayed per page. (0 = disable pagination) | |
# order_by: Posts order. (Order by date descending by default) | |
index_generator: | |
path: '' | |
per_page: 10 | |
order_by: -date | |
# Category & Tag | |
default_category: uncategorized | |
category_map: | |
Hexo搭建个人博客: Hexo | |
前端: front-end | |
服务端: back-end | |
Markdown: Markdown | |
工作分享: WorkShare | |
鸿蒙: Harmony | |
聊天室搭建: ChatArt | |
tag_map: | |
Vue: Vue | |
React: React | |
ThreeJS: ThreeJS | |
Java: Java | |
Node: Node | |
服务端: Server | |
Md: Markdown | |
TS: TypeScript | |
工作分享: WorkShare | |
鸿蒙: Harmony | |
生活: Life | |
JS: JS | |
前端: 前端 | |
学习: 学习 | |
微前端: 微前端 | |
Vite: Vite | |
Pinia: Pinia | |
Axios: Axios | |
ElementPlus: ElementPlus | |
socket: socket | |
# Metadata elements | |
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta | |
meta_generator: true | |
# Date / Time format | |
## Hexo uses Moment.js to parse and display date | |
## You can customize the date format as defined in | |
## http://momentjs.com/docs/#/displaying/format/ | |
date_format: YYYY-MM-DD | |
time_format: HH:mm:ss | |
## updated_option supports 'mtime', 'date', 'empty' | |
updated_option: 'mtime' | |
# Pagination | |
## Set per_page to 0 to disable pagination | |
per_page: 10 | |
pagination_dir: page | |
# Include / Exclude file(s) | |
## include:/exclude: options only apply to the 'source/' folder | |
include: | |
exclude: | |
ignore: | |
# Extensions | |
## Plugins: https://hexo.io/plugins/ | |
## Themes: https://hexo.io/themes/ | |
theme: shokaX # 主题 | |
# Deployment | |
## Docs: https://hexo.io/docs/one-command-deployment | |
deploy: | |
type: 'git' | |
repo: | |
branch: | |
markdown: | |
render: # 渲染器设置 | |
html: false # 过滤 HTML 标签 | |
xhtmlOut: true # 使用 '/' 来闭合单标签 (比如 <br />)。 | |
breaks: true # 转换段落里的 '\n' 到 <br>。 | |
linkify: true # 将类似 URL 的文本自动转换为链接。 | |
typographer: | |
quotes: "“”‘’" | |
plugins: # markdown-it 插件设置 | |
- plugin: | |
name: markdown-it-toc-and-anchor | |
enable: true | |
options: # 文章目录以及锚点应用的 class 名称,shoka 系主题必须设置成这样 | |
tocClassName: "toc" | |
anchorClassName: "anchor" | |
- plugin: | |
name: markdown-it-multimd-table | |
enable: true | |
options: | |
multiline: true | |
rowspan: true | |
headerless: true | |
- plugin: | |
name: ./markdown-it-furigana | |
enable: true | |
options: | |
fallbackParens: "()" | |
- plugin: | |
name: ./markdown-it-spoiler | |
enable: true | |
options: | |
title: "你知道得太多了" | |
autoprefixer: | |
exclude: | |
- "*.min.css" | |
minify: | |
js: | |
enable: false # ShokaX 自带 esbuild 优化,不建议开启,其他主题建议开启 | |
exclude: # 排除文件,接受 string [],需符合 micromatch 格式 | |
css: | |
enable: true # 开启 CSS 优化 | |
options: | |
targets: ">= 0.5%" # browserslist 格式的 target | |
exclude: # 排除文件,接受 string [],需符合 micromatch 格式 | |
html: | |
minifier: html-minifier | |
enable: true # 开启 HTML 优化 | |
options: | |
comments: false # 是否保留注释内容 | |
exclude: # 排除文件,接受 string [],需符合 micromatch 格式 | |
image: | |
enable: false # 开启图片预处理和自动 WebP 化 | |
options: | |
avif: false | |
webp: false # 预留配置项,现版本无作用 | |
quality: 80 # 质量,支持 1-100 的整数、lossless 或 nearLossless | |
effort: 2 # CPU 工作量,0-6 之间的整数 (越低越快) | |
replaceSrc: true # 自动替换生成 html 中的本地图片链接为 webp 链接 | |
# 我们更建议使用 Service Worker 来在用户侧实现 replaceSrc 的功能,这将能够以一种侵入式更小的方式实现链接替换 | |
exclude: | |
feed: | |
limit: 20 | |
order_by: "-date" | |
tag_dir: false | |
category_dir: false | |
rss: | |
enable: true | |
template: "node_modules/hexo-theme-shokax/layout/_alternate/rss.ejs" | |
output: "rss.xml" | |
atom: | |
enable: true | |
template: "node_modules/hexo-theme-shokax/layout/_alternate/atom.ejs" | |
output: "atom.xml" | |
jsonFeed: | |
enable: true | |
template: "node_modules/hexo-theme-shokax/layout/_alternate/json.ejs" | |
output: "feed.json" | |
algolia: | |
appId: #Your appId | |
apiKey: #Your apiKey | |
adminApiKey: #Your adminApiKey | |
chunkSize: 5000 | |
indexName: #"shokaX" | |
fields: | |
- title #必须配置 | |
- path #必须配置 | |
- categories #推荐配置 | |
- content:strip:truncate,0,2000 | |
- gallery | |
- photos | |
- tags |
修改_config.landspace.yml
rename 为 _config.shokaX.yml
statics: / # 静态文件根目录,可用于 CDN 加速 | |
assets: assets # 图片资源存放目录 | |
css: css # css 存放目录 (不建议改动) | |
js: js # js 存放目录 (不建议改动) | |
modules: | |
player: true # 启用音乐播放器 | |
fireworks: true # 启用鼠标点击烟花特效 | |
unlazyHash: false # 启用 unlazy hash 预览图支持 | |
visibilityListener: true # 启用可见度监听器 | |
tabs: true # 启用选项卡扩展支持,如需开启 summary 功能请一并开启 | |
quiz: true # 启用文章内问题扩展支持 | |
fancybox: true # 启用 fancybox 支持(不建议禁用) | |
homeConfig: | |
gradient: false # 使用 CSS 渐变作为文章封面 | |
# fixedCover 性能比默认的更好,且开启时将启用 LCP 优化和预加载 | |
fixedCover: "" # 主页面 cover (为空则使用 bing 随机图片) | |
# 博客别名 | |
alternate: Anixuil's World | |
# 在此添加您的社交媒体链接 | |
social: | |
github: https://github.com/anixuil || github || "#191717" | |
# image_server: https://anixuil.obs.cn-south-1.myhuaweicloud.com/imagebed/ # "https://acg.xydwz.cn/api/api.php" | |
# bgm | |
audio: | |
- title: 列表1 | |
list: | |
- https://music.163.com/#/playlist?id=2943811283 | |
- https://music.163.com/#/playlist?id=2297706586 | |
- title: 列表2 | |
list: | |
- https://music.163.com/#/playlist?id=2031842656 | |
menu: | |
home: / || home | |
posts: | |
default: / || feather | |
archives: /archives/ || list-alt | |
categories: /categories/ || th | |
tags: /tags/ || tags | |
about: /about/ || user | |
# 社交链接的图标颜色 | |
sidebar: | |
# Sidebar Position. | |
position: right | |
# position: right | |
# Replace the default avatar image and set the url here. | |
avatar: avatar.jpg | |
widgets: | |
# if true, will show random posts | |
random_posts: true | |
# if true, will show recent comments | |
recent_comments: true | |
footer: | |
since: 2022 | |
count: true | |
post: | |
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time | |
count: true | |
# Reward (Donate) | |
reward: | |
# If true, reward will be displayed in every article by default. | |
enable: false | |
account: | |
wechatpay: /wechatpay.png | |
alipay: /alipay.png | |
# paypal: /paypal.png | |
# TagCloud settings for tags page. | |
tagcloud: | |
# All values below are same as default, change them by yourself. | |
min: 16 # Minimun font size in px | |
max: 22 # Maxium font size in px | |
start: "#72cecf" # Start color (hex, rgba, hsla or color keywords) | |
end: "#ffbac3" # End color (hex, rgba, hsla or color keywords) | |
amount: 200 # Amount of tags, change it if you have more than 200 tags | |
performance: | |
# 使用 preconnect 预加载的地址 (不建议超过三个) | |
preConnect: | |
- "https://lf9-cdn-tos.bytecdntp.com" | |
# 使用 dns-prefetch 预解析的地址 | |
dnsPrefetch: | |
- "https://cdn.jsdelivr.net" | |
- "https://unpkg.com" | |
seo: | |
bing: | |
google: | |
yandex: | |
baidu: | |
visitor: | |
clarity: false | |
baiduAnalytics: false | |
googleAnalytics: false | |
darkmode: false # true/false 分别对应打开 / 关闭夜间模式 | |
auto_scroll: false # 自动滚动到上次浏览位置 | |
# 评论系统 | |
twikoo: | |
enable: false # 是否开启 | |
link: "https://cdn.jsdelivr.net/npm/twikoo@1.6.31/dist/twikoo.all.min.js" # twikoo 前端 js 地址,替换 CDN 或升级可改 | |
mode: vercel # vercel (私有部署) 或 tencent | |
envId: "https://anixuil.com" # twikoo 环境 ID,vercel 和私有部署填地址 | |
region: # vercel 和私有部署不填,腾讯云见 twikoo 文档 |
# 三、主题配置
这里我只对比较有坑的地方进行说明,其他的网上和官方文档就已经够用
# 1、自定义背景图
自定义背景图包括首页轮播,文章封面,各模块的背景图。
在 source/_data/assets/
下新建一个 images.yml
的文件,至于原因看官方文档有说,我只讲怎么用。
- https://www.obs.cn.1.jpg | |
- https://www.obs.cn.2.jpg | |
- https://www.obs.cn.3.jpg | |
- https://www.obs.cn.4.jpg | |
- https://www.obs.cn.5.jpg | |
- https://www.obs.cn.6.jpg | |
- https://www.obs.cn.7.jpg | |
- https://www.obs.cn.8.jpg |
我用的是华为云对象存储,在这里放图片链接就好了。
# 2、评论系统
由于我之前是直接从别人的仓库下的老版,而不是自己新建的最新版,配置也是网上东拼西凑看来的,结果就是 valine 用不了,那个人自己封装了一个包,但是没维护了,对其他评论系统也没什么支持,就一直没弄好。
但是最近我本科室友看到我的博客,就想自己也搭一个,便问了很多问题。有一说一,我已经很久没碰了,就写写文章,他问的东西我基本都忘了,然后再帮他解决的问题的途中,看到别人的都是有评论系统的,我就想还是得弄一个,于是到处找文章,实践。最终还是黄天不负有心人,终于成功了。
其实跟着我的这篇文章来搭建的博客,很容易就能搭好,当然我是之前就捣鼓了一阵,一些东西都有些积累,所以有些人实践起来应该不是那么简单,比如图床啊,评论系统部署啊。
正文开始。
官方文档推荐了两个评论系统,我当然选择了免费的,twikoo
Twikoo 私有化部署(docker) | SmileToC
我是私有化部署,用的宝塔面板在自己服务器上,我的评论系统成功取决于你的这些都能弄好,反正我是没遇到一点问题,我也给都是宝塔的友友一点提示。
进入面板,选择 docker-> 镜像 -> 从仓库中拉取
镜像名 imaegoo/twikoo
拉取成功后切换到容器页,点击创建容器,命令创建
docker run --name twikoo -e TWIKOO_THROTTLE=1000 -p 8080:8080 -v ${PWD}/data:/app/data -d imaegoo/twikoo |
放开 8080 端口就好了,可以建一个网站用域名反向代理这个端口地址,就可以做到域名调用了,https 证书可以自己去申请对应免费的 OHTTPS - 免费 HTTPS 证书、自动更新、自动部署
以至于怎么反向代理,可以自己百度,也可以在这个文章下面给我评论,超过五个人我就会写相关文章,或者其他问题,我也都是这个标准。
访问转发的域名
得到这个返回,就没问题了。我们回到主题的配置上来。
twikoo: | |
enable: true # 是否开启 | |
link: "https://cdn.jsdelivr.net/npm/twikoo@1.6.31/dist/twikoo.all.min.js" # twikoo 前端 js 地址,替换 CDN 或升级可改 | |
mode: vercel # vercel (私有部署) 或 tencent | |
envId: "https://your.domain.com" # twikoo 环境 ID,vercel 和私有部署填地址 | |
region: # vercel 和私有部署不填,腾讯云见 twikoo 文档 |
开启配置
# 在调试中如果遇到没生效或者其他类似情况,记得清缓存,重新构建运行 | |
hexo clean | |
hexo g | |
hexo s |
这个时候如果幸运的话已经看到评论样式了,不幸运的话就可以在控制台上看到报错了,详情可以看这个 issues
清缓存重新打包之后,你就可以在文章下面看到评论了,评论也要配置很多东西
这些应该不用我过多介绍,邮箱通知可以自己去搜相关的邮箱怎么配置,获取授权码,我用的是 qq 邮箱,之前因为写过 java 推送邮件,所以当时研究过,不是什么技术难点。