gulp-file-include 基礎語法
1.基礎模塊調用
1 | @@include("./include/module.html") |
2.帶參模塊調用 /* 參數必須使用雙引號 */
1 2 3 | @@include("./include/module.html", { "index": "active"}) |
3.文本變量
1 2 3 4 5 6 7 | //模塊<div>@@variate</div>//調用@@include("./include/module.html", { "variate": "true"}) |
4.URL變量
1 2 3 4 5 6 7 | //模塊<a href="@@url">我是一個鏈接</a>//調用@@include("./include/module.html", { "url": "www.baidu.com"}) |
5.if語句（外部）
1 2 3 4 5 6 7 8 9 | //模塊@@if (context.flag) { <div>我是一個模塊</div>}//調用@@include("./include/module.html", { "flag": "true"}) |
6.if語句（內部）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | //模塊<div class="@@if(context.flag) {active}">我是一個模塊</div>//調用@@include("./include/module.html", { "flag": "true"})//模塊<div @@if (context.flag === 'true') {class='active'}>我是一個模塊</div>//調用@@include("./include/module.html", { "flag": "true"}) |
7.for語句（基礎）
1 2 3 4 5 6 7 | //模塊@@for(var i = 0; i < 4; i++) { <div class="item">我是一個item</div>}//調用@@include("./include/module.html") |
8.for語句（進階）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | //模塊@@for(var i = 0; i < context.length; i++) { <a href="`+context.arr[i].url+`" class="item `+(i == 0 ? 'active' : '')+`">`+context.arr[i].text+`</a>}//調用@@include("./include/module.html", { "length": "4", "arr": [ { "text": "111", "url": "111" }, { "text": "222", "url": "222" }, { "text": "333", "url": "333" }, { "text": "444", "url": "444" } ]}) |
相關內容
純靜態和偽靜態的區別？
我們從以下三個方面，對比純靜態和偽靜態兩種靜態頁面生成方式，逐一展開分析。
用JS的正則表達式如何判斷輸入框內為中文或者是英文數字，或者是三者混編
用JS的正則表達式如何判斷輸入框內為中文或者是英文數字，或者是三者混編
css制作扇形
css制作扇形
純CSS3文字Loading動畫特效
純CSS3文字Loading動畫特效
PhpStorm 2022.1 EAP＃3 發布：增強多行和嵌套數組形狀
PhpStorm 2022.1 EAP 3 在 PHPDoc 和屬性中添加了對多行和嵌套數組形狀的完全支持：在這種情況下，可以使用數組形狀注釋定義數組結構，以獲得鍵的代碼補全并推斷值的類型。
2022年PHP的現狀以及最新版本帶來的特性
PHP作為Web界第一大語言近年來熱度不夠，但是這幾年的進步和成長卻沒有中斷。在2022伊始，我們來一起學習一下目前PHP的現狀以及最新版本帶來的特性。
網站開發技術分享：Linux程序前臺后臺切換詳解
Linux程序前臺后臺切換：在Linux終端運行命令的時候，在命令末尾加上 & 符號，就可以讓程序在后臺運行Ubuntu$">root@Ubuntu$ ./tcpserv01 &
如何分辨python換行符，Python換行符的多行模式
Python 的正則表達式支持 多行模式，將每行文字分別匹配。然而各種操作系統里，換行符的表示法各不相同，會導致 Python 不能正確使用多行模式。