Hexo主题安装

一、Butterfly

• 在线演示：CrazyWong
• 魔改标杆：
  • Akilarの糖果屋 - Akilar.top
  • 张洪Heo - 分享设计与科技生活 (zhheo.com)
  • 小孙同学 (sunguoqi.com)
• 魔改教程：人人都可以去自定义 | Butterfly主题美化教程 (zhheo.com)
• 主题仓库：https://github.com/jerryc127/hexo-theme-butterfly
• 使用文档：Butterfly - A Simple and Card UI Design theme for Hexo
• 推荐值：⭐⭐⭐⭐⭐

二、yun

• 在线演示：云游君的小站 (yunyoujun.cn)
• 主题仓库：valaxy/packages/valaxy-theme-yun at main · YunYouJun/valaxy · GitHub
• 使用文档：valaxy/packages/valaxy-theme-yun/docs/zh-CN at main · YunYouJun/valaxy · GitHub
• 推荐值：⭐⭐⭐⭐

三、Fluid

• Github 地址：https://github.com/fluid-dev/hexo-theme-fluid
• 在线演示：**https://hexo.fluid-dev.com/**

• 推荐值：⭐⭐⭐⭐

四、shoka

• Github 地址：https://github.com/amehime/hexo-theme-shoka.git
• 在线演示：本站使用这个主题

• 推荐值：⭐⭐⭐⭐⭐

五、示例

以 shoka 主题为例，其他主题不保证可以适用。

下载主题以及配置主题

1. 下载主题以及配置主题

在博客文件夹根目录下使用下述命令进行安装

#cd your-blog 
git clone https://github.com/amehime/hexo-theme-shoka.git ./themes/shoka

需要知道的几点：

• shoka 拉取下来后里面有一个 example 目录，这个目录里面都是例子代码，并不会配置了对项目生效的 😪
• 其中 example 下的 package.json 是 hexo 目录中的 package.json 的参考文件，_config.yml 是 hexo 目录中的 _config.yml 参考文件， _config.shoka.yml 是 shok 中的 _config.yml 参考文件。注意不要混淆！
• 建议将 shoka 中的 example 中的配置文件与 hexo 的配置文件内容放到 hexo 的配置文件中，避免重复的设置项 不然会报错的

2. 下载完成后，文件会在 博客路径下的theme 下 比如这里，我的博客根路径为 D:\Doc\example\ ，那么 shoka 的主题文件就在 D:\Doc\example\theme\shoka\ 下

3. 编辑博客根目录下的 _config.yml , 搜索 theme ，修改为：

theme: shoka

4. 删除 _config.landscape.yml ，这是 hexo 默认主题的配置文件，建议删除

安装 shoka 主题所需的必要插件

插件名称	npm地址	功能	依赖程度
hexo-renderer-multi-markdown-it	https://www.npmjs.com/package/hexo-renderer-multi-markdown-it	md 文件渲染器，压缩 css/js/html	必需
hexo-autoprefixer	https://www.npmjs.com/package/hexo-autoprefixer	给生成的 css 文件们添加浏览器前缀	必需
hexo-algoliasearch	https://www.npmjs.com/package/hexo-algoliasearch	站内搜索功能	搜索按钮失灵
hexo-symbols-count-time	https://www.npmjs.com/package/hexo-symbols-count-time	文章或站点字数及阅读时间统计	统计没有
hexo-feed	https://www.npmjs.com/package/hexo-feed	生成 Feed 文件	Feed 文件没有

安装 hexo-renderer-multi-markdown-it

1. 卸载掉默认的 hexo-renderer-marked ，以及别的 markdown 文件渲染器。

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

2. 在博客根目录下用如下命令进行插件安装

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

3. 编辑 _config.yml , 配置插件参数，在合适位置添加

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

4. 继续编辑 _config.yml , 找到如下字段

highlight:
  # 将 enable: true 改成 enable: false
  enable: true
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false

5. 如果直接下载上面的插件可能导致 页面的 代码块 显示有问题 这是 版本问题所导致的解决问题如下：修改 package.json 文件

6. 修改 hexo 的 package.json 的文件内容，将 shoka 的 example 目录中的 package.json 文件的内容拷贝到 hexo 的 package.json 中即可

7. 修改完 package.json 文件内容后执行下面的命令降级 hexo

   • 重新全局安装 hexo 5.4.2

   • npm install -g hexo@5.4.2 
     * 然后在 hexo 目录下更新依赖
     
     * ```
       npm install
     

   • 然后重新生成就可以解决问题了

   •  hexo clean && hexo g && hexo s 
     ​	注意：浏览器可能有缓存，记得刷新缓存
     
     #### hexo-autoprefixer
     
     1. 同上，通过命令安装
     
     ```bash
     npm install hexo-autoprefixer --save
     

8. 编辑 _config.yml ，合适位置加入

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

检查主题是否工作正常

1. 使用 hexo clean , hexo g , hexo s 三连

2. 浏览器输入 localhost:4000 ，点开默认的博文 hello world ，查看网页是否渲染正常（为防止网页缓存导致显示异常，建议打开无痕窗口进行浏览）

3. 如果不正常请挨个检查上述步骤中的配置