初學者的玉教程

非常整潔嗎？

<span><span><span><div> class<span>="movie-card"</span> id<span>="oceans-11"</span>>
  <span><span><span><h1 id="class-span-movie-title-span-gt"> class<span>="movie-title"</span>></h1></span>Ocean's 11<span><span></span>></span>
</span>  <span><span><span><img  src="/static/imghwm/default1.png" data-src="/img/oceans-11.png" class="lazy" alt="初學者的玉教程" > src<span>="/img/oceans-11.png"</span> class<span>="movie-poster"</span>></span>
</span>  <span><span><span><ul> class<span>="genre-list"</span>></ul></span>
</span>    <span><span><span><li>></li></span>Comedy<span><span></span>></span>
</span>    <span><span><span><li>></li></span>Thriller<span><span></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span></span></span></span></span></span></span></span>
</div></span>></span></span>

在Codepen上查看此示例

>，但它不止於此。 Jade為ID和課程提供了特殊的速記，並使用熟悉的符號進一步簡化了我們的標記：

div.movie-card#oceans-11
  h1.movie-title Ocean's 11
  img.movie-poster()
  ul.genre-list
    li Comedy
    li Thriller

在Codepen上查看此示例

如您所見，Jade使用與我們在編寫CSS選擇器時已經熟悉的語法相同的語法，從而更容易找到類。 >

>文本

的塊

>假設您有一個段落標籤，您想在其中放置一大堆文本。 Jade將每行的第一個單詞視為HTML標籤 - 那麼您該怎麼辦？

>您可能已經註意到本文第一個代碼示例中的一個無辜時期。在標籤之後添加一個週期（完整停止）表明該標籤中的所有內容都是文本，Jade停止將每個行上的第一個單詞視為HTML標籤。

在Codepen上查看此示例

只是要開車回家，如果我要刪除p標籤之後的時間情況，它將是標籤）。

div
  p How are you?
  p.
    I'm fine thank you.
    And you? I heard you fell into a lake?
    That's rather unfortunate. I hate it when my shoes get wet.

>

強大的功能

>現在我們已經介紹了基礎知識，讓我們窺視一些功能強大的功能，這將使您的標記更聰明。我們將在本教程的其餘部分中查看以下功能：

循環

> javascript

• 插值
• > Mixins
在玉>中使用javascript Jade用JavaScript實施了Jade，因此在Jade中使用JavaScript是非常容易的。這是一個例子。

我們在這裡做了什麼？通過使用連字符啟動一條線，我們向Jade編譯器指出，我們希望開始使用JavaScript，並且它可以按照我們的期望。當您將上面的Jade代碼彙編為HTML時，這就是您得到的：

>

在Codepen上查看此示例

當代碼未直接添加輸出時，我們使用連字符。如果我們想使用JavaScript在Jade中輸出某些內容，我們會使用=。讓我們調整上面的代碼以顯示一個序列號。

