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…

如何解决集群部署环境下 Session 不共享的问题

在集群部署环境中&#xff0c;Session 不共享的问题通常是因为HTTP协议本身是无状态的&#xff0c;服务器之间无法自动传递和同步用户会话信息。当用户从集群中的一个节点跳转到另一个节点时&#xff0c;原先节点上的Session数据无法在新的节点上获取&#xff0c;从而导致登录状…

mac dex2jar安装

如果你在终端中收到 “zsh: command not found: dex2jar” 的消息&#xff0c;这意味着 dex2jar 工具没有安装在你的系统中&#xff0c;或者没有被添加到系统的 PATH 环境变量中。为了解决这个问题&#xff0c;你需要按照以下步骤操作&#xff1a; 下载 dex2jar&#xff1a; 前…

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

文章目录 讯飞星火认知大模型的地址概要讯飞星火认知大模型的发展历程讯飞星火认知大模型的主页利用讯飞星火大模型解决一些基本的数学问题讯飞星火认知大模型与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;的五年生存率是所有癌症中…

C语言数组相关练习题

1. 求数组中第二大的值 #include <stdio.h>int main() {int arr[] {12, 97, 1, 5};int len sizeof(arr) / sizeof(arr[0]);// printf("%d\n",len); // 9// 冒泡排序(从小到大)for (int i 0; i < len; i){for (int j 0; j < len - i - 1; j){// prin…

今天你卷了吗?

什么是卷&#xff1f; 高考的地狱模式是卷。100个人录取30个。再怎么努力也只有30个。反过来大家如果都不努力也录取30个。 日常加量不加价的工作是卷。互联网公司就是1个人拿2个人的薪酬做3个人的事情。但是非互联网公司&#xff0c;一个人做2个人的事情还是3个人的事情拿的…

transformer上手(8)—— 序列标注任务

序列标注 (Sequence Labeling/Tagging)&#xff0c;其目标是为文本中的每一个 token 分配一个标签&#xff0c;因此 Transformers 库也将其称为 token 分类任务。常见的序列标注任务有命名实体识别 NER (Named Entity Recognition) 和词性标注 POS (Part-Of-Speech tagging)。 …

FianlShell搭建vulhub

下载docker-ce的yum源 sudo wget -O /etc/yum.repos.d/docker-ce.repo https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo 安装Docker sudo yum -y install docker-ce 检查Docker是否安装成功 sudo docker -v 安装docker-compose 安装工具源 sudo yum…

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

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

【高电压?高电流?未来新能源汽车充电技术如何选择?】

近几年油车电车车主在网上争吵的点无非就是几个&#xff1a;成本问题、续航问题、技术成熟度和安全问题以及加油和充电的等待时间问题&#xff0c;我们知道&#xff0c;传统的燃油车在加油站加满油只需要几分钟&#xff0c;这与电动车充满电的速度形成鲜明对比&#xff0c;最早…

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

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; 更长的上…

JavaScript PAT乙级题解 1060 爱丁顿数

英国天文学家爱丁顿很喜欢骑车。据说他为了炫耀自己的骑车功力&#xff0c;还定义了一个“爱丁顿数” E &#xff0c;即满足有 E 天骑车超过 E 英里的最大整数 E。据说爱丁顿自己的 E 等于87。 现给定某人 N 天的骑车距离&#xff0c;请你算出对应的爱丁顿数 E&#xff08;≤N…

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

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