Skip to main content

11ty 入门

¥Getting Started with 11ty

🧹 删除了集成指南

Strapi 文档团队专注于改进 Strapi 5 核心体验的文档。我们将在未来 6 个月内发布许多更改，请密切关注👀。

¥The Strapi Documentation team focuses on improving the documentation for Strapi 5's core experience. We will release many changes in the next 6 months, so please keep an eye out 👀.

因此，当前页面现在仅处于维护模式，可能未完全与 Strapi 5 保持同步，并且很快将从 docs.strapi.io 中删除并移至 Strapi 的 集成页面。

¥As a result, the present page is now in maintenance mode only, might not be fully up-to-date with Strapi 5, and will soon be removed from docs.strapi.io and moved to Strapi's integrations page.

同时，如果你想帮助我们改进此页面，请随时 contribute 到文档的 GitHub 存储库。

¥In the meantime, if you want to help us improve this page, please feel free to contribute to the documentation's GitHub repository.

本集成指南遵循 快速入门指南。你应该能够通过浏览 URL http://localhost:1337/api/restaurants 使用该 API。

¥This integration guide follows the Quick Start Guide. You should be able to consume the API by browsing the URL http://localhost:1337/api/restaurants.

如果你尚未阅读快速入门指南，则使用 11ty 请求 Strapi API 的方式将保持不变，只是你不获取相同的内容。

¥If you haven't gone through the Quick Start Guide, the way you request a Strapi API with 11ty remains the same except that you do not fetch the same content.

创建一个 11ty 应用​

¥Create an 11ty app

创建 package.json 文件，安装 Eleventy 并将其保存到你的项目中。

¥Create a package.json file, install and save Eleventy into your project.

yarn init -y
yarn add @11ty/eleventy

确认安装成功：

¥Confirm the installation went ok:

npx @11ty/eleventy
# Wrote 0 files in 0.02 seconds (v0.11.0)

配置 11ty​

¥Configure 11ty

11ty 不会为你创建任何文件结构。由你决定是否去做。

¥11ty does not create any file structure for you. It's up to you to do it.

  • 创建包含 categories.js 和 restaurants.js 文件的 ./src/_data 文件夹。它们将用于从 Strapi 获取你的内容。

    ¥Create a ./src/_data folder containing a categories.js and a restaurants.js file. They will be used to fetch your content from Strapi.

  • 创建包含 default.liquid 文件的 ./src/_templates 文件夹。它将成为你项目的默认模板。

    ¥Create a ./src/_templates folder containing a default.liquid file. It will be the default template of your project.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <title>
      {{ renderData.title }}
    </title>
  </head>

  <body>
    <a href="/">Home</a>
    {{ content }}
  </body>
