简介
atcon 是一个轻量级的 Javascript 模板引擎，可以在前端和后端运行，具有快速、简单、灵活的特点，支持模板继承、模板缓存、变量输出等特性。
本教程将详细介绍如何使用 atcon，包括安装、配置和使用方法。
安装
atcon 是一个 npm 包，可以通过 npm 安装：
npm install atcon
配置
使用 atcon 前需要进行一些简单的配置。在前端中，需要引入 atcon 的文件，并设置模板的默认路径：
// 引入 atcon import atcon from 'atcon'; // 设置模板路径 atcon.path = '/templates';
在后端中，需要将 atcon 载入：
// 载入 atcon
const atcon = require('atcon');
// 设置模板路径
atcon.path = '/templates';在以上代码中，将模板路径设置为 '/templates'，这意味着 atcon 将在此路径下寻找模板文件。
使用
在配置完 atcon 后，可以开始使用它来渲染模板。首先创建一个模板文件（例如 'template.html'），使用 atcon 的语法输出变量：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------- ---------------
-------
------
------ ----- -------
----- ------- ------
-------
-------以上代码中，使用了双括号的语法来输出变量。在渲染时，atcon 会替换模板中的变量为实际的值。例如：
// 渲染模板
const html = atcon.render('template', { title: 'Hello World', content: 'Welcome to my website!' });
// 输出 HTML
console.log(html);在以上代码中，渲染 'template.html' 模板文件并传入 title 和 content 变量值。输出的 HTML 如下：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------- ---------------
-------
------
--------- ----------
---------- -- -- ------------
-------
-------如果想输出一个 for 循环，可以在模板中使用 atcon 的 foreach 语句：
<ul>
{{ foreach item in list }}
<li>{{ item }}</li>
{{ endforeach }}
</ul>然后传入一个包含数组的对象：
const data = { list: ['Apple', 'Banana', 'Orange'] };
const html = atcon.render('template', data);
console.log(html);以上代码会输出：
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>如果需要在一个模板中包含另一个模板，可以使用 atcon 的 include 语句。例如，创建一个包含内容的 'body.html' 模板，如下：
<div class="content">
{{ content }}
</div>然后在主模板中引入它：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------- ---------------
-------
------
-- ------- ------ --
-------
-------以上代码中，使用了 include 语句来包含 'body.html' 模板。
总结
atcon 是一个轻量级的 Javascript 模板引擎，可以方便地在前端和后端使用。通过本教程的介绍，你现在已经掌握了如何使用 atcon 来渲染模板、输出变量和包含其他模板。在实际开发中，你可以使用这个工具来方便地组织和展示你的网页内容。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005550b81e8991b448d23f1