7.Hexo主题安装和自定义

本文介绍了如何在Hexo中使用和管理预装主题如Landscape,以及如何下载、安装和配置第三方主题。还详细讲述了如何创建自己的自定义Hexo主题,包括必要的文件结构和配置过程。

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

一个Hexo主题,基本上只是一组HTML、CSS和JavaScript文件来定义布局的外观和感觉
在默认情况下,Hexo会附带一个主题,landscape主题
![[Pasted image 20240414103301.png]]

这个主题就比较可靠,确实有效
如果想要使用不同的主题,可以下载并安装一个主题,就可以立即开始使用一个主题
当切换主题的时候,不必切换任何内容文件,主题会自动知道如何处理所有这些主题

安装新主题的方式

找到要安装的主题
Themes | Hexo
![[Pasted image 20240414103614.png]]

打开Hexo主题的官方页面
有403个主题
点击一个主题,就会加载出一个demo,可以预览到这个主题会是什么样子
浏览这些主题,选择喜欢的一个
点击链接会打开github页面
![[Pasted image 20240414105059.png]]

在github可以存储不同的文件夹和文件
这个页面就是hexo-theme-quark的github页面
所有的主题都会有github这样的页面

当选择了要使用的主题时,查看自述md文件,通常位于github的主题页面上
可以查看不同的功能和不同的库,和一些这个主题的安装说明,可以知道如何配置主题

所有主题就是包装你的Hexo内容,以某种方式显示它
但是有些主题可以做一些事,有的主题不能做其他事
所以要确保读完了相关想要使用的主题的内容,可以知道可以用这个主题做什么不能做什么
![[Pasted image 20240414111833.png]]

点击克隆,并复制这里的链接
要做的就是把这个库克隆到Hexo的主题文件夹中
打开终端,输入

git clone https://github.com/Pcrab/hexo-theme-quark.git themes/quark

点击回车
会开始运行,到github获取刚才在那个页面所有的文件
![[Pasted image 20240414123812.png]]

![[Pasted image 20240414123833.png]]

下载完成后,主题文件夹多出了quark文件,或者给主题命名的任何名称
里面有quark主题用来显示所有内容的文件
不用特别关注这里的内容,一旦下载了主题,就获取了所需要的东西

配置主题
打开config.yml文件,找到名为theme的变量,现在主题设置为landscape
要使用新的主题,只要在theme后键入该主题的名称即可
![[Pasted image 20240414131804.png]]

如何创建自己的Hexo主题
想要控制网站上的每一段代码
因此,需要创建自己的自定义主题

目前先创建一个基础主题
在themes文件夹中创建一个新文件夹suda
![[Pasted image 20240414132951.png]]

对于这个suda主题,需要创建一堆文件和几个文件夹
主题需要它们才能工作

第一个要创建的文件是config.yml,将会是主题的配置文件
还有语言文件夹languages
和布局文件夹layout
脚本文件夹scripts
还有源文件夹source
![[Pasted image 20240414133609.png]]

这些所有文件夹都将在主题中发挥特定作用,都非常重要,要确保它们在此目录中

打开config文件,找到theme变量
修改成suda
每次修改了config文件,都要确保重启Hexo服务器
希望得到一个空白页面,因为现在使用的是空白的suda主题
![[Pasted image 20240414134245.png]]

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值