Ich möchte nicht, dass das Stylesheet des Tags mit den aktuellen Seiten

Question

vermischt. Ich habe ein Include-Tag in der Datei meinplan.jade, um meine Datei header.jade einzubinden, aber die Datei header.jade hat ein eigenes Stylesheet, und wenn ich es ausführe, Dashboard. Jades Stylesheet gilt auch für die enthaltene header.jade. Gibt es eine Möglichkeit, das Stylesheet von Dashboard.jade nur für dieses Format zu verwenden und nicht für das enthaltene header.jade?

Hier ist mein Code für 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

Und hier ist mein Code für 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')

A ny Hilfe ist sehr dankbar, danke!

Answer 1

Um verschiedene CSS-Stylesheets zu verwenden, empfehle ich eine Layout-basierte Umgebung mit typischen Jade/Pug block Anweisungen.

Dies ist, wie ein layoutbased Ordner structur aussehen kann:

Ihr Layout-Datei mylayout.jade Dies könnte

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

sein:

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" 

Und hier die Vorlagendateien

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 

Vorsicht nur die Template zu kompilieren, hier ist ein anderes Beispiel: http://jade-lang.com/reference/extends/.

Sie können auch einen Blick in diese kleine Jade App von mir auf Github nehmen: h ttps://github.com/pure180/gulp-pug-inheritance-test/tree/master/app