扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > html >基于Node.js模板引擎jade的示例分析
  • 550

0
分享到

基于Node.js模板引擎jade的示例分析

2024-04-02 19:04:59 550人浏览 安东尼
摘要

这篇文章主要为大家展示了“基于node.js模板引擎jade的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“基于node.js模板引擎jade的示例分析

这篇文章主要为大家展示了“基于node.js模板引擎jade的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“基于node.js模板引擎jade的示例分析”这篇文章吧。

环境准备：

全局安装jade: npm install jade -g

初始化项目package.JSON: npm init --yes

安装完成之后，可以使用 jade --help 查看jade的命令行用法

一、在项目目录下新建index.jade文件

inde.jade代码：

doctype html
html
  head
    meta(charset='utf-8')
    title
  body
    h4 欢迎学习jade

1，标签按照html的缩进格式写

2，标签的属性可以采用圆括号

3，如果标签有内容，可以直接写在标签的后面

然后在命令行用 jade -P index.jade 把index.jade文件编译成index.html文件，-P( 把代码整理成缩进格式的，如果不带这个参数，index.html就是压缩格式，不利于阅读)

编译之后的index.html代码：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
 </head>
 <body>
  <h4>欢迎学习jade</h4>
 </body>
</html>

二、class,id等其他属性与多行文本的书写

新建index2.jade文件,代码如下：

doctype html
html
  head
    meta(charset='utf8')
    title jade template engine
  body
    h2 jade template engine
    h2 jade template engine
    h2 jade template engine
    h2 jade template engine
    div#box.box1.box2(class='box3')
    #abc.box1.box2.box3
    h4.box1.box2(class='abc def')
    a(href='Http://www.taobao.com',
    target = 'blank') 淘宝
    input(type='button', value='点我')
    br
    p.
      1,this is
      <strong>hello</strong>
      2,test
      3,string
    p
      |  1, this is
      strong hello
      |  2, test
      |  3, test string

执行编译命令：jade -P <index2.jade> ghostwu.html 把index2.jade编译成ghostwu.html文件，编译之后的代码如下：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf8">
  <title>jade template engine</title>
 </head>
 <body>
  <h2>jade template engine</h2>
  <h2>jade template engine</h2>
  <h2>jade template engine</h2>
  <h2>jade template engine</h2>
  <div id="box" class="box1 box2 box3"></div>
  <div id="abc" class="box1 box2 box3"></div>
  <h4 class="box1 box2 abc def"></h4><a href="http://www.taobao.com" rel="external nofollow" target="blank">淘宝</a>
  <input type="button" value="点我"><br>
  <p>
   1,this is
   <strong>hello</strong>
   2,test
   3,string
  </p>
  <p> 1, this is<strong>hello</strong> 2, test
    3, test string
  </p>
 </body>
</html>

1，div#box.box1.box2(class='box3') 这种写法是emmet的写法 #就是id属性 点(.)就是class属性 括号也是属性写法

2，#abc.box1.box2.box3，全面没有给元素标签名称，默认就是给div标签加上这些属性

3，多行文本的两种写法

p.

1,this is
<strong>hello</strong>
2,test
3,string

多行文本第1种写法：p标签后面要跟一个. 里面用原始的html标签写法

p

| 1, this is
strong hello
| 2, test
| 3, test string

多行文本第2种写法： 文本前面用竖线 ( | )，标签后面跟内容

三、注释

jade模板代码：

doctype html
html
  head
    meta(charset='utf8')
    title jade模板引擎学习-by ghostwu
  body
    h4 单行注释
    // div.box.box2 这是一段div
    h4 不会编译到html文件的注释
    //- div#box.box2.box3
    h4 块注释,也叫多行注释
    //- 
      input(type='checkbox', name='meinv', value='仙女') 仙女
      input(type='checkbox', name='meinv', value='御姐') 御姐
    h4 这里不是注释
    input(type='checkbox', name='meinv', value='仙女')
    | 仙女
    input(type='checkbox', name='meinv', value='御姐')
    | 御姐

