我正在Node.js上开发一个聊天应用程序,我使用的是Pug模板引擎,当我试图渲染一个可重用的模板时,我陷入了困境,这是我用胡子模板引擎实现的。
下面的是我想用Pug实现的例子,在这个示例中使用了胡子
//index.js
socket.on('newMessage', message => {
let template = jQuery('#message-template').html();
let html = Mustache.render(template, {
text: message.text,
from: me
似乎是个重复的问题。但我不知道该怎么做。
我有如下所示的模板。
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
这里是node.js初学者。因此,我正在编写一个应用程序,在这个应用程序中,我每秒钟都会得到服务器生成的一个数字,并通过应用程序粘贴它。进入我的index.pug文件,我想在一个嵌入js文件中使用这个数字。我该怎么做?
server.js
randomNumber = 4;
app.get('/',(req,res) => {
res.render('index', {title: 'Number', count: randomNumber})
});
index.pug
html
head
title= title
bod
我刚刚开始使用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
我对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
在我的一生中,我不知道如何只包括( .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
没有任何其他街区出现。这件简单的事情不可能吗?
我有只像这样的小狗:
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
可以不使用节点将数据从.js文件传递到.pug文件吗?我正在使用一个非常基本的设置,在这里我运行并将我的项目与Parcel.js捆绑在一起。我不使用Node.js后端,也不想使用,我只想在app.js-file中获取数据,并使用Pug显示数据。但是,即使是这个设置也没有在页面上显示name-variable:
index.pug
doctype html
html(lang="en")
head
title Homepage
body
p My name is #{name}
script(type="mo
我在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文件:
我正在尝试在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
当我尝试编译这段代码时:
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}}/')
在我的代码中有什么问题,我试图将一些数据存储在一个对象中并进行迭代。代码是
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&