什么是 ice-cap?
ice-cap 是一个基于 Node.js 的模板引擎,它既支持服务端渲染(SSR),也支持客户端渲染(CSR)。使用 ice-cap 可以让开发者更加方便地创建动态页面和组件。
安装 ice-cap
通过 npm 安装 ice-cap:
--- ------- ------- ------
使用 ice-cap
下面来看一下如何使用 ice-cap 创建一个简单的页面。
第一步:创建模板文件
在项目根目录下创建一个名为 index.html
的文件,写入以下内容:
--------- ----- ------ ------ ---------- --- ------------ ------- ------ ---------- -------------- ------- -------
这是一个最简单的 ice-cap 模板,其中 {{name}}
是一个变量,它将在后面的代码中被替换成实际的值。
第二步:编写 JavaScript 代码
在项目根目录下创建一个名为 app.js
的文件,写入以下内容:
----- - ------ - - ------------------- ----- --- - --- ----------------- --------------------------- --- ----------------------------------- --- ---- ------------------------- ------------------------ ----- ------- ----
这段代码做了以下几件事情:
- 引入了 ice-cap 模块。
- 创建了一个名为
ice
的模板对象。模板字符串中的<%= name %>
表示要替换的变量,与模板文件中的{{name}}
作用相同。 - 调用
ice.render()
方法,将{ name: 'world' }
对象传入进行渲染。此处的name
属性值会替换模板字符串中的<%= name %>
。
第三步:运行应用程序
在命令行中执行以下命令:
---- ------
如果一切顺利,你将在控制台看到输出结果为:
--------- --------------------------- --- ----------------------------------- -------------------------
打开浏览器,访问 index.html
文件,你应该能看到页面上显示了 "Hello, world!"。
使用 ice-cap 的更多功能
除了上面演示的最基本的用法,ice-cap 还提供了许多其他有用的功能,例如:
- 条件语句
- 循环语句
- 引入子模板
- 继承模板
下面是一个稍微复杂一些的示例,它展示了 ice-cap 的很多功能:
--------- ----- ------ ------ ------------------------ ------- ------ ------------------ ----- -------------- ---- ------- ------- ----------------- --------- ----- -------- ----- ---------- ------- --- -------- ------- -------
这是一个模板文件,它包含了一个标题、一个列表和一个引入的子模板。
下面是相应的 JavaScript 代码:
----- - ------ - - ------------------- ----- --- - --- -------- --------- ----- ------ ------ ---------- ----- ---------- ------- ------ ------- ----- ------- -- -- -------------- - -- ---- -- ---------------------------- - -- ------- ---- ------- -- --- -- ----- -- - ---- - -- ----------------------------------------------------------- ---------- ---------------------------------------------------------------------------------------