标签: contentful

我认为这是一个非常普通的问题，但我在谷歌上找不到任何东西。

我正在学习 NextJs（使用 TypeScript）并且我有一个站点成功地使用动态路由、SSR 和增量再生，所有设置和部署到 Vercel。这是我的动态路由处理程序中的GetStaticProps和GetStaticPaths代码示例：

export const getStaticPaths: GetStaticPaths = async () => {
    const routes = new CmsHelper().GetRoutes();

    const paths = (await routes).items.map((item, index, items) => {
        return item.fields.urlPath;
    })

    return {
        paths: paths,
        fallback: 'blocking',
    };
}

export const getStaticProps: GetStaticProps = async (context) => {
    const urlParts = context.params?.url as string[] || [];
    const urlPath = `/${urlParts.join('/')}`;
    const article = await new CmsHelper().GetArticle(urlPath);
    return {
        props: {
            article
        },
        revalidate: 10,
    } …

我正在以编程方式设置 UITableView。我希望单元格的内容跨越整个屏幕宽度。我已经成功地将单元格设置为跨越屏幕的宽度，但内容和分隔符仍然明显插入（下面的 iPad 屏幕截图）。

这是我的视图控制器实现中的 tableview 布局设置：

- (void) viewDidLoad {
    [super viewDidLoad];

    // table layout
    self.tableView.rowHeight = 192;
    UILayoutGuide *margins = [self.view layoutMarginsGuide];
    [self.tableView.leadingAnchor constraintEqualToAnchor:margins.leadingAnchor] ;
    [self.tableView.trailingAnchor constraintEqualToAnchor:margins.trailingAnchor];
    self.tableView.contentInset = UIEdgeInsetsMake(0, 0, 0, 0);

    CGRect tableRect = self.view.frame;
    self.tableView.frame = tableRect;

    // table colors
    self.tableView.backgroundColor = [UIColor grayColor];
    self.tableView.separatorColor = [UIColor grayColor];
    UIView *backView = [[UIView alloc] init];
    [backView setBackgroundColor:[UIColor grayColor]];
    [self.tableView setBackgroundView:backView];
}

然后我设置单元格的内容：

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewCell* cell = [super tableView:tableView cellForRowAtIndexPath:indexPath];
    cell.backgroundColor …

对你们我来说很轻松.

我想要一个特色内容部分,其中当前文章被排除

所以这适用于使用Middleman Blog delete_if:

<% blog(content).articles.delete_if{|item| item == current_article}.each do |article| %>
  <%= article_content %>
<% end %>

但是我使用的是Middleman代理,因此我无法访问该current_article方法...

我有一个YAML结构,其中包含以下模拟数据(以及其他),文件夹设置如下:data> site> caseStudy> RANDOM-ID423536.yaml(由CMS生成)

在每个yaml文件中你会找到如下内容:

:id: 2k1YccJrQsKE2siSO6o6ac
:title: Heyplace

我config.rb看起来像这样

data.site.caseStudy.each do | id, this |
  proxy "/cases/#{this.slug}/index.html", "/cases/cases-template.html", :locals => { this: this }, :ignore => true
end

我的模板文件包含以下内容

<%= partial(:'partials/footer', :locals => {:content => data.site.caseStudy, :title => 'See more projects'}) %>

我的循环获取内容

<% content.each do |id, this| %>
  <%= …

Contentful 有一个“链接”的概念，它可以指向许多对象或一个。但是，我无法找到一种方法来模拟反向关系而不加倍工作（即指定每个对象的子项和父项）。

我想使用 Contentful 来支持一个简单的导航，如下所示：

• 菜单项 1

  • 子菜单项 1
  • 子菜单项 2
  • 子菜单项 3

• 菜单项 2

  • 子菜单项 4
  • 子菜单项 5
  • 子菜单项 6
    -- 子子菜单项 1

链接可能看起来像 /<parent.slug>/<child.slug>/<child.slug>/

我可以通过遍历父级关系来找到要呈现的页面条目，以确保我得到一个带有 slug 的页面，以及一个带有特定 slug 的父级。

但是，除非您在对象中包含“子项”字段，否则很难在不诉诸多个 API 调用的情况下呈现子菜单项 - 这容易出错和不一致。

我正在 Contentful 交付 API 中运行查询，以返回基于其 slug 的特定页面项目。该查询还设置区域设置，以便它仅返回我需要呈现的语言的数据。

但是，我还需要设置页面的 hreflang 标签，以帮助谷歌知道该页面也有其他语言版本。

我从 contentful 得到的代表我的页面的内容项目的响应似乎没有任何类型的数组属性，可以让我轻松确定内容可用的其他语言。

我假设这一定是 SEO 的一个非常常见的要求，所以希望有人可以向我指出如何在 Contentful 的回复中得到这个要求？

这是我的回应的一个例子。我希望看到的是另一个名为的属性，allLocales该属性将列出可以提供此内容的每个区域设置。

更新： 我知道我可以获得空间中所有区域设置的列表，以及locales=*在我的查询中设置的列表，但这仍然没有帮助。我只需要知道我检索到的给定内容片段上可用的区域设置子集。例如，一个页面可能仅支持 2 个区域设置，但整个空间中可能有 3 个或更多区域设置可用。

Locales=* 没有帮助，因为它包含每个链接项上的区域设置（可能有内容，也可能没有内容），而我需要的是一个数组对象，其中包含父内容项上可用的所有区域设置。即使用户没有将内容放入字段中，我也想明确地知道是否已在内容上选择了区域设置。

{
    "sys": {
        "type": "Array"
    },
    "total": 1,
    "skip": 0,
    "limit": 1,
    "items": [
        {
            "sys": {
                "space": {
                    "sys": {
                        "type": "Link",
                        "linkType": "Space",
                        "id": "xuehyxrgb9ri"
                    }
                },
                "id": "1MhAzkNYvOSU8GgUQcQKqa",
                "type": "Entry",
                "createdAt": "2018-01-05T10:48:30.373Z",
                "updatedAt": "2018-01-05T12:57:00.066Z",
                "revision": 6,
                "contentType": {
                    "sys": {
                        "type": "Link",
                        "linkType": "ContentType",
                        "id": "contentPage" …

我正在寻找GatsbyJS和Contentful的帮助.文档并没有给我足够的信息.

我期待以编程方式创建基于内容数据的页面.在这种情况下,数据类型是零售"商店",其中gatsby页面位于/ retail_store_name

每个商店的index.js基本上是一些反应组件,其中传递了道具,例如商店名称和谷歌地方ID.

1. 将数据添加到内容.这是我的示例数据模型:

   {
       "name": "Store"
       "displayField": "shopName",
       "fields": [
           {
               "id": "shopName",
               "name": "Shop Name",
               "type": "Symbol",
               "localized": false,
               "required": true,
               "validations": [
                   {
                   "unique": true
                   }
               ],
               "disabled": false,
               "omitted": false
               },
               {
               "id": "placeId",
               "name": "Place ID",
               "type": "Symbol",
               "localized": false,
               "required": true,
               "validations": [
                   {
                   "unique": true
                   }
               ],
               "disabled": false,
               "omitted": false
           }
   }
   

   Run Code Online (Sandbox Code Playgroud)

2. 我已将内容丰富的站点数据添加到gatsby-config.js

   // In gatsby-config.js
   plugins: [
       {
           resolve: `gatsby-source-contentful`,
           options: {
           spaceId: `your_space_id`,
           accessToken: `your_access_token`
           },
       },
   ];
   

   Run Code Online (Sandbox Code Playgroud)

3. 查询满意 …

假设我有一个页面构建器字段，它引用了许多不同类型的内容块。

• 视频
• 引用
• 广告

等等...

根据我的阅读，不鼓励在数组中使用多种类型。

但是在这种情况下你还能做什么呢？

有没有办法在 GraphQL 中处理这个问题？

有没有更好的方法来构造数据？

我制作了一个从 Contentful 中提取数据的页面。数据正确提取，但使用方法中的功能的按钮不起作用。变量的实时更新（例如，使用v-model）也不起作用。

我在控制台中看到此错误：

我认为这个错误是问题所在。有谁知道出了什么问题？我不知道如何解决它:(

我的 contentful.js：

const contentful = require('contentful')

const client = contentful.createClient({
  space: process.env.CONTENTFUL_ENV_SPACE_ID,
  accessToken: process.env.CONTENTFUL_ENV_ACCESS_TOKEN
})

module.exports = client

拉取数据的代码：

export default {
  layout: "landing_page",
  asyncData() {
    return client
      .getEntries({
        content_type: "landingPage"
      })
      .then(entries => {
        return { contentfulData: entries.items[0].fields };
      });
  },
  computed: {
    styles() {
      return landingPageCss;
    }
  },
  components: {
    priceBox,
    contact,
    home,
    aboutUs,
    footerDiv
  }
};

正如我所看到的，当仅查询 contentfulBlogPost 原始数据时，不再有 json 选项。我能够进行一些更改以获取身体中的所有内容，除了该帖子中的图像。

如果我在 GraphQL Playground 中进行测试，我可以获得图像 id 和 url，但仅此而已。

query {
  allContentfulAsset {
    edges {
      node {
        id
        file {
          url
        }
      }
    }
  }
}

我试图找到一个如何获取嵌入图像的示例，但没有运气......

import React from 'react'
import { graphql } from 'gatsby'
import { documentToReactComponents } from '@contentful/rich-text-react-renderer'

import Layout from '../components/layout'


export const query = graphql`
  query($slug: String!) {
    contentfulBlogPost(slug: {eq: $slug}) {
      title
      publishedDate(formatString: "MMMM Do, YYYY")
      body {
        raw 
      }
    }
    allContentfulAsset {
      edges {
        node {
          id
          file …

我的 ISR 有一点问题。我的 revalidate 属性等于 1s，如下所示

export async function getStaticProps({ params }) {
  const data = await client.getEntries({
     content_type: "product",
    "fields.name": params.slug,
  });


  if (!data.items[0]) {
    return {
      notFound: true,
    };
  }
  return {
    props: {
      article: data.items[0],
      revalidate: 1,
    },
  };
}

当我在 Contentful 中创建产品时，页面会按我的预期创建。当我想进入不存在的页面时，我会收到预期的 404 错误。当我更改现有产品中 Contentful 中的某些内容或将其删除时，问题就会出现。

当我在 Contentful 中删除产品时，产品页面中的产品列表会更新并且产品会消失，但我仍然可以进入该产品的页面。此外，当我重命名产品名称时，产品列表也会更新，但我仍然可以访问较早的页面名称。

有什么办法可以解决这个问题吗？

获取静态路径

export async function getStaticPaths() {
  const data = await client.getEntries({
    content_type: "product",
  });

  return {
    paths: data.items.map((item) => ({
      params: { slug: item.fields.name },
    })), …