ホームページ >ウェブフロントエンド >jsチュートリアル >ノードフロントエンドテンプレートエンジンJadeタグの使い方
ノードフロントエンドテンプレートエンジンJadeタグの使い方
- php中世界最好的语言オリジナル
- 2018-05-30 11:10:361521ブラウズ
今回は、ノードのフロントエンドテンプレートエンジンJadeタグの使い方と、ノードフロントエンドテンプレートエンジン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 によってコード セグメントに解析されます。
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> <p style="text-align: left;"> コンパイル結果は次のとおりです: </p> <blockquote style="text-align: left;"><p style="text-align: left;">< ;p><br> 1. 001 <br> <strong>aaa</strong><br> 2. 002<br> 3. 003<br> 4. 004<br></p></p></blockquote> <p style="text-align: left;"><span style="color: #ff0000"><strong>3. タグの <a href="http://www.php.cn/wiki/169.html" target="_blank"> 属性</a> と属性値</strong> </span></p> <p style="text-align: left;">h1 p など。通常、これらのタグには id 属性と class 属性を記述しますが、jade ではこれをどのように記述すればよいでしょうか? Zen コーディングと同じ構文で、次のように記述するだけです: </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
编译结果为：
那么问题就来了，如果我们要写一个单属性应该怎么写？比如给表单元素添加 checked属性：
input(type="checkbox", name="all", checked, value="全选")
编译结果为：
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上がノードフロントエンドテンプレートエンジンJadeタグの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。