0

dashboard.jade に、header.jade ファイルをインクルードするための include タグがありますが、header.jade ファイルには独自のスタイルシートがあり、それを実行すると、dashboard.jade のスタイルシートもインクルードされた header.jade に適用されます。含まれている header.jade ではなく、dashboard.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')

どんな助けでも大歓迎です、ありがとう!

4

1 に答える 1

0

さまざまな CSS スタイルシートを使用するには、典型的な Jade/Pugblockステートメントでレイアウトベースの環境を使用することをお勧めします。

これは、レイアウトベースのフォルダー構造がどのように見えるかです:

|--./
|-- |--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 アプリを調べることもできます: h ttps://github.com/pure180/gulp-pug-inheritance-test/tree/master/app

于 2016-07-27T17:19:50.487 に答える