如何改typecho主题头像_零成本搭建hexo个人博客(二)--修改主题

本文详细介绍了如何更改Hexo默认的Landscape主题,包括两种方法:自定义修改源码和选择已开发的主题。推荐了GitHub上受欢迎的yilia、next等主题,并以yilia为例,演示了安装、配置网站信息和主题信息的步骤,帮助读者打造个性化的博客网站。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

6fd37e2f66e3332dac4152139d4982bd.png

hexo默认主题landscape

估计很多小伙伴在搭建部署hexo完成后,会看到上面的页面后,然后就感觉,啊?就这?这个页面也太难看了。有没有什么方法可以改一下这个页面的UI啥的,方法是有的:

  • 第一种自己动手修改源码,可以做到你自己想要的效果,前提是你得懂node.js,再加上ejs、jade、swig、haml模板引擎,感兴趣的小伙伴可以深入了解node.js开发出属于自己的主题模板;
  • 第二种方法就是直接选用大佬们开发的主题,在GitHub大佬百家争鸣下,有着各种各样的精美的主题,功能也趋于完善,开源的方式也让主题项目逐渐成熟,我们可以打开hexo的官方文档https://hexo.io/themes/中看到目前有313个是在hexo上展览的。
4ce6ba2366ae83f7e381e80cd570c5b0.png

官方文档展览主题

这里我就推荐一下github上star排名前列的yilia、next等主题,当然你也可以选自己喜欢的主题,如果点击上图的主题不是直接跳转到github项目,你可以在预览的博客网站中找到github的链接,比如我现在点击这个Academia,我们可以在网站底部看到这个主题名称的超链接,点进去就跳转到了。进入项目的目的是为了查看文档,如何学会使用文档自己操作。

b6d01575f3f56cc97bd610c7caaaf9f7.png

网站底部

接下来我将使用yilia主题来做演示。

4bc8826a31bea5edb3d41a81949dae6a.png

搜索yilia

c49bbb1bcc984d2219bfb7408a376749.png

博客网站右下角底部

开搞!

1. 安装主题

  • 首先我们先要克隆远程仓库到我们本地,themes/yilia-plus的意思是克隆到themes下的yilia-plus文件夹下,如果themes下没有这个文件,他会自动创建一个。
git clone --depth=1 https://github.com/JoeyBling/hexo-theme-yilia-plus.git themes/yilia-plus

下载速度慢的,可以改一下hosts文件,添加github等网站的IP地址(百度一下怎么操作),经过漫长的等待下,还是失败的话,先删除yilia-plus文件夹,再替换上条命令的https:为git:,速度直接起飞,有没有。

git clone --depth=1 git://github.com/JoeyBling/hexo-theme-yilia-plus.git themes/yilia-plus
  • 接下来我们就开始更改主目录下的_config.yml文件的theme字段,把landscape改为yilia-plus
    _config.yml

修改完后一定要保存,不然是不会生效的,ctrl+s保存_config.yml然后清除静态文件,重新生成静态文件,然后在本地运行

hexo clean;hexo g;hexo s
f7a58ac5434e0cbf0f0fb85d2e3bde50.png

修改主题完成后

2. 配置网站信息

accf1857635e8c1110fa7f3ac8e149e4.png

个人信息

接着我们来修改网站的全局信息,title对应的是你网页的标题信息,author`对应的是你的用户名

6a77de409b013f54f289d7198dd1c9c7.png

title

48fd47935d9f2296f7dd48e862b3e77d.png

author

修改完后一定要保存,不然是不会生效的,ctrl+s保存_config.yml同样要清除静态文件,重新生成静态文件,然后在本地运行

hexo clean;hexo g;hexo s

3. 配置主题信息

接下来,我们要找到这个yilia-plus文件夹下面的_config.yml,这个是主题的配置信息,记住是在yilia-plus目录下面的,我们来修改头像(其他修改图片的方法类似)

0d4edba9235f261723a2817c4fee31b7.png

avatar


找到yilia-plus下的source下的img文件夹,我们可以放自己定义的照片,然后修改avatar相对应的图片路径,修改完直接刷新网页就行,不需要重启本地服务器,进行清除静态文件等操作

62d4dde9cc4062107dcbe67bc751baf9.png

修改路径

d9791b835e1e90790993a9f298fb92e5.png

完成效果

其余的操作就按照config.yml的中文选择自己的需要,这里就不做多的介绍,更改完毕后,ctrl+c关闭本地服务器,然后推送到远程仓库

hexo clean;hexo g;hexo d

4. 总结

hexo修改主题就讲到这里,希望大家能打造出自己喜欢的个人博客。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值