Node.js で Jade を始める方法の詳細な説明
この記事では主に Node.js テンプレート エンジン Jade について詳しく紹介します。Jade は Node.js 用のテンプレート エンジンです。
Jade は Node.js のテンプレート エンジンであり、Haml の多くの側面を利用しているため、その構文は Haml に比較的似ています。さらに、Jade はスペースもサポートします。
1. タグ
Jade では、行頭のテキストはデフォルトで HTML タグとして解釈されます。また、開始タグを記述するだけで済みます。「<>」を追加する必要はありません。なぜなら、Jade が終了タグと開始タグをレンダリングしてくれるからです。例:
body
p
h1 Jade是Node.js的一个模板引擎
p 它借鉴了Haml的很多地方，所以语法上和Haml比较相近。
p
footer © Pandora上記の Jade テンプレートによってレンダリングされる最終的な HTML コードは次のとおりです:
<body>
<p>
<h1> Jade是Node.js的一个模板引擎</h1>
<p>它借鉴了Haml的很多地方，所以语法上和Haml比较相近。</p>
</p>
<p>
<footer>© Pandora</footer>
</p>
</body>注: タグ名が記述されていない場合、デフォルトは p タグです。
2. 変数/データ
Jade テンプレートに渡されるデータはローカルと呼ばれます。 変数の値を出力するには、等号「=」を使用します。
(ローカル):
{
title: "Express.js Guide",
body: "The Comprehensive Book on Express.js"
}Jade コード:
h1= title p= body
レンダリングされた出力 HTML:
<h1>Express.js Guide</h1> <p>The Comprehensive Book on Express.js</p>
3. 変数の読み取り
Jade の変数の読み取り値は #{name} を通じて実装されます。例:
- var title = "Node"
p I love #{title}変数の値はテンプレートのコンパイル時に処理されるため、実行可能な JavaScript(-) では使用しないでください。
4. 属性
属性はラベルの後に「()」で囲まれ、複数の属性は「,」で区切られます。例: body (name1 = "value1"、name2 = "value2")。
p(id="content", class='main')
a(href='http://csdn.net', title='csdn主页'， target='_blank') CSDN:中国软件联盟
form(action="/login")
button(type="submit", value="提交")出力:
<p id="content" class='main'>
<a href='http://csdn.net' title='csdn主页' target='_blank'> CSDN:中国软件联盟</a>
<form action="/login">
<button type="submit" value="提交">
</form>
</p>動的属性:
動的属性は、属性の値が動的であること、つまり、属性の値を表すために変数が使用されることを意味します。記号「|」を使用すると、HTML ノードのコンテンツを新しい行に記述することができます。例:
a(href=url, data-active=isActive) label input(type="checkbox", checked=isChecked) | yes / no
上記のテンプレートに提供されるデータ:
{
url: "/logout",
isActive: true,
isChecked: false
}レンダリング後の最終出力 HTML:
<a href="" data-active=" rel="external nofollow" data-active"></a> <label> <input type="checkbox" />yes / no </label>
注: 属性値が渡されない場合、属性値が false の属性は無視されます。
5. リテラル
手間を省くために、タグ名の直後にクラス名と ID 名を記述することができます。例:
p#content
p.lead.center
| Pandora_galen
#side-bar.pull-right // 没有标签名，默认为“p”
span.contact.span4
a(href="/contact" rel="external nofollow" rel="external nofollow" ) contact meレンダリングされた出力 HTML:
<p id="content">
<p class="lead center">
Pandora_galen
<p id="side-bar" class="pull-right"></p>
<span class="contact span4">
<a href="/contact" rel="external nofollow" rel="external nofollow" > contact me </a>
</span>
</p>6. テキスト
元のテキストを出力するには、「|」記号を使用します。
p | 我两年前开始学习前端 | 在此之间，我学过了html, jQuery, JavaScript, Python， Css3, HTML5, Bootstrap, D3.js, SVG...而现在我在学Node。并且我已经深深的爱上了前端。
7. スクリプトブロックとスタイルブロック
HTML で
script.
console.log("Hello world!");
setTiemout(function() {
window.location.href = "http://csdn.net"
}, 1000);
console.log("Good bye!");コードを作成するには、
<script>
console.log("Hello world!");
setTiemout(function() {
window.location.href = "http://csdn.net"
}, 1000);
console.log("Good bye!");
</script>同様に、style.
8. JavaScript コード
-、= またはを使用します。 =これら 3 つのシンボルは、出力を操作できる実行可能な JS コードを Jade で記述するために使用されます。これは、HTML 要素を出力したり、JavaScript を挿入したりするときに便利です。ただし、これを行うときは、クロスサイト スクリプティング (XSS) 攻撃を避けるように注意する必要があります。
例えばこんなことができます！ =配列を定義し、タグ データを出力します:
- var arr = ['<a>', '<b>', '<c>']
ul
-for (var i = 0; i < arr.length; i++)
li
span= i
span!= "unescaped:" + arr[i] + "vs."
span= "escaped:" + arr[i]生成されたコードは次のとおりです:
<ul> <li><span>0</span><span>unescaped: <a>vs. </span><span>escaped: <a></span></li> <li><span>1</span><span>unescaped: <b>vs. </span><span>escaped: <b></span></li> <li><span>2</span><span>unescaped: <c>vs. </span><span>escaped: <c></span></li> </ul>
テンプレート エンジン Jade と Handlebars の主な違いは次のとおりです。Jade ではほとんどすべての JavaScript をコード内に記述できますが、Handlebars では制限があります。開発 人間が使用できるのは、少数の組み込みヘルパーとカスタム ヘルパーのみです。
9. コメント
Jade のコメントには 2 つのタイプがあります:
<1>。ページに出力されないコメント - 「//」。 - "//- ”
// 普通注释，会输出到渲染后生成的HTML页面 p Hello Jade content //- 特殊注释，不会输出到HTML页面 p (id="footer") copyright 2016
<!-- 普通注释，会输出到渲染后生成的HTML页面 --> <p> Hello Jade content </p> <p id="footer">copyright 2016</p>
10. If ステートメント
標準の JavaScript コードを記述できるように、接頭辞 - を if ステートメントに追加します。接頭辞や括弧を使用しないこともできます。もちろん後者の方がより簡潔です。- var user = {}
- user.admin = Math.random() > 0.5
if user.admin
button(class = "launch") Launch Spacecraft
else
button(class = "login") Log inJade の各ステートメント
は非常に単純で、各ステートメントを使用するだけです。- var language = ['JavaScript', 'Node', 'Python', 'Java']
p
each value, index in language
p= index + "," + value<p> <p>0. JavaScript</p> <p>1. Node</p> <p>2. Python</p> <p>3. Java</p> </p>
- var language = ['JavaScript': -1, 'Node': 2, 'Python': 3, 'Java': 1]
p
each value, key in languages
p= key + ":" + value<p> <p>JavaScript: -1</p> <p>Node: 2</p> <p>Python: 3</p> <p>Java: 1</p> </p>
12. フィルター
フィルターの機能は次のとおりです: 別の言語でテキスト ブロックを書き込みます。 Markdown フィルターを使用するには、Marked および Markdown NPM パッケージに加えて、Markdown モジュールをインストールする必要があります。13, case
p
:markdown
# practical Node.js
[This book](http://csdn.net) really helps to grasp many coponents needed for modern-day web development.Sass または compass mixin を使用したことがある場合は、間違いなくそれらに精通しているでしょう。Jade での mixin の使用法は基本的にそれらと同じです。
宣言構文: mixin name(param, param2, …….)呼び出し: +name(data)- var coins = Math.round(Math.random() * 10)
case coins
when 0
p You have no money
when 1
p You have a coin
default
p You have #{coins} coins!mixin row(items)
tr
each item, index in items
td= item
mixin table(tableData)
table
each row, index in tableData
+row(row)
- var node = [{name: "express"}, {name: "Jade"}, {name: "Handlebars"}]
+table(node)
- var js = [{name: 'backbone'}, {name: 'angular'}, {name: "emberJS"}]
+table(js)15. include
include は、JS および CSS 外部の導入と非常に似ています。ファイルの類似性。これはトップダウンのアプローチです。他のファイルを含むメイン ファイルで、何を使用するかを決定します。最初にメイン ファイルが処理され (データ ローカルはメイン ファイルで定義できます)、次にメイン ファイルに含まれるサブファイルが処理されます (サブファイルはメイン ファイルで定義されたデータ ローカルを使用できます)。 include Jade テンプレートの場合、 include /path/filename を使用します。
たとえば、ファイル A:
<table>
<tr>
<td>express</td>
</tr>
<tr>
<td>Jade</td>
</tr>
<tr>
<td>Handlebars</td>
</tr>
</table>
<table>
<tr>
<td>backbone</td>
</tr>
<tr>
<td>angular</td>
</tr>
<tr>
<td>emberJS</td>
</tr>
</table>注: ここでテンプレート名とパスに二重引用符または一重引用符を追加する必要はありません。
別の例として、親ディレクトリから検索を開始します:
include ./includes/header
注: インクルード/パーシャルは実行時ではなくコンパイル時に処理されるため、ファイル名とファイル パスに変数を使用することはできません。
对于使用Sass、Compass又或者Less的人这些事再熟悉不过的了。
16、extend
extend与include“唱对台戏”，正好相反，extend是一种自底向上的方法。它所包含的文件决定它要替换主文件中哪那一部分。
使用格式： extend filename 和 block blockname;
示例-1： 在文件file_a里：
block header p some default text block content p loading... block footer p copyright
示例-2： 在文件file_b里：
extend file_a block header p very specific text block content .main-content
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
以上がNode.js で Jade を始める方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7675
15
1393
52
1207
24
91
11
Nodejs はバックエンド フレームワークですか?
Apr 21, 2024 am 05:09 AM
Node.js は、高いパフォーマンス、スケーラビリティ、クロスプラットフォーム サポート、豊富なエコシステム、開発の容易さなどの機能を備えているため、バックエンド フレームワークとして使用できます。
Nodejsをmysqlデータベースに接続する方法
Apr 21, 2024 am 06:13 AM
MySQL データベースに接続するには、次の手順に従う必要があります。 mysql2 ドライバーをインストールします。 mysql2.createConnection() を使用して、ホスト アドレス、ポート、ユーザー名、パスワード、データベース名を含む接続オブジェクトを作成します。 connection.query() を使用してクエリを実行します。最後に connection.end() を使用して接続を終了します。
Nodejsのグローバル変数とは何ですか
Apr 21, 2024 am 04:54 AM
Node.js には次のグローバル変数が存在します。 グローバル オブジェクト: グローバル コア モジュール: プロセス、コンソール、require ランタイム環境変数: __dirname、__filename、__line、__column 定数: unknown、null、NaN、Infinity、-Infinity
Nodejs インストール ディレクトリ内の npm ファイルと npm.cmd ファイルの違いは何ですか?
Apr 21, 2024 am 05:18 AM
Node.js インストール ディレクトリには、npm と npm.cmd という 2 つの npm 関連ファイルがあります。違いは次のとおりです。拡張子が異なります。npm は実行可能ファイルで、npm.cmd はコマンド ウィンドウのショートカットです。 Windows ユーザー: npm.cmd はコマンド プロンプトから使用できますが、npm はコマンド ラインからのみ実行できます。互換性: npm.cmd は Windows システムに固有ですが、npm はクロスプラットフォームで使用できます。使用上の推奨事項: Windows ユーザーは npm.cmd を使用し、他のオペレーティング システムは npm を使用します。
PIノードティーチング：PIノードとは何ですか？ PIノードをインストールしてセットアップする方法は？
Mar 05, 2025 pm 05:57 PM
ピン張りのノードの詳細な説明とインストールガイドこの記事では、ピネットワークのエコシステムを詳細に紹介します - PIノードは、ピン系生態系における重要な役割であり、設置と構成の完全な手順を提供します。 Pinetworkブロックチェーンテストネットワークの発売後、PIノードは多くの先駆者の重要な部分になり、テストに積極的に参加し、今後のメインネットワークリリースの準備をしています。まだピン張りのものがわからない場合は、ピコインとは何かを参照してください。リストの価格はいくらですか？ PIの使用、マイニング、セキュリティ分析。パインワークとは何ですか？ピン競技プロジェクトは2019年に開始され、独占的な暗号通貨PIコインを所有しています。このプロジェクトは、誰もが参加できるものを作成することを目指しています
NodejsとJavaの間に大きな違いはありますか?
Apr 21, 2024 am 06:12 AM
Node.js と Java の主な違いは、設計と機能です。 イベント駆動型とスレッド駆動型: Node.js はイベント駆動型で、Java はスレッド駆動型です。シングルスレッドとマルチスレッド: Node.js はシングルスレッドのイベント ループを使用し、Java はマルチスレッド アーキテクチャを使用します。ランタイム環境: Node.js は V8 JavaScript エンジン上で実行され、Java は JVM 上で実行されます。構文: Node.js は JavaScript 構文を使用し、Java は Java 構文を使用します。目的: Node.js は I/O 集中型のタスクに適しており、Java は大規模なエンタープライズ アプリケーションに適しています。
Nodejs はバックエンド開発言語ですか?
Apr 21, 2024 am 05:09 AM
はい、Node.js はバックエンド開発言語です。これは、サーバー側のビジネス ロジックの処理、データベース接続の管理、API の提供などのバックエンド開発に使用されます。
Nodejsプロジェクトをサーバーにデプロイする方法
Apr 21, 2024 am 04:40 AM
Node.js プロジェクトのサーバー デプロイメント手順: デプロイメント環境を準備します。サーバー アクセスの取得、Node.js のインストール、Git リポジトリのセットアップ。アプリケーションをビルドする: npm run build を使用して、デプロイ可能なコードと依存関係を生成します。コードをサーバーにアップロードします: Git またはファイル転送プロトコル経由。依存関係をインストールする: サーバーに SSH で接続し、npm install を使用してアプリケーションの依存関係をインストールします。アプリケーションを開始します。node Index.js などのコマンドを使用してアプリケーションを開始するか、pm2 などのプロセス マネージャーを使用します。リバース プロキシの構成 (オプション): Nginx や Apache などのリバース プロキシを使用して、トラフィックをアプリケーションにルーティングします。
