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]]

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

记一次奇妙的某个edu渗透测试

前话&#xff1a; 对登录方法的轻视造成一系列的漏洞出现&#xff0c;对接口确实鉴权造成大量的信息泄露。从小程序到web端网址的奇妙的测试就此开始。&#xff08;文章厚码&#xff0c;请见谅&#xff09; 1. 寻找到目标站点的小程序 进入登录发现只需要姓名加学工号就能成功…

BIT-6-C语言文件操作(C语言进阶)

本章重点 为什么使用文件什么是文件文件的打开和关闭文件的顺序读写文件的随机读写文本文件和二进制文件文件读取结束的判定 文件缓冲区 1. 为什么使用文件 我们前面学习结构体时&#xff0c;写了通讯录的程序&#xff0c;当通讯录运行起来的时候&#xff0c;可以给通讯录中增…

程序员应该遵守的 10 个编程原则

程序员应该遵守的编程原则 程序员拥有一个较好的编程原则能使他的编程能力有大幅的提升&#xff0c;可以使其开发出维护性高、缺陷更少的代码。以下内容梳理自StactOverflow的一个问题&#xff1a;编程时你最先考虑的准则是什么&#xff1f; 目录 Toggle KISS&#xff08;Keep …

PaddleOCR训练自己模型(2)----参数配置及训练

一、介绍 paddleocr分为文字定位(Det)和文字识别(Rec)两个部分 二、定位模型训练 &#xff08;1&#xff09;Det预训练模型下载&#xff1a;https://paddleocr.bj.bcebos.com/PP-OCRv4/chinese/ch_PP-OCRv4_det_train.tar &#xff08;2&#xff09;下载完之后&#xff0c;…

基于zookeeper安装Kafka集群

操作系统&#xff1a;centOS 9 Stream&#xff0c;6台&#xff0c;基于vmware虚拟机创建 准备工作 确认系统环境&#xff1a; 确保所有服务器已安装了最新更新。安装Java Development Kit (JDK) 8或更高版本&#xff0c;因为ZooKeeper和Kafka都是基于Java开发的。例如&#x…

【探索人工智能】我与讯飞星火认知大模型的对话

文章目录 讯飞星火认知大模型的地址概要讯飞星火认知大模型的发展历程讯飞星火认知大模型的主页利用讯飞星火大模型解决一些基本的数学问题讯飞星火认知大模型与OpenAI,ChatGPT没有关系&#xff01;让讯飞星火认知大模型编写传奇代码hello world小结 讯飞星火认知大模型的地址 …

文献速递:深度学习胰腺癌诊断--胰腺癌在CT扫描中通过深度学习检测:一项全国性的基于人群的研究

Title 题目 Pancreatic Cancer Detection on CT Scans with Deep Learning: A Nationwide Population-based Study 胰腺癌在CT扫描中通过深度学习检测&#xff1a;一项全国性的基于人群的研究 01 文献速递介绍 胰腺癌&#xff08;PC&#xff09;的五年生存率是所有癌症中…

【蓝桥杯嵌入式】串口通信与RTC时钟

【蓝桥杯嵌入式】串口通信与RTC时钟 串口通信cubemx配置串口通信程序设计 RTC时钟cubemx配置程序设计 串口通信 cubemx配置 打开串口通信&#xff0c;并配置波特率为9600 打开串口中断 重定义串口接收与发送引脚&#xff0c;默认是PC4&#xff0c;PC5&#xff0c;需要改为P…

运输问题的中转或者转运问题

1、这类问题&#xff0c;不好理解&#xff0c;做个笔记&#xff0c;记录一下。 2、可以参考一下&#xff1a; https://blog.csdn.net/YUNCHOUSHUO/article/details/121660675?spm1001.2014.3001.5506 这个csdn写的还是不错的&#xff0c;推荐。 或者&#xff0c;可以参考 …

网络安全学习路线-超详细

零基础小白&#xff0c;到就业&#xff01;入门到入土的网安学习路线&#xff01; 在各大平台搜的网安学习路线都太粗略了。。。。看不下去了&#xff01; 建议的学习顺序&#xff1a; 一、网络安全学习普法&#xff08;心里有个数&#xff0c;要进去坐几年&#xff01;&#x…

