• <\/body>\r\n<\/html><\/pre>jade はタグの先頭と末尾を區(qū)別するために厳密なインデントを使用します。デフォルトでは、インデントを示すために 2 つのスペースが使用されます。

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

    <\/p>\n

    h1?this?is?a?title.\r\np?this?is?a?paragraph.<\/pre>コンパイル結(jié)果は次のとおりです:
    <\/p>\n
     
    これはタイトルです。<\/h1><\/p> 
    これは段落です。<\/p>

    場合によっては、出力する必要があります特別にフォーマットされたテキスト、またはコードの読みやすさを向上させるために、次の効果を表示する必要があります: <\/p><\/blockquote>\n
    <\/p> 1. 001
     2. 002
     3. 003
     4. 004
    <\/ p> ;では、jade ではどのように記述すればよいでしょうか? ここで、jade では 2 つの方法が用意されています。 1 つ目は、各行の前に | とスペースを追加する方法です。 <\/p>
    p\r\n | 1. 001\r\n | 2. 002\r\n | 3. 003\r\n | 4. 004<\/pre><\/blockquote> 2 つ目の方法は、次のとおりです。名の後には . が続きます。次に、このタグの下のコンテンツが、jade によってコード セグメントに解析されます。 
    p.\r\n 1. 001\r\n 2. 002\r\n 3. 003\r\n 4. 004<\/pre><\/p> これら 2 つの方法の違いは何ですか?ここで、タグの混合について説明する必要があります。そのような要件がある場合、上記のコードの 1 の後に強(qiáng)力なタグを追加する必要があります。 
    <\/p>まず最初のケース、私たちの書き方について話しましょう: 
    p\r\n | 1. 001\r\n strong aaa\r\n | 2. 002\r\n | 3. 003\r\n | 4. 004<\/pre><\/p> 2番目の書き方の場合は、次のように書く必要があります: 
    p.\r\n 1. 001\r\n aaa<\/strong>\r\n?2.?002\r\n?3.?003\r\n?4.?004<\/p> コンパイル結(jié)果は次のとおりです: 
    <\/p>\n
    < ;p><\/p> 1. 001 
     aaa<\/strong>
     2. 002
     3. 003
     4. 004
    <\/p>


    <\/p>\n<\/blockquote>3. タグの 
     屬性 と屬性値 <\/a> <\/strong>h1 p など。通常、これらのタグには id 屬性と class 屬性を記述しますが、jade ではこれをどのように記述すればよいでしょうか? Zen コーディングと同じ構(gòu)文で、次のように記述するだけです: <\/span><\/p>\n
    h1#id.class?this?is?a?title.\r\np#j-text.text?this?is?a?paragraph.<\/pre>コンパイル結(jié)果は次のとおりです: 
    <\/p>\n
    これはタイトルです。<\/h1> ;<\/p>< ;p id=\"j-text\" class=\"text\">これは段落です。<\/p><\/p>\n
    <\/blockquote>\n
    等等，那我要是想添加多個 class 怎么辦呢？這樣辦：<\/p>\n
    h1#id.class1.class2.class3?this?is?a?title.\r\np#j-text.text?this?is?a?paragraph.<\/pre>\n
    編譯結(jié)果為：<\/p>\n
    this is a title.<\/h1>
    this is a paragraph.<\/p><\/p><\/blockquote>\n
    什么？寫 p 寫煩了？那就不寫咯。<\/p>\n
    #id.class\r\n#id.class1.class2?this?is?a?p?without?tags.<\/pre>\n
    編譯結(jié)果為：<\/p>\n
    <\/p>
    this is a p without tags.<\/p><\/p><\/blockquote>\n
    這里要說明一下，在 jade 的語法里面，只有 p 標(biāo)簽?zāi)軌蚴÷圆粚?<\/p>\n
    說完了 id 和 class，我們再來說一下標(biāo)簽其他的屬性應(yīng)該怎么添加。jade 里添加其他屬性和值的語法也和 zen coding 類似，我們需要在標(biāo)簽后面加上小括號()，然后按照(屬性名=屬性值)的格式寫就好了，如果有多個屬性，中間以逗號進(jìn)行分割。<\/p>\n
    比如上面的 id 和 class 的寫法我們就可以改寫成：<\/p>\n
    h1(id=\"id\",?class=\"class\")?this?is?a?title.\r\np(id=\"j-text\",?class=\"text\")?this?is?a?paragraph.<\/pre>\n
    結(jié)果是一樣的：<\/p>\n
    this is a title.<\/h1>
    this is a paragraph.<\/p><\/p><\/blockquote>\n
    說來說去還是這兩個屬性，煩了？那我們換一個吧：<\/p>\n
    a(herf=\"\/index.html\",?title=\"this?is?a?link.\",?target=\"_blank\",?data-uid=\"1000\")?index.html<\/pre>\n
    編譯結(jié)果為：<\/p>\n
    index.html<\/a><\/p><\/blockquote>\n
    那么問題就來了，如果我們要寫一個單屬性應(yīng)該怎么寫？比如給表單元素添加 checked屬性：<\/p>\n
    input(type=\"checkbox\",?name=\"all\",?checked,?value=\"全選\")<\/pre>\n
    編譯結(jié)果為：<\/p>\n
    <\/p><\/blockquote>\n
    相信看了本文案例你已經(jīng)掌握了方法，更多精彩請關(guān)注php中文網(wǎng)其它相關(guān)文章！<\/p>\n
    推薦閱讀：<\/p>\n
    nodejs實(shí)現(xiàn)動態(tài)html步驟詳解<\/a>
    <\/p>\n
    node 命令方式啟動修改端口步驟詳解<\/a>
    <\/p>\n<\/blockquote>"}	
	







    亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱
    
	

    
    

    

	
	
    
		
    
			
    
							
    
					
    
						ホームページ
						
												ウェブフロントエンド
						
												jsチュートリアル
						
						ノードのフロントエンド テンプレート エンジンでの Jade タグの使用の詳細(xì)な説明
					
    
					
					
    
						
    
							
    ノードのフロントエンド テンプレート エンジンでの Jade タグの使用の詳細(xì)な説明
    
							
							May 22, 2018 am	 10:27 AM
															
    
																			node
																			エンジン
																	
    
														
						
    
					
    
					
    
					
    
						
    
						
						
						

					
    今回は、ノードのフロントエンドテンプレートエンジンでJadeタグを使用する場合の注意事項(xiàng)について詳しく説明します。以下は実際的なケースですので、見てみましょう。 
    1. ドキュメント宣言
     HTML ページを書き始めるとき、通常は HTML5 ドキュメント宣言メソッドを使用する必要がありますが、jade ではどのように記述すればよいでしょうか。 
    jade でドキュメント宣言を書くには 2 つの方法があります: 
    

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

    1. 

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

    2. 

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

      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 は大文字と小文字が區(qū)別されないため、次の 2 つは同じ効果があります:
    

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

    doctype?strict
    コンパイル結(jié)果は次のとおりです: 
    

    コードをコピーします
     コードは次のとおりです:
    

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

    doctype?html
html
?head
?title
?body
    上記のコードは次のようにコンパイルされます:
    

    <!DOCTYPE html>
<html>
?<head>
?<title></title>
?</head>
?<body></body>
</html>
    jade はタグの先頭と末尾を區(qū)別するために厳密なインデントを使用します。デフォルトでは、インデントを示すために 2 つのスペースが使用されます。 
    コンテンツを含むラベルを書きたい場合、たとえばタイトルを書きたい場合は、ラベルの単語の後にスペースを追加し、その後にコンテンツを続けるだけです。 
    

    h1?this?is?a?title.
p?this?is?a?paragraph.
    コンパイル結(jié)果は次のとおりです:
    

     
    これはタイトルです。
     
    これは段落です。

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

     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 の後に強(qiáng)力なタグを追加する必要があります。 
    まず最初のケース、私たちの書き方について話しましょう: 
    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> コンパイル結(jié)果は次のとおりです: <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://ipnx.cn/wiki/169.html" target="_blank"></a> </strong>h1 p など。通常、これらのタグには id 屬性と class 屬性を記述しますが、jade ではこれをどのように記述すればよいでしょうか? Zen コーディングと同じ構(gòu)文で、次のように記述するだけです: </span></p>
<pre class="brush:php;toolbar:false">h1#id.class?this?is?a?title.
p#j-text.text?this?is?a?paragraph.
    コンパイル結(jié)果は次のとおりです: 
    

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

    

    等等，那我要是想添加多個 class 怎么辦呢？這樣辦：
    

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

    編譯結(jié)果為：
    

    this is a title.

    this is a paragraph.
    

    什么？寫 p 寫煩了？那就不寫咯。
    

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

    編譯結(jié)果為：
    


    this is a p without tags.
    

    這里要說明一下，在 jade 的語法里面，只有 p 標(biāo)簽?zāi)軌蚴÷圆粚?
    

    說完了 id 和 class，我們再來說一下標(biāo)簽其他的屬性應(yīng)該怎么添加。jade 里添加其他屬性和值的語法也和 zen coding 類似，我們需要在標(biāo)簽后面加上小括號()，然后按照(屬性名=屬性值)的格式寫就好了，如果有多個屬性，中間以逗號進(jìn)行分割。
    

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

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

    結(jié)果是一樣的：
    

    this is a title.

    this is a paragraph.
    

    說來說去還是這兩個屬性，煩了？那我們換一個吧：
    

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

    編譯結(jié)果為：
    

    index.html
    

    那么問題就來了，如果我們要寫一個單屬性應(yīng)該怎么寫？比如給表單元素添加 checked屬性：
    

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

    編譯結(jié)果為：
    

    

    相信看了本文案例你已經(jīng)掌握了方法，更多精彩請關(guān)注php中文網(wǎng)其它相關(guān)文章！
    

    推薦閱讀：
    

    nodejs實(shí)現(xiàn)動態(tài)html步驟詳解
    

    node 命令方式啟動修改端口步驟詳解
    

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


						
					
					
    
						
    このウェブサイトの聲明
    
						
    この記事の內(nèi)容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰屬します。このサイトは、それに相當(dāng)する法的責(zé)任を負(fù)いません。盜作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡(luò)ください。
    
					
    
				

				



				
    


				
    


					


											
    
							
    
								
    
									
									
    ホットAIツール
    
								
    
								
    
																		
    
											
												Undress AI Tool
											
											
    
												
													
    Undress AI Tool
    
												    
												
    脫衣畫像を無料で
    
											
    
										
    
																		
    
											
												Undresser.AI Undress
											
											
    
												
													
    Undresser.AI Undress
    
												    
												
    リアルなヌード寫真を作成する AI 搭載アプリ
    
											
    
										
    
																		
    
											
												AI Clothes Remover
											
											
    
												
													
    AI Clothes Remover
    
												    
												
    寫真から衣服を削除するオンライン AI ツール。
    
											
    
										
    
																		
    
											
												Clothoff.io
											
											
    
												
													
    Clothoff.io
    
												    
												
    AI衣類リムーバー
    
											
    
										
    
																		
    
											
												Video Face Swap
											
											
    
												
													
    Video Face Swap
    
												    
												
    完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
    
											
    
										
    
																
    
								
							
    
						
    
					


					


											
    
							
    
								
    
									
									
    ホットツール
    
								
    
								
    
																		
    
											
												メモ帳++7.3.1
											
											
    
												
													
    メモ帳++7.3.1
    
												    
												
    使いやすく無料のコードエディター
    
											
    
										
    
																			
    
											
												SublimeText3 中國語版
											
											
    
												
													
    SublimeText3 中國語版
    
												    
												
    中國語版、とても使いやすい
    
											
    
										
    
																			
    
											
												ゼンドスタジオ 13.0.1
											
											
    
												
													
    ゼンドスタジオ 13.0.1
    
												    
												
    強(qiáng)力な PHP 統(tǒng)合開発環(huán)境
    
											
    
										
    
																			
    
											
												ドリームウィーバー CS6
											
											
    
												
													
    ドリームウィーバー CS6
    
												    
												
    ビジュアル Web 開発ツール
    
											
    
										
    
																			
    
											
												SublimeText3 Mac版
											
											
    
												
													
    SublimeText3 Mac版
    
												    
												
    神レベルのコード編集ソフト（SublimeText3）
    
											
    
										
    
																	
    
								
							
    
						
    
										

					
					
				
    
			
							
    
					
    
						
						
    

													
    
								
									nvmでノードを削除する方法
								
								nvmでノードを削除する方法
								Dec 29, 2022 am	 10:07 AM
								
    nvm でノードを削除する方法: 1. 「nvm-setup.zip」をダウンロードして C ドライブにインストールします; 2. 「nvm -v」コマンドで環(huán)境変數(shù)を構(gòu)成し、バージョン番號を確認(rèn)します; 3. 「nvm」を使用しますinstall" コマンド ノードのインストール; 4. "nvm uninstall" コマンドでインストールしたノードを削除します。
    
							
    
														
    
								
									PIノードティーチング：PIノードとは何ですか？ PIノードをインストールしてセットアップする方法は？
								
								PIノードティーチング：PIノードとは何ですか？ PIノードをインストールしてセットアップする方法は？
								Mar 05, 2025 pm	 05:57 PM
								
    ピン張りのノードの詳細(xì)な説明とインストールガイドこの記事では、ピネットワークのエコシステムを詳細(xì)に紹介します -  PIノードは、ピン系生態(tài)系における重要な役割であり、設(shè)置と構(gòu)成の完全な手順を提供します。 Pinetworkブロックチェーンテストネットワークの発売後、PIノードは多くの先駆者の重要な部分になり、テストに積極的に參加し、今後のメインネットワークリリースの準(zhǔn)備をしています。まだピン張りのものがわからない場合は、ピコインとは何かを參照してください。リストの価格はいくらですか？ PIの使用、マイニング、セキュリティ分析。パインワークとは何ですか？ピン競技プロジェクトは2019年に開始され、獨(dú)占的な暗號通貨PIコインを所有しています。このプロジェクトは、誰もが參加できるものを作成することを目指しています
    
							
    
														
    
								
									Express を使用してノード プロジェクトでファイルのアップロードを処理する方法
								
								Express を使用してノード プロジェクトでファイルのアップロードを処理する方法
								Mar 28, 2023 pm	 07:28 PM
								
    ファイルのアップロードをどのように処理するか?次の記事では、Express を使用してノード プロジェクトでファイルのアップロードを処理する方法を紹介します。
    
							
    
														
    
								
									pkg を使用して Node.js プロジェクトを?qū)g行可能ファイルにパッケージ化する方法について説明します。
								
								pkg を使用して Node.js プロジェクトを?qū)g行可能ファイルにパッケージ化する方法について説明します。
								Dec 02, 2022 pm	 09:06 PM
								
    Nodejs実行可能ファイルをpkgでパッケージ化するにはどうすればよいですか?次の記事では、pkg を使用して Node プロジェクトを?qū)g行可能ファイルにパッケージ化する方法を紹介します。
    
							
    
														
    
								
									Nodeのプロセス管理ツール「pm2」を徹底分析
								
								Nodeのプロセス管理ツール「pm2」を徹底分析
								Apr 03, 2023 pm	 06:02 PM
								
    この記事では、Node のプロセス管理ツール「pm2」について説明し、pm2 が必要な理由、pm2 のインストール方法と使用方法について説明します。皆様のお役に立てれば幸いです。
    
							
    
														
    
								
									Angular と Node を使用したトークンベースの認(rèn)証
								
								Angular と Node を使用したトークンベースの認(rèn)証
								Sep 01, 2023 pm	 02:01 PM
								
    認(rèn)証は、Web アプリケーションの最も重要な部分の 1 つです。このチュートリアルでは、トークンベースの認(rèn)証システムと、それが従來のログイン システムとどのように異なるかについて説明します。このチュートリアルを終えると、Angular と Node.js で書かれた完全に動作するデモが表示されます。従來の認(rèn)証システム トークンベースの認(rèn)証システムに進(jìn)む前に、従來の認(rèn)証システムを見てみましょう。ユーザーはログイン フォームにユーザー名とパスワードを入力し、[ログイン] をクリックします。リクエストを行った後、データベースにクエリを?qū)g行してバックエンドでユーザーを認(rèn)証します。リクエストが有効な場合、データベースから取得したユーザー情報(bào)を使用してセッションが作成され、セッション情報(bào)が応答ヘッダーで返され、セッション ID がブラウザに保存されます。対象となるアプリケーションへのアクセスを提供します。
    
							
    
														
    
								
									npm ノード gyp が失敗した場合の対処方法
								
								npm ノード gyp が失敗した場合の対処方法
								Dec 29, 2022 pm	 02:42 PM
								
    「node-gyp.js」が「Node.js」のバージョンと一致しないため、npm node gyp が失敗します。解決策は次のとおりです: 1. 「npm cache clean -f」を使用してノード キャッシュをクリアします; 2. 「npm install -」を使用します。 g n" n モジュールをインストールします。 3. 「n v12.21.0」コマンドを使用して、「node v12.21.0」バージョンをインストールします。
    
							
    
														
    
								
									Nodeのfsファイルモジュールとパスモジュールについて語る記事（事例分析）
								
								Nodeのfsファイルモジュールとパスモジュールについて語る記事（事例分析）
								Nov 18, 2022 pm	 08:36 PM
								
    この記事では、ファイルの読み書きとパスの処理を例に、Node の fs ファイル モジュールとパス モジュールについて説明します。
    
							
    
													
    

													
								See all articles