编译之后:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf8">
  <title>jade模板引擎学习-by ghostwu</title>
 </head>
 <body>
  <h4>单行注释</h4>
  <!-- div.box.box2 这是一段div-->
  <h4>不会编译到html文件的注释</h4>
  <h4>块注释,也叫多行注释</h4>
  <h4>这里不是注释</h4>
  <input type="checkbox" name="meinv" value="仙女">仙女
  <input type="checkbox" name="meinv" value="御姐">御姐
 </body>
</html>

1，单行注释

// div.box.box2 这是一段div

2，只在jade中注释，不会被编译到html文件

//- div#box.box2.box3

3，块注释( 多行文本注释 )，被注释的内容要另起一行

4，checkbox后面的显示文字部分 要注意，不要挨着属性的后面，要另起一行，写在竖线的后面

四、jade模板实战菜单

doctype html
html
  head
    meta(charset='utf8')
    title jade模板引擎学习-by ghostwu
    style.
      * { margin : 0; padding: 0; }
      li { list-style-type: none; }
      a { text-decoration: none; color: white; }
      #nav { width:980px; height: 34px; margin:20px auto; line-height:34px; background:#800;}
      #nav li { float:left; }
      #nav li.active { background:red; }
      #nav li:hover { background:#09f; }
      #nav li a{ padding: 5px 10px; }
  body
    div#nav
      ul
        li.active
          a(href='javascript:;') 首页
        li
          a(href='javascript:;') 玄幻小说
        li
          a(href='javascript:;') 修真小说
        li
          a(href='javascript:;') 都世小说
        li
          a(href='javascript:;') 科幻小说
        li
          a(href='javascript:;') 网游小说

编译( jade index.jade -P -w )之后的效果: -w: 实时监控文件的修改，保存之后立刻刷新结果，也就是现代前端开发中很流行的热加载技术

基于Node.js模板引擎jade的示例分析

五、解释变量

doctype html
html
  head
    meta(charset='utf8')
    - var title = 'jade模板引擎学习-by ghostwu';
    title #{title.toUpperCase()}
    style.
      * { margin : 0; padding: 0; }
      li { list-style-type: none; }
      a { text-decoration: none; color: white; }
      #nav { width:980px; height: 34px; margin:20px auto; line-height:34px; background:#800;}
      #nav li { float:left; }
      #nav li.active { background:red; }
      #nav li:hover { background:#09f; }
      #nav li a{ padding: 5px 10px; }
  body
    div#nav
      ul
        li.active
          a(href='javascript:;') 首页
        li
          a(href='javascript:;') 玄幻小说
        li
          a(href='javascript:;') 修真小说
        li
          a(href='javascript:;') 都世小说
        li
          a(href='javascript:;') 科幻小说
        li
          a(href='javascript:;') 网游小说

#{}： 可以解释变量, toUpperCase():变量转大写

把json文件的数据在编译的时候传递到模板,

新建data.json文件数据

{
"content" : "跟着ghostwu学习jade"
}
index2.jade文件模板:
doctype html
html
  head
    meta(charset='utf8')
    - var title = 'jade模板引擎学习-by ghostwu';
    title #{title.toUpperCase()}
  body
    h4 #{content}

编译命令：jade index2.jade -P -O data.json -O 指定一个json文件，把json文件的数据传递到模板

编译后的结果：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf8">
  <title>JADE模板引擎学习-BY GHOSTWU</title>
 </head>
 <body>
  <h4>跟着ghostwu学习jade</h4>
 </body>
</html>

以上是“基于Node.js模板引擎jade的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网html频道！

--结束END--

本文标题: 基于Node.js模板引擎jade的示例分析

