gpt4 book ai didi

html - 不希望包含标记的样式表与当前页面的样式表混合

转载 作者:行者123 更新时间:2023-11-28 05:29:22 24 4
gpt4 key购买 nike

我在 dashboard.jade 中有一个 include 标签来包含我的 header.jade 文件,但是 header.jade 文件有它自己的样式表,当我运行它时,dashboard.jade 的样式表也适用于包含的 header.jade。有没有办法让 dashboard.jade 的样式表只应用于它而不应用于包含的 header.jade?

这是我的 dashboard.jade 代码:

doctype html
html
head
title Todo List
| 	
|
link(rel='stylesheet', type='text/css', href='assets/css/todos.css')
| 	
|
link(href='https://fonts.googleapis.com/css?family=Roboto:400,700,500', rel='stylesheet', type='text/css')
| 	
|
link(rel='stylesheet', type='text/css', href=' https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css')
| 	
|
link(rel='stylesheet', href='//cdnjs.cloudflare.com/ajax/libs/lemonade/2.1.0/lemonade.min.css')
| 	
|
script(type='text/javascript', src='assets/plugins/jquery-3.0.0.min.js')
|
|
body
include partials/header

这是我的 header.jade 代码:

doctype html
html
head
title Eisenhower Productivity Tool
// Meta
meta(charset='utf-8')
|
meta(http-equiv='X-UA-Compatible', content='IE=edge')
|
meta(name='viewport', content='width=device-width, initial-scale=1.0')
|
meta(name='description', content='')
|
meta(name='author', content='')
|
|
link(rel='shortcut icon', href='../favicon.ico')
|
|
link(href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800', rel='stylesheet', type='text/css')
// Global CSS
link(href='../assets/plugins/bootstrap/css/bootstrap.min.css', rel='stylesheet')
// Plugins CSS
link(rel='stylesheet', href='../assets/plugins/font-awesome/css/font-awesome.css')
// Theme CSS
link#theme-style(rel='stylesheet', href='assets/css/styles.css')

最佳答案

要使用不同的 CSS 样式表,我建议使用带有典型 Jade/Pug block 语句的基于布局的环境。

这是基于布局的文件夹结构的样子:

|--./
|-- |--jade
|-- |-- |-- layouts
|-- |-- |-- |-- mylayout.jade
|-- |-- |-- template_1.jade
|-- |-- |-- template_2.jade

这可能是您的布局文件 mylayout.jade:

doctype html

block vars
// Some default variables

html

head
block head
// default head for title and meta

block defaultCSS
// default css
link(rel='stylesheet', type='text/css', href='path/to/default_style.css')
style.
body {}

block additionalCSS

body
block body
// default html in body
block footer

block defaultJS
script.
var someDefaltJavaScript = 'awsome"

这里是模板文件

template_1.jade:

extends layout/mylayout.pug

block head
// this overrides the default "block head" from the layout
// So put your special meta for your page here

block additionalCSS
link(rel='stylesheet', type='text/css', href='path/to/other_style.css')

block body
.this
.is
#where
.your.content.goes

template_2.jade:

extends layout/mylayout.pug

block head
// this overrides the default "block head" from the layout
// So put your special meta for your page here

//- We dont use the "block additionalCSS" because we dont need it in this template

block body
.this
.is
#where
.your.content.goes

注意只编译模板文件,这是其他一些例子:http://jade-lang.com/reference/extends/ .

你也可以看看我在github上的这个小jade app: h ttps://github.com/pure180/gulp-pug-inheritance-test/tree/master/app

关于html - 不希望包含标记的样式表与当前页面的样式表混合,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38595554/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com