llxlr 魔改版已从 hexo-renderer-multi-markdown-it 迁移至自 fork 的 @llxlr/hexo-mdit,当前版本 0.1.5。请使用 @llxlr/hexo-mdit 替代原版渲染器。
Theme Shoka 依赖以下 Hexo 插件
| 插件名称 | npm地址 | 功能 | 依赖程度 |
|---|---|---|---|
| @llxlr/hexo-mdit | 链接 | md文件渲染器,压缩css/js/html,含多项增强 | 必需 |
| hexo-autoprefixer | 链接 | 给生成的css文件们添加浏览器前缀 | 必需 |
| hexo-algoliasearch | 链接 | 站内搜索功能(Algolia 模式) | 搜索按钮失灵 |
| hexo-symbols-count-time | 链接 | 文章或站点字数及阅读时间统计 | 统计没有 |
| hexo-feed | 链接 | 生成Feed文件 | Feed文件没有 |
llxlr 魔改版新增的可选依赖:
| 插件名称 | npm地址 | 功能 | 依赖程度 |
|---|---|---|---|
| hexo-ai-summary-liushen | 链接 | 通过 DeepSeek R1 / SiliconFlow API 生成 AI 文章摘要 | 可选(AI 摘要功能需要) |
| hexo-deployer-wrangler | 链接 | 通过 Wrangler CLI 部署到 Cloudflare Pages | 可选(Cloudflare 部署需要) |
| hexo-shoka-swiper | 链接 | Swiper 轮播图/卡片展示插件 | 可选(轮播图功能需要) |
| hexo-blog-encrypt | 链接 | 文章密码保护(AES-GCM 加密) | 可选(加密文章需要) |
没有正确安装以上必需插件的话,本主题会报错or无法正确显示or部分功能失效。
安装完以上插件后,修改站点配置文件,加入相关配置。
§ @llxlr/hexo-mdit 安装与配置
llxlr 魔改版已从 hexo-renderer-multi-markdown-it 迁移至 @llxlr/hexo-mdit。相比原版,新增了 markdown-it-pangu(中英文空格)、markdown-it-chart(Frappe Charts 图表)、markdown-it-graphviz(Graphviz 流程图)、markdown-it-excerpt(摘要提取)、markdown-it-images(图片懒加载增强)等插件,并修复了 furigana 贪心匹配、attrs colspan 计算等多个上游 bug。
§ 安装
安装前,记得务必卸载掉默认的
hexo-renderer-marked,以及别的markdown文件渲染器(包括原版hexo-renderer-multi-markdown-it)。npm un hexo-renderer-marked --save
# 如果之前安装过原版npm un hexo-renderer-multi-markdown-it --save
# 或者用 yarnyarn remove hexo-renderer-marked安装
npm i @llxlr/hexo-mdit --save
# 或者yarn add @llxlr/hexo-mdit
# 或者pnpm add @llxlr/hexo-mdit
如果安装缓慢,或者失败
如报错ERROR: Failed to download Chromium r515411! Set "PUPPETEER_SKIP_CHROMIUM_DOWNLOAD" env variable to skip download.
因为有一步需要下载puppeteer里的Chromium内核,基于天朝内部网络现状,这一步能不能成功要靠科学和运气,所以为了避免安装失败,需要加上
--ignore-scripts跳过Chromium内核的下载。npm i @llxlr/hexo-mdit --save --ignore-scripts
# 或者yarn add @llxlr/hexo-mdit --ignore-scripts
puppeteer主要是用来渲染mermaid流程图,只要文章中不使用mermaid就没有任何问题,如果要使用mermaid建议还是想办法完全安装。
§ 配置
- 加入
markdown配置,用来渲染md文件
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配置,压缩css/js/html
minify: | |
html: | |
enable: true | |
exclude: # 排除 hexo-feed 用到的模板文件 | |
- '**/json.ejs' | |
- '**/atom.ejs' | |
- '**/rss.ejs' | |
css: | |
enable: true | |
exclude: | |
- '**/*.min.css' | |
js: | |
enable: true | |
mangle: | |
toplevel: true | |
output: | |
compress: | |
exclude: | |
- '**/*.min.js' |
- 停用默认代码高亮功能,否则代码块的mac样式不能正常显示。
找到highlight和prismjs,把enable改成false。
highlight: | |
enable: false | |
prismjs: | |
enable: false |
§ autoprefixer配置建议
autoprefixer: | |
exclude: | |
- '*.min.css' |
缺少这个插件,首页卡片翻转效果在部分浏览器中无法正确显示。
§ algolia配置建议
algolia: | |
appId: #Your appId | |
apiKey: #Your apiKey | |
adminApiKey: #Your adminApiKey | |
chunkSize: 5000 | |
indexName: #"shoka" | |
fields: | |
- title #必须配置 | |
- path #必须配置 | |
- categories #推荐配置 | |
- content:strip:truncate,0,2000 | |
- gallery | |
- photos | |
- tags |
§ feed配置建议
keywords: #站点关键词,用 “,” 分隔 | |
feed: | |
limit: 20 | |
order_by: "-date" | |
tag_dir: false | |
category_dir: false | |
rss: | |
enable: true | |
template: "themes/shoka/layout/_alternate/rss.ejs" | |
output: "rss.xml" | |
atom: | |
enable: true | |
template: "themes/shoka/layout/_alternate/atom.ejs" | |
output: "atom.xml" | |
jsonFeed: | |
enable: true | |
template: "themes/shoka/layout/_alternate/json.ejs" | |
output: "feed.json" |