下载Hexo主题,并做相应的配置和优化

本文详细介绍了如何下载和配置Hexo博客的主题,通过从GitHub搜索并下载yilia主题,进行Git克隆,替换默认主题,配置颜色等个性化设置,并解决组件缺失问题,最终成功显示新主题。

下载主题



期文章教大家如何搭建Hexo,并部署到Github Pages
因为官方给的默认主题太丑了,或不合自己的心意
这期就教大家如何下载主题、设置和优化主题
下载主题可以去Github上搜索主题,也可以去百度搜索Hexo主题下载,我这里以GitHub为例




1. 打开GitHub官网首页,搜索主题,这里我以yilia为例
J3OyFA.png


2. 这里有两个yilia主题,第二个是增强版(也就是别人修改了部分样式和添加了部分插件)
而第一个就是原汁原味的yilia主题了,这里我以原版yilia为例

J3OcWt.png


3. 点击第一个yilia进去后往下滑有教程

J3O5wQ.png


4. 选择右边的绿色按钮下载zip,解压到你hexo的themes文件夹内,这里我使用Git克隆到本地

J3O2SP.png
J3OWy8.png


5. 克隆过后themes文件夹内就有了yilia主题,第一个是默认主题(可删除)

J3OfOS.png


6. 返回到Hexo的目录下打开_config.yml配置文件,往下滑找到theme将原来默认的主题换成yilia,这里方便大参照,我添加了注释

J3OeGq.png
J3OnzV.png

J3OMsU.png
J3OmR0.png
J3OKMT.png



7. 接下来我们打开Git输入hexo g生成静态页面,随后输入hexo s启动Hexo服务

J3OZin.png
J3OAaj.png


8. 打开浏览器在地址栏输入localhost:4000就会发现我们主题已被更换为yilia主题了

J3OEIs.png

配置



9. 点击所有文章,我这里调了颜色,不过上面提示有组件缺失

J3O3dJ.png


10. 在Hexo配置文件下打开Git

J3O1Z4.png


11. 输入npm i hexo-generator-json-content --save后回车,等待安装

J3O8o9.png


12. 在Hexo配置目录下打开_config.yml配置文件输入提示组件缺失的代码,保持并推出,刷新localhost:4000即可

J3OJiR.png


13. 新建一篇文章看看是否有效

J3OtRx.png


14. 按照Git提示的路径打开测试.md

J3OdsO.png


15. 这里我就用我之前文章的开头来测试,保存并退出

J3ODdH.png


16. 接着在Git里输入hexo g生成静态文件,然后输入hexo s启动Hexo服务

J3OwLD.png
J3OBee.png


17. 浏览器重新刷新localhost:4000成功显示出来

J3O4eg.png



最后说明一下:如果文章太长可以用来折叠内容,点击展开全部才会显示全部信息
<!-- more -->



如果觉得不错的话,就分享给你的好朋友

Github

Gitee

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值