如何在pug中设置动态类？
在pug中设置动态类可以通过使用条件语句和变量来实现。以下是一个示例：
- var dynamicClass = 'active'
div(class=dynamicClass) Hello, World!在上面的示例中，我们定义了一个变量dynamicClass并赋值为'active'。然后，我们在div标签的class属性中使用了条件语句class=dynamicClass来设置动态类。如果dynamicClass的值为'active'，则div标签将具有active类。
如果你想根据条件来设置不同的动态类，可以使用条件语句来实现。以下是一个示例：
- var isActive = true
div(class=isActive ? 'active' : 'inactive') Hello, World!在上面的示例中，我们定义了一个布尔变量isActive并赋值为true。然后，我们使用条件语句class=isActive ? 'active' : 'inactive'来根据isActive的值设置动态类。如果isActive为true，则div标签将具有active类；否则，将具有inactive类。
这是一个简单的示例，你可以根据实际需求和条件来设置更复杂的动态类。请注意，这里没有提及腾讯云相关产品和产品介绍链接地址，因为与动态类设置无关。
相关·内容
我想调用几个.pug文件，这样它就可以动态运行。但我得到了一个错误。 res.render('layout');
res.render('body');
res.render('footer'); 有人知道如何克服这个问题吗？我不能调用多个.pug文件
浏览 20提问于2019-09-29得票数 1
回答已采纳
2回答
我正在用快车试试看帕格
views/layout.pug
doctype html
html
head
title= title
link(rel="shortcut icon", href="favicon.ico", type="image/x-icon")
link(rel='stylesheet', href='/assets/application.css')
link(rel='stylesheet', href="assets/libs/
浏览 0提问于2017-04-25得票数 1
回答已采纳
1回答
pug-loader和pug-html-loader似乎都专注于将Pug模板预编译成HTML。我不想这样做，因为我需要一些只在呈现模板时才能获得的动态呈现功能，比如能够传递页面的标题，作为一个简单的例子。
但是，我想要做的是使用Webpack来处理Pug模板，以便浏览它们，找出它们使用了什么图像，并将这些图像加载到/dist文件夹中。我也希望能够使用url-loader来内联数据网址到Pug模板，这意味着他们将需要被复制和修改的过程中。
浏览 8提问于2017-10-12得票数 1
2回答
我正在构建一个web应用程序，它在客户端构建动态小部件。目前，我使用nodejs和pug作为服务器端模板库，我喜欢pug的简单性。
我希望在服务器上有一系列小的pug文件，客户端可以使用这些文件作为构建块来构造用户所需的小部件。
我尝试使用以前在这里找到的解决方案：
然而，这个解决方案看起来对我想要的东西来说太过分了。而且，看起来ezel项目不再被维护，它已经两年没有更新了，它仍然使用玉石( npm给了我很多错误)。
我只想能够在浏览器中在pug中构造我的动态小部件。这个页面似乎有我想要的东西：，特别是pug.renderFile('path/ to /file.pug'，选项
浏览 1提问于2017-03-26得票数 5
回答已采纳
要在pug模板中生成随机字符串，我想使用 javascript模块。
首先，我通过npm安装它，如下所示：
npm install random-string
然后在pug模板中，我使用了以下内容：
.site
.title
- var string = randomString({length: 20});
| #{string}
但是在编译文件时，我得到了这个错误：
randomString is not a function
浏览 1提问于2017-07-18得票数 2
我正在尝试从我的Webtask.io无服务器节点应用程序中的一个路由中呈现一个非常简单的Pug模板。以下是我的尝试：
'use latest';
import express from 'express';
import pug from 'pug'
const app = express();
app.set('view engine', 'pug');
...
app.get('/', (req, res) =>
{
var page = `
#mess
浏览 3提问于2018-10-04得票数 1
回答已采纳
1回答
我正在尝试使用pug on electron。
我有一个问题，我的第二个.pug文件没有正确呈现，它只是输出pug代码本身。
首先，我有一个由main.js加载的主pug文件
doctype
html(lang='en')
head
meta(charset='utf-8')
title HIMS
body
div(id="app")
script.
require('./index.js')
然后，index.js将只调用login.js
const fs = require(
浏览 9提问于2017-08-24得票数 2
我有以下配置用于我的pug文件...
{
test: /\.pug$/,
loaders: ["pug-html"]
}
现在我想添加一个使用url-loader加载的图像。我的结构是这样的
src
...
thing
thing.template.pug
thing.png
我想把png包含在我添加的pug文件中...
img(src="thing.png")
这个问题不能解决，所以我尝试了像img(src=require("thing.png"))这样的东西。这些都不起作用。我试着像这样添加
浏览 4提问于2017-01-05得票数 2
我正在尝试在pug中创建多个div，这是我的代码：
- for(var x = 0;x < 3;x++)
.background-line.line-x
如何使用变量"x"？
提前谢谢你。
浏览 0提问于2017-10-24得票数 0
下面的filePath预先是未知的，但是期望使用.ts文件：
const filePath: string | undefined = process.argv[2];
// check for the undefined value ...
// check for the valid typescript file path ...
现在，如何读取这个文件，转换它并获得导出(从已经转移的JavaScript模块)？例如，具有以下内容的文件：
export default {
key1: "VALUE_1",
key2: "VALUE_2"
浏览 1提问于2022-05-27得票数 0
回答已采纳
1回答
做完npm i -g jade之后，我可以通过CLI使用它，例如，jade --help工作。但是，在我用npm i -g pug安装了它的后继pug之后，运行pug --help或pug --version就给出了-bash: pug: command not found。
我注意到/usr/local/bin/jade在那里，但是在同一个文件夹中没有pug。
如果有关系的话，我在mac上用自制的。
浏览 1提问于2016-04-20得票数 5
回答已采纳
1回答
我目前的.pug代码看起来像这样： a.item
.ui.green.horizontal.label something
.ui.basic.grey.label
| {{ variable1 }} descrip1
.ui.basic.green.label
| {{ variable2 }} descrip2
.ui.basic.grey.label
| {{ variable3 }} descrip3 我想让各个ui元素的颜色基于变量中的值动态变化。例如，如果variable1 > 30，则ui元素将为
浏览 16提问于2020-05-02得票数 0
回答已采纳
我在用包裹和巴贝尔。对于客户端，我使用了React。在服务器端，我使用了。
以前，我通过路由器呼叫加载main.html文件，并将其作为res.sendFile(main.html)发送到客户端。它起了反应入口的作用。
但是现在我不得不使用一个模板(Pug)而不是main.html，因为我必须在客户端加载一个动态javascript。因此，我将main.html文件替换为main.pug文件，并通过包构建将其移动到dist文件夹。
现在，我正试图将动态内容加载到位于/dist文件夹中的pug中。可以这样做吗?因为一旦我构建了这个项目，/dist/main.pug "{}" 文件
浏览 2提问于2020-01-06得票数 0
当visual代码中有一个pug文件时，如何禁用查看.html文件？现在，在左边的文件资源管理器中，我看到了.html和.pug文件。
浏览 0提问于2019-07-12得票数 1
回答已采纳
如何在Jade/Pug中为a标签添加FontAwesome图标？我也想让它变得大胆。提前感谢！这是我尝试过的：
a(href="#toTop", class="fa fa-arrow-up", aria-hidden="true")
浏览 25提问于2017-12-19得票数 0
回答已采纳
1回答
想要使动态包含
示例- h1包含路径/#{object}或包含路径/+{object}+{a:true，b:11}，类似于上面的内容，如果有人知道如何处理pug中的Mixins，请给出一个包含的示例
浏览 2提问于2022-02-03得票数 0
是否可以访问内联脚本中传递给PUG的整个对象，而无需使用!{JSON.stringify(object)};进行转换？
// renderController.js
res.render('../events', {
events: {[ {...}, {...}, ... ]},
});
使用!{JSON.stringify(events)};将现有的日期对象转换为strings，而不需要将其转换回来。
通缉行为：
// events.pug
script.
console.log(events[0].date.toLocaleString())
浏览 5提问于2020-12-01得票数 0
回答已采纳
如何在循环中设置Pug中的动态类？我希望得到与下面相同的输出：
.main
span.player1
span.player2
span.player3
span.player4
我如何使用这个循环来实现上面的代码？
.main
each item in [1,2,3,4]
span.player+item
浏览 2提问于2017-12-02得票数 1
回答已采纳
2回答
我无法让我的dashboard.pug文件加载dashboard.css，但它加载了dashboard.js。两者都位于与dashboard.pug相同的文件夹中。
我已经使用应用程序使用快速静态正确的公用文件夹。
const publicpath=path.join(__dirname,'../public');
app.use(express.static(publicpath));
dashboard.pug-
doctype html
html
head
title Dashboard
script(src='/view
浏览 0提问于2019-06-16得票数 0
回答已采纳
1回答
我有一个pug模板index.pug为我的项目。我还制作了navbar.pug，footer.pug，sidenav.pug。这些文件包含在index.pug中。在服务器端，我使用了node.js，express.js和socket.io。现在我只想根据服务器响应更新navbar.pug文件。但当我尝试这样做时，我找到了一些解决方案。但它们都会刷新整个索引页。有没有什么方法可以帮助在不刷新整个页面的情况下更新网页的特定部分( PUG)？先谢谢你...
浏览 29提问于2019-09-04得票数 1
回答已采纳
1回答
包括来自其他视图文件夹pug混合
、、、、
我在我的express应用程序中设置了多个视图路径：
express.set('views',['/path1', '/path2', '/path3']);
当我渲染我的视图时，我希望在path1中包含pug文件形式的path2。
# /path2/index.pug
include path1/mixin.pug
我找不到解决这个问题的办法。
浏览 0提问于2019-02-01得票数 1
使用WebStorm的‘feature’特性和pug，我创建了一个pug模板，当pug模板被修改时，这个模板会自动构建到HTML文件中。出于外部原因，我需要将CSS嵌入到我的HTML文件中，这样我就可以在第三方电子商务平台中使用它。下面是我目前试图在PUG模板中嵌入CSS的尝试，因为pug不支持“require”，因此无法工作：
template.pug
- var jstscss = require('jstransformer')(require('jstransformer-scss'))
- var scss = `
@import "
浏览 1提问于2018-09-20得票数 4
1回答
我希望在目录中编译.pug文件，但不希望编译位于其中的子目录中的pug文件。我运行了pug.pug ./pug -o ./html命令，结果如下。
以前：
帕格
主要费用包括
.=‘3’>间接文件
2.二.帕格
html
后：
帕格
主要费用包括
.=‘3’>间接文件
2.二.帕格
html
主要费用包括
.=‘3’>间接文件
2.二.帕格
如您所见，命令在子目录中编译file1.pug (不想要的行为)，在html文件夹中创建包含的文件夹，并将编译的文件输出到include中。如何阻止pug在子目录中编译pug文件？，我不想单独针对文件。
提前谢谢。
浏览 1提问于2021-07-24得票数 1
1回答
我们基于表格生成输入字段。在这些过程中，标题(title，unit)不变，但可能有多个列具有相同的输入类型(最简单的是a，但也可能有动态svg)，但内容会有所不同。
我们希望动态生成tds内容，并在渲染时将其附加到模板中。
模板的输入为：
[{RowId: 'bla', RowUnit: '-', RowField: pug.compile('input')},
{RowId: 'blub', RowUnit: 'm', RowField: pug.compile('span')}]
模板如下所示
浏览 13提问于2019-08-06得票数 0
回答已采纳
下面是我想要的HTML：
<form class="{{cssClass}}" autocomplete="off">
<img src="{{item.img}}" />
</form>
当我把它变成帕格的时候，我得到了这样的结果：
form.{{cssClass}}(autocomplete="off")
img(src="{{item.img}}")
..。但这不是有效的pug语法，也不会解析回html。
问题是，实现这个HTML输出的正确的pug语法是什么？
浏览 10提问于2021-03-06得票数 0
回答已采纳
1回答
我想为Pug视图添加自定义模板函数。
为了简单起见，我创建了一个带有一个自定义函数uppercase的演示文件
const Koa = require("koa")
const views = require("koa-views")
const app = new Koa()
app.use(
views(__dirname + "/views", {
extension: "pug",
options: {
helpers: {
uppercase: str => st
浏览 0提问于2018-07-14得票数 2
回答已采纳
我有一个CRUD.js文件，用于将一些变量(包括数组)传递到一个名为list.pug的pug模板中： router.get('/', async (req, res) => {
let {projects, nextPageToken} = await db.list(10, req.query.pageToken);
let customers = ["John", "Mary", "Mark"];
res.render('projects/list.pug', {
projects
浏览 16提问于2021-04-08得票数 1
回答已采纳
我正在使用VueJs 2和Pug，我有以下代码：
.mb-3(v-for="(payments, index) in historyPayments" :key="index" no-body='')
b-btn(variant="default" block='' href='#' v-b-toggle.accordion2016="") // I need to change accordion2016 using a dynamic variable
| {{ in
浏览 4提问于2018-07-19得票数 1
回答已采纳
是否可以使用Webpack和Express在运行时动态地呈现模板文件(如Pug或工具栏)？
我的问题是当加载我的根页面(index.pug)时，html加载，但是没有加载任何资产。
示例：
app
.set('views', path.join(__dirname, 'views'))
.set('view engine', 'pug')
.use('/', function(req, res) {
res.render('index', {some: 'param
浏览 0提问于2019-04-20得票数 1
1回答
我正在与Pug一起工作，我想创建一些混合，以使整个项目中的一些可重用的组件。我想创建一些文件，只是为了让mixins分离和分类。当我想在我的主文件中包含带有混入的文件时，问题就出现了。例如：
body
block content
include ./components/mixins/_mixins.pug
+user_avatar('', '#', 'Daniel')
这不起作用(当我想包含来自单独文件的混合时)。我得到了这个错误：jade_mixins.user_avatar is not a func
浏览 0提问于2017-01-07得票数 7
回答已采纳
我正在使用带有视点模块的fastify来呈现pug模板：
Fastify.register(require('point-of-view'), {
engine: {
pug: require('pug')
},
templates: Path.join(__dirname,'templates'),
options: {
filename: Path.join(__dirname,'templates/layout.pug'),
globals: [
浏览 3提问于2017-11-22得票数 2
帕格医生说它可以转化
doctype html
html(lang="en")
head
title= pageTitle
script(type='text/javascript').
if (foo) bar(1 + 5)
body
h1 Pug - node template engine
#container.col
if youAreUsingPug
p You are amazing
else
p Get on it!
p.
浏览 2提问于2021-07-15得票数 2
1回答
我需要一些帮助才能将类添加到这个PUG迭代中，并添加到任意一个li项元素中。不知道我是不是走错了路。
each val, index in ['one', 'two', 'three']
li
a(href='#')= val
所需输出
<ul>
<li class="foo"><a href="#">One</a></li>
<li><a href="#">T
浏览 3提问于2017-01-31得票数 0
回答已采纳
我在views/administration/assets/fixed-assets.pug下的views文件夹中有一个pug模板
我的default.pug ( fixed-assets.pug从中扩展)位于根视图文件夹中。
当我试图呈现fixed-assets.pug视图时，它会在views/administration/assets/目录中寻找default.pug，而不是视图目录本身。
如果我将fixed-assets.pug放在视图目录而不是views/administration/assets/目录中，并相应地更新路由，一切都会很好。
我如何告诉express在视图目录中查找def
浏览 0提问于2019-01-26得票数 1
我使用splitChunks优化设置以及类似于so的chunkFilename属性chunkFilename: '[id].[chunkhash].js'为每个块提供一个哈希。是否有一种方法可以通过公共名称引用块文件，以便在散列更改时动态更新页面？
类似于：
manifest.json
{
vendorFile: venderFile.1902tjg.js
}
在那里我可以拉出那个文件并在模板文件中引用它。
index.pug
<script src=#{manfiest.vendorFile} />
浏览 7提问于2020-07-21得票数 0
我可以非常快地点击Photos1、Photos2、Photos3和Photos4菜单以及“$.get(.”)被发送到服务器4次。我需要禁用所有这些菜单后，任何一个被点击。环境: NodeJS，Express，Pug，Jquery，Pat
--------------DOM----------------------------------
// file = photos.pug
div#wrapper2
div#altnav
ul
include includes/altnav.pug
include includes/navjs.pug
浏览 3提问于2017-07-07得票数 1
回答已采纳
1回答
我理解Vue使用pug进行扩展；详细信息在这里：https://vuejsdevelopers.com/2017/06/11/vue-js-extending-components/ 但在Nuxt中，我找不到将pug模板extend或include到子模板中的方法。如何做到这一点呢？ 例如，这不起作用，因为我们在Nuxt中没有SurveyInputBase.pug文件，它是一个组件； <template lang="pug">
include SurveyInputBase.pug
</template>
<script>
expo
浏览 30提问于2019-06-26得票数 1
我正在学习使用gulp，我决定使用pug来编写我所有的html。 关键是它有这样的文件夹结构： src/pug
├── base
│ ├── mixins.pug
│ └── variables.pug
├── components
│ ├── footer.pug
│ ├── header.pug
│ ├── head.pug
│ └── template.pug
├── index.pug
└── views
└── about.pug 我希望gulp忽略所有非index.html的文件和views文件夹中的所有文件。 我使用下面的配置来完成这个任务： f
浏览 13提问于2021-07-31得票数 1
回答已采纳
我创建了一个browserify转换来将.pug文件转换为准备好的Ractive JSON对象。该操作需要将Pug文件转换为HTML，然后传递给Ractive.parse()函数。 在初始构建后不起作用的是，当我更改相对Pug文件时，browserify不会重新编译父文件，因此更改不会反映到包文件中。我正在使用watchify来观察文件的变化。 考虑以下hello.js文件： var x = require('./index.pug')
... 和index.pug文件： b hello
include ./a.pug 我可以在transform函数中获得["/pa
浏览 16提问于2020-07-29得票数 0
1回答
我正在尝试使用以下代码将Pug的主目录设置为Galp： function renderPug() {
return src('app/pug/pages/**/*.pug')
.pipe(pug({
pretty: true,
basedir: __dirname,
}))
.pipe(dest('build'))
.on('end', browserSync.reload);
} 但是在执行任务时，我得到了这个错误： ENOENT: no such file or direc
浏览 30提问于2020-09-08得票数 0
回答已采纳
2回答
我在我的项目中使用pugjs，我无法在pug模板中加载css文件。我使用以下代码
index.pug
link(rel="stylesheet", href="views/styles/products.css", type="text/css")
浏览 4提问于2017-10-20得票数 2
回答已采纳
2回答
如何使用Pug在Vue模板中正确添加动态属性名称？我使用以下模板：
<template lang="pug">
button(id=`button__${buttontype}`)
slot(name="text")
</template>
<script>
export default {
name: "Button",
data() {
return {
buttontype: "primary"
},
浏览 10提问于2022-01-01得票数 2
回答已采纳
1回答
我有一个快递应用程序使用帕格模板和包我的邦德勒。根据包，我可以有一个配置文件来存储我的局部变量pug.config.js，但是，我需要在运行时动态地将局部变量添加到我的模板中。有可能这样做吗？
这是我的档案：
index.pug
...
h1 #{isAuthenticated}
h1 #{env}
...
pug.config.js
module.exports = {
locals: {
env: process.env.NODE_ENV
}
}
app.js
const Bundler = require('parcel-bundler')
const b
浏览 0提问于2019-04-19得票数 4
回答已采纳
1回答
我想做这样的事
//- page-a.pug
extends layout.pug
block scripts
script(src='/jquery.js')
script(src='/pets.js')
block content
include ./layout2.pug
block article1
something something....
block article2
something something....
article1和article
浏览 3提问于2022-05-28得票数 2
回答已采纳
我正在做一个简单的数学游戏，想把一系列的问题传给Pug。如果用户答对了一个问题，我希望更新分数并显示一个新问题。然而，我不确定我如何通过Pug动态访问和更新网站… 在Express中传递值： return res.render('play', { questions: questionArray, score: 0}); Pug文件： p#question #{questions[score].num1} #{questions[score].operation} #{questions[score].num2}
p#score #{score}
input#an
浏览 13提问于2019-02-04得票数 0
回答已采纳
有没有办法在Pug/Jade模板(NodeJs/Express)中读取window.navigator.language？我试过这样的方法：
-var lang = window.navigator.language
但不起作用。或者更一般地说，可以在pug模板中读取浏览器语言吗？
浏览 0提问于2018-05-21得票数 1
2回答
Angular8中的动态渲染
、、、、
需求是根据服务器中的配置动态呈现样式。
示例：
Path :/customer?customerId=1
<link rel="stylesheet" href="customer1.css">
/customer?customerId=2
<link rel="stylesheet" href="customer2.css>
我决定采用角度通用的方法，通过查询服务器配置，帮助我在服务器端呈现html。
app.get('/customer:customerId'
浏览 30提问于2020-04-11得票数 0
回答已采纳
1回答
摘要：
我目前正在将Apache + PHP堆栈上的一个网站迁移到Node + Express，并想知道在新堆栈下动态注入元标记的最佳方法/最佳实践(如果有)。
详细信息：
在现有堆栈下，通过将PHP代码直接添加到HTML文件中，动态注入元标记。由于呈现是在服务器端完成的，所以标签被Facebook/Google+/任何web爬虫正确地解释。
在新的堆栈中，在做了一些研究之后，我遇到了两个选项：
使用像Pug (Jade)这样的模板引擎来用本地语言呈现HTML。(但是用Pug的语法重写现有的HTML似乎太过分了吗？)Pug能处理HTML吗，或者我必须考虑其他模板引擎，比如EJS？你建议我研
浏览 8提问于2017-01-18得票数 5
回答已采纳
我有一个pug文件，它从一个对象(客户)列表中动态填充一个下拉列表，但我似乎无法获得当前从中选择的值。代码如下： select(name="customerDropdown", id="customerDropdown" class="btn btn-success dropdown-toggle")
each customer in customers
option=customer
script.
var el = document.getElementById('customerDropdown
浏览 13提问于2021-03-18得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
