本文档介绍了如何使用Hexo框架自定义主题。首先在themes文件夹下创建自定义主题目录，例如'simp'，并搭建基本文件结构，包括_config.yml、languages、layout和source目录。接着修改根目录的_config.yml将主题设为自定义的'simp'。在layout.ejs中添加内容，并创建index.ejs和post.ejs。通过_config.yml配置菜单，然后在各模板文件中添加布局元素，如header、nav、aside和footer。最后，逐步完善各个模板文件以实现自定义主题的功能。
使用hexo搭建过博客都知道，hexo里面有很多个主题可供我们选择，但是，如果那些主题里面没有我们自己想要的咋整，做为一名前端开发，这个时候当然是选择DIY
我这里采用的模板文件是ejs，所以下面的内容需要了解一些ejs的使用，我在文章过程中不会去详述相关的语法
新建自定义主题
在themes文件夹下创建一个自己的文件夹做为自己定义的主题，我这里写成simp
主题目录
新建下列目录
simp // 自建的主题目录
├── _config.yml // 主题配置文件
├── languages // 语言配置文件
├── layout // 主要构造 html 的模板
│ ├── index.ejs // 主页模板
│ ├── layout.ejs // 布局模板
│ └── post.ejs // md 编译成 html 后的文件模板
└── source // 静态资源文件目录
├── css // css 样式目录
└── js // JavaScript 脚本目录
相应配置修改
在根目录的_config.yml文件下将theme改为simp
theme: simp
复制代码在主题目录下的_config.yml写入下面的配置，_config.yml不写内容的话在hexo s的时候会报错
menu:
复制代码本地运行
在layout.ejs随便写入一点东西
here is layout
复制代码在simp目录下使用hexo s启动服务器，如下图就成功了
接下来尝试引入index.ejs和post.ejs的内容，在index.ejs和post.ejs里面分别写入内容
index.ejs
here is index
复制代码post.ejs
here is po
最低0.47元/天 解锁文章
扫一扫
835
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
