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