- 综合排序
- 最热优先
- 最新优先
- 来自专栏快乐阿超
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 if (foo) bar(1 + 5); </script> </head> <body>
Pug - node template engine
You are amazing
Pug is a terse and simple
69830编辑于 2022-12-27来自专栏青梅煮码Pug学习
理解 Pug是一款健壮、灵活、功能丰富的HTML模板引擎,专门为 Node.js 平台开发。Pug是由Jade 改名而来。 命令行 将pug格式转化为HTML的时候输入命令pug -P xxx.pug 自动更新 pug -P -w xxx.pug 有自定义目录的需求，则需要设置-o参数 3. 结构语法 结构语法： 1. 命令行直接赋值 pug ./views/index.pug -P -w –obj “{‘text’:’pug’}” b. 新建一个JSON文件，写入{“text”:”study pug”}，然后通过命令行 pug ./views/index.pug -P -w -O . 继承与扩展 解决的是子文件和父文件之间的代码复用问题，子文件的代码可以覆盖和扩展父文件的代码 //父文件.pug block test 代码块1 //子文件.pug extends 父文件.pug
1.7K10编辑于 2023-03-13来自专栏Android干货Pug嵌入
普通变量直接嵌入 - var title = "On Dogs: Man's Best Friend"; - var author = "enlore"; - var theGreat = "转义!"; h1= title p #{author} 笔下源于真情的创作。 p 这是安全的：#{theGreat} 等价于-->
On Dogs: Man's Best Friend
enlore 笔下源于真情的创作。
这是安全的：<span&
73610发布于 2020-02-29来自专栏Android干货Pug迭代
两种主要的迭代方式： each 和 while 一、each 1、最简单的迭代 ul each val in [1, 2, 3, 4, 5] li= val 等价于-->
- 1
- 2
- 3
- 4
- 5
62110发布于 2020-02-29来自专栏Android干货Pug入门
Pug是一款健壮、灵活、功能丰富的HTML模板引擎,专门为 Node.js 平台开发。Pug是由Jade 改名而来。 优点： 1、无需结束标签 2、强制缩进 3、代码复用和维护 4、标签写法与CSS相同 搭建pug环境： 1、下载node.js和 npm 2、下载 pug , 命令:npm install pug-cli checked ) 等价于--> <input type="checkbox" name="agreement" checked="checked" /> 属性嵌入： - var url = 'pug-test.html '; a(href='/' + url) 链接 | | - url = 'https://example.com/' a(href=url) 另一个链接 等价于--> <a href="/<em>pug</em>-test.html
1.5K10发布于 2020-02-26来自专栏快乐阿超hexo主题集成pug
theme: simple-theme 外部执行一下hexo s启动项目试试 打开localhost:4000 因为我们什么都没写，所以是白屏 新建一个layout目录，下面放一个index.pug .container Hello World 发现我们的pug代码并未渲染 这是因为我们没有安装pug插件导致的 到主目录执行 cnpm i hexo-renderer-pug pug元素成功渲染
38310编辑于 2022-12-28来自专栏码农笔录Vue 中使用Pug
原文地址 https://www.aiprose.com/blog/126 1 介绍 pug 是一种前端模板引擎，原名 jade 可用来生成 HTML，它的写法类似于 CSS 这里先简单举几个例子 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('pug ') .test(/\.pug$/) .use('pug-html-loader') .loader('pug-html-loader') .end() } } 2.3 使用，注意要加 lang=“pug” <template lang="<em>pug</em>"> div.hello h1 Hello World </template
1.4K10发布于 2020-08-24来自专栏Android干货Pug条件、分支条件
when 0 when 1 p 您的朋友很少 default p 您有 #{friends} 个朋友 等价于-->
您的朋友很少
friends =0 ，在 Pug2.3K20发布于 2020-02-26来自专栏Android干货Pug模板继承与拓展
Pug 支持使用 block 和 extends 关键字进行模板的继承 block代表一个代码块 一、代码块的替换 如下：便有三个代码块block scripts,block content,block ') body block content block foot #footer p 一些页脚的内容 如替换其中的代码块 在一个新的pug文件中 ，首先要用 extends继承某个pug, 然后定义相同名称的代码块即可实现替换 extends layout.pug block scripts script(src='/jquery.js') script 在覆盖一个代码块的同时在该代码块内添加新的代码块 //- sub-layout.pug extends layout.pug //- 覆盖原有的content代码块，并添加了两个子代码块 sidebar 下面代码实现了在 代码块head里面添加了两个script //- page.pug extends layout.pug block append head script(src='/vendor
1.4K10发布于 2020-02-29来自专栏前端说吧jade(pug)学习笔记（待填充.......）
20171018 pug——文字内部嵌入结构 比如： 里边有一段内部文字的实例！ 要是用pug得这么写： a.href | 里边有一段 strong 内部文字 | 的实例！ 是不是很恶心，这么写还老容易出错！
1.1K60发布于 2018-05-17来自专栏大数据成长之路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.2K20发布于 2021-01-27来自专栏青梅煮码Vue进阶课堂之《从HTML到Pug》
如何使用 1. npm下载包 npm i -D pug pug-loader 2. lang这里改成pug使用 <template lang='<em>pug</em>'> 使用Pug、CoffeeScript、Sass ，前两者有共有的哲学，CoffeeScript说自己就是JavaScript； 同样的，Pug也就是HTML，你可以理解成语法糖。 写法： label input(type="checkbox") span 记住密码 .show-box 对比分析： 传统：95个字符，5行，3个结束标签整成Pug pug：54个字符，4行，没有结束标签 Pug其他功能这里记得Pug是后端模板起家，所以功能肯定不单单是简化语法这么简单，她也有变量、混合、过滤等等等等功能，但是实际上这些功能在使用中跟Vue功能重复，我们搭建项目主要还是Vue，所以能用Vue 的就用Vue的，Pug对于我们项目来说，最大的功能就是精简和整理代码。
92520编辑于 2023-03-13来自专栏前端说吧Gulp-自动化编译sass和pug文件
gulp的环境配置和安装：http://www.cnblogs.com/padding1015/p/7162024.html 这里就补充一篇gulpfile.js的配置，用于自动化编译sass和pug文件用 ： 1 var gulp = require('gulp'); 2 var pug = require('gulp-pug'); 3 var sass = require('gulp-sass') 9 // css 10 sassWatch: 'scss/**/*.scss', 11 css: 'css', 12 // html 13 pugWatch: 'views/*.pug ', 14 pugWatch2: 'views/**/*.pug', 15 html: 'html' 16 }; 17 18 gulp.task('pug', function () { 19 ); 没有热更新和浏览器自动刷新功能，只是适用于编译sass和pug，并且有持续监听、不断开gulp的功能、还有pug改名功能。
1.2K70发布于 2018-05-17来自专栏前端社区在 Vue 项目中(vue-cli2,vue-cli3)使用 pug 简化 HTML 的编写
使用 pug 的原因: 使得 HTML 写起了来更加清晰和快捷 用法: Vue 的用法没有变化: <template lang="<em>pug</em>"> transition(name="sider") pug-html-loader 在build/webpack.base.conf.js 的 module 中添加规则: module: { rules: [ { test:/\.pug$/, loader: "pug-html-loader" }, // 省略其他规则 ] } 好了启动或重启项目,即可开心的尝试了 vue-cli 3 配置: 由于 cli 升级到3了,相关配置发生了很大的改变,所以要和2的更改不同: 下载包: npm i -D pug pug-html-loader pug-plain-loader config => { config.module.rule('pug') .test(/\.pug$/) .use('pug-html-loader
3.1K20发布于 2019-03-21赋能 Gulp 构建流：使用腾讯云 EdgeOne 为 Pug 博客注入全球 CDN 与安全防护能力
这个项目并非简单的 HTML 页面，它基于 Gulp 构建，使用 Pug 作为模板引擎，并将所有源码编译成最终的静态文件。这正好可以用来检验 EdgeOne 对于带有构建流程的项目的支持程度。 如上图所示，这个命令就是： npm run build 执行这个命令后，项目会启动 Gulp 等构建工具，将我们源代码目录（例如 src）下的 Pug、Sass、ES6+ JavaScript 等文件， 所以我们这里的命令一定要填写的是npm run build，样修改后，构建流程会执行 gulp build 任务，这个任务会编译你的 Pug、CSS、JavaScript 等源文件，并将最终的静态网站文件输出到 所有内容在构建时已确定：在你执行 npm run build 的时候，你所有的源代码（比如 Pug、Sass、ES6 JavaScript）都被编译成了浏览器可以直接读取的最终静态文件。
40920编辑于 2025-08-17来自专栏Elastic Stack专栏Elasticsearch Query Rule 现已普遍可用
，前几个结果将按顺序返回：pug、puggle、chug和pugshire。 为了保持一致性，我们假设_id字段与json中的id字段匹配：[ {"id":"buddy_pug","breed":"pug","sex":"Male","age":3,"name":"Buddy" ,"good_with_animals":true,"good_with_kids":true}, {"id":"buster_pug","breed":"pug","sex":"Male","age 规则，如果查询字符串包含“pug”，它将固定所有的pug和pug混种。 mixes", "preferred_age": 5 } } }}上述查询将匹配“pug和pug混种”规则，并返回4个pug结果。
44820编辑于 2024-08-11来自专栏Akilarの糖果屋Sidebar Card Clock
静态资源包内的index.pug为butterfly_v3.5.1版本。其他版本改法详见教程正文。 /card_post_toc.pug + ! /card_post_toc.pug else ! /card_post_toc.pug + ! /card_post_toc.pug else !
1K20发布于 2021-06-11来自专栏云+分享Hexo博客 | 动态分类标签条，自动获取全站分类与标签进行展示
配置 3.1 新建PUG文件 首先是分类条，在themes/butterfly/layout/includes/处新建文件categoryBar.pug #category-bar .category-bar-items includes/pagination.pug else include . 在标签页引用：找到theme/butterfly/layout/tag.pug extends includes/layout.pug block content if theme.tag_ui /includes/mixins/post-ui.pug #recent-posts.recent-posts +postUI include includes/pagination.pug ' - ' + page.tag +articleSort(page.posts) include includes/pagination.pug 4.
2.2K20编辑于 2021-12-13来自专栏生如夏花绚烂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('. /template/1.pug',{ //参数数据 pretty:true,//美化 },(err,data)=>{ if(err){ console.log(' 渲染失败'); }else{ console.log(data) } })//渲染的文件 运行pug1.js返回如下 <! .js const pug = require('pug'); pug.renderFile('.
1.4K10编辑于 2022-09-14来自专栏青笔原创Nuxt.js 开发SSR(服务端渲染)Web应用
如下采用了 pug 模版和 stylus css 预处理器： 5.1 安装 pug 模版加载器 yarn add -D pug pug-plain-loader 5.2 安装 stylus css 预处理器 yarn add -D stylus stylus-loader 5.3 在 .vue 文件中使用 pug 和 stylus <template lang="<em>pug</em>"> .container hello 修改这个文件如下： <template lang="<em>pug</em>"> page xheader xmain nuxt xfooter </template> <script 我们分别创建如下： 9.1 componets/page.vue <template lang="<em>pug</em>"> .page slot </template> <style lang="stylus height 50px line-height 50px background: #fff </style> 9.3 componets/main.vue <template lang="pug
3.5K10发布于 2019-10-23
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号