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

2024-04-16 23:04

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

partials

基本上是可以在自己的HTML文件或.ejs文件中定义网站中不同组件的方法

如果想要为网站定义一个标头,这个标头将会很好地出现在网站的每个页面上
用partials可以创建一个.ejs文件,可以将该标头的所有代码存储在该文件中,然后当想要在其中一个布局上使用这个标头
要做的就是将其插入到这些布局中,但是标头的代码会包含在自己的文件中,
这对于网站的可扩展性和维护网站的模块化非常有利

在layout.ejs中
![[Pasted image 20240416191255.png]]

如果想在第9行包含一个标头
在layout文件夹中新建另一个partial文件夹
![[Pasted image 20240416191438.png]]

在partial文件夹中可以放置任何想要放置的部分
比如在partial文件夹中新建一个header.ejd文件
![[Pasted image 20240416191608.png]]

可以放置想要用于header文件的代码

<h1>ChoSeitaku's Website</h1>
<hr> <br>

<hr>水平线
<br>中断标记

如何将header中的代码插入到layout.ejs中
通过插入部分,使用一段特定的Hexo代码

<%- partial('partial/header') %>

![[Pasted image 20240416212201.png]]

然后加载网站
layout.ejs文件会进入partial文件夹,进入header文件,将该文件中所有代码插入到layout布局中
当刷新页面后
![[Pasted image 20240416212328.png]]

出现了ChoSeitaku‘s Website的标题

能够将partial里的部分插入到模板中,可以使用这行代码将此标头插入到想要的任意多个布局中
当想要更新标头的时候,只需要在header.ejd文件中更新它,不必更改任何包含该标头的文件

可以做的另外一件事
可以将变量和值传递到这些部分中
![[Pasted image 20240416213338.png]]

<%- partial('partial/header', {title: 'hello world'}) %>

在这个括号内,将一个名为title的变量传递到这个部分中
打开partial文件,可以从这里内部访问这个变量
![[Pasted image 20240416213810.png]]

<h1><%= title %>></h1>

可以引用这个title变量
当现在访问网站时,它不会输出ChoSeitaku’s Website
而是输出title的内容,也就是hello world
![[Pasted image 20240416214218.png]]

这是一个很强大的属性
因为现在标头文件可以从网站的布局文件中获取输入

除了可以传递title也可以传递CSS属性
![[Pasted image 20240416215735.png]]

<h1 style="color:<%= title %>;">Header of the page</h1>

在style标签内,可以传递特定颜色,所以可以不用控制标头
给一个默认标头
现在可以从布局内部控制标头的颜色
打开布局文件,把helloworld改成传递一个颜色,如blue

<%- partial('partial/header', {title: 'blue'}) %>

当刷新页面,发现改变了颜色
![[Pasted image 20240416215820.png]]

因为更改了此标头的CSS属性
也可以改成想要的任何东西,如red
![[Pasted image 20240416215811.png]]

![[Pasted image 20240416215834.png]]

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

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


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/910139

相关文章

html 滚动条滚动过快会留下边框线的解决方案

《html滚动条滚动过快会留下边框线的解决方案》:本文主要介绍了html滚动条滚动过快会留下边框线的解决方案,解决方法很简单,详细内容请阅读本文,希望能对你有所帮助... 滚动条滚动过快时,会留下边框线但其实大部分时候是这样的,没有多出边框线的滚动条滚动过快时留下边框线的问题通常与滚动条样式和滚动行

SpringBoot读取ZooKeeper(ZK)属性的方法实现

《SpringBoot读取ZooKeeper(ZK)属性的方法实现》本文主要介绍了SpringBoot读取ZooKeeper(ZK)属性的方法实现,强调使用@ConfigurationProperti... 目录1. 在配置文件中定义 ZK 属性application.propertiesapplicati

Java反射实现多属性去重与分组功能

《Java反射实现多属性去重与分组功能》在Java开发中,​​List是一种非常常用的数据结构,通常我们会遇到这样的问题:如何处理​​List​​​中的相同字段?无论是去重还是分组,合理的操作可以提高... 目录一、开发环境与基础组件准备1.环境配置:2. 代码结构说明:二、基础反射工具:BeanUtils

使用vscode搭建pywebview集成vue项目实践

《使用vscode搭建pywebview集成vue项目实践》:本文主要介绍使用vscode搭建pywebview集成vue项目实践,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录环境准备项目源码下载项目说明调试与生成可执行文件核心代码说明总结本节我们使用pythonpywebv

MySQL 事务的概念及ACID属性和使用详解

《MySQL事务的概念及ACID属性和使用详解》MySQL通过多线程实现存储工作,因此在并发访问场景中,事务确保了数据操作的一致性和可靠性,下面通过本文给大家介绍MySQL事务的概念及ACID属性和... 目录一、什么是事务二、事务的属性及使用2.1 事务的 ACID 属性2.2 为什么存在事务2.3 事务

使用Python和Tkinter实现html标签去除工具

《使用Python和Tkinter实现html标签去除工具》本文介绍用Python和Tkinter开发的HTML标签去除工具,支持去除HTML标签、转义实体并输出纯文本,提供图形界面操作及复制功能,需... 目录html 标签去除工具功能介绍创作过程1. 技术选型2. 核心实现逻辑3. 用户体验增强如何运行

Spring Cache注解@Cacheable的九个属性详解

《SpringCache注解@Cacheable的九个属性详解》在@Cacheable注解的使用中,共有9个属性供我们来使用,这9个属性分别是:value、cacheNames、key、key... 目录1.value/cacheNames 属性2.key属性3.keyGeneratjavascriptor

CSS 样式表的四种应用方式及css注释的应用小结

《CSS样式表的四种应用方式及css注释的应用小结》:本文主要介绍了CSS样式表的四种应用方式及css注释的应用小结,本文通过实例代码给大家介绍的非常详细,详细内容请阅读本文,希望能对你有所帮助... 一、外部 css(推荐方式)定义:将 CSS 代码保存为独立的 .css 文件,通过 <link> 标签

Spring Boot 事务详解(事务传播行为、事务属性)

《SpringBoot事务详解(事务传播行为、事务属性)》SpringBoot提供了强大的事务管理功能,通过@Transactional注解可以方便地配置事务的传播行为和属性,本文将详细介绍Spr... 目录Spring Boot 事务详解引言声明式事务管理示例编程式事务管理示例事务传播行为1. REQUI

使用Vue-ECharts实现数据可视化图表功能

《使用Vue-ECharts实现数据可视化图表功能》在前端开发中,经常会遇到需要展示数据可视化的需求,比如柱状图、折线图、饼图等,这类需求不仅要求我们准确地将数据呈现出来,还需要兼顾美观与交互体验,所... 目录前言为什么选择 vue-ECharts?1. 基于 ECharts,功能强大2. 更符合 Vue