开源项目 eleventy-high-performance-blog 使用教程
1. 项目的目录结构及介绍
eleventy-high-performance-blog/
├── _data/
│ └── metadata.json
├── _includes/
│ ├── footer.njk
│ ├── head.njk
│ ├── header.njk
│ ├── icons/
│ ├── layouts/
│ │ └── base.njk
│ └── scripts/
├── css/
│ └── main.css
├── img/
├── js/
│ └── main.js
├── pages/
│ └── index.njk
├── .eleventy.js
├── .gitignore
├── .nvmrc
├── 404.njk
├── about.njk
├── blog.njk
├── index.njk
├── package.json
└── README.md
_data/
:存放全局数据文件,如metadata.json
包含站点元数据。_includes/
:存放模板文件,包括页眉、页脚、图标、布局和脚本。css/
:存放样式文件,如main.css
。img/
:存放图片文件。js/
:存放JavaScript文件,如main.js
。pages/
:存放页面模板文件,如index.njk
。.eleventy.js
:Eleventy 配置文件。.gitignore
:Git 忽略文件列表。.nvmrc
:Node 版本管理文件。404.njk
:404 页面模板。about.njk
:关于页面模板。blog.njk
:博客页面模板。index.njk
:首页模板。package.json
:项目依赖和脚本配置文件。README.md
:项目说明文档。
2. 项目的启动文件介绍
项目的启动文件主要是 package.json
中的脚本部分。以下是关键的启动脚本:
{
"scripts": {
"start": "eleventy --serve",
"build": "eleventy"
}
}
start
:启动开发服务器,用于本地开发和预览。build
:构建生产环境的静态站点。
3. 项目的配置文件介绍
项目的配置文件是 .eleventy.js
。以下是配置文件的主要内容:
module.exports = function(eleventyConfig) {
// 添加自定义集合
eleventyConfig.addCollection("posts", function(collection) {
return collection.getFilteredByGlob("pages/*.njk");
});
// 添加自定义过滤器
eleventyConfig.addFilter("dateDisplay", require("./filters/date.js"));
// 添加自定义短代码
eleventyConfig.addShortcode("year", () => `${new Date().getFullYear()}`);
// 复制静态文件
eleventyConfig.addPassthroughCopy("img");
eleventyConfig.addPassthroughCopy("css");
eleventyConfig.addPassthroughCopy("js");
return {
dir: {
input: ".",
includes: "_includes",
data: "_data",
output: "_site"
},
templateFormats: ["njk", "md"],
htmlTemplateEngine: "njk",
markdownTemplateEngine: "njk"
};
};
addCollection
:添加自定义集合,如posts
。addFilter
:添加自定义过滤器,如dateDisplay
。addShortcode
:添加自定义短代码,如year
。addPassthroughCopy
:复制静态文件到输出目录。dir
:配置输入、包含、数据和输出目录。templateFormats
:配置支持的模板格式。htmlTemplateEngine
和markdownTemplateEngine
:配置模板引擎。