OpenAI宣布GPT-4-Turbo全面升级,GPT-4 Turbo 新增视觉理解能力,可同时处理文本和图像信息

OpenAI宣布GPT-4-Turbo全面升级&#xff0c;GPT-4 Turbo with Vision新增视觉理解能力&#xff0c;可同时处理文本和图像信息&#xff0c;极大简化了开发流程。 OpenAI宣布GPT-4 Turbo全面升级&#xff01;根据官方说法&#xff0c;这一波 GPT 的升级包括&#xff1a; 更长的上…

VSCode安装配置使用教程(最新版超详细保姆级含插件)一文就够了

前言 Visual Studio Code 是一个轻量级功能强大的源代码编辑器&#xff0c;支持语法高亮、代码自动补全&#xff08;又称 IntelliSense&#xff09;、代码重构、查看定义功能&#xff0c;并且内置了命令行工具和 Git 版本控制系统。适用于 Windows、macOS 和 Linux。它内置了对…

Open3D 体素滤波(30)

Open3D 体素滤波(30) 一、算法介绍二、算法实现1.代码2.效果一、算法介绍 体素滤波(Voxel Grid Filtering)是一种常用的点云滤波算法,用于对点云数据进行下采样(降低数据密度)以及去除噪声。该算法将点云数据划分为规则的体素网格,然后在每个体素中选择一个代表性点作为…

17.牛客---栈的压入弹出(Java版)

题目链接: https://www.nowcoder.com/practice/d77d11405cc7470d82554cb392585106?tpId13&tqId11174&ru/exam/oj 题解: 代码: 测试: 注意 判断栈是否为空必须在前!不然会空指针异常

用于可观察性的 Elastic AI 助手摆脱了 Kibana!

作者&#xff1a;Jeff Vestal 通过 Elastic AI Assistant for Observability API 将 AI 支持的可观察性引入你的日常工具。 注意&#xff1a;下面描述的 API 目前正在开发中&#xff0c;并且没有文档记录&#xff0c;因此不受支持。请将其视为展望性博客。不能保证功能会发布。…

【多模态检索】Coarse-to-Fine Visual Representation

快手文本视频多模态检索论文 论文&#xff1a;Towards Efficient and Effective Text-to-Video Retrieval with Coarse-to-Fine Visual Representation Learning 链接&#xff1a;https://arxiv.org/abs/2401.00701 摘要 近些年&#xff0c;基于CLIP的text-to-video检索方法…

openstack修改实例名称但是gnocchi监控数据中实例名称没有变更的问题处理

文章目录 一、问题描述二、调研过程1、变更实例名称2、查看grafana中的监控数据3、libvirt服务中的xml文件4、现有的监控数据流转架构 总结 一、问题描述 openstack修改实例名称但是gnocchi监控数据中实例名称没有变更的问题处理。 通过修改实例名称的功能修改了实例名称&…

自动化测试常见的三大问题及解决方案

&#x1f525; 交流讨论&#xff1a;欢迎加入我们一起学习&#xff01; &#x1f525; 资源分享&#xff1a;耗时200小时精选的「软件测试」资料包 &#x1f525; 教程推荐&#xff1a;火遍全网的《软件测试》教程 &#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1…

【Entity Framework】你必须要了解EF中数据查询之数据加载

【Entity Framework】你必须要了解EF中数据查询之数据加载 文章目录 【Entity Framework】你必须要了解EF中数据查询之数据加载一、概述二、预先加载2.1 包含多个层级2.2 经过筛选的包含 三、显示加载3.1查询关联实体 四、延时加载4.1 不使用代理进行延迟加载 一、概述 Entity…

平板拖把头建模

没找到合适的配件&#xff0c;只能自己做了。 difference(){union(){cylinder(11.5,10,10,$fn365);translate([-10,0,0])cube([20,16,11.5]);rotate([0,90,0])translate([-11.5/2,16-3-2,-18])cylinder(2088,3,3,$fn365);}translate([0,0,-1])cylinder(13,2.5,2.5,$fn365); }