一个Hexo主题,基本上只是一组HTML、CSS和JavaScript文件来定义布局的外观和感觉
在默认情况下,Hexo会附带一个主题,landscape主题
![![[Pasted image 20240414103301.png]]](https://i-blog.csdnimg.cn/blog_migrate/83437617d4daa8eaa815eae90c295ab2.png)
这个主题就比较可靠,确实有效
如果想要使用不同的主题,可以下载并安装一个主题,就可以立即开始使用一个主题
当切换主题的时候,不必切换任何内容文件,主题会自动知道如何处理所有这些主题
安装新主题的方式
找到要安装的主题
Themes | Hexo
![![[Pasted image 20240414103614.png]]](https://i-blog.csdnimg.cn/blog_migrate/bbdc3e23e2d43c6076e9eff77fdd1cad.png)
打开Hexo主题的官方页面
有403个主题
点击一个主题,就会加载出一个demo,可以预览到这个主题会是什么样子
浏览这些主题,选择喜欢的一个
点击链接会打开github页面
![![[Pasted image 20240414105059.png]]](https://i-blog.csdnimg.cn/blog_migrate/b5bd20a7e42077a374394c4a35d0d7e5.png)
在github可以存储不同的文件夹和文件
这个页面就是hexo-theme-quark的github页面
所有的主题都会有github这样的页面
当选择了要使用的主题时,查看自述md文件,通常位于github的主题页面上
可以查看不同的功能和不同的库,和一些这个主题的安装说明,可以知道如何配置主题
所有主题就是包装你的Hexo内容,以某种方式显示它
但是有些主题可以做一些事,有的主题不能做其他事
所以要确保读完了相关想要使用的主题的内容,可以知道可以用这个主题做什么不能做什么
![![[Pasted image 20240414111833.png]]](https://i-blog.csdnimg.cn/blog_migrate/5fb63ae2d50f3783fff290e6e93ac9cd.png)
点击克隆,并复制这里的链接
要做的就是把这个库克隆到Hexo的主题文件夹中
打开终端,输入
git clone https://github.com/Pcrab/hexo-theme-quark.git themes/quark
点击回车
会开始运行,到github获取刚才在那个页面所有的文件
![![[Pasted image 20240414123812.png]]](https://i-blog.csdnimg.cn/blog_migrate/7ce4857461da35a64f42945a49378927.png)
![![[Pasted image 20240414123833.png]]](https://i-blog.csdnimg.cn/blog_migrate/6c3de3b4232190e8627d850db07d8e24.png)
下载完成后,主题文件夹多出了quark文件,或者给主题命名的任何名称
里面有quark主题用来显示所有内容的文件
不用特别关注这里的内容,一旦下载了主题,就获取了所需要的东西
配置主题
打开config.yml文件,找到名为theme的变量,现在主题设置为landscape
要使用新的主题,只要在theme后键入该主题的名称即可
![![[Pasted image 20240414131804.png]]](https://i-blog.csdnimg.cn/blog_migrate/948659b9fb0b1a385d75c20e4bcd2fa0.png)
如何创建自己的Hexo主题
想要控制网站上的每一段代码
因此,需要创建自己的自定义主题
目前先创建一个基础主题
在themes文件夹中创建一个新文件夹suda
![![[Pasted image 20240414132951.png]]](https://i-blog.csdnimg.cn/blog_migrate/0eba2465ad7f7fb19574ae188ca0573a.png)
对于这个suda主题,需要创建一堆文件和几个文件夹
主题需要它们才能工作
第一个要创建的文件是config.yml,将会是主题的配置文件
还有语言文件夹languages
和布局文件夹layout
脚本文件夹scripts
还有源文件夹source
![![[Pasted image 20240414133609.png]]](https://i-blog.csdnimg.cn/blog_migrate/8e20eceff258a456a7dc4f53c9526889.png)
这些所有文件夹都将在主题中发挥特定作用,都非常重要,要确保它们在此目录中
打开config文件,找到theme变量
修改成suda
每次修改了config文件,都要确保重启Hexo服务器
希望得到一个空白页面,因为现在使用的是空白的suda主题
![![[Pasted image 20240414134245.png]]](https://i-blog.csdnimg.cn/blog_migrate/a6ed4510b204ee98314edc21fb4ba21d.png)
本文介绍了如何在Hexo中使用和管理预装主题如Landscape,以及如何下载、安装和配置第三方主题。还详细讲述了如何创建自己的自定义Hexo主题,包括必要的文件结构和配置过程。

被折叠的 条评论
为什么被折叠?



