一個(gè)項(xiàng)目中，可能存在若干重復(fù)的 html components，為了統(tǒng)一修改，我可能需要把它們提取出來(lái)，如<!-- _header.html --><header>
<h1>logo</h1>
<div class="search">
<input type="text">
<button type="submit">search</button>
</div></header><!-- _footer.html --><footer>
<p>copyright 2012-2014</p></footer>如果有服務(wù)器環(huán)境，如nginx，可以通過配置SSI來(lái)解析；或者通過php等動(dòng)態(tài)服務(wù)器端語(yǔ)言進(jìn)行解析。那么問題來(lái)了，如果我僅僅是想要把這個(gè)項(xiàng)目（靜態(tài)）構(gòu)建入前端demo庫(kù)里，我如何把這些html components合并到引用它的各個(gè)頁(yè)面里呢？grunt是否有相應(yīng)的插件？謝謝！
2 回答
哆啦的時(shí)光機(jī)
TA貢獻(xiàn)1779條經(jīng)驗(yàn) 獲得超6個(gè)贊
任何一種模板都應(yīng)該很容易實(shí)現(xiàn)， 你也可以用一下f2e-server
臨摹微笑
TA貢獻(xiàn)1982條經(jīng)驗(yàn) 獲得超2個(gè)贊
你可以使用一種模板語(yǔ)言，比如 handlebars，然后使用某個(gè)能夠靜態(tài)的在 grunt 任務(wù)里直接把模板編譯成 html 的插件，比如grunt-static-handlebars。
如果想讓前端可以動(dòng)態(tài)的載入模板，也推薦使用 handlebars，然后使用 grunt-browserify 和 hbsfy 這兩個(gè)插件結(jié)合一段極度簡(jiǎn)單的客戶端的 js 代碼就能很優(yōu)雅的解決這個(gè)問題。
客戶端代碼：
var template = require('./path/to/template.hbs');
document.getElementById('target-node').innerHTML = template({/* context */});添加回答
舉報(bào)
0/150
提交
取消