今回は、ノードのフロントエンドテンプレートエンジン 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 ドキュメント宣言を書きたい場合は、次のように記述できます。
コンパイル結果は次のとおりです:
コードをコピーします コードは次のとおりです:
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. ログイン後にコピー
コンパイル結果は次のとおりです:
これはタイトルです。 これは段落です。
場合によっては、出力する必要があります特別にフォーマットされたテキスト、またはコードの読みやすさを向上させるために、次の効果を表示する必要があります:
では、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 ログイン後にコピー
编译结果为：
index.html
那么问题就来了，如果我们要写一个单属性应该怎么写？比如给表单元素添加 checked属性：
input(type="checkbox", name="all", checked, value="全选") ログイン後にコピー
编译结果为：
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
如何操作nodeJS服务器创建与重启
怎样进行Vue拖拽组件开发
以上がノードフロントエンドテンプレートエンジンJadeタグの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
