EJS腳本和樣式表部分

我是來自ASP.NET MVC的node，express和EJS的新手。在Razor中，有一個叫做「sections」的特性，它允許我在佈局文件中爲腳本和樣式表之類的東西指定一個佔位符，然後當我的個別視圖需要特定的腳本和樣式表時引用它們。這樣，所有的樣式表都保持在頂部，所有的腳本都保持在最底層。 EJS中有類似的功能嗎？EJS腳本和樣式表部分

來源

2014-03-29 Brian Sullivan

EJS是一個相當「裸機」的實施，雖然它確實有諧音，我不認爲它會乾淨得給你想要的東西，因爲它是不是真的仿照「佈局」的概念。您可能需要考慮將Jade作爲模板引擎。它是Express的默認模板引擎，如果您尚未使用，您很可能會使用它。查看[Github的Jade頁面]（https://github.com/visionmedia/jade） - 它在該頁面上鍊接的教程與jade-lang.com上的官方文檔相比可以說是更好的文檔（其中也有鏈接））。 –

謝謝@ barry-johnson！如果你想，發表評論作爲答案，我會接受它，所以你得到信用。 –

作爲您的建議回答。儘管它具有局部性，但我不認爲它會乾淨地給你想要的東西，因爲它不是真正建立在「佈局」概念上的模型。您可能需要考慮將Jade作爲模板引擎。它是Express的默認模板引擎，如果您尚未使用，您很可能會使用它。

就我個人而言，我發現我真的很喜歡玉。僅僅因爲它簡潔/簡潔，我的眼睛就容易多了。

資源：

使用該block語法的是什麼，我想你想爲你的描述，我不認爲這是很好的文件nted這些資源，但這裏有一個例子：

layout.jade

doctype html 
html 
    head 
    title #{title}/#{version} 
    link(rel='stylesheet', href='/css/site.css') 
    script(src='/js/mygenericscript.js') 
    block head 

    body(class='foo') 
     // the line below could be written as '#maincontent.bodyclass' 
     div(id='maincontent', class='bodyclass') 
      block content

template.jade

extends layout 

block head 
    // here I am including a page-specific script & stylesheet in the head section 
    script(src='/js/mypagescript.js') 
    link(rel='stylesheet', href='/css/crazypage.css') 

block content 
    div(class='page-specific-class') 
    //etc, etc

來源

2014-03-30 18:41:24

完美！我認爲塊功能正是我正在尋找的。我想我會在完成這個一次性項目之後轉而使用Jade。你說得對，我沒有看到官方Jade文檔中的塊。 –

那麼https://github.com/RandomEtc/ejs-locals或https://github.com/Soarez/express-ejs-layouts呢？在OP的情景中，這些ejs是否可行？我想你很好地回答了這個問題，但是關於ejs的問題沒有直接解決。 – mg1075

@ mg1075我同意這不是直接回應，並且首先發表評論。當OP詢問時轉貼爲答覆。這兩個庫似乎都沒有維護。我看到[新的EJS 2]（https://github.com/mde/ejs），你可以看到他們在做什麼。儘管跟隨者數量很少，除非一個庫對我來說具有獨特/有吸引力的方面，否則我通常會選擇比狹義使用更廣泛的東西。它不一定非常受歡迎/以任何方式使用，但是它有足夠的活力以擁有美好的未來。如果你有支持的傳統EJS，我會首先檢查2.0。 –

我希望能有一個可行的解決方案EJS，但基於@巴里約翰遜的答案看起來好像沒有。從我的角度來看，關於ejs的好處是你仍然可以在你的代碼中編寫普通的html，但我很難從另一個與jade的抽象中看到好處。

這是一個非常值得關注的問題，對我而言，如果ejs不能很好地完成這項技巧，那麼ejs看起來並不值得。

與@巴里約翰遜的評論去尋找替代品，也許一個真正可行的選擇是nunjucks。它似乎是一個活躍的項目，在github上有一千多顆星星，而block選項似乎是答案，儘管我還沒有嘗試過任何東西。（也許誰已經有人可以證實。）

http://mozilla.github.io/nunjucks/templating.html#block

塊

塊定義模板上的一個部分，並用名稱來識別它。這被模板繼承使用。基本模板可以指定塊，子模板可以用新內容覆蓋它們。請參閱模板繼承。
{% block css %} 
<link rel="stylesheet" href="app.css" /> 
{% endblock } 

Nunjucks使用在部分{{ }}語法，這應該是一個問題，如果您還使用AngularJS。然而，正如在github上指出的那樣，您可以通過自定義nunjucks語法來解決這個問題，我相信這更適合於更改Angular的綁定語法。

https://mozilla.github.io/nunjucks/api.html#customizing-syntax

來源

2015-03-21 23:38:47 mg1075

FWIW，有些人真的不在乎玉。我認爲它對待空白的方式是一個問題，也是對線寬的一種感覺。撇開它的機制，我也認爲一個人的觀點的一個重要因素是關於重複性與如何獨特的佈局是如何獨特的。對於重複的東西 - 例如CRUD界面的表格和表格 - 我覺得非常好。對於更復雜和不規則的佈局概念，它有時會增加製作良好佈局的複雜性。 Nunjucks看起來很好支持，我可能會在下次開始某些事情時檢查它。 –

EJS腳本和樣式表部分

回答

相關問題