0

我需要你的帮助！
我正在尝试按照本指南使用 11ty 获取strapi数据：
https ://strapi.io/documentation/developer-docs/latest/developer-resources/content-api/integrations/11ty.html#get-request-your-集合类型

我已经处理了除图像之外的所有数据。

获取代码：

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

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

11ty代码：

---
title: Articles
layout: default.liquid
pagination:
  data: articles
  size: 100
  alias: articles
---

<div class="works content">
    <div class="container">
        <div class="works__items">
            {%- for article in articles -%}
            <div class="works__item">
                    <div class="works__image">
                        <img src="{{ article.image.url }}" alt="{{ work.data.title }}">
                    </div>
                    <div class="works__content">
                        <div class="works__title">
                            <h3>{{ article.title }}</h3>
                            <span>
                                {{ article.year }}
                            </span>
                        </div>
                        <div class="works__description">
                            <p>{{article.content }}</p>
                        </div>
                    </div>
                </div>
            {%- endfor -%}
            </div>
        </div>
    </div>
</div>

杰森：

[

    {
        "id": 1,
        "title": "My first article post",
        "content": "This is the first strapi post",
        "year": 2021,
        "users": null,
        "published_at": "2021-09-19T12:52:24.304Z",
        "created_at": "2021-09-19T12:10:38.253Z",
        "updated_at": "2021-09-19T17:39:17.072Z",
        "image": [
            {
                "id": 4,
                "name": "steve-johnson-3Sf_G9m0gcQ-unsplash.jpg",
                "alternativeText": "",
                "caption": "",
                "width": 1920,
                "height": 1287,
                "formats": {
                    "thumbnail": {
                        "name": "thumbnail_steve-johnson-3Sf_G9m0gcQ-unsplash.jpg",
                        "hash": "thumbnail_steve_johnson_3_Sf_G9m0gc_Q_unsplash_106d5a6cc8",
                        "ext": ".jpg",
                        "mime": "image/jpeg",
                        "width": 233,
                        "height": 156,
                        "size": 11.65,
                        "path": null,
                        "url": "/uploads/thumbnail_steve_johnson_3_Sf_G9m0gc_Q_unsplash_106d5a6cc8.jpg"
                    },
                    "large": {
                        "name": "large_steve-johnson-3Sf_G9m0gcQ-unsplash.jpg",
                        "hash": "large_steve_johnson_3_Sf_G9m0gc_Q_unsplash_106d5a6cc8",
                        "ext": ".jpg",
                        "mime": "image/jpeg",
                        "width": 1000,
                        "height": 670,
                        "size": 221.22,
                        "path": null,
                        "url": "/uploads/large_steve_johnson_3_Sf_G9m0gc_Q_unsplash_106d5a6cc8.jpg"
                    },
                    "medium": {
                        "name": "medium_steve-johnson-3Sf_G9m0gcQ-unsplash.jpg",
                        "hash": "medium_steve_johnson_3_Sf_G9m0gc_Q_unsplash_106d5a6cc8",
                        "ext": ".jpg",
                        "mime": "image/jpeg",
                        "width": 750,
                        "height": 503,
                        "size": 123.25,
                        "path": null,
                        "url": "/uploads/medium_steve_johnson_3_Sf_G9m0gc_Q_unsplash_106d5a6cc8.jpg"
                    },
                    "small": {
                        "name": "small_steve-johnson-3Sf_G9m0gcQ-unsplash.jpg",
                        "hash": "small_steve_johnson_3_Sf_G9m0gc_Q_unsplash_106d5a6cc8",
                        "ext": ".jpg",
                        "mime": "image/jpeg",
                        "width": 500,
                        "height": 335,
                        "size": 54.99,
                        "path": null,
                        "url": "/uploads/small_steve_johnson_3_Sf_G9m0gc_Q_unsplash_106d5a6cc8.jpg"
                    }
                },
                "hash": "steve_johnson_3_Sf_G9m0gc_Q_unsplash_106d5a6cc8",
                "ext": ".jpg",
                "mime": "image/jpeg",
                "size": 698.21,
                "url": "/uploads/steve_johnson_3_Sf_G9m0gc_Q_unsplash_106d5a6cc8.jpg",
                "previewUrl": null,
                "provider": "local",
                "provider_metadata": null,
                "created_at": "2021-09-19T12:10:16.836Z",
                "updated_at": "2021-09-19T12:10:16.845Z"
            }
        ]
    },
    {
        "id": 2,
        "title": "Second article",
        "content": "The second article",
        "year": 2001,
        "users": null,
        "published_at": "2021-09-19T17:36:34.649Z",
        "created_at": "2021-09-19T17:36:32.774Z",
        "updated_at": "2021-09-19T17:36:34.665Z",
        "image": [ ]
    },
    {
        "id": 3,
        "title": "Third article",
        "content": "Third article",
        "year": 2134,
        "users": null,
        "published_at": "2021-09-19T17:38:07.022Z",
        "created_at": "2021-09-19T17:38:05.706Z",
        "updated_at": "2021-09-19T17:38:07.036Z",
        "image": [ ]
    }

]

十分感谢！

4

2 回答 2

0

好吧，据我了解，您需要从image密钥中渲染图像。为此，您只需遍历image文章中的数组，然后访问它的属性，如下所示：

<div class="works content">
    <div class="container">
        <div class="works__items">
            {%- for article in articles -%}
            <div class="works__item">
                   {%- for image in article.image -%}
                    <div class="works__image">
                        <img src="{{ image.url }}" alt="{{ work.data.title }}">
                    </div>
                   {%- endfor -%}
                    <div class="works__content">
                        <div class="works__title">
                            <h3>{{ article.title }}</h3>
                            <span>
                                {{ article.year }}
                            </span>
                        </div>
                        <div class="works__description">
                            <p>{{article.content }}</p>
                        </div>
                    </div>
                </div>
            {%- endfor -%}
            </div>
        </div>
    </div>
</div>
于 2021-09-20T18:34:46.377 回答
0

有 3 张图片，因此您需要获得正确的尺寸，而不仅仅是 {{article.image.url}}。

根据我的经验，将这种“复杂”的 api 响应转换为更适合模板的东西实际上要好得多。您可以在数据文件中执行此操作。在数据文件中操作数据比在模板中操作数据要容易得多。

于 2021-10-08T22:16:27.830 回答