如何使用 PUG-Bootstrap 的布局？

Question

我是第一次使用 pug，并试图弄清楚如何使用 npm pug-bootstrap，以便我可以使用它们的布局。

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

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

我假设我必须调用它，但我不知道如何调用它。如何从 PUG-Bootstrap 调用我的布局？

Answer 1

首先删除 jade-bootstrap 或 pug-bootstrap 包：

npm 移除玉引导

npm 删除 pug-bootstrap

Jade 已被弃用，现在它被称为 PUG

而不是翡翠

安装哈巴狗：

npm install pug --save

如果您只想将 pug 安装到您的项目文件夹，请使用 --save，如果您在没有 --save 的情况下执行命令，则会将包全局安装给您车站。

输入http://html2jade.org

现在您可以创建简单的引导 html 页面，并将其转换为您记下的 pug 文件。

例如，如果您需要将 footer.pug 包含到您的 index.pug 中。

在 index pug 中放置 footer.pug 的绝对路径（includes/foot.pug）

参考文献：

Include pugJs

Answer 2

可能有更好的方法，但这是我从 pug 模板访问 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')

（我添加了第二行）。

可能有更清洁的方法，但这对我有用。