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

php中世界最好的语言

リリース： 2018-05-22 10:27:31

オリジナル

1616 人が閲覧しました

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

1. ドキュメント宣言

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

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

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

jade は簡単な記述方法を提供します (ただし、jade をアップグレードした後はこの方法が必要になるようです)新しいバージョンでは推奨されなくなりました -_-||| )
もちろん、jade はデフォルトで他のタイプのドキュメント宣言もサポートしていますが、以下のオプションに従って doctype を使用するだけです。 Jade はデフォルトで以下をサポートします:

var doctypes = exports.doctypes = {
 '5': '<!DOCTYPE html>',
 'xml': '<?xml version="1.0" encoding="utf-8" ?>',
 'default': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">',
 'transitional': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">',
 'strict': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">',
 'frameset': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">',
 '1.1': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">',
 'basic': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">',
 'mobile': '<!DOCTYPE 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

ログイン後にコピー

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

<!DOCTYPE html>
<html>
 <head>
 <title></title>
 </head>
 <body></body>
</html>

ログイン後にコピー

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

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

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

ログイン後にコピー

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

これはタイトルです。

これは段落です。

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

1. 001

2. 002
3. 003
4. 004

では、jade ではどのように記述すればよいでしょうか? ここで、jade では 2 つの方法が用意されています。 1 つ目は、各行の前に | とスペースを追加する方法です。
p
 | 1. 001
 | 2. 002
 | 3. 003
 | 4. 004
ログイン後にコピー

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

ログイン後にコピー

これら 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> コンパイル結果は次のとおりです: <p style="text-align: left;"></p>
<p style="text-align: left;">&lt ;p></p> 1. 001 <blockquote style="text-align: left;"> <strong>aaa</strong><p style="text-align: left;"> 2. 002<br> 3. 003<br> 4. 004<br></p><br><br><br></p>
</blockquote>3. タグの <p style="text-align: left;"> 属性<span style="color: #ff0000"> と属性値<strong> <a href="http://www.php.cn/wiki/169.html" target="_blank"></a> </strong>h1 p など。通常、これらのタグには id 属性と class 属性を記述しますが、jade ではこれをどのように記述すればよいでしょうか? Zen コーディングと同じ構文で、次のように記述するだけです: </span></p>
<pre class="brush:php;toolbar:false">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中文网其它相关文章！

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

これはタイトルです。

this is a title.

this is a title.

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