开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

pug js 代码

Pug（原名Jade）是一种简洁的HTML模板引擎，它提供了一种更直观的方式来编写HTML代码。Pug使用缩进来定义代码块，从而避免了大量的尖括号，使得代码更加易读和维护。

基础概念

Pug的核心概念包括：

缩进：Pug使用空格或制表符来缩进代码块，而不是使用HTML标签。
混合（Mixins）：允许你定义可重用的代码块。
继承：允许你创建一个基础模板，并在其他模板中扩展它。
包含（Includes）：允许你将一个Pug文件插入到另一个文件中。
过滤器：允许你在Pug模板中使用其他类型的文本，如Markdown或CSS。

优势

简洁性：Pug代码比传统的HTML更加简洁，减少了大量的重复代码。
可读性：通过缩进而不是标签来定义结构，使得代码更加直观易懂。
可维护性：代码结构清晰，便于后期维护和更新。
灵活性：支持模板继承和混合，可以快速构建复杂的页面结构。

类型

Pug主要有以下几种类型：

文件：.pug文件是Pug模板的基本单位。
元素：HTML标签在Pug中被称为元素。
属性：元素的属性在Pug中以括号形式表示。
文本：文本内容直接写在元素内部。

应用场景

Pug广泛应用于以下场景：

Web开发：作为服务器端模板引擎，用于生成动态网页内容。
单页应用（SPA）：与前端框架如Vue.js或React结合使用，生成组件化的UI。
静态网站生成：与静态站点生成器如Gatsby或Hugo结合使用，生成静态网页。

示例代码

以下是一个简单的Pug模板示例：

doctype html
html(lang="en")
  head
    title Pug Example
    meta(charset="UTF-8")
    meta(name="viewport", content="width=device-width, initial-scale=1.0")
  body
    header
      h1 Welcome to Pug
    main
      p This is a paragraph written in Pug.
    footer
      p Copyright © 2023

这个模板将生成以下HTML代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Pug Example</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <header>
      <h1>Welcome to Pug</h1>
    </header>
    <main>
      <p>This is a paragraph written in Pug.</p>
    </main>
    <footer>
      <p>Copyright © 2023</p>
    </footer>
  </body>
</html>

常见问题及解决方法

缩进错误：Pug对缩进非常敏感，错误的缩进会导致编译失败。确保使用一致的缩进方式（通常是两个空格或一个制表符）。
属性语法错误：在Pug中，属性应该使用括号包裹，并且键值对之间用逗号分隔。例如：
属性语法错误：在Pug中，属性应该使用括号包裹，并且键值对之间用逗号分隔。例如：
混合和继承使用不当：确保在继承或包含文件时，路径正确，并且混合的定义和使用方式正确。

通过以上信息，你应该能够更好地理解和使用Pug模板引擎。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

pug

人心只能赢得，不能靠人馈赠——叶芝分享一个前端框架pug github地址：https://github.com/pugjs/pug 它可以以下面的方式编写html doctype html html...if (foo) bar(1 + 5); body h1 Pug - node template engine #container.col if youAreUsingPug...Pug is a terse and simple templating language with a strong focus on performance and powerful...id="container" class="col"> You are amazing Pug is a terse and simple...下面的代码: export const ReactComponent = props => pug` .wrapper if props.shouldShowGreeting

5423 0

Pug入门

Pug是一款健壮、灵活、功能丰富的HTML模板引擎,专门为 Node.js 平台开发。Pug是由Jade 改名而来。...是一种通过缩进（表示标签间的嵌套关系）的方式来编写代码的过程，在编译的过程中，不需要考虑标签是否闭合的问题。可以加快写代码速度，也为代码复用提供了便捷。...优点： 1、无需结束标签 2、强制缩进 3、代码复用和维护 4、标签写法与CSS相同搭建pug环境： 1、下载node.js和 npm 2、下载 pug , 命令:npm install pug-cli...baidu.com">百度 a(class='button', href='baidu.com') 百度等价于--> 百度 Js...'; a(href='/' + url) 链接 | | - url = 'https://example.com/' a(href=url) 另一个链接等价于--> pug-test.html

1.1K1 0

Pug迭代

两种主要的迭代方式： each 和 while 一、each 1、最简单的迭代 ul each val in [1, 2, 3, 4, 5] li=...

5081 0

Pug学习

