请务必将 hexo-renderer-multi-markdown-it 升级到最新版,目前为 0.1.5
Theme Shoka 依赖以下 Hexo 插件
插件名称 | npm 地址 | 功能 | 依赖程度 |
---|---|---|---|
hexo-renderer-multi-markdown-it | 链接 | md 文件渲染器,压缩 css/js/html | 必需 |
hexo-autoprefixer | 链接 | 给生成的 css 文件们添加浏览器前缀 | 必需 |
hexo-algoliasearch | 链接 | 站内搜索功能 | 搜索按钮失灵 |
hexo-symbols-count-time | 链接 | 文章或站点字数及阅读时间统计 | 统计没有 |
hexo-feed | 链接 | 生成 Feed 文件 | Feed 文件没有 |
没有正确安装以上插件的话,本主题会报错 or 无法正确显示 or 部分功能失效。
hexo-renderer-multi-markdown-it
请注意升级到最新版
安装完以上插件后,修改站点配置文件,加入相关配置。
# multi-markdown-it 安装与配置
# 安装
安装前,记得务必卸载掉默认的
hexo-renderer-marked
,以及别的 markdown 文件渲染器。npm un hexo-renderer-marked --save
# 或者
yarn remove hexo-renderer-marked
安装
npm i hexo-renderer-multi-markdown-it --save
# 或者
yarn add hexo-renderer-multi-markdown-it
如果安装缓慢,或者失败
如报错ERROR: Failed to download Chromium r515411! Set "PUPPETEER_SKIP_CHROMIUM_DOWNLOAD" env variable to skip download.
因为有一步需要下载 puppeteer 里的 Chromium 内核,基于天朝内部网络现状,这一步能不能成功要靠科学和运气,所以为了避免安装失败,需要加上
--ignore-scripts
跳过 Chromium 内核的下载。npm i hexo-renderer-multi-markdown-it --save --ignore-scripts
# 或者
yarn add hexo-renderer-multi-markdown-it --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" |