# 搭建 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-> 镜像 -> 从仓库中拉取

image-20240311203040182

镜像名 imaegoo/twikoo

拉取成功后切换到容器页,点击创建容器,命令创建

docker run --name twikoo -e TWIKOO_THROTTLE=1000 -p 8080:8080 -v ${PWD}/data:/app/data -d imaegoo/twikoo

image-20240311203329145

放开 8080 端口就好了,可以建一个网站用域名反向代理这个端口地址,就可以做到域名调用了,https 证书可以自己去申请对应免费的 OHTTPS - 免费 HTTPS 证书、自动更新、自动部署

以至于怎么反向代理,可以自己百度,也可以在这个文章下面给我评论,超过五个人我就会写相关文章,或者其他问题,我也都是这个标准。

访问转发的域名

image-20240311203842228

得到这个返回,就没问题了。我们回到主题的配置上来。

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

shokaX 配置 twikoo 评论系统,运行报错 getRecentComments not a function,评论也没出来,twikoo 是 docker 私有部署,没有问题・Issue #254・theme-shoka-x/hexo-theme-shokaX (github.com)

image-20240311210501063

清缓存重新打包之后,你就可以在文章下面看到评论了,评论也要配置很多东西

image-20240311210704176

这些应该不用我过多介绍,邮箱通知可以自己去搜相关的邮箱怎么配置,获取授权码,我用的是 qq 邮箱,之前因为写过 java 推送邮件,所以当时研究过,不是什么技术难点。

此文章已被阅读次数:正在加载...更新于

请我喝[茶]~( ̄▽ ̄)~*

Anixuil 微信支付

微信支付

Anixuil 支付宝

支付宝