理解 Pug是一款健壮、灵活、功能丰富的HTML模板引擎,专门为 Node.js 平台开发。Pug是由Jade 改名而来。...是一种通过缩进（表示标签间的嵌套关系）的方式来编写代码的过程，在编译的过程中，不需要考虑标签是否闭合的问题。可以加快写代码速度，也为代码复用提供了便捷。 2....标签：HTML 代码的树状结构 2. 属性：紧跟着标签写在括号里，用,隔开(不加逗号也是允许的)，class和id可以直接写在元素后面，例如#pug.pug表示的就是一个div标签 3....条件循环：if else 判断和 case 判断 7. mixin混入是一种允许您在 Pug 中重复使用一整个代码块的方法。...继承与扩展解决的是子文件和父文件之间的代码复用问题，子文件的代码可以覆盖和扩展父文件的代码 //父文件.pug block test 代码块1 //子文件.pug extends 父文件.pug

1.1K1 0

hexo主题集成pug

theme: simple-theme 外部执行一下hexo s启动项目试试打开localhost:4000 因为我们什么都没写，所以是白屏新建一个layout目录，下面放一个index.pug....container Hello World 发现我们的pug代码并未渲染这是因为我们没有安装pug插件导致的到主目录执行 cnpm i hexo-renderer-pug pug元素成功渲染

3111 0

Pug嵌入

</span> Js表达式嵌入 - var msg = "not my inside voice"; p This is #{msg.toUpperCase()} 等价于--> <

6401 0

Vue 中使用Pug

#hello a.link-button Link Link 易理解，同时极大的简约了我们的代码。...2 安装 2.1 下载 npm i -D pug pug-html-loader pug-plain-loader 或者 yarn add pug pug-html-loader pug-plain-loader...2.2 配置 // vue.config.js module.exports = { chainWebpack: config => { config.module.rule('...> 3 实践下面将拿出实际项目中的一些代码进行改造原代码 ..." @scrollReachBottom="loadMore" ref="waterfall"> 改造后 12行代码变成

1.2K1 0

Pug条件、分支条件

when 0 when 1 p 您的朋友很少 default p 您有 #{friends} 个朋友等价于--> 您的朋友很少 friends =0 ，在 Pug

1.9K2 0

Pug模板继承与拓展

Pug 支持使用 block 和 extends 关键字进行模板的继承 block代表一个代码块一、代码块的替换如下：便有三个代码块block scripts,block content,block...extends继承某个pug, 然后定义相同名称的代码块即可实现替换 extends layout.pug block scripts script(src='/jquery.js') script...pet.pug 在覆盖一个代码块的同时在该代码块内添加新的代码块 //- sub-layout.pug extends layout.pug //- 覆盖原有的content代码块，并添加了两个子代码块...下面代码实现了在代码块head里面添加了两个script //- page.pug extends layout.pug block append head script(src='/vendor.../three.js') script(src='/game.js')

1.2K1 0

jade(pug)学习笔记（待填充.......）

20171018 pug——文字内部嵌入结构比如：　　里边有一段内部文字的实例！... 要是用pug得这么写： a.href 　　| 里边有一段　　strong 内部文字　　| 的实例！是不是很恶心，这么写还老容易出错！

9616 0

Hexo启动页面显示extends includeslayout.pug block content include includesrecent-posts.pug include

Hexo更改主题后启动服务器，界面显如下字符: extends includes/layout.pug block content include includes/recent-posts.pug include

1.1K2 0

Vue进阶课堂之《从HTML到Pug》

或许你知道，有个东西叫emmet，它是解决了你写的时候多写的那些内容，但是并没有解决冗余的代码行数，更不要提在你没有完全熟练使用emmet前，脑子里面需要进行大量的预翻译！...那么是否有一种既能减少代码量，又能不做预翻译的方案呢，呐呐呐，Jade这个后端模板出现了，然后改名叫Pug了，现在Vue也支持这个语法，具体请往下看。...如何使用 1. npm下载包 npm i -D pug pug-loader 2. lang这里改成pug使用 pug'> 使用Pug、CoffeeScript、Sass...简单推算大约代码量节省30%，行数节省20%。如果公司绩效算行数或代码量的千万别用温馨提示： 1....的就用Vue的，Pug对于我们项目来说，最大的功能就是精简和整理代码。

6612 0

调试JS代码

记录下近期对JS代码的调试过程性能分析启动程序之后,打开google浏览器对应页面,按F12或者Ctrl+Shift+I进入开发者工具页面目前主要使用的功能有: Performance....性能评估,比如我想看下页面刷新的性能瓶颈所在,先点击按钮,然后进行页面操作,当页面刷新完成,再点击按钮,则会生成性能报告,可以看到资源消耗,JS代码的执行逻辑等 Sources....性能报告页面的部分,可以通过点击色块查看其所在的js代码文件,如点击则会跳转到功能栏,有了源文件就可以进行断点调试;这里注意部分js文件是压缩后的文件,建议手动修改程序替换成可读性更强的原始代码文件...查看程序的打印输出,比如我想知道某个函数的执行时间,可以在js代码中进行修改当js代码执行之后,可以在console输出中看到foo的执行时间 Network....代码使用for循环进行操作,也就是线性复杂度,计算耗时随数据量的增大而线性增大通过debug观察发现颜色数组会有不少重复的数值,而同样的输入会导致相同的输出,然后对整个数据的1M个点进行统计分析,发现重复率相当高

