hexo教程之用bootstrap打造自己的hexo主题[代码开源]

本文详细介绍了如何基于Bootstrap4打造Hexo博客的主题,从理解Hexo的主题渲染策略到页面布局,包括命名、框架搭建、页面渲染逻辑,以及各个部分如Head、Nav menu、Header、Body、Footer和Widgets的定制。同时,还分享了自定义页面布局的方法,并提供了开源项目的GitHub地址。
摘要由CSDN通过智能技术生成

前言

主题是hexo的重要组成部分,因为他决定你网站最终的模样。虽然网站的内容更重要,但是良好的界面修饰可以锦上添花。

hexo主题渲染策略

当前主题

hexo init以后,会为所有的主题建立专属目录:themes。 所有的主题都会在这个目录下。因此,如果你新增自己的主题也要在该目录下新增。hexo根据配置,找到当前主题。
_config.yml文件中

theme: simpleTheme

页面渲染策略

  • post页面,默认使用layout/post.ejs渲染。如果不存在则使用index.ejs。(默认主题也在配置中可改)
  • index页面,hexo会用 当前主题目录下 layout/index.ejs渲染。(必须
  • archive页面, 使用layout/archive.ejs渲染。如果不存在则使用index.ejs
  • tag页面, hexo会用 当前主题目录下 layout/tag.ejs渲染。如果不存在则使用archive.ejs
  • category页面,使用layout/category.ejs渲染。如果不存在则使用archive.ejs

一些隐秘的场景

以下几点比较隐秘,试试看你知道吗?

  • 因为所有的标签都会包含在tags目录下,那么tags目录的index.html 如何生成?
  • 同样,所有目录都会包含在categories目录下,那么categories目录下ind
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值