本文链接: https://lsjlt.com/news/79960.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 基于Node.js模板引擎jade的示例分析
    这篇文章主要为大家展示了“基于Node.js模板引擎jade的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“基于Node.js模板引擎jade的示例分析...
    99+
    2024-04-02
  • 基于Node.js模板引擎教程-jade速学与实战1
    环境准备： 全局安装jade: npm install jade -g 初始化项目package.json: npm init --yes 安装完成之后，可以使用 jade --help 查看jade的命令...
    99+
    2022-06-04
    实战 模板 引擎
  • SpringBoot+Thymeleaf基于HTML5现代模板引擎的示例分析
    这篇文章主要介绍了SpringBoot+Thymeleaf基于HTML5现代模板引擎的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。开始使用1.引入依赖SpringB...
    99+
    2023-05-31
    springboot thymeleaf html5
  • springboot中Thymeleaf模板引擎的示例分析
    这篇文章给大家分享的是有关springboot中Thymeleaf模板引擎的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。模板引擎springboot我们目前是以jar包的形式打包，实际上我们之前是打成w...
    99+
    2023-06-29
  • node前端模板引擎Jade之标签的写法分析
    这篇文章主要为大家展示了“node前端模板引擎Jade之标签的写法分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“node前端模板引擎Jade之标签的写法分析...
    99+
    2024-04-02
  • nodejs前端模板引擎swig的示例分析
    这篇文章主要为大家展示了“nodejs前端模板引擎swig的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“nodejs前端模板引擎swig的示例分析”这...
    99+
    2024-04-02
  • javascript模板引擎实例分析
    本篇内容主要讲解“javascript模板引擎实例分析”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“javascript模板引擎实例分析”吧! ...
    99+
    2024-04-02
  • Node.js的路由、EJS模板引擎、GET和POST请求实例分析
    本篇内容介绍了“Node.js的路由、EJS模板引擎、GET和POST请求实例分析”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！1、路由官方...
    99+
    2023-07-02
  • js模板引擎art template数组渲染的示例分析
    这篇文章主要介绍js模板引擎art template数组渲染的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！什么是art-templateart-template 是一个简约...
    99+
    2024-04-02
  • node模板引擎Jade的安装和使用方法
    这篇文章主要讲解了“node模板引擎Jade的安装和使用方法”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“node模板引擎Jade的安装和使用方法”吧！随着...
    99+
    2024-04-02
  • 基于JavaScript写一款EJS模板引擎
    目录1. 起因2. 基本语法实现3. Function函数4 with5. ejs语句6. 标签转义1. 起因 部门最近的一次分享中，有人提出来要实现一个ejs模板引擎，突然发现之前...
    99+
    2024-04-02
  • PHP7引擎的示例分析
    小编给大家分享一下PHP7引擎的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！      PHP7将在2015年12月正式发...
    99+
    2023-06-14
  • JavaScript引擎的示例分析
    这篇文章主要介绍JavaScript引擎的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！JavaScript引擎是专门处理JavaScript脚本的虚拟机，通常附在网页浏览器上。主页浏览器JavaScript...
    99+
    2023-06-20
  • 解构 Node.js 模板引擎：从基础到精通
    ...
    99+
    2024-04-02
  • 基于SSM 集成 Freemarker模板引擎的方法
    FreeMarker简介 FreeMarker是一个用Java语言编写的模板引擎，它基于模板来生成文本输出。FreeMarker与Web容器无关，即在Web运行时，它并不知道Serv...
    99+
    2024-04-02
  • 如何基于SSM集成Freemarker模板引擎
    这篇文章主要为大家展示了“如何基于SSM集成Freemarker模板引擎”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何基于SSM集成Freemarker模板引擎”这篇文章吧。FreeMark...
    99+
    2023-06-28
  • 基于MySQL中存储引擎与日志说明的示例分析
    这篇文章主要介绍基于MySQL中存储引擎与日志说明的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！1.1 存储引擎的介绍1.1.1 文件系统存储文件系统：操作系统组织和存取数...
    99+
    2024-04-02
  • Python 模板引擎的注入问题分析
    这几年比较火的一个漏洞就是jinjia2之类的模板引擎的注入，通过注入模板引擎的一些特定的指令格式，比如 {{1+1}} 而返回了 2 得知漏洞存在。实际类似的问题在Python原生字符串中就存在，尤其是P...
    99+
    2022-06-04
    模板 引擎 Python
  • node.js基础的示例分析
    这篇文章给大家分享的是有关node.js基础的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。什么是NodeJSJS是脚本语言，脚本语言都需要一个解析器才能运行。对于写在H...
    99+
    2024-04-02
  • Node.js 模板引擎的内幕：剖析机制，识破玄机
    ...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作