都2020了,带你开发hexo主题(二)
上篇教程已经准备开始构建页面了,接上文:
构建主题页面
我们在阅读文档模版后,可以知道如下信息:
模板决定了网站内容的呈现方式,每个主题至少都应包含一个 index 模板,以下是各页面相对应的模板名称:
布局(Layout),如果页面结构类似,例如两个模板都有页首(Header)和页脚(Footer),您可考虑通过「布局」让两个模板共享相同的结构。一个布局文件必须要能显示 body 变量的内容,如此一来模板的内容才会被显示,举例来说:
每个模板都默认使用 layout 布局,您可在 front-matter 指定其他布局,或是设为 false 来关闭布局功能,您甚至可在布局中再使用其他布局来建立嵌套布局。
关于front-matter可以查下以下文档了解更多front-matter
1 | Front-matter 是文件最上方以 --- 分隔的区域,用于指定个别文件的变量,举例来说: |
根据以上文档,我们就可以建模版页面了。其中每个主题至少都应包含一个 index 模板
和每个模板都默认使用 layout 布局
,所以我们先建个layout.ejs和index.ejs
index.ejs内容如下:
layout.ejs内容如下:其中<%- body %>
文档中并没有做出详细解释,可以理解body为页面内容。首页就是引入index.ejs,归档页就是引入archive.ejs这样。至于<%- %>
的语法可以去参考ejs文档(看不懂的,就是没好好看文档。)
hexo s 生成运行如下,可以看到我们的模版页编译成功了。(生成了layout的头部和尾部,并成功显示出了index中的内容)
好了,主题页面就是这样构建的,接下来开始把从html5up上下载的story写成我们的主题。
构建 hexo-theme-story 首页
解压得到:
在subline中打开其index页面如下
我们要拆解这个页面,从简单的header和footer开始,将其代码收缩,可以就大致分出header、body、和footer了。
再看官方文档中关于局部模版的说明,我想你已经学会怎么拆分了
文件夹这样建立:
稍难点的layout这样写:
但是这样拆分还是有些问题,比如有部分的footer内容在index中,暂时把这部分代码直接剪切到footer.ejs中
运行后页面如下所示:
页面这种显示的原因是我们没有导入js、css。
导入css、js
source
资源文件夹,除了模板以外的 Asset,例如 CSS、JavaScript 文件等,都应该放在这个文件夹中。文件或文件夹开头名称为 _(下划线线)或隐藏的文件会被忽略。
如果文件可以被渲染的话,会经过解析然后储存到 public 文件夹,否则会直接拷贝到 public 文件夹。
所以我们的 CSS、JavaScript、Images 文件要放在source文件夹中,怎么放我就不赘述了。说说怎么引入。可以hexo g先生成public文件夹,看一下目录结构:
可以看到对于最外层的index.html来说,引入可以使用更通用的相对路径写法./css/xxx.css
(./表示当前目录下),但是这种写法放在hello-world下的文章页index.html就不适用了。必需使用绝对路径写法/css/
(/表示从根目录开始)所以可以使用如下写法引入:
1 | <link rel="stylesheet" href="/css/main.css" /> |
但是这种写法也有一个问题,若你的博客不是放在网站根目录也是不生效的。所以hexo辅助函数css(),js()就有意义了。
1 | <%- css(path, ...) %> |
最终改写成如下:
1 | <head> |
js雷同。
把layout中的注释改成html注释,hexo s 运行预览下:
可以看到页面已经正常了,图片路径自行修改下就可以呈现。
从这教成开始代码开始变多起来,我把代码同步上传到github仓库和百度云上,公众号回复story002获取。
未完待续 To be continued……
希望这篇文章能给你带来知识和乐趣,喜欢博主的文章可以加博主好友哦
有好的文章也可以向博主投稿哦
您的喜欢是作者写作最大的动力
QQ群和公众号