Skip to main content

Jekyll 入门

¥Getting Started with Jekyll

🧹 删除了集成指南

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.

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

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

创建 Jekyll 应用​

¥Create a Jekyll app

确保你的计算机上有 安装 Jekyll。

¥Be sure to have Jekyll installed on your computer.

jekyll new jekyll-app

配置 Jekyll​

¥Configure Jekyll

Jekyll 是 静态站点生成器，将在构建时从 Strapi 获取你的内容。你需要配置 Jekyll 才能与 Strapi 应用进行通信。

¥Jekyll is a Static Site Generator and will fetch your content from Strapi at build time. You need to configure Jekyll to communicate with your Strapi application.

  • 将 jekyll-strapi 添加到你的 Gemfile

    ¥Add jekyll-strapi to your Gemfile

group :jekyll_plugins do
  gem "jekyll-feed", "~> 0.12"
  gem "jekyll-strapi"
end

  • 将 jekyll-strapi 添加到 _config.yml 中的插件中。

    ¥Add jekyll-strapi to your plugins in _config.yml.

plugins:
  - jekyll-feed
  - jekyll-strapi

  • 在 _config.yml 的末尾添加 Strapi 的配置。

    ¥Add the configuration of Strapi at the end of the _config.yml.

strapi:
  # Your API endpoint (optional, default to http://localhost:1337)
  endpoint: http://localhost:1337
  collections:
    restaurants:
      type: restaurants

    categories:
      type: categories

  • 运行 bundle install 来安装你的 gems。

    ¥Run bundle install to install your gems.

bundle install

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

./_layouts/home.html

---
layout: default
---

<div class="home">
  <h1 class="page-heading">Restaurants</h1>
  {%- if strapi.collections.restaurants.size > 0 -%}
  <ul>
    {%- for restaurant in strapi.collections.restaurants -%}
    <li>
      {{ restaurant.name }}
    </li>
    {%- endfor -%}
  </ul>
  {%- endif -%}
</div>

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

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

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

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

示例​

¥Example

./layouts/index.html

---
layout: default
---

<div class="home">
    {%- if strapi.collections.categories[0].restaurants.size > 0 -%}
    <h1 class="page-heading">{{ strapi.collections.categories[0].name }}</h1>
    <ul>
        {%- for restaurant in strapi.collections.categories[0].restaurants -%}
        <li>
            {{ restaurant.name }}
        </li>
        {%- endfor -%}
    </ul>
    {%- endif -%}
</div>

使用以下命令运行你的应用：

¥Run your application with:

bundle exec jekyll serve

我们可以为每个类别生成页面。

¥We can generate pages for each category.

  • 通过使用以下内容更新 _config.yml 文件，告诉 Jekyll 为每个类别生成一个页面：

    ¥Tell Jekyll to generate a page for each category by updating the _config.yml file with the following:

strapi:
  # Your API endpoint (optional, default to http://localhost:1337)
  endpoint: http://localhost:1337
  # Collections, key is used to access in the strapi.collections
  # template variable
  collections:
    # Example for a "posts" collection
    restaurants:
      # Collection name (optional). Used to construct the url requested. Example: type `foo` would generate the following url `http://localhost:1337/foo`.
      type: restaurants

    categories:
      # Collection name (optional). Used to construct the url requested. Example: type `foo` would generate the following url `http://localhost:1337/foo`.
      type: categories
      permalink: categories/:name
      layout: category.html
      # Generate output files or not (default: false)
      output: true

  • 创建一个 _layouts/category.html 文件，该文件将显示每个类别的内容：

    ¥Create a _layouts/category.html file that will display the content of each one of your category:

<h1>{{ page.document.name }}</h1>
<ul>
  {%- for restaurant in page.document.restaurants -%}
  <li>
    {{ restaurant.name }}
  </li>
  {%- endfor -%}
</ul>

构建应用后，你将能够在 _site 文件夹中看到 category 文件夹。

¥After building your application, you'll be able to see a category folder in your _site folder.

你可以通过浏览 http://localhost:4000/category/<name-of-category> 找到你的餐厅类别。

¥You can find your restaurant categories by browsing http://localhost:4000/category/<name-of-category>.