interface Web
js tutoriel
Explication détaillée de l'utilisation des balises Jade dans le moteur de modèles front-end du n?ud
Explication détaillée de l'utilisation des balises Jade dans le moteur de modèles front-end du n?ud
May 22, 2018 am 10:27 AM
Cette fois, je vous apporte une explication détaillée de l'utilisation de la balise Jade dans le moteur de modèles front-end Quelles sont les précautions lors de l'utilisation de la balise Jade dans le. node modèle frontal moteur, comme suit C'est un cas pratique, jetons-y un coup d'?il.
1. Déclaration du document
Quand on commence à écrire une page html, il faut d'abord rédiger la déclaration du document DOCTYPE. Maintenant, c'est généralement le cas. cas Ensuite, nous utilisons tous la méthode de déclaration de document HTML5, alors comment devrions-nous l'écrire en jade ?
Il existe deux fa?ons d'écrire des déclarations de document en jade?:
On peut écrire du doctype html directement dans le fichier jade
-
jade nous fournit une méthode d'écriture simple, (mais il semble que jade ne recommande pas cette méthode dans la nouvelle version après la mise à jour -_-||| )
Bien s?r, jade prend également en charge d'autres types de déclarations de documents par défaut, utilisez simplement doctype pour suivre les options suivantes. Par défaut, jade prend en charge?:
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 n'est pas sensible à la casse, donc les deux suivants ont le même effet?:
doctype?Default doctype?default
Par exemple?: si nous voulons écrire du XHTML 1.0 Déclaration de document stricte, vous pouvez écrire ainsi :
doctype?strict
Le résultat de la compilation est le suivant :
Copier le code Le code est le suivant :
2. Balises
La méthode d'écriture des balises en jade est très simple, c'est juste un mot.
doctype?html html ?head ?title ?body
Le code ci-dessus sera compilé en?:
<!DOCTYPE html> <html> ?<head> ?<title></title> ?</head> ?<body></body> </html>
jade utilise une indentation stricte pour distinguer le début et la fin des balises. La valeur par défaut est de 2 espaces pour indiquer l'indentation.
Si nous voulons écrire une étiquette avec du contenu, par exemple, si nous voulons écrire un titre, il suffit d'ajouter un espace après le mot de l'étiquette, puis de suivre le contenu.
h1?this?is?a?title. p?this?is?a?paragraph.
Le résultat de la compilation est?:
ceci est un titre.
ceci est un paragraphe.< ; /p>
Parfois, nous devons afficher du texte dans un format spécial ou pour améliorer la lisibilité du code, nous devons afficher l'effet suivant?:
1. 001
2. 002
3. 003
4. 004
Alors nous sommes dans jade Comment devons-nous écrire ? Ici, jade nous propose deux méthodes La première consiste à ajouter un | et un espace devant chaque ligne :
p ?|?1.?001 ?|?2.?002 ?|?3.?003 ?|?4.?004
La deuxième méthode est : après le nom de la balise Followed. par un . Ensuite, le contenu sous cette balise sera analysé en un segment de code par jade :
p. ?1.?001 ?2.?002 ?3.?003 ?4.?004
Maintenant, certains étudiants sont confus et confus. Quelle est la différence entre ces deux méthodes ? Ici, nous devons parler de mélange de balises. Si nous avons une telle exigence, nous devons ajouter une balise forte après 1 dans le code ci-dessus.
Tout d'abord, parlons du premier cas, de la fa?on dont nous l'écrivons :
p ?|?1.?001 ?strong?aaa ?|?2.?002 ?|?3.?003 ?|?4.?004
Si c'est la deuxième fa?on d'écrire, nous devons l'écrire comme ceci :
p. ?1.?001 ?<strong>aaa</strong> ?2.?002 ?3.?003 ?4.?004
Les résultats de la compilation sont les suivants?:
1. 001
aaa
2. 002
3. 003
4. 004
3. attribut de la balise et valeur d'attribut
h1 p et autres balises, nous écrivons généralement des attributs d'identification et de classe pour eux, alors comment devrions-nous écrire cela en jade?? La même syntaxe que le codage zen, il suffit d'écrire comme ceci?:
h1#id.class?this?is?a?title. p#j-text.text?this?is?a?paragraph.
Le résultat de la compilation est?:
ceci est un titre.
ceci est un paragraphe.
等等，那我要是想添加多個(gè) 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)簽后面加上小括號(hào)()，然后按照(屬性名=屬性值)的格式寫就好了，如果有多個(gè)屬性，中間以逗號(hà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.
說來說去還是這兩個(gè)屬性，煩了？那我們換一個(gè)吧：
a(herf="/index.html",?title="this?is?a?link.",?target="_blank",?data-uid="1000")?index.html
編譯結(jié)果為：
那么問題就來了，如果我們要寫一個(gè)單屬性應(yīng)該怎么寫？比如給表單元素添加 checked屬性：
input(type="checkbox",?name="all",?checked,?value="全選")
編譯結(jié)果為：
相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
推薦閱讀：
nodejs實(shí)現(xiàn)動(dòng)態(tài)html步驟詳解
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undress AI Tool
Images de déshabillage gratuites
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
échangez les visages dans n'importe quelle vidéo sans effort grace à notre outil d'échange de visage AI entièrement gratuit?!
Article chaud
Outils chauds
Bloc-notes++7.3.1
éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Comment supprimer un n?ud dans NVM
Dec 29, 2022 am 10:07 AM
Comment supprimer un n?ud avec nvm : 1. Téléchargez ? nvm-setup.zip ? et installez-le sur le lecteur C ; 2. Configurez les variables d'environnement et vérifiez le numéro de version via la commande ? nvm -v ? 3. Utilisez la commande ? nvm ? ; install" commande Installer le n?ud?; 4. Supprimez le n?ud installé via la commande "nvm uninstall".
Enseignement du n?ud PI: Qu'est-ce qu'un n?ud PI? Comment installer et configurer le n?ud PI?
Mar 05, 2025 pm 05:57 PM
Explication détaillée et guide d'installation pour les n?uds de pignon Cet article introduira l'écosystème de pignon en détail - n?uds PI, un r?le clé dans l'écosystème de pignon et fournir des étapes complètes pour l'installation et la configuration. Après le lancement du réseau de test de la blockchain pèse, les n?uds PI sont devenus une partie importante de nombreux pionniers participant activement aux tests, se préparant à la prochaine version du réseau principal. Si vous ne connaissez pas encore Pinetwork, veuillez vous référer à ce qu'est Picoin? Quel est le prix de l'inscription? PI Utilisation, exploitation minière et sécurité. Qu'est-ce que Pinetwork? Le projet Pinetwork a commencé en 2019 et possède sa pièce exclusive de crypto-monnaie PI. Le projet vise à en créer un que tout le monde peut participer
Comment utiliser Express pour gérer le téléchargement de fichiers dans un projet de n?ud
Mar 28, 2023 pm 07:28 PM
Comment gérer le téléchargement de fichiers ? L'article suivant vous expliquera comment utiliser Express pour gérer les téléchargements de fichiers dans le projet de n?ud. J'espère qu'il vous sera utile?!
Parlons de la fa?on d'utiliser pkg pour empaqueter des projets Node.js dans des fichiers exécutables.
Dec 02, 2022 pm 09:06 PM
Comment empaqueter le fichier exécutable nodejs avec pkg ? L'article suivant vous expliquera comment utiliser pkg pour empaqueter un projet Node dans un fichier exécutable. J'espère qu'il vous sera utile !
Une analyse approfondie de l'outil de gestion de processus de Node ? pm2 ?
Apr 03, 2023 pm 06:02 PM
Cet article partagera avec vous l'outil de gestion de processus de Node "pm2" et expliquera pourquoi pm2 est nécessaire, comment installer et utiliser pm2, j'espère qu'il sera utile à tout le monde !
Authentification basée sur des jetons avec Angular et Node
Sep 01, 2023 pm 02:01 PM
L'authentification est l'une des parties les plus importantes de toute application Web. Ce didacticiel traite des systèmes d'authentification basés sur des jetons et de leurs différences par rapport aux systèmes de connexion traditionnels. à la fin de ce didacticiel, vous verrez une démo entièrement fonctionnelle écrite en Angular et Node.js. Systèmes d'authentification traditionnels Avant de passer aux systèmes d'authentification basés sur des jetons, examinons les systèmes d'authentification traditionnels. L'utilisateur fournit son nom d'utilisateur et son mot de passe dans le formulaire de connexion et clique sur Connexion. Après avoir effectué la demande, authentifiez l'utilisateur sur le backend en interrogeant la base de données. Si la demande est valide, une session est créée à l'aide des informations utilisateur obtenues à partir de la base de données et les informations de session sont renvoyées dans l'en-tête de réponse afin que l'ID de session soit stocké dans le navigateur. Donne accès aux applications soumises à
Que faire si le n?ud npm gyp échoue
Dec 29, 2022 pm 02:42 PM
npm node gyp a échoué car les versions de ? node-gyp.js ? et ? Node.js ? ne correspondaient pas. La solution : 1. Videz le cache du n?ud via ? npm cache clean -f ? 2. Via ? npm install - ?. g n" Installez le module n?; 3. Installez la version "node v12.21.0" via la commande "n v12.21.0".
Un article pour parler du module de fichier fs et du module path dans Node (analyse de cas)
Nov 18, 2022 pm 08:36 PM
Cet article utilise le cas de la lecture et de l'écriture de fichiers et des chemins de traitement pour en savoir plus sur le module de fichiers fs et le module de chemin dans Node. J'espère qu'il sera utile à tout le monde !
