9.Hexo通过partial文件传值和改变CSS属性

本文主要是介绍9.Hexo通过partial文件传值和改变CSS属性，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

现在多个布局可以使用这个部分，并且可以根据所在的布局改变标题的颜色

这篇关于9.Hexo通过partial文件传值和改变CSS属性的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---