📖环境部署 - 🛠️主题配置及使用 - 🌈特殊功能

# 前言

这是一篇基于Hexo-shokax主题创作自己的Blog的文章，使用其它主题请查看其它主题文档.

Shokax主题由来

因为Shoka作者大大因为学业和事业繁忙决定停止更新已四年有余，随着技术的更新已有许多东西失效于是便出现了Shokax。
所以Hexo-shokax是shoka的一个二次开发版(精神续作),致力于提高性能和优化魔改体验方面.网址链接

Shokax和Shoka对比

技术: JavaScript + Native + Nunjucks
评论系统: 基于Valine的评论系统
搜索功能: 只支持Algolia搜索

技术: TypeScript + Vue 3 + Pug(Shokax性能更强)
评论系统: 可使用Twikoo/Waline主流评论系统
搜索功能: 支持本地搜索和Algolia搜索

# 安装流程

环境安装
个人仓库的搭建
Shokax主题安装
部署到Github Pages

# 环境安装

Node.js的安装

Git的安装

Git 官方下载

右键桌面或文件夹点击Git Bash Here输入代码进行Git基本设置

git config --global user.name "Name"
git config --global user.email "Email"

生成密钥,用于后面绑定github账号

ssh-keygen -t rsa -C "Email"

# 个人仓库的搭建

使用Github来搭建博客

注册Github账号
创建仓库，仓库名选择 github名称.github.io
使用Git绑定自己的Github账号
绑定仓库

# Git绑定Github账号

密钥txt一般在[C盘/用户/user/.ssh]中，我们需要的是 id_ras.pub文件。

点击Github右上角头像选择Settings -> SSH and GPG keys中，选择New SSH Key,将 id_ras.pub文件的内容复制黏贴进后保存

使用命令检测连接

ssh -T git@github.com
#连接成功会显示用户名

# 绑定仓库上传

在根目录下的_config.yml中修改

deploy:
  type: 'git'
  repo: 你的github仓库地址
  branch: main #你的分支名称

# Shokax的安装

安装 ShokaX-CLI:

# hexo init
npm install shokax-cli --location=global
# cd your_blog
SXC install shokaX

在_config.yml中添加Markdown配置

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: "你知道得太多了"

推荐添加配置

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: true # 预留配置项，现版本无作用
      quality: 80 # 质量，支持1-100的整数、lossless或nearLossless
      effort: 2 # CPU 工作量，0-6之间的整数(越低越快)
      replaceSrc: false # 自动替换生成html中的本地图片链接为webp链接
      # 对于使用 CI 工作流部署的用户，请注意本配置可能导致图片 404，如果出现请关闭
      # 我们更建议使用 Service Worker 来在用户侧实现 replaceSrc 的功能，这将能够以一种侵入式更小的方式实现链接替换
    exclude:

使用Shokax即食罐头安装

git clone https://github.com/theme-shoka-x/shokax-can --depth=1
cd shokax-can
pnpm install
hexo s # 如果报错更换为 pnpm dlx hexo s

安装完成后修改站点配置文件/_config.yml，把主题改为shokax

theme: shokax

特别注意！！！

如果没有关闭代码高光或者渲染器版本不是最新会出现代码块显示不全的问题，Shoka和Shokax都受影响
由于框架版本不同关闭方式也不同,需先查看版本

hexo version

V7.0.0及以下:

highlight:
  enable: false
  
prismjs:
  enable: false

V7.0.0以上:

syntax_highlighter: false

安装后输入hexo三件套查看网页显示是否正常

hexo clean //清除缓存
hexo g //生成静态文件
hexo s //启动服务器

因某些原因Shoka及Shokax无法正常显示图片,请参考下一篇文章切换为自己图床

# 部署到Github Pages

使用Vs code或者git bash等工具打开命令行
安装git上传插件

pnpm install hexo-deployer-git

部署前请先确认站点配置文件/_config.yml中的deploy是否正确及使用Hexo三件套后在本地运行无误

部署到Github Pages

hexo d

shoka/shokax