</html>

  • 创建 ./src/index.md、./src/restaurant.md 和 ./src/category.md 文件。他们将定义你如何渲染数据。

    ¥Create a ./src/index.md, ./src/restaurant.md and a ./src/category.md file. They will define how you'll present the data.

  • 创建一个包含以下内容的 .eleventy.js 文件（确保在文件名前面加上点前缀）：

    ¥Create a .eleventy.js file containing the following (make sure to prefix the file's name with the dot):



const HtmlMin = require('html-minifier');




const ErrorOverlay = require('eleventy-plugin-error-overlay');



module.exports = eleventyConfig => {
  eleventyConfig.setTemplateFormats(['md']);
  eleventyConfig.addPlugin(ErrorOverlay);
  eleventyConfig.addTransform('htmlmin', (content, outputPath) => {
    if (outputPath.endsWith('.html')) {
      let minified = HtmlMin.minify(content, {
        useShortDoctype: true,
        removeComments: true,
        collapseWhitespace: true,
      });
      return minified;
    }
    return content;
  });
  return {
    dir: {
      input: 'src',
      output: 'dist',
      includes: '_templates',
      data: '_data',
    },
    jsDataFileSuffix: '.data',
  };
};

  • 最后，将以下包添加到你的应用中：

    ¥Finally, add the following packages to your application:

yarn add axios eleventy-plugin-error-overlay html-minifier

GET 请求你的集合类型​

¥GET Request your collection type

对 restaurant 集合类型执行 GET 请求以获取所有餐厅。

¥Execute a GET request on the restaurant collection type in order to fetch all your restaurants.

确保你激活了 restaurant 集合类型的 find 权限。

¥Be sure that you activated the find permission for the restaurant collection type.

Example GET request
const { default: axios } = require('axios');

module.exports = async () => {
  try {
    const res = await axios.get('http://localhost:1337/api/restaurants');
    return res.data;
  } catch (error) {
    console.error(error);
  }
};
Example response
{
  "data": [
    {
      "id": 2,
      "documentId": "na8ce9ltc0y99syjbs3vbigx",
      "Name": "Biscotte Restaurant",
      "Description": [
        {
          "type": "paragraph",
          "children": [
            {
              "type": "text",
              "text": "Welcome to Biscotte restaurant! Restaurant Biscotte offers a cuisine based on fresh, quality products, often local, organic when possible, and always produced by passionate producers."
            }
          ]
        }
      ],
      "createdAt": "2024-08-09T08:59:05.114Z",
      "updatedAt": "2024-08-09T08:59:06.341Z",
      "publishedAt": "2024-08-09T08:59:06.344Z",
      "locale": "en"
    }
  ],
  "meta": {
    "pagination": {
      "page": 1,
      "pageSize": 25,
      "pageCount": 1,
      "total": 1
    }
  }
}

示例​

¥Example

./src/_data/restaurants.js

const { default: axios } = require('axios');

module.exports = async () => {
  try {
    const res = await axios.get('http://localhost:1337/api/restaurants?populate=*');
    return res.data;
  } catch (error) {
    console.error(error);
  }
};

./src/index.md

---
title: Restaurants
layout: default.liquid
pagination:
  data: restaurants.data
  size: 100
  alias: restaurants
---

# Restaurants

<ul>
{%- for restaurant in restaurants -%}
  <li><a href="/restaurants/{{ restaurant.id }}/">{{ restaurant.attributes.name }}</a></li>
{%- endfor -%}
</ul>

./src/restaurant.md

---
eleventyComputed:
  title: {{ restaurant.attributes.name }}
layout: default.liquid
pagination:
  data: restaurants.data
  size: 1
  alias: restaurant
permalink: 'restaurants/{{ restaurant.id }}/'
---

# {{ restaurant.attributes.name }}

{{ restaurant.attributes.description }}

## Categories

{% for category in restaurant.attributes.categories.data %}

  <li><a href="/categories/{{ category.id }}/">{{ category.attributes.name }}</a></li>
{% endfor %}

对 category 集合类型执行 GET 请求，以获取具有所有关联餐厅的特定类别。

¥Execute a GET request on the category collection type in order to fetch a specific category with all the associated restaurants.

确保你激活了 category 集合类型的 find 权限。

¥Be sure that you activated the find permission for the category collection type.

Example GET request
const { default: axios } = require('axios');

module.exports = async () => {
  try {
    const res = await axios.get('http://localhost:1337/api/categories?populate=*');
    return res.data;
  } catch (error) {
    console.error(error);
  }
};
Example response
{
    "data": [
        {
            "id": 1,
            "attributes": {
                "name": "French Food",
                "createdAt": "2022-05-23T09:42:04.679Z",
                "updatedAt": "2022-05-23T09:44:25.309Z",
                "publishedAt": "2022-05-23T09:44:25.308Z",
                "restaurants": {
                    "data": []
                }
            }
        },
        {
            "id": 2,
            "attributes": {
                "name": "Brunch",
                "createdAt": "2022-05-23T09:42:16.764Z",
                "updatedAt": "2022-05-23T09:44:21.534Z",
                "publishedAt": "2022-05-23T09:44:21.532Z",
                "restaurants": {
                    "data": [
                        {
                            "id": 1,
                            "attributes": {
                                "name": "Biscotte Restaurant",
                                "description": "Welcome to Biscotte restaurant! **Restaurant Biscotte** offers a cuisine based on fresh, quality products, often local, organic when possible, and always produced by passionate producers.",
                                "createdAt": "2022-05-23T09:41:46.762Z",
                                "updatedAt": "2022-05-23T09:44:32.424Z",
                                "publishedAt": "2022-05-23T09:44:32.423Z"
                            }
                        }
                    ]
                }
            }
        }
    ],
    "meta": {
        "pagination": {
            "page": 1,
            "pageSize": 25,
            "pageCount": 1,
            "total": 2
        }
    }
}

示例​

¥Example

./src/_data/categories.js

const { default: axios } = require('axios');

module.exports = async () => {
  try {
    const res = await axios.get('http://localhost:1337/api/categories?populate=*');
    return res.data;
  } catch (error) {
    console.error(error);
  }
};

./src/category.md

---
eleventyComputed:
  title: {{ category.attributes.name }}
layout: default.liquid
pagination:
  data: categories.data
  size: 1
  alias: category
permalink: 'categories/{{ category.id }}/'
---

# {{ category.name }}

## Restaurants

{% for restaurant in category.attributes.restaurants.data %}

<li><a href="/restaurants/{{ restaurant.id }}/">{{ restaurant.attributes.name }}</a></li>
{% endfor %}

你可以通过浏览 http://localhost:8081/restaurants/<id-of-restaurant> 和 http://localhost:8081/categories/<id-of-category> 找到你的餐厅和类别。

¥You can find your restaurants and categories by browsing http://localhost:8081/restaurants/<id-of-restaurant> and http://localhost:8081/categories/<id-of-category>.

用户故事​

¥User Stories