Eleventy WCAG Reporter 项目教程
1. 项目的目录结构及介绍
eleventy-wcag-reporter/
├── src/
│ ├── _data/
│ ├── _includes/
│ ├── assets/
│ ├── pages/
│ └── index.njk
├── .eleventy.js
├── .gitignore
├── LICENSE
├── README.md
├── add-report.js
├── create_pdf.sh
├── package-lock.json
└── package.json
src/
: 项目的主要源代码目录。_data/
: 存储全局数据文件。_includes/
: 存储模板文件。assets/
: 存储静态资源文件,如CSS和JavaScript文件。pages/
: 存储页面模板文件。index.njk
: 主页模板文件。
.eleventy.js
: Eleventy的配置文件。.gitignore
: Git忽略文件配置。LICENSE
: 项目许可证文件。README.md
: 项目说明文档。add-report.js
: 添加报告的脚本文件。create_pdf.sh
: 生成PDF的脚本文件。package-lock.json
: 锁定依赖版本的文件。package.json
: 项目的依赖和脚本配置文件。
2. 项目的启动文件介绍
项目的启动文件主要是package.json
中的scripts
部分。以下是一些常用的脚本命令:
{
"scripts": {
"start": "eleventy --serve",
"build": "eleventy"
}
}
npm start
: 启动开发服务器,实时预览项目。npm run build
: 构建项目,生成静态文件。
3. 项目的配置文件介绍
项目的配置文件是.eleventy.js
,它包含了Eleventy的配置选项。以下是一个简单的配置示例:
module.exports = function(eleventyConfig) {
// 添加自定义过滤器、插件等
eleventyConfig.addFilter("myFilter", function(value) {
// 过滤器逻辑
});
// 添加自定义短代码
eleventyConfig.addShortcode("myShortcode", function(name) {
return `<p>Hello, ${name}!</p>`;
});
// 添加自定义集合
eleventyConfig.addCollection("myCollection", function(collection) {
return collection.getFilteredByTag("myTag");
});
// 其他配置选项
return {
dir: {
input: "src",
output: "dist"
}
};
};
addFilter
: 添加自定义过滤器。addShortcode
: 添加自定义短代码。addCollection
: 添加自定义集合。dir
: 配置输入和输出目录。
通过这些配置,可以自定义Eleventy的行为,以满足项目的需求。