要使用Erlang Nitrogen和Bootstrap 4模板，您可以按照以下步骤进行操作：
-
首先，确保您已经安装了Erlang和Nitrogen。您可以从官方网站上下载并安装它们。
-
创建一个新的Nitrogen项目。在命令行中，使用以下命令创建一个新的Nitrogen项目：
nitrogen create my_project
这将在当前目录下创建一个名为my_project的新项目。
-
切换到项目目录。在命令行中，使用以下命令切换到项目目录：
cd my_project
-
下载Bootstrap 4模板。您可以从Bootstrap官方网站上下载最新版本的Bootstrap 4模板，并将其解压到项目目录中。
-
编辑Nitrogen配置文件。在项目目录下，找到名为rebar.config.script的文件。打开该文件，并在文件底部添加以下行：
%% Include bootstrap CSS and JS files
{bootstrap, ".*", {git, "git://github.com/twbs/bootstrap.git", {tag, "v4.6.0"}}, {compile, [scss, fonts]}}.
这将告诉Nitrogen在构建项目时包含Bootstrap的CSS和JS文件。
-
编辑Nitrogen路由文件。在项目目录下，找到名为src/my_project_router.erl的文件。打开该文件，并在文件顶部添加以下行：
-include_lib("nitrogen/include/nitrogen.hrl").
然后，在路由函数中添加以下行：
routes() ->
[
{"/", fun start_page/1}
].
start_page(Req) ->
{ok, Req2} = wf:wire(#wire{file = "my_template.html", bindings = []}, Req),
{ok, Req3} = wf:wire(#wire{file = "my_template.erl"}, Req2),
{ok, Req4} = wf:wire(#wire{file = "my_template.css"}, Req3),
{ok, Req5} = wf:wire(#wire{file = "my_template.js"}, Req4),
{ok, Req5}.
这将告诉Nitrogen将my_template.html、my_template.erl、my_template.css和my_template.js文件视为起始页面的组成部分。
-
创建模板文件。在项目目录下，创建名为my_template.html的文件，并使用以下内容替换文件的内容：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Nitrogen Project</title>
<link rel="stylesheet" href="/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/my_template.css">
</head>
<body>
<div class="container">
<h1>Welcome to my Nitrogen project!</h1>
<p>This is a sample page using Bootstrap 4 template.</p>
<script src="/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/js/my_template.js"></script>
</div>
</body>
</html>
这将创建一个基本的HTML模板，其中包含引用Bootstrap和自定义CSS和JS文件的标签。
-
启动Nitrogen服务器。在项目目录下，使用以下命令启动Nitrogen服务器：
nitrogen run
Nitrogen将在默认端口（8000）上启动一个本地服务器。
-
在浏览器中访问项目。在浏览器中，输入http://localhost:8000，您将看到您的Nitrogen项目中使用Bootstrap 4模板的页面。
这样，您就成功地使用Erlang Nitrogen和Bootstrap 4模板创建了一个基本的Web应用程序。您可以根据自己的需求进一步自定义和扩展这个项目。
社区干货
特惠活动
使用Erlang Nitrogen和Bootstrap 4模板-优选内容
使用Erlang Nitrogen和Bootstrap 4模板-相关内容