pug模板不包括样式表
Pug模板是一种高效、灵活的模板引擎，用于生成HTML代码。它不包括样式表，主要用于处理HTML结构和动态数据的渲染。
Pug模板具有以下特点和优势：
- 简洁易读：Pug使用缩进和简洁的语法，使模板代码更易读和维护。
- 可嵌套：Pug支持嵌套结构，可以方便地创建复杂的HTML布局。
- 动态数据绑定：Pug支持动态数据绑定，可以通过变量和表达式来渲染模板中的内容。
- 代码重用：Pug支持模板的继承和包含，可以实现代码的重用和模块化开发。
- 强大的控制流：Pug提供了条件判断、循环和迭代等控制流语句，可以根据不同的条件生成不同的HTML代码。
Pug模板适用于各种场景，包括但不限于：
- 网页开发：Pug可以用于生成静态网页或动态网页的HTML结构，方便快速地构建网页界面。
- 前端框架：Pug可以与各种前端框架（如Vue.js、React等）配合使用，实现动态数据绑定和组件化开发。
- 邮件模板：Pug可以用于生成邮件模板，方便地生成符合邮件标准的HTML代码。
- 服务器端渲染：Pug可以在服务器端生成HTML代码，用于实现服务器端渲染（SSR）的应用。
腾讯云提供了云计算相关的产品和服务，其中与Pug模板相关的产品是腾讯云的云服务器（CVM）和云函数（SCF）。云服务器可以用于部署和运行Pug模板生成的网页应用，而云函数可以用于实现Pug模板的动态数据渲染和生成。
更多关于腾讯云云服务器和云函数的信息，请访问以下链接：
相关·内容
1回答
我将我的Sf2版本更新为2.6。并为引导带取下捆绑包。但是现在我所有的引导样式都是无效的。从这里我如何理解引导程序只与表单一起工作？
浏览 5提问于2015-01-15得票数 0
回答已采纳
1回答
我的字体导入不工作在"internet-cafe/index.html“中，而是在"index.html”中工作。
请帮帮忙
我现在在styles.sass的工作：
@import url("../webfonts/ubuntu_regular/stylesheet.css");
文件夹结构：
网吧
index.pug
index.html
样式
styles.sass
网页
ubuntu_regular stylesheet.css
index.pug
index.htm
浏览 3提问于2017-03-28得票数 0
3回答
我有一个简单的应用程序，应该输出一个小的内容。我使用NodeJs、Express和Pug。
const pug = require('pug');
const express = require('express');
const app = express();
const indexFile = 'index'; // the file to load
app.set('view engine', 'pug'); // use pug
app.get('/', function (req,
浏览 6提问于2017-11-21得票数 2
回答已采纳
似乎是个重复的问题。但我不知道该怎么做。
我有如下所示的模板。
Index.pug
block head
title INCX - Exchange
block main
include templates/_header
dashboard.pug
block head
title INCX - Exchange
block main
include templates/_header
_header.pug
header.header
section.header-nav-section.full-width
现在，我希望将一个变量从dashboar
浏览 0提问于2018-12-05得票数 0
1回答
CSS样式未应用于视图
、、、
我正在用node.js和express创建一个应用程序。我使用pug作为我的模板引擎。样式表中的样式未应用于视图。
在我的header.pug文件中
link(rel='stylesheets/style.css', type='text/css', href='/stylesheets/style.css')
样式表位于public/ style sheet中。我还在我的app.js文件中包含了以下代码。
// serve static files from /public
app.use(express.static(__dirname +
浏览 2提问于2019-07-27得票数 0
我刚刚开始使用jade和node。我将一个对象从节点传递到jade模板(parent.jade)，并将相同的jade文件(parent.jade)包含到另一个文件(child.jade)。它的描述如下：
节点部分：
res.render('parent.jade', {data: mydata});
然后在parent.jade中，我正确地接收到了数据：
doctype html
html
head
title parent
script(type="text/javascript" src="/resource
浏览 12提问于2017-08-01得票数 0
我想使用Pug在服务器端作为我的网站的Node.js模板引擎，恐怕担心性能。当我们在本地使用Pug作为HTML预处理器时，性能并不重要，但是如果Pug编译使服务器响应时间更长，我不得不选择其他模板引擎。
我想，就模板引擎接近HTML而言，它比Pug具有更好的性能，但更糟糕的可维护性(如果它是错误的，请纠正我)。
浏览 4提问于2020-06-23得票数 3
回答已采纳
有没有可能在一个父模板中有两个独立的.pug文件作为ng-if语句的结果？就像这样
ng-if({booleanVar ? pugFile1.pug : pugFile2.pug})
或者有比在ngif语句中包含2个完整页面更干净的方式吗？谢谢大家
浏览 7提问于2018-01-06得票数 1
回答已采纳
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
回答已采纳
1回答
如何让背景图片出现在pug上？
、、、、
背景图像不会出现在pug上？在检查时，它给出了这个错误。这是相关的吗？
2 localhost/:1拒绝应用来自'‘的样式，因为其MIME类型('text/html')不是支持的样式表MIME类型，并且启用了严格的MIME检查。
这是我的pug背景图片的源代码。
/* pictures animation */
.picturesz {
background-image:
url(imagez/tp9.jpg);
animation: snow 40s linear infinite;
}
@keyframes snow {
浏览 3提问于2018-12-05得票数 2
1回答
我将NodeJs与车把一起使用，并考虑切换到PugJ，因为有些功能是本机的--使用工具栏需要一些助手函数/部分。
在车把中，我必须定义一个布局并传递模板。在PugJ中，我创建了两个示例路由
第一路由文件：
const express = require('express');
const router = express.Router();
router.get('/', (req, res) => {
res.render('index', {
title: 'Home',
tem
浏览 1提问于2018-09-25得票数 0
我正在处理node.js快递应用程序中的密码重置功能，因为我打算编译一个pug模板，它的输出会以邮件的形式发送给用户。
Pug已经实现，并在快速应用程序中作为视图引擎工作，但是我在一些端点中直接使用它的API。
pug版本: 2.0.3 (也尝试了2.0.0)
节点版本: 8.11.3
.js
var locals = {name: user.name, resetLink: link};
var template = pug.compileFile(path.join(__dirname, "../views/emails/reset.pug")),
浏览 0提问于2018-07-23得票数 0
回答已采纳
我有只像这样的小狗：
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
回答已采纳
这是服务器，我使用pug模板engine init
const express = require('express');
const app = express();
const path = require('path')
const port = 80;
//Express specific stuff
app.use('/static' , express.static('static')) //For serving static files
//Pug specific stuff
app.set('
浏览 1提问于2021-02-23得票数 0
我对webpack和pug如何协同工作有了基本的了解，使用HtmlWebpackPlugin通过pug模板生成带有捆绑资源的页面。 我已经用两个pug文件创建了一个非常简单的测试项目：head.pug包含<head>中包含的内容，index.pug是其余的。我在index.pug中创建了一些变量，我希望通过使用include head.pug在head.pug中使用它们。下面是它们的外观： // head.pug //
title #{title}
if isProduction
base(href='myurl.com/welcome/')
// i
浏览 42提问于2021-01-08得票数 1
回答已采纳
当pug模板使用接收参数的混合时，有没有一种方法可以在Django中使用pug？我正在尝试使用pypugjs从pug模板创建django模板。
例如:我有一个带有以下混入语法的模板：
+navbar({
navbarBg: 'bg-transparent',
navbarStyle: 'navbar-dark',
navbarBrandColor: 'text-white',
navbarBtnColor: 'btn-teal',
navbarContainer: 'containe
浏览 17提问于2020-05-21得票数 0
回答已采纳
1回答
试图让尾风通过CLI指令来工作。我有一个(简化)文件结构
-public
-stylesheets
-styles.css
-tailwind.css
-views
-index
-index.pug
-page2.pug
-page3.pug
-user
-index.pug
-page2.pug
-includes
-templates
-header.pug
-footer.pug
我跟踪了安装文档和YouTube上的一个视频，试图让它正常工作，但是当我用以下方式设置tailwind
浏览 19提问于2022-04-05得票数 1
回答已采纳
在我的一生中，我不知道如何只包括( .pug文件的一个特定部分)。假设我有tutorials.pug
block tut1
p Some tutorial
block tut2
p Some other Tut
block tut3
p And then some other tut
然后在我的main.pug里，我想去：
extends tutorials
h2 Hey, enjoy the second Tutorial!
block append tut2
没有任何其他街区出现。这件简单的事情不可能吗？
浏览 2提问于2017-12-24得票数 0
回答已采纳
当我尝试编译这段代码时：
doctype html
html(lang="en")
head
meta(http-equiv = "Content-Type " content ="text/html ;charset=utf-8")
title = category.name
body
h1 Сьпiс таварау
h2 Катэгорыi:
ul
for cat in cats
li: a(href='/goods/{{cat.id}}/')
浏览 1提问于2017-07-27得票数 0
来自
视图引擎缓存不缓存模板输出的内容，只缓存底层模板本身。即使在缓存打开时，每个请求仍会重新呈现视图。
老实说，我不明白缓存是如何提高性能的。所以我会直接问我担心什么会影响性能。缓存是否有助于避免由于混合代码和/或JavaScript代码以下而对性能造成的影响？
mixin TestMixin(parameters)
-
const {
hasIcon = false,
contextClass
} = parameters;
// Some thousands lines of JavaScript code width pa
浏览 3提问于2020-09-14得票数 1
回答已采纳
我正在尝试从我的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回答
在我的代码中有什么问题，我试图将一些数据存储在一个对象中并进行迭代。代码是
extends ../layouts/default-layout.pug
block variables
-
var blogPosts = [{
tag: 'travel',
title: '25 Things to See and Do in Barcelona',
},
{
tag: 'travel',
title: '25 Things to See and Do in Barcelona&
浏览 6提问于2020-04-28得票数 2
回答已采纳
我的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
回答已采纳
我开始使用Pug模板
我有一个目录，其中有一些标记文件，我想把这些文件转换成HTML页面
legal/
privacy-policy.md
refund-policy.md
terms-of-service.md
到目前为止，我想在每个文件旁边放置一个.pug文件
legal/
privacy-policy.md
+ privacy-policy.pug
refund-policy.md
+ refund-policy.pug
terms-of-service.md
+ terms-of-service.pug
.pug文件都非常相似
浏览 0提问于2018-08-29得票数 2
回答已采纳
1回答
MongoDB -> Node.js --> Pug
我正在尝试从mongodb获取数据，并在pug中显示它。这是我的代码：
router.get("/", isLoggedIn, (req, res) =>
{
res.status(200).send(pug.renderFile("./views/menti/takvim.pug",
{
tasks: req.session.user.tasks,
}))
})
上面的代码工作得很好，但是我想在pug中显示req.session.user.ta
浏览 0提问于2020-07-09得票数 0
回答已采纳
1回答
有任何方法，我可以把数据从我的帕格主文件到sass混合文件吗？在我的项目中，有一个pug主文件，它调用存储在另一个pug文件中的组件。组件pug文件有一个sass文件，该文件使用位于另一个sass文件中的混合文件，其中放置了所有其他混合文件。(例如，main.pug有一个component.pug文件，其中有一个从mixin.scss文件调用混合文件的sass文件)，我需要知道的是，是否有任何方法可以将数据从component.pug发送到mixin.scss，这样就可以方便地重用它。
浏览 1提问于2022-01-14得票数 0
1回答
我在nodejs项目中安装了模块。我正在尝试从导航栏创建一个菜单。
我做了那些文件：
layout.pug：
include /node_modules/pug-bootstrap/_bootstrap.pug
index.pug：
extends layout
block head
+navbar("menu")
+nav_item("#", undefined, true)
string test
block body
h1= title
p Welcome to #{title}
_bootstrap.pug包含引导css文件：
浏览 3提问于2017-04-07得票数 2
回答已采纳
我是Node.JS堆栈的新手。我看到很多开发人员正在使用pug模板引擎(Express JS)，而不是常规的HTML。如果你们中的任何人使用过pug，你能告诉我使用pug相对于HTML视图技术的主要好处吗？
浏览 2提问于2019-09-18得票数 2
1回答
"Mustache"语法允许定义如下数据：
<template>
<Window>
<template v-slot:title >
{{title}}
</template>
</Window>
</template>
但是使用lang='pug'编译失败：
<template lang='pug'>
<Window>
<template v-slo
浏览 4提问于2020-07-19得票数 0
回答已采纳
是否可以使用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回答
从PugJS调用节点js函数？
、、、、
我正在尝试在PugJS中创建一个可点击的按钮(执行节点JS中的js)。 视图/index.pug doctype html
html
head
title #{title}
link(rel='stylesheet', href='/css/style.css')
meta(name="viewport" content="width=device-width, initial-scale=1")
body
main
block header
header.he
浏览 29提问于2020-07-03得票数 0
4回答
未加载CSS的Pug文件
、、、、
我有个特快项目要做了。我用帕格做视图引擎。
我的app.js里有以下几行，
app.set('views', path.join(__dirname, './views'));
app.set('view engine', 'pug');
app.use(express.static(path.join(__dirname, './public')));
在我的index.pug视图中，
link(rel='stylesheet', href='/stylesheets/style.
浏览 5提问于2017-02-09得票数 3
回答已采纳
1回答
Pug APi不工作
、、、
谁能告诉我为什么pug api不能与他们文档页面上的简单示例一起工作
const pug = require('pug');
// Compile the source code
const compiledFunction = pug.compileFile('template.pug');
// Render a set of data
console.log(compiledFunction({
name: 'Timothy'
}));
// "<p>Timothy's Pug source code!&
浏览 0提问于2017-06-10得票数 0
我刚开始和帕格合作，并且正在用它做一个小的页面应用程序。我使用编译成javascript函数的模板，我将在SPA中使用这些函数来呈现HTML。使用pug，我能够生成多个.js文件，每个文件都包含所需的模板函数。但是，我不想编译多个javascript文件，而是将所有函数合并到一个简单的'template.js‘文件中，然后我可以从我的客户端应用程序中调用这个文件。下面是我目前使用的命令
pug -c --name-after-file -w .\views\ -o .\public\
我在googled上搜索过，在Stackoverflow上搜索过，还发现pug本身就有一个，它可能是为
浏览 1提问于2018-08-28得票数 1
回答已采纳
1回答
我已经使用下面的命令编译了一个pug模板temil1.js。
pug -客户端-非调试tem1.pug
编译后的文件包含一个名为template.I的函数，希望知道如何在我的服务工作人员中使用该文件。表示如何调用此函数。是否有任何方法来更改函数名。
tune1.js
function template(locals) {var pug_html = "", pug_mixins = {}, pug_interp;pug_html = pug_html + "\u003C!DOCTYPE html\u003E\u003Chtml\u003E\u003Chead\u003E
浏览 6提问于2016-11-26得票数 1
回答已采纳
1回答
如何卸载帕格？
、、
我尝试了pug.js，然后决定不使用它并卸载它。现在，当我启动webpack开发服务器时，我会得到以下错误：
Unhandled rejection Error: Cannot find module 'pug'
at Function.Module._resolveFilename (module.js:485:15)
at Function.Module._load (module.js:437:25)
at Module.require (module.js:513:17)
at require (internal/module.js:11
浏览 0提问于2017-10-05得票数 0
回答已采纳
1回答
在模板文件中使用i18n
、、、
我注册了i18n，并将pug设置为视图引擎，甚至添加了助手函数，但是当我调用pugs compileFile时，i18n '__‘没有发现错误。
static initI18n(app) {
i18n.configure({
defaultLocale: 'en',
directory: path.resolve('server/tools/locals'),
locales: ['en', 'gr'],
objectNotation: false,
up
浏览 0提问于2018-03-31得票数 0
回答已采纳
1回答
更新Nuxt后，pug预处理器开始在所有项目文件中发出警告。
unexpected token "indent" (PUG:INVALID_TOKEN) [2,1]
这是因为pug代码从模板中的一个缩进开始。
<template lang="pug">
h1 Title
</template>
这将不再显示警告：
<template lang="pug">
h1 Title
</template>
我如何配置Pug，使其不显示此警告，并保持文件与代码缩进？
谢谢你的帮助。
浏览 9提问于2021-11-23得票数 2
我正在使用带有视点模块的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
是否可以将一个变量传递给我之前在'html-webpack-plugin‘中定义的’pug加载器‘加载的.pug模板？
webpack.config.babel.js
...
{
test: /\.pug$/,
use: [
{
loader: 'html-loader'
},
{
loader: 'pug-html-loader',
options: {
self: true
}
}]
浏览 31提问于2017-07-27得票数 6
我想添加一个css文件只在index.html页面使用如果与pug。我用pug得到了下面的代码：
- var thepage = { page: './index.html' }
if thepage.page
link(rel="stylesheet", type="text/css", href="../css/slider.min.css")
吞咽没有错误，但它不起作用。
浏览 4提问于2017-08-09得票数 1
可以在VSC中设置基于lang的标签大小，如下所示：
"[sass]": {
"editor.tabSize": 2
},
"[html]": {
"editor.tabSize": 4
},
"[javascript]": {
"editor.tabSize": 2
}
但它不适用于pug语言，因为pug语言中的标识始终是4个空格。它甚至不会用"editor.tabSize: 2“覆盖。如何为pug创建另一个tabsize值？
浏览 0提问于2018-10-21得票数 2
1回答
Pug 2-循环推送阵列
、、、
我正在创建一个文档，它将帮助我在创建模板时减少时间。我想用我在主文件头中指定的数组来循环独立文件中的代码块，但似乎无法使它工作。
./src/pug/layout.pug
- const flyouts = []
- flyouts.push({variationid: "123", plugin: "none", zone: "ZoneHere", variation: "LargeImage", link: "www.bbc.co.uk", imgloc: "blah.jpg"});
- fly
浏览 2提问于2017-05-09得票数 1
回答已采纳
1回答
我的express项目中有一个.pug模板，其中没有包含样式表。我已经查看了pug的文档，但是它没有用:(我不确定该怎么做 文件树： views
`-- index.pug
`-- css
`-- styles.css 我正在尝试包含3个样式表: styles.css (个人样式表)，一个bootstrap CDN (我已经在我的项目中安装了bootstrap )，以及一个google字体样式表 谁能告诉我我哪里做错了？ doctype html
html(lang="en")
head
title Cloudii Weather Analysis
浏览 20提问于2019-12-28得票数 0
我读过一些pug文档。它说我必须先安装pug，而我已经安装好了。然后，我必须在我的js文件中要求pug。但是我不知道在我的react文件中在哪里编写pug文件的编译？在react框架中使用pug的正确步骤是什么？谢谢!我真的很感谢任何人的帮助。这是我在react中的一个组件，我想用pug来呈现它。
import React from 'react';
import Sidebar from './Sidebar';
import Header from './header/Header';
import {tokenverify} fro
浏览 5提问于2016-06-18得票数 9
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
需要将一个用户数组呈现给pug模板，但它不起作用。
users.pug
*
*
*
each user in userList
tr
td= user.name
td= user.address
td= user.age
*
*
*
服务器端代码
logger.Debug(JSON.stringify(data));
res.render('users.pug', { userList:JSON.stringify(data)});
当我执行服务器端代码时，logger.Debug()语句将生成以下内容：
[{"name"
浏览 0提问于2019-05-09得票数 1
回答已采纳
1回答
我已经使用electron-forge创建了一个Electron应用程序。在这个应用程序中，我想渲染pug(Jade)模板，所以我安装了electron-pug。我面临的问题如下。
如果我使用electron-forge start启动我的应用程序，我的应用程序将显示一个包含未呈现的pug文件的窗口(它将只显示该文件的内容)，并且它将记录以下内容：
Pug interceptor failed: Error: The scheme has been intercepted
但是，如果我使用electron src/index.js运行，pug模板将不会出现任何问题。这是我的index.js文件
浏览 12提问于2017-08-10得票数 1
回答已采纳
在JavaScript版本的NodeJS中，有一个命令名为express-generator --view=pug my_app，但是express-generator-typescript呢？
--view=pug是否也适用于TypeScript版本的NodeJS，或者我们应该使用另一个选项？或者它默认使用Pug？
浏览 2提问于2022-05-20得票数 2
1回答
我试图让Webpack呈现一个静态的html并导出相对的css，从使用HtmlWebpackPlugin的pug模板和css模块开始。
我的设置如下
//webpack.config.js
...
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: "src/templates/index.pug",
excludeChunks: ["landing", "runtime"],
exclu
浏览 1提问于2019-07-29得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
