Hexo主题安装
1073 字
5 分钟
Hexo主题安装
一、Butterfly

二、yun

三、Fluid

- 推荐值:⭐⭐⭐⭐
四、shoka
- Github 地址:https://github.com/amehime/hexo-theme-shoka.git
- 在线演示:本站使用这个主题
- 推荐值:⭐⭐⭐⭐⭐
五、示例
以
shoka主题为例,其他主题不保证可以适用。
下载主题以及配置主题
- 下载主题以及配置主题
在博客文件夹根目录下使用下述命令进行安装
#cd your-bloggit 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 的配置文件中,避免重复的设置项 不然会报错的
-
下载完成后,文件会在 博客路径下的
theme下 比如这里,我的博客根路径为D:\Doc\example\,那么 shoka 的主题文件就在D:\Doc\example\theme\shoka\下 -
编辑博客根目录下的
_config.yml, 搜索theme,修改为:
theme: shoka- 删除
_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
- 卸载掉默认的 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- 编辑
_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: "你知道得太多了"- 继续编辑
_config.yml, 找到如下字段
highlight: # 将 enable: true 改成 enable: false enable: true line_number: true auto_detect: false tab_replace: '' wrap: true hljs: false-
如果直接下载上面的插件可能导致 页面的 代码块 显示有问题 这是 版本问题所导致的解决问题如下:修改
package.json文件 -
修改 hexo 的 package.json 的文件内容,将 shoka 的 example 目录中的 package.json 文件的内容拷贝到 hexo 的 package.json 中即可
-
修改完 package.json 文件内容后执行下面的命令降级 hexo
-
重新全局安装 hexo 5.4.2
-
npm install -g [email protected]
-
然后在 hexo 目录下更新依赖
-
npm install
-
然后重新生成就可以解决问题了
-
hexo clean && hexo g && hexo s
-
注意:浏览器可能有缓存,记得刷新缓存
hexo-autoprefixer
- 同上,通过命令安装
npm install hexo-autoprefixer --save- 编辑
_config.yml,合适位置加入
autoprefixer: exclude: - '*.min.css'检查主题是否工作正常
-
使用
hexo clean,hexo g,hexo s三连 -
浏览器输入
localhost:4000,点开默认的博文hello world,查看网页是否渲染正常(为防止网页缓存导致显示异常,建议打开无痕窗口进行浏览) -
如果不正常请挨个检查上述步骤中的配置
支持与分享
如果这篇文章对你有帮助,欢迎分享给更多人或打赏支持!
相关文章智能推荐
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 的一款 简单、美丽 的主题,由 安知鱼 负责开发与维护。
随机文章随机推荐
小王的博客














