ホームページ ウェブフロントエンド jsチュートリアル ノードフロントエンド開発テンプレートエンジンJadeの利用手順を詳しく解説

ノードフロントエンド開発テンプレートエンジンJadeの利用手順を詳しく解説

May 22, 2018 am 10:32 AM
node エンジン テンプレート

今回は、ノードフロントエンド開発テンプレートエンジンJadeを使用する手順と、ノードフロントエンド開発テンプレートエンジンで使用される

注意事項

について詳しく説明します。実際のケースを見てみましょう。見て。 Webの発展に伴い、フロントエンドアプリケーションはますます複雑になり、バックエンドベースの

javascript

(Node.js)も登場し始めています。期待と同時に、JavaScript MVC のアイデアも普及し始めています。ユーザーインターフェースをビジネスデータ(コンテンツ)から分離するために、「テンプレートエンジン」という概念が生まれました。 簡単に言うと、テンプレート エンジンは決定されるいくつかの変数を含む

文字列

であり、データはテンプレート エンジン関数を通じて動的にそれに詰め込まれます。

今日はJadeの使い方と文法の説明についてお話します。 Jade 公式 Web サイト: jade-lang.com/Jade コマンド ライン ツール

インストールが成功したら、Jade の使用は Node 環境に依存する必要があります。 、*.jade という名前のファイル接尾辞を持つ新しいファイルを作成できます。記述した後は、コマンド ライン ツールを使用して、通常使用する HTML 静的ファイルにコンパイルするだけで、jade の構文を思う存分使用できます。

インストール方法

1. まず、Node環境とnpmツールがインストールされているかどうかを確認します:

コマンドラインツールで次のコードを実行します:

node -v
=> v0.10.35
npm -v
=> 1.4.28
// 如果成功返回版本号信息即为已成功安装 Node 环境。
ログイン後にコピー

2. Jadeコマンドラインツールをグローバルにインストールします。 npm

rrree

を介して *.Jade ファイルを作成し、タスクを開始します。

4. Jade コマンド ライン ツールを使用して、jade ファイルを HTML ファイルにコンパイルしますJade コマンド ライン ツールの使用方法

jade を通じて Jade コマンド ライン ツールのパラメーターを表示できます。 help

npm install jade -g
// mac用户可能需要管理员权限,使用如下命令
sudo npm install jade -g
ログイン後にコピー

例:

jade --help
Usage: jade [options] [dir|file ...]
 Options:
  -h, --help     output usage information / 输出使用信息
  -V, --version   output the version number / 输出版本号信息
  -O, --obj <str>  javascript options object / 传输到 jade 文件中的数据对象
  -o, --out <dir>  output the compiled html to <dir> / 输出编译后的 HTML 到 <dir> 
  -p, --path <path> filename used to resolve includes / 在处理 stdio 时,查找包含文件时的查找路径
  -P, --pretty    compile pretty html output / 格式化编译 html 文件
  -c, --client    compile function for client-side runtime.js / 编译浏览器端可用的 runtime.js
  -n, --name <str>  The name of the compiled template (requires --client) / 编译模板的名字
  -D, --no-debug   compile without debugging (smaller functions) / 关闭编译的调试选项(函数会更小)
  -w, --watch    watch files for changes and automatically re-render / 监听文件改变并自动刷新编译结果
  --name-after-file Name the template after the last section of the file path (requires --client and overriden by --name)
  --doctype <str>  Specify the doctype on the command line (useful if it is not specified by the template) / 在命令行中指定文档类型(如果在模板中没有被指定)
 Examples:
  # 编译整个目录
  $ jade templates
  # 生成 {foo,bar}.html
  $ jade {foo,bar}.jade
  # 在标准IO下使用jade
  $ jade < my.jade > my.html
  # 在标准IO下使用jade
  $ echo 'h1 Jade!' | jade
  # foo, bar 目录渲染到 /tmp
  $ jade foo bar --out /tmp
ログイン後にコピー

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:
ノードフロントエンドテンプレートエンジンのJadeタグの使用に関する詳細な説明


nodeJSサーバーの作成と再起動操作コード共有

🎜🎜

以上がノードフロントエンド開発テンプレートエンジンJadeの利用手順を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

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

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Express を使用してノード プロジェクトでファイルのアップロードを処理する方法 Express を使用してノード プロジェクトでファイルのアップロードを処理する方法 Mar 28, 2023 pm 07:28 PM

ファイルのアップロードをどのように処理するか?次の記事では、Express を使用してノード プロジェクトでファイルのアップロードを処理する方法を紹介します。

Nodeのプロセス管理ツール「pm2」を徹底分析 Nodeのプロセス管理ツール「pm2」を徹底分析 Apr 03, 2023 pm 06:02 PM

この記事では、Node のプロセス管理ツール「pm2」について説明し、pm2 が必要な理由、pm2 のインストール方法と使用方法について説明します。皆様のお役に立てれば幸いです。

