我在用食品店给帕格打针。我让它在标签/注释中注入到一个pug文件中，但它是在html上。如何以pug语法输出？
var gulp = require('gulp');
var svgstore = require('gulp-svgstore');
var inject = require('gulp-inject');
var pug = require('gulp-pug');
gulp.task('default', function () {
var svgs = gulp
.sr
浏览 21提问于2016-09-09得票数 1
我习惯于给模板加下划线，并且我能够通过调用console.log(obj)直接在下划线模板中控制台记录上下文对象。在pug模板中也有同样的可能吗？如果是，我该如何访问这个对象？
如果没有，为什么没有，什么是调试pug模板的好方法？
谢谢!
浏览 0提问于2017-09-10得票数 2
我已经编写了包含以下内容的pug-file： img(src=require("../../assets/icons/icon.png")) 并尝试通过使用下一个Webpack配置将其构建为由webpack创建的html： module: {
rules: [
{
test: /\.pug$/i,
use: {
loader: 'pug-loader',
options: {
pretty: true
},
浏览 105提问于2021-05-01得票数 0
回答已采纳
1回答
我必须遍历由[{ title: '', desc: '', svg: '' }, ...]组成的对象数组。因为SVG代码太大，我不想用大量的SVG代码来干扰我的.pug文件。
有什么可以让我从另一个JS文件导入此Array并使用它，而不需要在其中输出/生成数组来编译html，就像PUG中的普通inlie JS一样：
someMagicImport data.js
each feature in data.features
li= feature.title
数据文件：data.js
const features = [
{ title:
浏览 4提问于2021-07-17得票数 0
回答已采纳
下面是我的代码： img(src=require('/images/menu/img.svg')) 我需要的图像是在dist文件夹使用webpack。 {
test: /\.pug$/,
loaders: ['html-loader?attrs=img:src',
'pug-html-loader?{"pretty":true,"exports":false}'
]
},
{
test: /\.(png|jpe?g|svg)$/i,
use: [{
浏览 13提问于2019-10-04得票数 0
随着Jade向Pug的过渡，目前还没有Pug插件。问题是我们的.jade文件扩展名变成了.pug，这是IDE无法识别的。
我们如何在Intellij (或其他Intellij )中使用pug？
浏览 15提问于2016-04-11得票数 2
回答已采纳
1回答
我是第一次接触帕格。我使用JSON文件来存储pug文件中使用的数据。这是我的数据结构：
{
"nav": {
"titles": [
"location",
"reservations",
"accomodations",
"amenities"
],
"icons": [
"img/sprite.svg#icon-location2",
"img/sprit
浏览 6提问于2018-01-29得票数 0
回答已采纳
1回答
所以我使用Angular 2和pug作为模板，使用一个小的邮件订阅表单作为一个组件。我希望这个组件将表单值(电子邮件)作为@Output发送，这样我的AppComponent就可以使用方法中的值来实际订阅用户。
这个时事通讯组件的输出可以通过使用pug中的getter来访问：
newsletter-form((onSubscribed)="subscribeMail($event)")
这是完美的，我可以在应用程序中获得值，除了我直接将这个NewsletterComponent从应用程序中取出，将其放入pug mixin中，作为页脚。
所以现在AppComponent不能再抓取
浏览 0提问于2016-11-29得票数 0
我有个混血儿。Mixin用于创建块，并将其作为参数传递给任何图像名称。
mixin img({imageSrc: ""} = {})
.img(src="./img/" + imageSrc + ".jpg")
因此，我希望webpack要么把这个图像放在dist/img/中，要么处理，然后用它的base64格式替换这个路径。
由于我需要在sass和pug中保存相对路径，所以我使用url-loader。所以我当前的帕格和图像配置如下所示：
module: {
rules: [{
test: /\.pug$/,
loader
浏览 0提问于2019-10-23得票数 0
1回答
我有以下输出项目结构：
img
...
portfolio
masttech
index.html
index.html
...
index.html
和以下来源项目结构：
components
...
Portfolio
img
...
Masttech
img
...
index.js
template.pug
style.sass
index.js
template.pug
style.sass
Index
img
...
浏览 0提问于2018-12-22得票数 4
回答已采纳
当我访问另一个页面时，图像、徽标和图标没有显示，但是当我回到主页时，图像显示得很完美
在这个项目中，我使用了pug模板引擎和express.js。
下面的是项目文件夹和文件的图像
链接下面的是主页的图像
图像、徽标和图标显示得很完美，但在登录和注册页面上，我遇到了图像问题
链接下面的是登录和登录页面的图像。
在此页面上，图像不显示Problem!
下面的是express.js代码
const express = require("express");
const app = express();
const port = 80;
const path = require(
浏览 1提问于2021-11-30得票数 1
回答已采纳
1回答
我刚接触专业的Web开发(尤其是Pug/Jade)，我想知道是否有一种方法可以使用以数字开头的短格式id/类名称。
例如，<div class="row">就是.row
但是我不太确定如何对div使用类名做同样的事情，比如：
<div class="row uniform 50%">或<div class="8u 12u$(small)">。
我可以直接使用div(class="row uniform 50%")，但我想知道是否有一种很好的方法来做到这一点。执行.\-8u.\-12u$(xsma
浏览 0提问于2017-09-10得票数 1
在尝试使用方括号表示法时，我似乎在访问来自mixin的值时遇到了问题。我有以下设置：
// in webpack plugins
new HtmlWebpackPlugin({
hash: true,
template: './assets/template/about.pug',
filename: 'about-us.html',
inject: true,
page: 'about',
locals
浏览 5提问于2019-08-17得票数 0
我的JavaScript是在我的样式之前加载的，这会导致跳转和奇数加载。
这是我的演示：
如何在JavaScript文件通过webpack运行之前加载样式/css文件？我尝试了setTimeout函数，它可以工作，但这是一个临时解决方案，这是解决这个问题的最佳方法吗？
webpack档案: webpack.dev.js
const path = require("path")
const webpack = require("webpack")
const HTMLWebpackPlugin = require("html-webpack-plugin&
浏览 0提问于2018-07-06得票数 8
回答已采纳
1回答
我使用Webpack 2作为我的投资组合网站，但它不是一个SPA -因此，意图不是输出到我的捆绑JS所有的东西。
我有一些.pug、.scss和.js文件的入口点。就像这样：
entry: {
app: [
path.resolve(__dirname, 'src/pug/app.pug'),
path.resolve(__dirname, 'src/js/app.js'),
path.resolve(__dirname, 'src/scss/app.scss')
]
},
output: {
path: pa
浏览 0提问于2017-04-15得票数 0
回答已采纳
目前，我在我的主pug文件中包含了一个svg作为外部pug文件。因为我有多个向量(不同的文件)，所以我想知道是否有一个选项可以更改JavaScript中的include的源代码。
这是我的pug结构
.services_description
figure
include tools/jade_includes/components/svgs/vision_1
浏览 0提问于2018-03-21得票数 1
我使用require的SVGs不显示。
在我的终端中，svg资产被发出，路径在我的html中被正确设置。
<img src="/images/brand-illustration.f20767e375d3094978f5cc5c9726d0a6.svg">
但是，SVG不会显示其他格式，比如jpg或png。我试着打开原始的svg文件，它确实有效。当我检查发出的svg资产并在浏览器中加载它时，比如：localhost:8080/images/brand-illustration.f20767e375d3094978f5cc5c9726d0a6.svg，我得到了这个pa
浏览 1提问于2020-12-14得票数 3
我一直在做一个用PUG编写的项目，但在我对代码的最后一次修改中，我现在从PUG CLI解析器中得到了语法错误:意想不到的令牌。
mixin hexagonLabelContainer(divClass,transKey,transValue,locked,buttonDetails)
div(class=`hexagon-label-container${divClass ? ` ${divClass}` : ''}`)
+trueHexagon(locked)
block
if !buttonDetails
浏览 24提问于2020-05-11得票数 1
回答已采纳
我正在尝试使用Pug创建具有数据集属性的块。问题是，当我在页面上包含它们时，它们里面有文本NaN (如下图所示)。我怎么才能修复它？
下面是我的组合
mixin products(src, head, price)
.favorites__block&attributes(attributes)= data-filter
.favorites__image
img(src=src, alt="").favorites__img
.favorites__text
span.favorites__title #{head}
浏览 12提问于2017-06-30得票数 0
回答已采纳
考虑以下文件系统：
帕格
测试1.帕格
测试2.帕格
部分数
Paral1.pug
带着吞咽任务
gulp.task('pug', () => {
return gulp.src('pug/*.pug')
.pipe(pug())
.pipe(gulp.dest('dist'))
});
即使我们只编辑test1.pug，test1.pug和test2.pug都将被编译。如果要将任务更改为
gulp.task('pug', () => {
return gulp.src('pug/*.pug&#
浏览 1提问于2018-05-04得票数 3
我正在尝试根据发送到API的请求来呈现svg图像。然后，应用程序接口会响应一个.svg文件，我正尝试在我的应用程序中呈现该文件。在react中将文件作为元素添加似乎不起作用。我正在使用create-react-app和静态导入的svg文件。下面是我的代码：
const preview = fetch('route to the file')
.then((res) => res)
return pug`
div.creator__preview {preview}
`
我认为重要的是要注意到，由于某种原因，不使用pug会给我一个错误，但我猜这只是我注意到的一
浏览 12提问于2020-06-05得票数 0
1回答
我对Jade / Pug相对来说是个新手，我在混合饮料上遇到了一些麻烦。我使用玉文档来创建以下内容，这是在我使用Codekit编译时工作的。
Mixin:
mixin svg(svg_file, svg_id, svg_class, svg_title)
svg(class="#{svg_class}",aria-hidden='true', title="#{svg_title}")
use(xlink:href="img/sprites/#{svg_file}##{svg_id}")
实例：
+svg("m
浏览 1提问于2017-01-03得票数 0
我正在学习CSS课程，已经厌倦了手工输入类似的HTML结构，所以我连接了pug模板和webpack-dev服务器来服务它。
注意：我的入口点是.scss文件，而不是.js
我有两个问题：
( a)只有来自css的资产被加载到构建文件夹中，但是.pug模板中的.pug属性中引用的图像和svg被忽略了。
( b)浏览器重新加载在webpack-dev-server中不起作用
我的webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plu
浏览 1提问于2019-04-26得票数 1
1回答
pug.compiler.js的代码是：
/**
* Pug Utilities
*/
const {compileFile} =require('pug');
/**
*
* @param {String} relativeTemplatePath Pug template name
* @param {Object} [data] Object
* @returns {String} HTML
*/
export function compile(relativeTemplatePath, data){
let absoluteT
浏览 4提问于2021-05-19得票数 0
我正在进行一个项目，在这个项目中我使用Pugjs作为模板引擎。webpack四岁时是个打手。
当我更改.pug文件中的任何内容时，我必须手动重新运行编译器。
关于如何设置它以便编译器在编辑文件之后运行，有什么帮助吗？
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');
const Min
浏览 0提问于2018-11-20得票数 1
回答已采纳
我有一个函数，当我点击画布中的一个圆圈时，可以在鼠标向下添加一个图像。现在，每次我点击圆圈，一个新的图像被添加，这不是我想要的。我想要某种切换功能，以便在第二次单击时移除图像，第三次添加一个新的，以此类推。
我目前的职能如下：
cirkel1.on('mousedown', ()=>{
var imgURL = 'https://i1.wp.com/nypost.com/wp-content/uploads/sites/2/2020/04/pugs-coronavirus.jpg';
var pugImg = new Image();
pugI
浏览 0提问于2021-02-16得票数 0
回答已采纳
2回答
包裹-加入svg雪碧
、、、
同事们，我正在尝试Parcel作为webpack项目建设者的替代方案，我很喜欢它，但是有两个我仍然无法克服的问题(下面是启动构建的链接- 和)：
1)在程序集下的webpack下，我使用svg -sprite-加载器创建了svg精灵，在打开主体svg后立即添加了这样的符号：
在包程序集中没有这样的插件，我试着安装，但是它没有编译单独的sprite (至少我在文档中没有找到这样的解决方案)。因此，就目前而言，我正在以包裹文档中描述的方式插入svg (我在项目中使用了pug )：
svg
use (href = "../../ icons / facebook.svg
浏览 3提问于2021-11-16得票数 0
1回答
当我尝试使用svg作为具有相对路径的背景时，Webpack无法解析svg
image background-image: url('./checkmark.svg');
webpack给我‘无法解决’的错误
但是绝对路径是可以的。
background-image: url(C:\Users\leo\Desktop\project\hotel\src\components\checkbox-list\__menu\checkbox-list__checkbox\checkmark.svg);
实际上我的配置规则是：
module: {
rules: [{
tes
浏览 55提问于2021-05-19得票数 0
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
我试图在我的webpack 5配置中添加一个HMR，但得到了一个严重的错误。第一次它可以正确编译，但当涉及到代码更改后的重新编译时-它使用HookWebpackError: Cannot read property 'updatedChunkIds' of undefined中断。如果我删除hot: true选项-一切都正常工作。 我的配置： const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-we
浏览 30提问于2021-01-10得票数 6
回答已采纳
这也许是个很愚蠢的问题，但我找不到任何办法让它发挥作用。
随着npm包名称最近从玉改为帕格，我已经转到我的项目中的所有.jade文件到.pug -根据包的要求。
这已经引起了一个棘手的问题-玉的语法没有突出显示在.pug文件。此外，我也找不到在.pug扩展文件中添加玉石编辑体验的选项。
有人想出办法让它起作用吗？
浏览 2提问于2016-05-26得票数 4
回答已采纳
我不能让混音与pug一起工作。
模板文件：
row
.col-sm-6.col-md-4.col-lg-8.pagination-centered
form
input.form-control(type='text', placeholder='What do you need?', required='')
p
select.form-control(name='city', placeholder='City', required=''
浏览 0提问于2016-09-14得票数 0
2回答
我试图用pug语法在html页面上显示一个svg图标，但不起作用
这是代码
span.icon
svg(width="24px", height="24px")
use(xlink:href="../../../images/svg/glass.svg")
浏览 0提问于2018-03-29得票数 0
1回答
我正在为角11应用编写单元测试。在这个项目中，我使用的是.pug而不是.html。
我试过：
但没有起作用。
测试正在运行，但呈现的pug只是一个文本，而不是适当的html。生成将文件从pug转换为html。在webpack配置中增加了帕格装载机。
"dependencies": {
"ng-cli-pug-loader": "^0.2.2",
}
"devDependencies": {
"pug": "^2.0.4",
"pug-loader": "^2.
浏览 4提问于2021-04-15得票数 0
1回答
我有以下包含svg文件的mixins。 mixin gift_icon
svg ..
mixin leat_icon
svg ..
mixin pyramid_icon
svg .. 在我的index.pug文件中。我正在尝试通过循环获取mixins之上的内容。 .grid-container
-
grid_items = [
{icon: +leaf_icon, title: "Title 01"},
{icon: +gift_icon,
浏览 23提问于2019-09-09得票数 1
回答已采纳
1回答
我在我的项目中使用类星体，我想使用我的svg图标与q切换，，它已经足够给出直接的路径，但我的svg图标没有出现。下面是我的代码示例。
template(lang="pug")
q-btn-toggle.my-custom-toggle(v-model="secondModel" color="white" text-color="primary" :options="toggleOption" size="sm")
数据
toggleOption: [
{ l
浏览 8提问于2022-06-15得票数 0
回答已采纳
2回答
我是第一次使用pug，正在尝试弄清楚如何使用npm pug-bootstrap，这样我就可以使用他们的布局了。
我npm安装了jade-bootstrap和pug-bootstrap，但在文档中找不到如何在我的index.pug文件中引用它们的封面引导布局。
我已经有了server.js文件，并且可以将html呈现到我的本地端口上。我尝试将cover.pug页面复制到我的index.pug页面中，但不起作用。
我假设我必须调用它，但我不知道如何调用。如何从PUG-Bootstrap调用我的布局？
浏览 1提问于2018-01-31得票数 1
使用jade/pug模板在编译时内联和在带有文本的标记内包含外部文档是一种方法吗？
例如，如下所示：
p paragraph text content with #[span.icon @include path_to_file/icon.svg] inline svg thrown into the html document
但不是这个解决方案：
p paragraph text content with #[span.icon #[svg #[use(href='path_to_file/icon.svg')]]]
我知道后者可以工作，但我正在寻找一种不使用use标记或外
浏览 3提问于2016-11-12得票数 0
1回答
我正在向pug模板传递一个url img.img_pattern(src= '#{url}'+'/pattern.svg' alt='pattern') 但这是行不通的。有人知道如何将变量传递给src吗？
浏览 41提问于2021-07-12得票数 2
回答已采纳
我有以下文件夹结构：
-project
-images
-logo.png
-views
-layout.pug
在layout.pug文件中，我试图引用在project/images/logo.png找到的图像，但使用相对路径的尝试失败了。
img(src="project/images/logo.png" alt="Project Logo")
img(src="../images/logo.png" alt="Project Logo")
img(src="./images/l
浏览 5提问于2018-07-19得票数 0
回答已采纳
1回答
我的flutter代码没有显示SVG。我在main.dart中设置了package:flutter_svg/flutter_svg.dart，在dependencies中设置了flutter_svg: ^0.22.0。在那之后，我运行flutter pug get，他不会显示错误。
final String wayMainLogo = 'assets/images/test.svg';
.................................
Row(
children: [
浏览 3提问于2021-09-14得票数 0
2回答
我会使用SVG作为背景，并能够通过css方式改变颜色。所以在搜索之后，我找到了这个帖子，但是我不确定在我的mixin中把svg url放在哪里。
我的出发点是：
$imagedir:'../images/'; // definir ici le chemin vers le dossier image
@mixin backgroundSVGandColor($filename,$color:red) {
background-image: url('data:image/svg+xml;utf8,<svg xmlns='#{$imagedir}#{
浏览 2提问于2018-03-06得票数 5
我有只像这样的小狗：
extends layout.pug
block a
- var x = 'test'
//- stuff
block b
//- ..... stuff
效果很好。
但是，当我试图移动- var x为block a和block b，我失败了。
我试过这个：
extends layout.pug
- var x = 'test'
block a
//- stuff
block b
//- ..... stuff
上面写着：
只有命名块和混合体才能出现在扩展模板的顶层。
这是：
- var x
浏览 5提问于2021-08-03得票数 0
回答已采纳
我正在编写一个小型NodeJS/Express应用程序。我将pug设置为其模板引擎：
const app = express();
app.set('view engine', 'pug');
app.set('views', __dirname + "/public/views");
app.use(express.static(__dirname + '/public/static'));
当调用res.render()以发送HTML时，这种方法工作得很好：
app.get('/', func
浏览 2提问于2017-10-19得票数 1
回答已采纳
1回答
在Vue单文件组件中使用VS代码是否可以支持Pug中的折叠块？这就是：
<template lang="pug"
...
</template>
浏览 9提问于2022-03-09得票数 1
回答已采纳
我尝试使用express和pug作为模板引擎来提供静态文件，但不知何故，我的资产无法加载
我的文件路径：
+front
+views
+login
index.pug
+images
+js
+css
...
server.js
下面是我的服务器代码：
app.use(express.static('front'));
app.set('views', './front/views')
app.set('view engine', 'pug')
ro
浏览 0提问于2020-03-02得票数 0
我想将内容哈希添加到我的webpack配置中生成的图像中。这些文件是通过散列输出的，但我不确定如何将这些文件插入到我的html中。用pug和HtmlWebpackPlugin生成的Html。
Webpack.config.js的相关部分：
{
test: /\.(jpeg|jpg|png|gif)$/,
use: [
'file-loader?name=images/[name].[contenthash:4].[ext]',
{
loader: 'i
浏览 13提问于2020-08-13得票数 0
我正试图把我的注意力集中在gulp和现代JavaScript捆绑上。
应用程序非常简单：
向用户显示html页面，用户必须检查几个单选按钮。
然后用户提交他的选择，点击一个按钮。
在选择提交时，必须解析JSON文件，以便显示20个可能的html页面中的一个
我有以下(简化)结构：
dist/
index.html
src/
scripts/
main.js
modules/
dispatchForm.js
styles/
index.scss
浏览 3提问于2020-10-20得票数 1
回答已采纳
2回答
我试图使用Pug根据来自另一个.js文件的数据生成一个数据列表。我的问题是如何让Pug读取这个javascript对象。
我现在有一个wizardSpells.js文件，用于处理以下数据：
// wizardSpells.js
const wiz1 = {};
wiz1['Affect Normal Fires'] = {'school': 'Alteration'};
wiz1['Alarm'] = {'school': 'Abjuration, Evocation'};
wiz1['Ar
浏览 4提问于2021-10-30得票数 1
回答已采纳
因此，在我的pug模板中，我有： img(src="../img/myimage.png", alt="image") 我将此图像导入到我的脚本中。它确实会使用正确的名称和散列将文件移到assets/files文件夹，但不会更新输出HTML文件中的src属性。它是这样的： <img src="../img/myimage.png" alt="image"> 下面是module.rules： module: {
rules: [
{
test: /\.(html)$/,
浏览 5提问于2019-10-17得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
