あなたのHTMLのレベルにトリック?
あなたが怠惰であるか好奇心が強いならば、あなたはビデオ版を見ることができます
なぜあなたは気にすべき？
なぜあなたは気にすべき？
最初の回は、それはクールで素敵だが、あなたがそれを学び、それを使用して取得するたびに開いているタグ、閉じるタグとすべてのそれらのブラケットを書くために多くの迷惑を開始するために使用されるHTMLを書く!
今、私はあなたに以下のコードで同じ結果(出力)を得るようにする方法を示します、それで、あなたはHTMLの冗長部分を書く必要はありません、しかし、重要なだけ!
それは素晴らしい（あなたはとても多くの時間を節約する！）
さあ！私たちにトリックを与える！
私はパグ、よく知られているテンプレートエンジンについて話しています!しかし、なぜ私はなぜ時間を失う理由を使用する必要があります尋ねることがあります.まず第一に、あなたは本当に新しい何かを学ぶ必要はありません、主な利点を見ましょう.
クリーナーコード
あなたが最初の手で書かれたイメージを見ることができるように、それはLoooooooootクリーナーと理解しやすいの下部にあるコード;これは多くのときにトンとコードのトンが適用されます.
より速い開発時間
あなたがより速くLoooooot(私はスニペットが存在するということを知っています)に行くタグ名を繰り返している時間を開いて、閉じている略奪のInstallのInstant.スナイペットImhoの代わりにMyChordクラス:D
もっとパワー
物事はここでは、JavaScriptのすべてのパワーを使用することができますパグでは、あなたが条件、ループ、ミックス、インポート他のパグファイルを使用することができます、レイアウトや詳細を拡張することはできません.
試してみましょう
あなたはそれを右にジャンプする場合でも、2番目のあなたはcodepen.ioを使用することができます無駄にせずに移動したい場合は、ウェブサイトを開き、行く準備が整いました!
ホームページでは、“スタートコーディング”ボタンをクリックし、それからHTMLの近くに左のコーグから、“HTMLのプリプロセッサ”の下の設定で“パグ”をクリックして
あなたが私のようなsassを使いたいならば(私の意見で、彼らは一緒に驚くべきです)、ペンセッティングの上で左の「CSS」声に入ってください、さもなければ、「CSS」の近くのCOGをクリックして、プリプロセッサとして「Sass」を選んでください.
テストしましょう：D
.simple__block
.simple__title
h1 This is a title
.simple__desc
p This is a description
スーパー高速と超簡単に見ることができます
いくつかのSASSコードのための時間は、私は絶対に私のsassコードを書くために私はパグコードをコピーしているとsass!😍️
.simple__block
background-color: blue
.simple__title
background-color: cyan
h1
.simple__desc
background-color: purple
p
これはcodepenバージョンです.
時間を試してローカル
確信しているし、それを直接彼らのPCにしようとする人のために今、我々はそれを行う準備が整いました.端末を準備します.
インストールするにはExpressでNodeを使用してローカルサーバーを作成します.でも.それをインストールする他の方法があります.
新しいフォルダを作成して起動します.指示に従ってください
パッケージをインストールする準備ができています.あなたには、例がnmpJsまたは彼らのウェブサイトpugJsまたはgithubのためにpugをインストールするために、多くの方法があります!
インストールコマンド“NPM I pug - save”をコピーして、Enterキーを押してEnterキーを押して待ちます.
時間は、ExpressJsのウェブサイトの内部に移動する前に、として“インストールを開始する”の下にインストールコマンドをコピーする
前にあなたの端末の中に入れて
コードへの時間！
高速にするには(この記事がExpressJSまたはノードについてではないので)ExpressJSのウェブサイトから得たこのコードをコピーしましょう.
const express = require('express');
const app = express();
const port = 5000;
app.set('view engine', 'pug');
app.get('/', (req, res) => {
res.send('Hello World!');
})
app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`);
})
私はそれのコード“アプリの行を追加しました”(“ビューエンジン”、“パグ”)は、明示的にあなたがHTMLの代わりにパグファイルを読むことをお知らせしましょう!
あなたのエディタを使用してプロジェクトを開く、私はVisual Studioのコードを使用します!
「index . js」という新しいファイルを作成し、コピーしたコードの中にペーストします.
今、“F 5”を押してサーバーを実行し、すべてが私たちの端末を実行しているかどうかを確認してください“http://localhost:5000で例アプリのリスニング”とメッセージを記録する必要があります.
ブラウザを開いて、こんにちは、単語を参照してくださいする必要がありますこのアドレスに入る!文字列: D
パグコードを書く準備ができて
下に新しいファイルを作成します.パグとその中にいくつかのパグコードの例を書く
.simple__block
.simple__title
h1= someStuff
.simple__desc
p This is a desc
あなたのインデックスに戻ってください.JSファイルを10行目にします.
サーバーを再起動し、すべてがうまく動作することがわかります
ボーナス
あなたのパグファイルをレンダリングする前にデータを渡すことができます
代わりに
res.render('home')
次のように書きます.
res.render('home', {
someStuff: 'Wow thats cool'
});
今すぐあなたの家に入る.パグファイルとPタグを変更
これから:
p This is a desc
これを:
p= someStuff
再起動し、魔法を参照してください(これはパグの機能ではありませんが)
スーパーメガボーナス
それは長い旅の男だった、私はすべてのこのようなものを書く必要があり、あなたのためにすべてを読む必要があった!(前後にジャンプする人は含まない)😅️)
では、反復の簡単な例を見てみましょう
最後のクラスを次のように変更します.
.simple__desc
p= someStuff
これを:
.simple__desc
-
const anotherVariable = 'some stuff';
let i = 0;
while i < 10
p This is a desc
- i++;
ONOOK今？
今このトリックを使用すると、多くの時間をsoooo保存されている、あなたが残っている時間で多分あなたは私の新しい購読することができるので、私は新しいし、サブを探していないかどうか😅️
閉じるこの動画はお気に入りから削除されています.または🤣️
Reference
この問題について(あなたのHTMLのレベルにトリック?), 我々は、より多くの情報をここで見つけました
https://dev.to/aspiiire/wanna-know-the-trick-to-level-up-your-html-1bh5
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
私はパグ、よく知られているテンプレートエンジンについて話しています!しかし、なぜ私はなぜ時間を失う理由を使用する必要があります尋ねることがあります.まず第一に、あなたは本当に新しい何かを学ぶ必要はありません、主な利点を見ましょう.
クリーナーコード
あなたが最初の手で書かれたイメージを見ることができるように、それはLoooooooootクリーナーと理解しやすいの下部にあるコード;これは多くのときにトンとコードのトンが適用されます.
より速い開発時間
あなたがより速くLoooooot(私はスニペットが存在するということを知っています)に行くタグ名を繰り返している時間を開いて、閉じている略奪のInstallのInstant.スナイペットImhoの代わりにMyChordクラス:D
もっとパワー
物事はここでは、JavaScriptのすべてのパワーを使用することができますパグでは、あなたが条件、ループ、ミックス、インポート他のパグファイルを使用することができます、レイアウトや詳細を拡張することはできません.
試してみましょう
あなたはそれを右にジャンプする場合でも、2番目のあなたはcodepen.ioを使用することができます無駄にせずに移動したい場合は、ウェブサイトを開き、行く準備が整いました!
ホームページでは、“スタートコーディング”ボタンをクリックし、それからHTMLの近くに左のコーグから、“HTMLのプリプロセッサ”の下の設定で“パグ”をクリックして
あなたが私のようなsassを使いたいならば(私の意見で、彼らは一緒に驚くべきです)、ペンセッティングの上で左の「CSS」声に入ってください、さもなければ、「CSS」の近くのCOGをクリックして、プリプロセッサとして「Sass」を選んでください.
テストしましょう：D
.simple__block
.simple__title
h1 This is a title
.simple__desc
p This is a description
スーパー高速と超簡単に見ることができます
いくつかのSASSコードのための時間は、私は絶対に私のsassコードを書くために私はパグコードをコピーしているとsass!😍️
.simple__block
background-color: blue
.simple__title
background-color: cyan
h1
.simple__desc
background-color: purple
p
これはcodepenバージョンです.
時間を試してローカル
確信しているし、それを直接彼らのPCにしようとする人のために今、我々はそれを行う準備が整いました.端末を準備します.
インストールするにはExpressでNodeを使用してローカルサーバーを作成します.でも.それをインストールする他の方法があります.
新しいフォルダを作成して起動します.指示に従ってください
パッケージをインストールする準備ができています.あなたには、例がnmpJsまたは彼らのウェブサイトpugJsまたはgithubのためにpugをインストールするために、多くの方法があります!
インストールコマンド“NPM I pug - save”をコピーして、Enterキーを押してEnterキーを押して待ちます.
時間は、ExpressJsのウェブサイトの内部に移動する前に、として“インストールを開始する”の下にインストールコマンドをコピーする
前にあなたの端末の中に入れて
コードへの時間！
高速にするには(この記事がExpressJSまたはノードについてではないので)ExpressJSのウェブサイトから得たこのコードをコピーしましょう.
const express = require('express');
const app = express();
const port = 5000;
app.set('view engine', 'pug');
app.get('/', (req, res) => {
res.send('Hello World!');
})
app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`);
})
私はそれのコード“アプリの行を追加しました”(“ビューエンジン”、“パグ”)は、明示的にあなたがHTMLの代わりにパグファイルを読むことをお知らせしましょう!
あなたのエディタを使用してプロジェクトを開く、私はVisual Studioのコードを使用します!
「index . js」という新しいファイルを作成し、コピーしたコードの中にペーストします.
今、“F 5”を押してサーバーを実行し、すべてが私たちの端末を実行しているかどうかを確認してください“http://localhost:5000で例アプリのリスニング”とメッセージを記録する必要があります.
ブラウザを開いて、こんにちは、単語を参照してくださいする必要がありますこのアドレスに入る!文字列: D
パグコードを書く準備ができて
下に新しいファイルを作成します.パグとその中にいくつかのパグコードの例を書く
.simple__block
.simple__title
h1= someStuff
.simple__desc
p This is a desc
あなたのインデックスに戻ってください.JSファイルを10行目にします.
サーバーを再起動し、すべてがうまく動作することがわかります
ボーナス
あなたのパグファイルをレンダリングする前にデータを渡すことができます
代わりに
res.render('home')
次のように書きます.
res.render('home', {
someStuff: 'Wow thats cool'
});
今すぐあなたの家に入る.パグファイルとPタグを変更
これから:
p This is a desc
これを:
p= someStuff
再起動し、魔法を参照してください(これはパグの機能ではありませんが)
スーパーメガボーナス
それは長い旅の男だった、私はすべてのこのようなものを書く必要があり、あなたのためにすべてを読む必要があった!(前後にジャンプする人は含まない)😅️)
では、反復の簡単な例を見てみましょう
最後のクラスを次のように変更します.
.simple__desc
p= someStuff
これを:
.simple__desc
-
const anotherVariable = 'some stuff';
let i = 0;
while i < 10
p This is a desc
- i++;
ONOOK今？
今このトリックを使用すると、多くの時間をsoooo保存されている、あなたが残っている時間で多分あなたは私の新しい購読することができるので、私は新しいし、サブを探していないかどうか😅️
閉じるこの動画はお気に入りから削除されています.または🤣️
Reference
この問題について(あなたのHTMLのレベルにトリック?), 我々は、より多くの情報をここで見つけました
https://dev.to/aspiiire/wanna-know-the-trick-to-level-up-your-html-1bh5
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
.simple__block
.simple__title
h1 This is a title
.simple__desc
p This is a description
.simple__block
background-color: blue
.simple__title
background-color: cyan
h1
.simple__desc
background-color: purple
p
確信しているし、それを直接彼らのPCにしようとする人のために今、我々はそれを行う準備が整いました.端末を準備します.
インストールするにはExpressでNodeを使用してローカルサーバーを作成します.でも.それをインストールする他の方法があります.
新しいフォルダを作成して起動します.指示に従ってください
パッケージをインストールする準備ができています.あなたには、例がnmpJsまたは彼らのウェブサイトpugJsまたはgithubのためにpugをインストールするために、多くの方法があります!
インストールコマンド“NPM I pug - save”をコピーして、Enterキーを押してEnterキーを押して待ちます.
時間は、ExpressJsのウェブサイトの内部に移動する前に、として“インストールを開始する”の下にインストールコマンドをコピーする
前にあなたの端末の中に入れて
コードへの時間！
高速にするには(この記事がExpressJSまたはノードについてではないので)ExpressJSのウェブサイトから得たこのコードをコピーしましょう.
const express = require('express');
const app = express();
const port = 5000;
app.set('view engine', 'pug');
app.get('/', (req, res) => {
res.send('Hello World!');
})
app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`);
})
私はそれのコード“アプリの行を追加しました”(“ビューエンジン”、“パグ”)は、明示的にあなたがHTMLの代わりにパグファイルを読むことをお知らせしましょう!
あなたのエディタを使用してプロジェクトを開く、私はVisual Studioのコードを使用します!
「index . js」という新しいファイルを作成し、コピーしたコードの中にペーストします.
今、“F 5”を押してサーバーを実行し、すべてが私たちの端末を実行しているかどうかを確認してください“http://localhost:5000で例アプリのリスニング”とメッセージを記録する必要があります.
ブラウザを開いて、こんにちは、単語を参照してくださいする必要がありますこのアドレスに入る!文字列: D
パグコードを書く準備ができて
下に新しいファイルを作成します.パグとその中にいくつかのパグコードの例を書く
.simple__block
.simple__title
h1= someStuff
.simple__desc
p This is a desc
あなたのインデックスに戻ってください.JSファイルを10行目にします.
サーバーを再起動し、すべてがうまく動作することがわかります
ボーナス
あなたのパグファイルをレンダリングする前にデータを渡すことができます
代わりに
res.render('home')
次のように書きます.
res.render('home', {
someStuff: 'Wow thats cool'
});
今すぐあなたの家に入る.パグファイルとPタグを変更
これから:
p This is a desc
これを:
p= someStuff
再起動し、魔法を参照してください(これはパグの機能ではありませんが)
スーパーメガボーナス
それは長い旅の男だった、私はすべてのこのようなものを書く必要があり、あなたのためにすべてを読む必要があった!(前後にジャンプする人は含まない)😅️)
では、反復の簡単な例を見てみましょう
最後のクラスを次のように変更します.
.simple__desc
p= someStuff
これを:
.simple__desc
-
const anotherVariable = 'some stuff';
let i = 0;
while i < 10
p This is a desc
- i++;
ONOOK今？
今このトリックを使用すると、多くの時間をsoooo保存されている、あなたが残っている時間で多分あなたは私の新しい購読することができるので、私は新しいし、サブを探していないかどうか😅️
閉じるこの動画はお気に入りから削除されています.または🤣️
Reference
この問題について(あなたのHTMLのレベルにトリック?), 我々は、より多くの情報をここで見つけました
https://dev.to/aspiiire/wanna-know-the-trick-to-level-up-your-html-1bh5
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
const express = require('express');
const app = express();
const port = 5000;
app.set('view engine', 'pug');
app.get('/', (req, res) => {
res.send('Hello World!');
})
app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`);
})
下に新しいファイルを作成します.パグとその中にいくつかのパグコードの例を書く
.simple__block
.simple__title
h1= someStuff
.simple__desc
p This is a desc
サーバーを再起動し、すべてがうまく動作することがわかります
ボーナス
あなたのパグファイルをレンダリングする前にデータを渡すことができます
代わりに
res.render('home')
次のように書きます.
res.render('home', {
someStuff: 'Wow thats cool'
});
今すぐあなたの家に入る.パグファイルとPタグを変更
これから:
p This is a desc
これを:
p= someStuff
再起動し、魔法を参照してください(これはパグの機能ではありませんが)
スーパーメガボーナス
それは長い旅の男だった、私はすべてのこのようなものを書く必要があり、あなたのためにすべてを読む必要があった!(前後にジャンプする人は含まない)😅️)
では、反復の簡単な例を見てみましょう
最後のクラスを次のように変更します.
.simple__desc
p= someStuff
これを:
.simple__desc
-
const anotherVariable = 'some stuff';
let i = 0;
while i < 10
p This is a desc
- i++;
ONOOK今？
今このトリックを使用すると、多くの時間をsoooo保存されている、あなたが残っている時間で多分あなたは私の新しい購読することができるので、私は新しいし、サブを探していないかどうか😅️
閉じるこの動画はお気に入りから削除されています.または🤣️
Reference
この問題について(あなたのHTMLのレベルにトリック?), 我々は、より多くの情報をここで見つけました
https://dev.to/aspiiire/wanna-know-the-trick-to-level-up-your-html-1bh5
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
res.render('home')
res.render('home', {
someStuff: 'Wow thats cool'
});
p This is a desc
p= someStuff
それは長い旅の男だった、私はすべてのこのようなものを書く必要があり、あなたのためにすべてを読む必要があった!(前後にジャンプする人は含まない)😅️)
では、反復の簡単な例を見てみましょう
最後のクラスを次のように変更します.
.simple__desc
p= someStuff
.simple__desc
-
const anotherVariable = 'some stuff';
let i = 0;
while i < 10
p This is a desc
- i++;
ONOOK今？
今このトリックを使用すると、多くの時間をsoooo保存されている、あなたが残っている時間で多分あなたは私の新しい購読することができるので、私は新しいし、サブを探していないかどうか😅️
閉じるこの動画はお気に入りから削除されています.または🤣️
Reference
この問題について(あなたのHTMLのレベルにトリック?), 我々は、より多くの情報をここで見つけました https://dev.to/aspiiire/wanna-know-the-trick-to-level-up-your-html-1bh5テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol