视频加载失败

Hexo主题安装

1073 字
5 分钟
Hexo主题安装

一、Butterfly#

Butterfly
Butterfly

二、yun#

yun
yun

三、Fluid#

img
img

  • 推荐值:⭐⭐⭐⭐

四、shoka#

  • 推荐值:⭐⭐⭐⭐⭐

五、示例#

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

下载主题以及配置主题#

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

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

Terminal window
#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 的配置文件中,避免重复的设置项 不然会报错的
  1. 下载完成后,文件会在 博客路径下的theme 下 比如这里,我的博客根路径为 D:\Doc\example\ ,那么 shoka 的主题文件就在 D:\Doc\example\theme\shoka\

  2. 编辑博客根目录下的 _config.yml , 搜索 theme ,修改为:

theme: shoka
  1. 删除 _config.landscape.yml ,这是 hexo 默认主题的配置文件,建议删除

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

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

安装 hexo-renderer-multi-markdown-it#

  1. 卸载掉默认的 hexo-renderer-marked ,以及别的 markdown 文件渲染器。
Terminal window
npm un hexo-renderer-marked --save
# 或者
yarn remove hexo-renderer-marked
  1. 在博客根目录下用如下命令进行插件安装
Terminal window
npm i hexo-renderer-multi-markdown-it --save
# 或者
yarn add hexo-renderer-multi-markdown-it
  1. 编辑 _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: "你知道得太多了"
  1. 继续编辑 _config.yml , 找到如下字段
highlight:
# 将 enable: true 改成 enable: false
enable: true
line_number: true
auto_detect: false
tab_replace: ''
wrap: true
hljs: false
  1. 如果直接下载上面的插件可能导致 页面的 代码块 显示有问题 这是 版本问题所导致的解决问题如下:修改 package.json 文件

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

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

    • 重新全局安装 hexo 5.4.2

    • npm install -g [email protected]
    • 然后在 hexo 目录下更新依赖

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

    • hexo clean && hexo g && hexo s

​ 注意:浏览器可能有缓存,记得刷新缓存

hexo-autoprefixer#

  1. 同上,通过命令安装
Terminal window
npm install hexo-autoprefixer --save
  1. 编辑 _config.yml ,合适位置加入
autoprefixer:
exclude:
- '*.min.css'

检查主题是否工作正常#

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

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

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

支持与分享

如果这篇文章对你有帮助,欢迎分享给更多人或打赏支持!

打赏
Hexo主题安装
https://blog.huhaha.vip/posts/ec0b08ff/
作者
小王的博客
发布于
2024-05-18
许可协议
CC BY-NC-SA 4.0
相关文章智能推荐
1
Hexo Shoka 主题本地搜索
Hexo由于Shoka作者提供的搜索使用Algolia实现,但是Algolia免费版是有每月请求次数限制的,因此想要使用本地搜索来替换。功夫不负有心人,我在Shoka主题的搜索功能配置找到了解决办法,在此感谢linn提供的方法。在使用过程中也遇到了一些问题,所以在此记录一下各文件的修改情况。
2
Hexo基本使用
HexoHexo的基本使用方法,Hexo是一个快速、简洁且高效的博客框架。它使用Markdown(或其他标记语言)解析文章,并在几秒内生成静态网页。文章详细讲解了如何安装和配置Hexo,以及如何使用不同的主题和插件来丰富博客的功能和外观。适合初学者快速上手Hexo,搭建自己的个人博客。
3
安装主题
Hexo如果能给我一个star那将是对我莫大的鼓励。使用这个主题之前,你应该明白它是一个 Hexo 主题,它的基本逻辑离不开 Hexo,关于如何新建分类,如何新建标签这些问题应该在使用之前就从互联网或官方文档了解详情 。安知鱼主题 是基于 Hexo 的一款 简单、美丽 的主题,由 安知鱼 负责开发与维护。
4
Github+picGo+Typora搭建图床
Hexo本文《Github+picGo+Typora搭建图床》详细介绍了如何使用Github、PicGo和Typora搭建个人图床的过程。如何在Vscode中安装Cnblogs插件,以便将写好的博客上传到博客园。整个过程步骤清晰,适合初学者参考和实践。
5
音乐馆页配置
Hexo如果能给我一个star那将是对我莫大的鼓励。使用这个主题之前,你应该明白它是一个 Hexo 主题,它的基本逻辑离不开 Hexo,关于如何新建分类,如何新建标签这些问题应该在使用之前就从互联网或官方文档了解详情 🔎。安知鱼主题 是基于 Hexo 的一款 简单、美丽 的主题,由 安知鱼 负责开发与维护。
随机文章随机推荐

评论区

Profile Image of the Author
小王的博客
一个上了年纪的猿人.
分类
标签
最新动态
站点统计
文章
209
分类
15
标签
161
总字数
478,322
运行时长
0
最后活动
0 天前
站点信息
构建平台
Vercel
博客版本
Firefly v6.16.7
文章许可
CC BY-NC-SA 4.0
文章目录