NodeJS中使用swig模板引擎


NodeJS中的默認引擎是jade有點過於復雜,而且不是以HTML為基礎的,學習成本和前端適應成本都很大。而ejs雖然簡單,但不支持模板導入,而且效率一般。

swig的語法簡單,學習成本很低,符合常規邏輯,實驗了一下,非常滿意;

swig的官網:swig

在Express中使用swig

在nodejs隨便建立一個express項目,直接使用命令

mddir 文件夾名稱
cd 文件夾名稱
express

就可以建立一個一jade為模板的項目。

在package中更改引用

把jade去掉,改為:

"swig": "~1.4.2"

修改app.js

var app = express(); app.set('view engine', 'jade'); //把上面的代碼改為下面的 var app = express(), swig = require('swig'), people; app.set('view engine', 'html'); 

然后增加一行代碼:

app.engine('html', swig.renderFile); app.listen(3000); 

然后把原來的views文件夾下得文件后綴都改為html

模板文件layout.html

<!doctype html> <html> <head> <meta charset="utf-8"> <title>{% block title %}{% endblock %}</title> {% block head %} {% endblock %} </head> <body> {% block content %}{% endblock %} </body> </html> 

index.html

{% extends 'layout.html' %}

{% block title %}index {{title}} {%endblock%}

{% block head %}
{{title}}
{% endblock %}

{% block content %}
<p>This is just an awesome page.</p> {% endblock %} 

這兩個文件可以初步了解swig的語法 - block相當於編輯區 - 導入模板使用:extends - 輸出變量使用 {{ 變量名 }}

更詳細的語法參考swig的官網。

然后再路由中設置即可使用:

router.get('/', function(req, res) { res.render('index', { title: '標題' }); });


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM