Theme Shoka 依赖以下 Hexo 插件

没有正确安装以上插件的话，本主题会报错 or 无法正确显示 or 部分功能失效。
hexo-renderer-multi-markdown-it 请注意升级到最新版

安装完以上插件后，修改站点配置文件，加入相关配置。

# multi-markdown-it 安装与配置

# 安装

1. 安装前，记得务必卸载掉默认的 hexo-renderer-marked ，以及别的 markdown 文件渲染器。
   

   1 2 3

   npm un hexo-renderer-marked --save # 或者 yarn remove hexo-renderer-marked

2. 安装
   

   1 2 3

   npm i hexo-renderer-multi-markdown-it --save # 或者 yarn add hexo-renderer-multi-markdown-it

3. 如果安装缓慢，或者失败
   如报错
   

   1	ERROR: Failed to download Chromium r515411! Set "PUPPETEER_SKIP_CHROMIUM_DOWNLOAD" env variable to skip download.

   
   因为有一步需要下载 puppeteer 里的 Chromium 内核，基于天朝内部网络现状，这一步能不能成功要靠科学和运气，所以为了避免安装失败，需要加上 --ignore-scripts 跳过 Chromium 内核的下载。
   

   1 2 3

   npm i hexo-renderer-multi-markdown-it --save --ignore-scripts # 或者 yarn add hexo-renderer-multi-markdown-it --ignore-scripts

   
   puppeteer 主要是用来渲染 mermaid 流程图，只要文章中不使用 mermaid 就没有任何问题，如果要使用 mermaid 建议还是想办法完全安装。

# 配置

1. 加入 markdown 配置，用来渲染 md 文件
   

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

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

2. 加入 minify 配置，压缩 css/js/html
   

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

   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'

3. 停用默认代码高亮功能，否则代码块的 mac 样式不能正常显示。
   找到 highlight 和 prismjs ，把 enable 改成 false 。

1
2
3
4
5

highlight:
  enable: false

prismjs:
  enable: false

# autoprefixer 配置建议

1
2
3

autoprefixer:
  exclude:
    - '*.min.css'

缺少这个插件，首页卡片翻转效果在部分浏览器中无法正确显示。

# algolia 配置建议

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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 配置建议

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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"