Eleventy Starter Kit V4 使用教程

最新推荐文章于 2024-09-13 07:55:09 发布

吕岚伊

最新推荐文章于 2024-09-13 07:55:09 发布

阅读量828

点赞数 22

本文链接：https://blog.csdn.net/gitblog_01020/article/details/141747036

版权

Eleventy Starter Kit V4 使用教程

Starter-Kit-V4-EleventyComplete Website kit built in eleventy with a working blog that connects to Netlify CMS in a few clicks项目地址:https://gitcode.com/gh_mirrors/st/Starter-Kit-V4-Eleventy

1. 项目的目录结构及介绍

Starter-Kit-V4-Eleventy/
├── src/
│   ├── _includes/
│   ├── assets/
│   ├── css/
│   ├── images/
│   ├── js/
│   ├── posts/
│   ├── _data/
│   ├── index.njk
│   ├── about.njk
│   └── blog.njk
├── .eleventy.js
├── .gitignore
├── LICENSE
├── README.md
├── package.json
└── package-lock.json

目录结构介绍

src/: 项目的源代码目录。
- _includes/: 包含可重用的模板文件，如头部、尾部等。
- assets/: 存放静态资源文件，如字体、图标等。
- css/: 存放样式文件。
- images/: 存放图片文件。
- js/: 存放JavaScript文件。
- posts/: 存放博客文章的Markdown文件。
- _data/: 存放全局数据文件。
- index.njk: 首页模板文件。
- about.njk: 关于页面模板文件。
- blog.njk: 博客页面模板文件。
.eleventy.js: Eleventy的配置文件。
.gitignore: Git忽略文件配置。
LICENSE: 项目许可证文件。
README.md: 项目说明文档。
package.json: 项目依赖和脚本配置文件。
package-lock.json: 锁定依赖版本的文件。

2. 项目的启动文件介绍

项目的启动文件主要是package.json中的脚本配置。以下是常用的启动命令：

{
  "scripts": {
    "start": "eleventy --serve",
    "build": "eleventy"
  }
}

启动命令介绍

npm start: 启动开发服务器，监听文件变化并实时编译。
npm run build: 构建生产环境的静态文件。

3. 项目的配置文件介绍

项目的配置文件是.eleventy.js，它包含了Eleventy的各种配置选项。以下是一个简单的配置示例：

module.exports = function(eleventyConfig) {
  // 添加过滤器
  eleventyConfig.addFilter("myFilter", function(value) {
    return value.toUpperCase();
  });

  // 添加短代码
  eleventyConfig.addShortcode("myShortcode", function(name) {
    return `<p>Hello, ${name}!</p>`;
  });

  // 添加集合
  eleventyConfig.addCollection("myCollection", function(collection) {
    return collection.getFilteredByTag("posts");
  });

  // 添加Passthrough文件复制
  eleventyConfig.addPassthroughCopy("src/assets");
  eleventyConfig.addPassthroughCopy("src/images");

  return {
    dir: {
      input: "src",
      includes: "_includes",
      data: "_data",
      output: "dist"
    },
    templateFormats: ["njk", "md"],
    htmlTemplateEngine: "njk",
    markdownTemplateEngine: "njk"
  };
};