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 不能正确使用多行模式。