brp-template 是一个基于 Node.js 平台的 npm 包，它提供了一种简单易用的方式来快速创建网站的基础模板。它适用于任何站点类型和规模，从简单的个人博客到复杂的企业网站。本文将介绍 npm 包 brp-template 的基本用法，让您可以快速地创建和定制自己的网站。
安装 brp-template
首先，您需要安装 Node.js。对于使用 npm 包，Node.js 是必须的。您可以在 Node.js 官方网站（https://nodejs.org/）上下载最新版本的 Node.js，并按照官方指南进行安装。
安装完成 Node.js 后，接下来您需要安装 brp-template。请在命令行窗口中运行以下命令：
npm install -g brp-template
这个命令会全局安装 brp-template 包。注意，加上 -g 标志表示我们将在全局范围安装这个包，这意味着可以通过任何位置的命令行窗口使用它。如果您不加 -g 标志，则将在当前目录下安装这个包。
创建模板
使用 brp-template 创建模板非常简单。在命令行中运行以下命令：
brp-template create mysite
其中 mysite 是您的网站名称。brp-template 将在当前目录下创建一个 mysite 目录，并在目录中创建一些文件和目录，包括 index.html、style.css、images 目录等。
在 mysite 目录下运行以下命令：
brp-template serve
这个命令将启动一个本地服务器，您可以在浏览器中输入 http://localhost:8000/ 来访问您的网站。您可以使用你的文本编辑器或IDE打开 mysite 目录，并编辑 index.html 和 style.css 等文件，以创建您自己的网站。
添加自定义页面
您可以添加自己的页面，以适应您的特定需求。在 mysite 目录下创建一个新的 HTML 文件，例如 about.html。在打开的 HTML 文件中添加必要的标记和内容。
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ------------ ---------- ------- ------ --------- ------- ------ ------- --- ------- -- ----------- ------- -------
在 mysite 目录下创建一个新的 CSS 文件，例如 about.css。
body {
background-color: #f0f0f0;
}然后在 index.html 的导航栏中添加指向 about.html 的链接。
<header>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about.html">About Us</a></li>
</ul>
</nav>
</header>使用 brp-template serve 命令重新启动服务器，您将可以在浏览器中访问 http://localhost:8000/about.html 来查看您的自定义页面。
使用模板
如果您想在多个网站之间共享代码和样式，您可以使用 brp-template 提供的模板功能。在 mysite 目录下创建一个新的文件 template.html。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------- ----- ----------
----- ---------------- --------------- ------------------
-------
------
--------
-----
----
------ ----------------------
------ ------------------------ -----------
-----
------
---------
------
-- ------- --
-------
--------
------ ---- -- -------
---------
-------
-------该模板文件包含 HTML、CSS 和 JavaScript 代码，最常见的内容都可以放在这个文件中。这个模板文件可以在 index.html 中使用。在 index.html 中，您可以使用以下命令指定使用的模板。
{% extends "template.html" %}
{% block title %}My Website{% endblock %}
{% block content %}
<h1>Welcome to My Website!</h1>
<p>Thank you for visiting our site!</p>
{% endblock %}这里的 extends 关键字告诉 brp-template 该使用哪个模板。在模板中，您可以使用特殊的语法来指定动态的内容。例如，{{ title }} 可以渲染页面标题，{{ content }} 可以渲染页面内容。
这样 index.html 就可以使用模板文件 template.html 了，之后您只需要在每个页面中添加要替换的块，您的网站就可以使用该模板。这是一个很好的文件组织和代码重用技术。
结论
通过本文，您学会了如何使用 brp-template 创建基础网站模板，如何添加自定义页面，以及如何使用模板来快速生成多个页面。brp-template 是一个非常强大且易于使用的工具，它可以让您很快地创建和定制自己的网站。如果您是前端开发人员，我非常建议您尝试使用 brp-template 来简化您的工作流程。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c89ccdc64669dde51c4