- var x = 5;
div
  ul
    - for (var i=1; i

<p>

</p>和voilà，我們現在有序列號：<pre class="brush:php;toolbar:false"><span><span><span><div>>
  <span><span><span><ul>></ul></span>
</span>    <span><span><span><li>></li></span>Hello<span><span></span>></span>
</span>    <span><span><span><li>></li></span>Hello<span><span></span>></span>
</span>    <span><span><span><li>></li></span>Hello<span><span></span>></span>
</span>    <span><span><span><li>></li></span>Hello<span><span></span>></span>
</span>    <span><span><span><li>></li></span>Hello<span><span></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span></span></span></span></span></span></span></span></span>
</div></span>></span></span>

在Codepen上查看此示例

當然，在這種情況下，有序列表會更合適，但是您明白了。現在，如果您擔心XSS和HTML逃脫，請閱讀文檔以獲取更多信息。

- var x = 5;
div
  ul
    - for (var i=1; i循環<p>
</p> Jade提供了出色的循環語法，因此您無需求助於JavaScript。讓我們循環瀏覽一個數組：<pre class="brush:php;toolbar:false"><span><span><span><div>>
  <span><span><span><ul>></ul></span>
</span>    <span><span><span><li>></li></span>1. Hello<span><span></span>></span>
</span>    <span><span><span><li>></li></span>2. Hello<span><span></span>></span>
</span>    <span><span><span><li>></li></span>3. Hello<span><span></span>></span>
</span>    <span><span><span><li>></li></span>4. Hello<span><span></span>></span>
</span>    <span><span><span><li>></li></span>5. Hello<span><span></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span></span></span></span></span></span></span></span></span>
</div></span>></span></span>

這將按照以下方式進行編譯：

>

在Codepen上查看此示例

>您也可以迭代對象並使用循環時使用。查看文檔以獲取更多信息。

插值

>將JavaScript混合到這樣的文本中可能會很煩人。玉有一個優雅的解決方案嗎？您敢打賭。

<span><span><span><div> class<span>="movie-card"</span> id<span>="oceans-11"</span>>
  <span><span><span><h1 id="class-span-movie-title-span-gt"> class<span>="movie-title"</span>></h1></span>Ocean's 11<span><span></span>></span>
</span>  <span><span><span><img  src="/static/imghwm/default1.png" data-src="/img/oceans-11.png" class="lazy" alt="初學者的玉教程" > src<span>="/img/oceans-11.png"</span> class<span>="movie-poster"</span>></span>
</span>  <span><span><span><ul> class<span>="genre-list"</span>></ul></span>
</span>    <span><span><span><li>></li></span>Comedy<span><span></span>></span>
</span>    <span><span><span><li>></li></span>Thriller<span><span></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span></span></span></span></span></span></span></span>
</div></span>></span></span>

在Codepen上查看此示例

不是整潔嗎？

> Mixins

混合蛋白就像功能一樣。他們將參數作為輸入，並將標記作為輸出。使用Mixin關鍵字定義Mixin。

div.movie-card#oceans-11
  h1.movie-title Ocean's 11
  img.movie-poster()
  ul.genre-list
    li Comedy
    li Thriller

定義了混合蛋白後，您可以用語法調用混合物。

將像這樣輸出HTML：

div
  p How are you?
  p.
    I'm fine thank you.
    And you? I heard you fell into a lake?
    That's rather unfortunate. I hate it when my shoes get wet.

>

將它們全部放在一起

- var x = 5;
div
  ul
    - for (var i=1; i
<h2 id="gt-讓我們整理到迄今為止所學到的一切-假設我們有一系列不錯的電影-每個項目都包含電影的標題-演員陣容-子陣列-評分-類型-指向IMDB頁面的鏈接以及電影海報的圖像路徑-陣列看起來像這樣-添加了可讀性的空白">>讓我們整理到迄今為止所學到的一切。假設我們有一系列不錯的電影，每個項目都包含電影的標題，演員陣容（子陣列），評分，類型，指向IMDB頁面的鏈接以及電影海報的圖像路徑。陣列看起來像這樣（添加了可讀性的空白）：</h2>>

<p>

</p>>我們有10部電影，我們想為每張電影製作漂亮的電影賀卡。最初，我們不打算使用IMDB鏈接。如果電影的評分在5以上，我們將其豎起大拇指，否則，我們將其放下大拇指。我們將使用Jade的所有不錯的功能來編寫一些模塊化代碼來執行以下操作：<ancy>>
<pre class="brush:php;toolbar:false"><span><span><span><div>>
  <span><span><span><ul>></ul></span>
</span>    <span><span><span><li>></li></span>Hello<span><span></span>></span>
</span>    <span><span><span><li>></li></span>Hello<span><span></span>></span>
</span>    <span><span><span><li>></li></span>Hello<span><span></span>></span>
</span>    <span><span><span><li>></li></span>Hello<span><span></span>></span>
</span>    <span><span><span><li>></li></span>Hello<span><span></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span></span></span></span></span></span></span></span></span>
</div></span>></span></span>

>為電影卡創建混合蛋白

>

>
1. >遍歷演員表並顯示演員。我們將對流派做同樣的事情。
   
   檢查評分，然後決定是向下表現大拇指還是向下表現大拇指。
   • >
   >遍歷電影列表，並使用Mixin每部電影創建一張卡片。 >
2. ，讓我們先創建混合蛋白。 >

>那裡有很多事情要做，但是我敢肯定它看起來很熟悉 - 我們在本教程中介紹了所有這些。現在，我們只需要在循環中使用Mixin：

就是這樣。是優雅還是什麼？這是最終代碼。

- var x = 5;
div
  ul
    - for (var i=1; i

<p>

</p>這是編譯的HTML：<antml>

<pre class="brush:php;toolbar:false"><span><span><span><div>>
  <span><span><span><ul>></ul></span>
</span>    <span><span><span><li>></li></span>1. Hello<span><span></span>></span>
</span>    <span><span><span><li>></li></span>2. Hello<span><span></span>></span>
</span>    <span><span><span><li>></li></span>3. Hello<span><span></span>></span>
</span>    <span><span><span><li>></li></span>4. Hello<span><span></span>></span>
</span>    <span><span><span><li>></li></span>5. Hello<span><span></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span></span></span></span></span></span></span></span></span>
</div></span>></span></span>

，但是請等一下。如果我們現在想在單擊電影的標題時轉到電影的IMDB頁面怎麼辦？我們可以在混音中添加一行：a（href = movie.imdburl）。

>

- var droids = ["R2D2", "C3PO", "BB8"];
div
  h1 Famous Droids from Star Wars
  for name in droids
    div.card
      h2= name

在Codepen上查看此示例

<span><span><span><div>>
  <span><span><span><h1 id="gt">></h1></span>Famous Droids from Star Wars<span><span></span>></span>
</span>  <span><span><span><div> class<span>="card"</span>>
    <span><span><span><h2 id="gt">></h2></span>R2D2<span><span></span>></span>
</span>  <span><span><span></span></span></span></span>
</div></span>></span>
</span>  <span><span><span><div> class<span>="card"</span>>
    <span><span><span><h2 id="gt">></h2></span>C3PO<span><span></span>></span>
</span>  <span><span><span></span></span></span></span>
</div></span>></span>
</span>  <span><span><span><div> class<span>="card"</span>>
    <span><span><span><h2 id="gt">></h2></span>BB8<span><span></span>></span>
</span>  <span><span><span></span></span></span></span>
</div></span>></span>
</span><span><span><span></span></span></span></span>
</div></span>></span></span>

結論

>我們從對翡翠一無所知，到建造一些漂亮的模塊化電影賀卡。玉還有更多的東西，但是我已經掩蓋了一些概念，以使事情變得簡單。因此，我希望這個教程能使您的好奇心了解更多。

- var profileName = "Danny Ocean";
div
  p Hi there, #{profileName}. How are you doing?

>

重要說明：正如你們中有些人可能已經知道的那樣，由於軟件商標索賠，Jade已重命名為Pug。將來，有關玉的文章將使用新名稱“ pug”或“ pugjs”。

關於初學者Jade教程的經常詢問的問題（常見問題解答）

什麼是玉，為什麼在網絡開發中很重要？

也稱為帕格，是一種高性能模板引擎，受HAML的影響很大，並用node.js和瀏覽器的JavaScript實施。它提供了一種干淨，優雅的語法，允許開發人員以更簡潔的方式編寫HTML模板。 Jade在Web開發中很重要，因為它減少了編寫HTML代碼所花費的時間，從而使開發過程更加有效。它還支持動態代碼，這意味著您可以在渲染html時包含評估的變量和表達式。

>如何安裝jade？

安裝Jade，您需要具有節點。 JS和NPM（節點軟件包管理器）安裝在您的計算機上。一旦擁有這些，您可以通過在終端或命令提示符中運行命令NPM安裝Jade -G來在系統上安裝Jade。這將允許您使用計算機上任何目錄中的JADE。

>如何將html轉換為jade？

>可以手動完成將html轉換為jade或使用html2jade.org等在線工具。 。要手動做到這一點，您需要了解玉器語法以及它如何映射到HTML。例如，HTML標籤成為Jade元素，HTML屬性成為Jade屬性，等等。在線工具可以自動化此過程，但是了解基本的轉換規則仍然很重要。

>

> jade和html？

>

>> jade和html之間的主要區別在於他們的主要區別。句法。 Jade使用凹痕代表嵌套元素，不需要關閉標籤，這比HTML更簡潔。但是，HTML的使用和理解更廣泛，有些開發人員發現其明確的關閉標籤和缺乏壓痕規則易於閱讀和理解。

>

>我如何在Jade中使用變量？可以使用 - 語法來定義翡翠。例如，-var title ='home'定義了一個名為“ home”的變量。然後，您可以在Jade模板中使用此變量，將其與＃{}一起前綴。例如，h1 =標題將呈現為

home

在html中。

>我可以在玉模板中使用javascript嗎？

是的，是的，您可以在Jade模板中使用Javascript。 Jade支持各種JavaScript構造，包括變量，表達式，控制結構（例如IF-ELSE語句和循環）和功能。要將JavaScript代碼包含在您的Jade模板中，請以 - 。

將其包括在玉中？使用包含關鍵字。例如，包括標頭將在模板中的該點包含標題文件的內容。

。

我如何用//添加玉中中的評論

>。例如，//這是評論將向您的Jade代碼添加評論。請注意，此評論將不包含在渲染的html中。

>如何使用類似於HTML的標籤對Jade中的文本格式化？例如，p這是一些文本會呈現為

這是html中的一些文本

。您還可以通過以下文本以：markdown。代碼。當呈現玉模板時發生錯誤時，玉會拋出一個例外，您可以捕獲並適當處理。

以上是初學者的玉教程的詳細內容。更多資訊請關注PHP中文網其他相關文章！