在浏览器中使用Swig

Swig在浏览器中的运行方式和在node.js中的运行方式大体相同。唯一的不同在于：Swig不能通过路径名字来查找文件，除非你直接提前告诉Swig每一个模板路径的名字是什么。

简单的说，如果没有提前被告知./myfile.html，则Swig无法确定指令{% extends "./myfile.html" %} 和 {% include "./myfile.html" %}中的文件。

关于这点最好的方式就是使用 命令行接口 来预编译你的模板。

1. 将每个模板编译成JavaScript文件，并给输出分配一个方法名，这样就可以在浏览器中全局访问该变量。

   $ swig compile myfile.html --method-name=myfile > myfile.js

2. 将Swig和 myfile.js 添加到网页中。

   <script src="swig.min.js"></script>
   <script src="myfile.js"></script>
   

3. 预运行模板，为Swig缓存做好准备工作。

   swig.run(myfile, {}, '/myfile.html');

4. 现在，你就可以在浏览器中渲染模板了，并可以扩展 myfile.html

   。

   var tpl = '{% extends "./myfile.html" %}{% block content %}{{ stuff }}{% endblock %}';
   var output = swig.render(tpl, { filename: '/tpl', locals: { stuff: 'awesome' }});
   document.querySelector('#foo').innerHTML = output;