开源项目 eleventy-high-performance-blog 使用教程

开源项目 eleventy-high-performance-blog 使用教程

eleventy-high-performance-blogA high performance blog template for the 11ty static site generator.项目地址:https://gitcode.com/gh_mirrors/el/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：配置模板引擎。

eleventy-high-performance-blogA high performance blog template for the 11ty static site generator.项目地址:https://gitcode.com/gh_mirrors/el/eleventy-high-performance-blog