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

最新推荐文章于 2025-01-07 10:01:35 发布
原创 最新推荐文章于 2025-01-07 10:01:35 发布 · 567 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #前端 #git #vscode

本文介绍了如何在HTML和EJS文件中使用partials来创建和管理网站组件，如共享头部。通过在layout.ejs中插入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>中断标记

如何

最低0.47元/天 解锁文章
hexo-theme-aomori:A Hexo Theme. Hexo 博客主题
04-27
Hexo是一个快速，简单，功能强大的博客框架，具有超快的生成速度，对Markdown的支持，一键式部署和高可伸缩性。 该项目是基于Hexo的一系列优点而开发的主题。 丰富的网站风格 丰富的主题配置 优化多媒体播放 出色的...
Marsen.Node.Hexo
08-04
主题文件通常位于`themes`目录下，其中包含了HTML、CSS、JavaScript等文件，用于构建博客的布局和样式。如果想要进一步定制，可以修改这些文件，或者创建自己的主题。 马森的博客很可能就对某个主题进行了个性化...
CSS属性动态传值
weixin_40359658的博客
04-15 2377
CSS属性动态传值 定义CSS变量 <span class="header-title" :style="{'--font-color': dropdownFont}"></span> CSS中使用变量 .header-title{ color: var(--font-color); }
如何通过CSS向JS传参
A-Select °
02-20 903
今日文章由阅文@张鑫旭授权分享。 正文从这开始～～ 一、需要通过CSS传参的背景 CSS中有很多媒体查询的用法，例如设备尺寸判别，是否支持鼠标行为，是否是黑暗模式，是否是省电模式等。 比方说最近经常提到的黑暗模式，深色主题： @media (prefers - color - scheme : dark) { /* 黑暗模式，深色主题 */ } @media (prefer...
通过css变量往css里面传值
weixin_44795287的博客
07-10 1674
得往父级标签传变量，子级才能接受得到 <body :style="{'--color':'red'}"> <p class="aiqi"></p> </body> <style> .aiqi{ color:var(--color) } </style>
css：通过html给css传递颜色属性值
彭世瑜的博客
06-04 1720
使用了三种方式效果如下 完整代码
Hexo博客搭建(Mac)
lwxwl的博客
05-15 513
在Mac上用Hexo搭博客
2.Hexo初始化和默认文件介绍
ChoSeitaku的博客
04-09 830
如何创建第一个网站和hexo创建网站，运行网站，并在浏览器上查看网站了解hexo默认创建的一些文件结构和文件。
charliewong001.github.io:个人博客网站项目... hexo原始码发布到此仓库，即为博客网站
03-23
标题和描述中提到的"charliewong001.github.io"是一个个人博客网站项目，其源代码基于Hexo框架托管在GitHub上。Hexo是一个快速、简洁且高效的静态站点生成器，它允许用户通过Markdown等标记语言编写博客文章，然后...
css样式中传入变量 （记录）
一位00后记录自己的前端成长路上遇到的坑 ~
10-14 1409
CSS样式中传入变量。
Vue-组件嵌套、组件CSS样式、多组件嵌套、组件传值、传值和传引用、多个单文件组件路由的使用
NeilNiu
12-31 2764
App.vue是父组件，components下面的是子组件 组件嵌套包括，全局组件和局部组件 一般使用的是局部组件，使用方式是， 1、引用组件 2、注册组件 3、使用组件 新建一个Users.vue 子组件， <template> <div class="Users"> <ul> <li v-for="(user, index) in users" :key="index">{{ user }}</li>
CSS 变量（自定义属性）详解
最新发布
weixin_46725302的博客
01-07 672
CSS 变量（Custom Properties）是现代 CSS 的强大功能，允许我们定义可复用的值，并在 CSS 文件中动态使用这些值。使用 CSS 变量可以大幅提升代码的可维护性和灵活性。
hexo自定义主题搭建笔记
02-20 479
使用hexo搭建过博客都知道，hexo里面有很多个主题可供我们选择，但是，如果那些主题里面没有我们自己想要的咋整，做为一名前端开发，这个时候当然是选择DIY 我这里采用的模板文件是ejs，所以下面的内容需要了解一些ejs的使用，我在文章过程中不会去详述相关的语法 新建自定义主题 在themes文件夹下创建一个自己的文件夹做为自己定义的主题，我这里写成simp 主题目录 新建下列目录 simp //...
H5_0010：JS动态创建CSS，并向CSS中传入参数值
weixin_30730053的博客
05-14 3275
1，在html中定义style 2，js中创建css，并添加进入head标签style中 !function(e, t, i) { n.classList && n.classList.add("fill-mode-" + e); var s = "@media screen and (min-aspect-ratio: " + t + "/" + ...
后台管理遇到的坑一、style中css样式怎么传入变量值
weixin_30497527的博客
09-04 993
第一、给标签定义style变量 第二、在data中定义 第三、在methods中的方法中给样式赋值 转载于:https://www.cnblogs.com/qdwz/p/11457536.html
如何用js给css3中的属性和jquery中的animate动态传值
你好！刘斩仙
07-23 4135
代码如下：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="jquery-1.11.3.js" type="text/javascript"></script> <style> .line{ width:400px; height:10px; trans
CSS传参（转）
sinat_15560643的博客
07-23 1934
https://www.cnblogs.com/qdwz/p/11457536.html
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值