在yml文件里面定义了数组变量如下
courseList:
-
type: 1对1课程
img: ./images/index/course_1.png
courses:
- 1.******
- 2.******
- 3.******
- 4.******
- 5.******
class:
-
- date: 2019-11
- order: true
-
- date: 2019-10
- order: true
-
- date: 2019-09
- order: true
-
- date: 2019-08
- order: false
-
- date: 2019-07
- order: false
然后再pug里面循环这个数组
for item in local.courseList
li.course-list-item
img.course-list-item-img(src=item.img)
.course-list-item-content
h3.course-list-item-content-title 课程设置:
for setting in item.courses
p.course-list-item-content-setting= setting
ul.class-list
li.class-list-item.list-tr
.class-list-item-date 开班时间
.class-list-item-type 开班类型
.class-list-item-status 状态
for classItem in item.class
li.class-list-item
.class-list-item-date= classItem.date
.class-list-item-type= item.type
.class-list-item-status
span(class=`${classItem.order ? 'class-order' : 'class-over'}`)= `${classItem.order ? '预约' : '已结束'}`
classItem.date那里没有输出,当我把classItem.date换成classItem时,输出显示为[object, object],请问是pug模板不支持解析嵌套的数组吗?
项目使用的是gulp,里面关于html页面的配置如下
function readYamlFile(path) {
let data = {};
if (fs.existsSync(path)) {
try {
data = jsYaml.safeLoad(fs.readFileSync(path, 'utf-8'));
} catch (error) {
console.log(error);
}
}
return data;
}
const injectPugData = file => {
const filePath = file.path;
const viewsDir = dirname(filePath);
const globalDataPath = `${viewsDir}/data/global.yml`;
const localDataPath = `${viewsDir}/data/${basename(filePath, '.pug')}.yml`;
const globalData = readYamlFile(globalDataPath);
const localData = readYamlFile(localDataPath);
return Object.assign(globalData, { local: localData });
}
function views () {
return (
gulp
.src(`src/views/*.pug`)
.pipe($.plumber())
.pipe($.data(injectPugData))
.pipe($.pug(pugConfig))
.pipe($.rename({ extname: '.html' }))
.pipe($.formatHtml())
.pipe(gulp.dest(`${destDir()}`))
)
}