ノードのフロントエンド テンプレート エンジンでの Jade タグの使用の詳細な説明

今回は、ノードのフロントエンドテンプレートエンジンでJadeタグを使用する場合の注意事項について詳しく説明します。以下は実際的なケースですので、見てみましょう。

1. ドキュメント宣言

HTML ページを書き始めるとき、通常は HTML5 ドキュメント宣言メソッドを使用する必要がありますが、jade ではどのように記述すればよいでしょうか。

jade でドキュメント宣言を書くには 2 つの方法があります:

jade ファイルに直接 doctype HTML を書くことができます

1. jade は簡単な記述方法を提供します (ただし、jade をアップグレードした後はこの方法が必要になるようです)新しいバージョンでは推奨されなくなりました -_-||| )

2. もちろん、jade はデフォルトで他のタイプのドキュメント宣言もサポートしていますが、以下のオプションに従って doctype を使用するだけです。 Jade はデフォルトで以下をサポートします:

var doctypes = exports.doctypes = {
 '5': 'nbsp;html>',
 'xml': '<?xml  version="1.0" encoding="utf-8" ?>',
 'default': 'nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">',
 'transitional': 'nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">',
 'strict': 'nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">',
 'frameset': 'nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">',
 '1.1': 'nbsp;html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">',
 'basic': 'nbsp;html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">',
 'mobile': 'nbsp;html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">'
};

doctype は大文字と小文字が区別されないため、次の 2 つは同じ効果があります:

doctype Default
doctype default

例: XHTML 1.0 Strict ドキュメント宣言を書きたい場合は、次のように記述できます。

doctype strict

コンパイル結果は次のとおりです:

コードをコピーします

コードは次のとおりです:

2, タグ

jade タグの書き方はとても簡単で、たった一言です。

doctype html
html
 head
 title
 body

上記のコードは次のようにコンパイルされます:

nbsp;html>

 
 <title></title>
 
 

jade はタグの先頭と末尾を区別するために厳密なインデントを使用します。デフォルトでは、インデントを示すために 2 つのスペースが使用されます。

コンテンツを含むラベルを書きたい場合、たとえばタイトルを書きたい場合は、ラベルの単語の後にスペースを追加し、その後にコンテンツを続けるだけです。

h1 this is a title.
p this is a paragraph.

コンパイル結果は次のとおりです:

これはタイトルです。

これは段落です。

場合によっては、出力する必要があります特別にフォーマットされたテキスト、またはコードの読みやすさを向上させるために、次の効果を表示する必要があります:

1. 001

2. 002

3. 003
4. 004
p> ;


では、jade ではどのように記述すればよいでしょうか? ここで、jade では 2 つの方法が用意されています。 1 つ目は、各行の前に | とスペースを追加する方法です。

p
 | 1. 001
 | 2. 002
 | 3. 003
 | 4. 004

2 つ目の方法は、次のとおりです。名の後には . が続きます。次に、このタグの下のコンテンツが、jade によってコード セグメントに解析されます。

p.
 1. 001
 2. 002
 3. 003
 4. 004

これら 2 つの方法の違いは何ですか?ここで、タグの混合について説明する必要があります。そのような要件がある場合、上記のコードの 1 の後に強力なタグを追加する必要があります。

まず最初のケース、私たちの書き方について話しましょう:

p
 | 1. 001
 strong aaa
 | 2. 002
 | 3. 003
 | 4. 004

2番目の書き方の場合は、次のように書く必要があります:

p.
 1. 001
 <strong>aaa</strong>
 2. 002
 3. 003
 4. 004

コンパイル結果は次のとおりです:

< ;p>

1. 001

aaa

2. 002
3. 003
4. 004

3. タグの

属性 と属性値 h1 p など。通常、これらのタグには id 属性と class 属性を記述しますが、jade ではこれをどのように記述すればよいでしょうか? Zen コーディングと同じ構文で、次のように記述するだけです:

h1#id.class this is a title.
p#j-text.text this is a paragraph.

コンパイル結果は次のとおりです:

これはタイトルです。

> ;< ;p id="j-text" class="text">これは段落です。

等等，那我要是想添加多个 class 怎么办呢？这样办：

h1#id.class1.class2.class3 this is a title.
p#j-text.text this is a paragraph.

编译结果为：

this is a title.

this is a paragraph.

什么？写 p 写烦了？那就不写咯。

#id.class
#id.class1.class2 this is a p without tags.

编译结果为：

this is a p without tags.

这里要说明一下，在 jade 的语法里面，只有 p 标签能够省略不写.

说完了 id 和 class，我们再来说一下标签其他的属性应该怎么添加。jade 里添加其他属性和值的语法也和 zen coding 类似，我们需要在标签后面加上小括号()，然后按照(属性名=属性值)的格式写就好了，如果有多个属性，中间以逗号进行分割。

比如上面的 id 和 class 的写法我们就可以改写成：

h1(id="id", class="class") this is a title.
p(id="j-text", class="text") this is a paragraph.

结果是一样的：

this is a title.

this is a paragraph.

说来说去还是这两个属性，烦了？那我们换一个吧：

a(herf="/index.html", title="this is a link.", target="_blank", data-uid="1000") index.html

编译结果为：

index.html

那么问题就来了，如果我们要写一个单属性应该怎么写？比如给表单元素添加 checked属性：

input(type="checkbox", name="all", checked, value="全选")

编译结果为：

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

nodejs实现动态html步骤详解

node 命令方式启动修改端口步骤详解

以上がノードのフロントエンド テンプレート エンジンでの Jade タグの使用の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。