PIノードティーチング:PIノードとは何ですか? PIノードをインストールしてセットアップする方法は? PIノードティーチング:PIノードとは何ですか? PIノードをインストールしてセットアップする方法は? Mar 05, 2025 pm 05:57 PM

ピン張りのノードの詳細な説明とインストールガイドこの記事では、ピネットワークのエコシステムを詳細に紹介します - PIノードは、ピン系生態系における重要な役割であり、設置と構成の完全な手順を提供します。 Pinetworkブロックチェーンテストネットワークの発売後、PIノードは多くの先駆者の重要な部分になり、テストに積極的に参加し、今後のメインネットワークリリースの準備をしています。まだピン張りのものがわからない場合は、ピコインとは何かを参照してください。リストの価格はいくらですか? PIの使用、マイニング、セキュリティ分析。パインワークとは何ですか?ピン競技プロジェクトは2019年に開始され、独占的な暗号通貨PIコインを所有しています。このプロジェクトは、誰もが参加できるものを作成することを目指しています

PHP 電子メール テンプレート: 電子メールのコンテンツをカスタマイズしてパーソナライズします。 PHP 電子メール テンプレート: 電子メールのコンテンツをカスタマイズしてパーソナライズします。 Sep 19, 2023 pm 01:21 PM

PHP 電子メール テンプレート: 電子メール コンテンツのカスタマイズとパーソナライズ 電子メールの人気と広範な使用に伴い、従来の電子メール テンプレートでは、パーソナライズおよびカスタマイズされた電子メール コンテンツに対するユーザーのニーズを満たすことができなくなりました。 PHP プログラミング言語を使用して、カスタマイズおよびパーソナライズされた電子メール テンプレートを作成できるようになりました。この記事では、PHP を使用してこの目標を達成する方法を説明し、いくつかの具体的なコード例を示します。 1. 電子メール テンプレートを作成する まず、基本的な電子メール テンプレートを作成する必要があります。このテンプレートは HTM にすることができます

Angular と Node を使用したトークンベースの認証 Angular と Node を使用したトークンベースの認証 Sep 01, 2023 pm 02:01 PM

認証は、Web アプリケーションの最も重要な部分の 1 つです。このチュートリアルでは、トークンベースの認証システムと、それが従来のログイン システムとどのように異なるかについて説明します。このチュートリアルを終えると、Angular と Node.js で書かれた完全に動作するデモが表示されます。従来の認証システム トークンベースの認証システムに進む前に、従来の認証システムを見てみましょう。ユーザーはログイン フォームにユーザー名とパスワードを入力し、[ログイン] をクリックします。リクエストを行った後、データベースにクエリを実行してバックエンドでユーザーを認証します。リクエストが有効な場合、データベースから取得したユーザー情報を使用してセッションが作成され、セッション情報が応答ヘッダーで返され、セッション ID がブラウザに保存されます。対象となるアプリケーションへのアクセスを提供します。

シングルサインオンシステムとは何ですか? Nodejsを使用して実装するにはどうすればよいですか? シングルサインオンシステムとは何ですか? Nodejsを使用して実装するにはどうすればよいですか? Feb 24, 2023 pm 07:33 PM

シングルサインオンシステムとは何ですか? Nodejsを使用して実装するにはどうすればよいですか?次の記事ではnodeを使ってシングルサインオンシステムを実現する方法を紹介しますので、参考になれば幸いです。

PPTマスクを追加する方法 PPTマスクを追加する方法 Mar 20, 2024 pm 12:28 PM

PPTのマスキングについては、馴染みのない方も多いと思いますが、PPTを作成する際によく理解せず、自分の好きなものを作るために適当に作っている人が多いため、PPTのマスキングの意味が分からない、理解できないという人も多いと思います。 「このマスクが何をするのか知っています。そして、それが写真の単調さを軽減できることさえ知りません。学びたい友達は、来て学び、あなたの PPT 画像に PPT マスクを追加してください。単調さを減らしてください。」では、PPT マスクを追加するにはどうすればよいでしょうか?以下をお読みください。 1. まず、PPT を開き、空白の画像を選択し、次に [背景形式の設定] を右クリックして単色を選択します。 2. [挿入]をクリックし、ワードアートをクリックし、単語を入力します。 3. [挿入]をクリックし、[図形]をクリックします。

C++ テンプレートの特殊化が関数のオーバーロードとオーバーライドに及ぼす影響 C++ テンプレートの特殊化が関数のオーバーロードとオーバーライドに及ぼす影響 Apr 20, 2024 am 09:09 AM

C++ テンプレートの特殊化は、関数のオーバーロードと書き換えに影響します。 関数のオーバーロード: 特殊化されたバージョンでは、特定の型のさまざまな実装が提供されるため、コンパイラーが呼び出すことを選択する関数に影響します。関数のオーバーライド: 派生クラスの特殊バージョンは、基本クラスのテンプレート関数をオーバーライドし、関数呼び出し時の派生クラス オブジェクトの動作に影響を与えます。

See all articles