partials
基本上是可以在自己的HTML文件或.ejs文件中定义网站中不同组件的方法
如果想要为网站定义一个标头,这个标头将会很好地出现在网站的每个页面上
用partials可以创建一个.ejs文件,可以将该标头的所有代码存储在该文件中,然后当想要在其中一个布局上使用这个标头
要做的就是将其插入到这些布局中,但是标头的代码会包含在自己的文件中,
这对于网站的可扩展性和维护网站的模块化非常有利
在layout.ejs中
如果想在第9行包含一个标头
在layout文件夹中新建另一个partial文件夹
在partial文件夹中可以放置任何想要放置的部分
比如在partial文件夹中新建一个header.ejd文件
可以放置想要用于header文件的代码
<h1>ChoSeitaku's Website</h1>
<hr> <br>
<hr>
水平线
<br>
中断标记
如何将header中的代码插入到layout.ejs中
通过插入部分,使用一段特定的Hexo代码
<%- partial('partial/header') %>
然后加载网站
layout.ejs文件会进入partial文件夹,进入header文件,将该文件中所有代码插入到layout布局中
当刷新页面后
出现了ChoSeitaku‘s Website的标题
能够将partial里的部分插入到模板中,可以使用这行代码将此标头插入到想要的任意多个布局中
当想要更新标头的时候,只需要在header.ejd文件中更新它,不必更改任何包含该标头的文件
可以做的另外一件事
可以将变量和值传递到这些部分中
<%- partial('partial/header', {title: 'hello world'}) %>
在这个括号内,将一个名为title的变量传递到这个部分中
打开partial文件,可以从这里内部访问这个变量
<h1><%= title %>></h1>
可以引用这个title变量
当现在访问网站时,它不会输出ChoSeitaku’s Website
而是输出title的内容,也就是hello world
这是一个很强大的属性
因为现在标头文件可以从网站的布局文件中获取输入
除了可以传递title也可以传递CSS属性
<h1 style="color:<%= title %>;">Header of the page</h1>
在style标签内,可以传递特定颜色,所以可以不用控制标头
给一个默认标头
现在可以从布局内部控制标头的颜色
打开布局文件,把helloworld改成传递一个颜色,如blue
<%- partial('partial/header', {title: 'blue'}) %>
当刷新页面,发现改变了颜色
因为更改了此标头的CSS属性
也可以改成想要的任何东西,如red
现在多个布局可以使用这个部分,并且可以根据所在的布局改变标题的颜色