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。

§ 安装

  1. 安装前,记得务必卸载掉默认的hexo-renderer-marked,以及别的markdown文件渲染器(包括原版 hexo-renderer-multi-markdown-it)。

    npm un hexo-renderer-marked --save
    # 如果之前安装过原版
    npm un hexo-renderer-multi-markdown-it --save
    # 或者用 yarn
    yarn remove hexo-renderer-marked
  2. 安装

    npm i @llxlr/hexo-mdit --save
    # 或者
    yarn add @llxlr/hexo-mdit
    # 或者
    pnpm add @llxlr/hexo-mdit
  3. 如果安装缓慢,或者失败
    如报错

    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建议还是想办法完全安装。

§ 配置

  1. 加入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: "你知道得太多了"
  1. 加入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'
  1. 停用默认代码高亮功能,否则代码块的mac样式不能正常显示。
    找到highlightprismjs,把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"

在提问之前,你应该学会如何提问