hexo自定义主题搭建笔记 |
您所在的位置：网站首页 › hexo模板开发 › hexo自定义主题搭建笔记 |
hexo自定义主题搭建笔记
|
使用hexo搭建过博客都知道，hexo里面有很多个主题可供我们选择，但是，如果那些主题里面没有我们自己想要的咋整，做为一名前端开发，这个时候当然是选择DIY 我这里采用的模板文件是ejs，所以下面的内容需要了解一些ejs的使用，我在文章过程中不会去详述相关的语法 我自己写了一个主题放到github上面了，现在也在持续更新，大家可以拿去试试，觉得可以的话就帮忙点个star，有什么意见也请帮忙提出~ github传送门 新建自定义主题在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启动服务器，如下图就成功了 post.ejs here is post 复制代码layout.ejs Home here is layout 复制代码刷新页面，如图引入成功 这里是我自己的一些配置，在模板文件里面可以通过theme.来调用这些属性对应的值 _config.yml # nav nav: - HOME: / - ABOUT: /about - GITHUB: https://github.com/QZEming - CSDN: https://blog.csdn.net/zemprogram/ # info title: 前端小黑 avatar: /img/assets/logo.png favicon: /img/assets/favicon.ico 复制代码加入各个布局模板文件上面写了三个文件index.ejs，layout.ejs，post.ejs，接下来要写一些布局上的配置，比如header，nav，aside，footer 这里就不详细说明每个文件的码字过程了，直接给出代码 目录如下 simp // 自建的主题目录 ├── _config.yml // 主题配置文件 ├── languages // 语言配置文件 ├── layout // 主要构造 html 的模板 │ ├── _partial // 存放各种部分模板文件 │ ├── aside.ejs // 侧边栏的模板文件 │ ├── footer.ejs // 页面底部的模板文件 │ ├── header.ejs // 页面头部的模板文件 │ ├── head.ejs // head标签部分的模板文件 │ ├── nav.ejs // 导航栏的模板文件 │ ├── main.ejs // 页面主要部分的模板文件 │ ├── index.ejs // 主页模板 │ ├── layout.ejs // 布局模板 │ └── post.ejs // md 编译成 html 后的文件模板 └── source // 静态资源文件目录 ├── css // css 样式目录 └── js // JavaScript 脚本目录 layout.ejs 复制代码nav.ejs { %> 复制代码aside.ejs here is aside 复制代码head.ejs 复制代码header.ejs 复制代码 here is main 复制代码这样就成功地写好了相关的基本布局了，在css文件中添加style.css文件就可以改变样式了，这里因为我用到了less，所以需要使用npm安装hexo-renderer-less来解析 npm install hexo-renderer-less --save 复制代码sass也有相应的解析npm包，做法和less 添加侧边栏内容我这里添加了作者信息和标签目录，在_partial文件夹下新增下面的模板文件 info.ejs 用于存放作者信息的模板文件 { %> 复制代码tags.ejs 用于存放标签目录的模板文件 Tags 复制代码修改aside.ejs模板文件 复制代码添加首页文章列表在_partial文件夹下新增模板文件，模板文件代码如下 singleDirectory.ejs 文章目录下单篇文章内容模板文件 复制代码directory.ejs 文章目录的模板文件 复制代码修改main.ejs模板文件，当存在文章的时候将文章目录模板文件写入 复制代码添加文章内容和文章目录在_partial文件夹下新增模板文件，模板文件代码如下 article.ejs 文章模板文件 复制代码articleDirectory 文章目录模板文件 目录 复制代码修改main.ejs 复制代码添加返回顶部按钮返回顶部按钮在页面超出当前页面高度时才出现，我这里通过改变按钮的class来控制是否出现 首先，在source文件夹下的js文件夹下新建script.js文件，写入 (function(){ let backTop = document.getElementById('backTop') // 监听滚动 window.addEventListener('scroll',function(){ if(document.body.scrollTop>document.body.clientHeight&&backTop.className=="backTop icon-arrow-up hideBtn"){ backTop.className = "backTop icon-arrow-up showBtn"; }else if(document.body.scrollTop |
【本文地址】