pug 相关问题

Pug(以前称为Jade)是Node.js的强大,优雅且功能丰富的模板引擎。

如何让 Hapi 使用嵌套文件夹中的模板?

我的模板文件夹和文件中有两个文件夹: 模板 登出 | - 索引.哈巴狗 登录 | - 索引.哈巴狗 我可以让引擎在一个或另一个文件夹中查找文件,但不能在

回答 1 投票 0

如何使用pug模板将Vite集成到现有的旧express应用程序中

我有一个旧代码,它使用 Express 并使用 pug 渲染 HTML。 它使用纯 js 文件并导入它们,如下所示: 脚本(类型='文本/javascript'src='js/test.js') 他们在这些 js 文件周围使用 jquery...

回答 1 投票 0

为什么真值会呈现为“值”?

我有: 输入(类型=“隐藏”名称=“x”值=pax?pax.C1a:未定义) 当传递给 response.render 的 pax 为 { C1a: true } 时,输出呈现为: 我有: input(type="hidden" name="x" value=pax?pax.C1a:undefined) 当传递给 pax 的 response.render 为 { C1a: true } 时,输出呈现为: <input type="hidden" name="x" value="value" /> 不应该是“真实”吗? 当pax.C1a为假时,渲染为: <input type="hidden" name="x" /> 来自 HTML5 规范: 许多属性是布尔属性。元素上存在布尔属性表示真值,不存在该属性表示假值。 如果该属性存在,则其值必须是空字符串或与该属性的规范名称匹配的 ASCII 不区分大小写的值,并且没有前导或尾随空格。 注意: 布尔属性不允许使用值“true”和“false”。 <input type="hidden" name="x" value="value" />就是我引用的第二段提到的第二种情况;第一种情况是 <input type="hidden" name="x" value />,两者都代表真正的布尔值。该注释明确说明了您认为应该发生的事情 (value="true") 应该 不 发生。 如果你真的想要value="true",你必须将其视为文本属性,并使用{ C1a: "true" }进行渲染。 如果您需要将布尔属性作为字符串处理,您可以说: input(type="hidden" name="x" value=pax?pax.C1a.toString():undefined) /> 每个文档:https://pugjs.org/language/attributes.html#boolean-attributes

pug
回答 2 投票 0

我可以将 pug 模板与 Angular 构建器 esbuild 一起使用吗?

在 Angular 17 中,我使用“builder”:“@angular-builders/custom-webpack:browser”。 现在我想使用esbuild buider。但我的项目目前使用 pug template alter 来实现 html。 我可以吗

回答 1 投票 0

如何在vue 3指令中获取上下文vnode

