如何使用PUG-Bootstrap的布局?

时间:2018-01-30 18:38:22

标签: node.js express npm pug

我第一次使用哈巴狗,并试图找出如何使用npm pug-bootstrap,以便我可以使用他们的布局。

我npm安装了jade-bootstrap和pug-bootstrap,但在文档中找不到如何在我的index.pug文件中引用他们的封面引导程序布局。

我已经有了我的server.js文件,可以将html渲染到我的本地端口上。我尝试将cover.pug页面复制到我的index.pug页面,但这不起作用。

我假设我必须打电话,但我不知道怎么做。如何从PUG-Bootstrap调用我的布局?

2 个答案:

答案 0 :(得分:2)

首先删除 jade-bootstrap pug-bootstrap

npm删除jade-bootstrap

npm删除pug-bootstrap

Jade 已被弃用,现在代替jade称为 PUG

安装哈巴狗

npm install pug --save

使用 - 保存如果您只想将pug安装到项目文件夹中,如果您将执行不带 - save 的命令,则会全局安装包站。

输入http://html2jade.org

现在您可以创建简单的bootstrap html页面,它将转换为您注意到的pug文件。

例如,如果您需要将footer.pug包含到index.pug

在索引哈巴狗把绝对路径放到footer.pug(包含/ foot.pug

参考文献

Include pugJs

答案 1 :(得分:0)

也许有更好的方法,但这是我从哈巴狗模板访问Bootstrap CSS的方法:

首先,通过npm安装了引导程序:

npm install bootstrap

这将在您的服务器上本地下载并安装引导JavaScript和CSS。然后,我将这两个文件夹从dist中复制到服务器上的公共位置,即:

{server directory}\node_modules\bootstrap\dist\js
{server directory}\node_modules\bootstrap\dist\css

进入:

{server directory}\public\js
{server directory}\public\css

然后在我的layout.pug模板中,只需添加:

link(rel='stylesheet', href='/stylesheets/style.css')
link(rel='stylesheet', href='/css/bootstrap.min.css')

(我添加了第二行)。

也许有一种更清洁的方法,但这对我有用。