19K1 0

js代码规范

前言在js的代码开发中，我简单的总结出了以下规则，后面会陆续补充并且对规范进行分类。...js代码建议保存到后缀名.js的文件中 js代码不建议放在html中，原因有：不能被缓存，会增大网页文件的大小，可维护性不高，会影响页面的加载。...js吧任何表达式都当一条简单语句，会导致一些隐性的错误。如果自己没加分号，那么js解释器会自动添加分号，按照自己能读懂的断句。 9.2 复合语句也称为语句块，被包在大括号内部。...比如对象 var obj={} ;var arr=[] eval eval是最容易混乱使用的js函数，他可以执行内部入参的js函数或者表达式，可以直接解析变量。不建议使用。...尽量使用语法严格模式消除代码之中的不友好；代码运行更快；保证运行的安全；为新版本的js做好铺垫。 22.

8.9K3 0

JS代码混淆 | js 逆向系列

/UglifyJS/ https://github.com/LiPinghai/UglifyJSDocCN/blob/master/README.md 使用方法 npm install uglify-js...-g uglifyjs example.js -c -m --mangle-props -c 代码压缩 -m 代码混淆 --mangle-props 混淆属性名 -b 美化显示 // 原代码 const...JShaman https://www.jshaman.com/ JShaman 是国内公司开发的js代码加密商业产品免费版可以直接使用 // 原代码 const person = { age...，通过数组、字典等各种形式存储、拼接、替换等，最终进行还原，这里面没有利用到复杂的语法以及js 语言本身的特性，所以我们一点点解开也学不到什么；这个代码就不一样了，我们一步一步解开它，尝试去学习其中的思路...console.log(c) 这次我们设计三个返回值，分别是函数定义、数值、字符串看到这，我都蒙了，经过查询资料，我找到了两个维度的复杂的原因 JavaScript 中函数只能有一个返回值，你就说这玩意如果没学过 js

2.6K1 0

JS跳转代码_javascript跳转代码

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/170140.html原文链接：https://javaforall.cn

11.7K3 0

Koa服务端渲染

#### pug渲染 1.基本使用新键文件 template/1.pug 这个文件存放html模板示例代码 doctype html head meta(charset="utf-...8") title 测试标题 body html 新键pug1.js const pug = require('pug'); pug.renderFile('....渲染失败'); }else{ console.log(data) } })//渲染的文件运行pug1.js返回如下 js js const pug = require('pug'); pug.renderFile('.

1.1K1 0

在 Vue 项目中(vue-cli2,vue-cli3)使用 pug 简化 HTML 的编写

使用 pug 的原因: 使得 HTML 写起了来更加清晰和快捷用法: Vue 的用法没有变化: pug"> transition(name="sider")...pug-html-loader 在build/webpack.base.conf.js 的 module 中添加规则: module: { rules: [ {...vue-cli 3 配置: 由于 cli 升级到3了,相关配置发生了很大的改变,所以要和2的更改不同: 下载包: npm i -D pug pug-html-loader pug-plain-loader...和2比多了一个 pug-plain-loader 在 vue.config.js (如果没有就在根目录下新建一个) 添加代码: module.exports = { chainWebpack:...config => { config.module.rule('pug') .test(/\.pug$/) .use('pug-html-loader

2.9K2 0

那些最受欢迎的 Node.js 视图引擎

Node js 视图引擎就像 Laravel 中的 Blade。其最基本的定义是，视图引擎是帮助我们用比通常更短、更简单的方式编写 HTML 代码并重用的工具。...Node.js 视图引擎 EJS Pug (Formerly Jade) Handlebars Haml.js Nunjucks … 今天我将尝试上面的一些模板，看看哪一个更容易使用。开始吧！...Pug Pug - 以前名为 Jade，也是一个受欢迎的 Node.js 视图引擎项目。...的代码是如此清晰、简洁和易于理解。...使你的 JavaScript 代码简单易读 Node.js多线程完全指南 deno如何偿还Node.js的十大技术债实战！

2.4K2 0

Clipboard.js_js复制文本代码

Clipboard.js实现文本复制或者剪切到剪切板引用js文件 js"> 使用一 js.git"> <!

9.4K4 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