С无法从指令获取上下文 div(类=“表单”) 选择(名称=“名称”v-model=“form.input”v-select=“form.inputs... 无法从指令中获取上下文 <template lang="pug"> div(class="form") select(name="name" v-model="form.input" v-select="form.inputs") option(v-for="(option, key) in data" :value="key") | {{values[key].value}} </template> <script> export default { data() { return { data: [] } }, directives: { select: { mounted: function(el, binding, vnode) { console.log(vnode.context); // return undefined } } } } </script> vnode.context - 返回未定义 vnode.appContext - 返回 null 如迁移指南中所述: 在 Vue 2 中,必须通过 vnode 参数访问组件实例: bind(el, binding, vnode) { const vm = vnode.context } 在 Vue 3 中,实例现在是绑定的一部分: mounted(el, binding, vnode) { const vm = binding.instance } 因此: <script> export default { data() { return { data: [] } }, directives: { select: { mounted: function(el, binding) { console.log(binding.instance); } } } } </script>

回答 1 投票 0

顺风中断 Pug 文件的类名中的冒号符号

我正在 Vue 中创建一个项目,其中 HTML 部分是用 pug 编写的。当我添加顺风类时(例如在本例中我尝试添加类) .w-16.md:w-32.lg:w-48 既然这样...

回答 1 投票 0

Axios CDN 链接拒绝加载

我正在使用 axios CDN 链接,但它给出了此错误 拒绝加载脚本“https://unpkg.com/axios/dist/axios.min.js”,因为它违反了以下内容安全策略指令:&q...

回答 2 投票 0

点击pugjs时调用函数

我想在点击img作为pugjs代码时反转img 这是我的 JavaScript 代码 我想在点击img作为pugjs代码时反转img 这是我的 JavaScript 代码 <div class="cards" id="cards" data-status="off"> <img class="" src="assets/img/plus.png" alt=""> </div> <script> var cards= document.getElementById("cards"); cards.addEventListener("click", function(e) { var toggleStatus = cards.dataset.status; switch (toggleStatus) { case "on": cards.dataset.status = "off"; // change plus img to minus img break; case "off": cards.dataset.status = "on"; // change minus img to plus img break; } }, false); </script> 但我想将其作为 pugjs 代码。 我是 pugjs 的新手。 这是我的 pugjs 代码,但它是错误的。 .cards#cards(data-status="off" onclick="viewAll()") - var dataStatus = true; script. function viewAll() { if (dataStatus) { dataStatus = false; } else { dataStatus = true; } } if dataStatus img(src="assets/images/plus.png" alt="") else img(src="assets/images/minus.png" alt="") 有人可以帮我吗? 这个条件不能单独使用PugJs来实现,因为它的一般渲染过程很简单。 PugJs 将源代码编译为 JavaScript 函数,该函数根据您的数据返回渲染的 HTML 字符串。 要处理这个问题,您需要使用 Node.js 动态渲染内容。为了实现所需的条件渲染,您可以在 Node.js 中创建一个可重用的函数,该函数可以使用不同的数据集进行调用。

pug
回答 1 投票 0

通过pug表单提交数据时,req.body中为null

这是哈巴狗形式,正在将数据发送到请求的网址 form.form.form-user-data(action='/submit-user-data' method='POST') .form__group label.form__label(for='name') 名称 ...

回答 1 投票 0

`aws s3sync`如何确定文件是否已更新?

当我在终端中连续运行该命令时,它第二次不会同步。这太棒了!不应该。但是,如果我运行构建过程并以编程方式运行 aws s3 同步,连续...

回答 4 投票 0

Pug 无法读取数组,但仅限于迭代它时

我正在为我的大学课程开发一个小型 Web 开发项目,以 pug 作为视图引擎进行表达。我希望迭代一系列气象站,为每个气象站创建一条路线,

回答 1 投票 0

HTML 中的智能双引号显示:语法错误:意外字符 '“'

扩展base.pug 块脚本 脚本(src='/static/index.js') 块样式 风格 包括../static/style.css 包括../static/styleContact.css 块内容 div.容器 ...

回答 1 投票 0

我的主页正在运行,但联系人显示错误

扩展base.pug 块脚本 脚本(src='/static/index.js') 块样式 风格 包括../static/style.css 包括../static/styleContact.css 块内容 div.容器 ...

pug
回答 1 投票 0

在 Pug 中将变量与 Id 标签连接起来

我正在尝试使用 Id 和增量数创建动态变量。 乌尔 - for(var i = 0; i < 3; i++) li#id#{i} I expected to get li#id0 li#id1 ...

pug
回答 1 投票 0

如何使用控制器渲染的模块以及 Jade/Pug 模板作为 Jade/Pug 模板中事件处理程序的参数

我将此模块 naija 从控制器传递到模板,如下所示: res.render('testing', {title:"滤镜设置页面", 尼日利亚:奈贾 ...

回答 1 投票 0

包含垂直选项卡的玉石表单必须转换为 SideNav

JADE 的最后几行包含 md-tabs ,这些选项卡应该转换为 sidenav 选项卡。只需更改 css 即可转换为 sidenav 吗? 扩展../../../core/pronghorn/views/layout 块

回答 1 投票 0

Webpack 中应用的订单加载器是什么?

我正在尝试根据临时文件扩展名设置 .pug 文件的加载,因此它应该是默认扩展名。 { test: /\.vue.pug$/, /* ... */ } 部分与 Vue 框架相关...

回答 1 投票 0

Jade 内联条件

我正在尝试使用 Jade 模板引擎使数组中除第一个元素之外的所有元素都具有 CSS 类。 我希望我能这样做,但没有运气。有什么建议么? - 每个...

回答 7 投票 0

在express/connect中重新填充表单值

我刚刚启动了一个新的nodejs应用程序,它将包含大量用于创建和编辑/更新数据库值的表单。我的问题是:如果给定的数据是

回答 2 投票 0

使用jade Template引擎插入Meta

我要渲染 在我的索引页 Html 头中 这是正确的解决方案吗 元(名称=“视口”,内容=“宽度=设备-

回答 2 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.