标签: contentful

Contentful.com API订单/排序查询

对于有使用contentful.com API经验的人,我正在尝试按字段名称进行查询和排序,并且当前获得"ServerError".针对其示例API生成的查询示例(使用"fields.name"作为参数):

https://cdn.contentful.com/spaces/cfexampleapi/entries?order=fields.name&access_token=b4c0n73n7fu1

请注意,如果使用"sys.createdAt",它可以正常工作......

https://cdn.contentful.com/spaces/cfexampleapi/entries?order=sys.createdAt&access_token=b4c0n73n7fu1

文档非常模糊(https://www.contentful.com/developers/documentation/content-delivery-api/javascript/#search-order),我搜索了很长时间的例子/样本,但无济于事.

提前感谢任何想法/想法!

javascript contentful

5
推荐指数
1
解决办法
3172
查看次数

将换行符格式化为段落

我正在使用Contentful CMS来管理内容并使用其API来提取内容.

内容作为json对象被拉入.对象中的一个键是我要拉的条目的主要文本块.该字符串中没有实际代码,但它确实有换行符.在Chrome控制台中,这些显示为一个小的返回箭头.该对象的一部分如下所示:

var article = {
  name: "Some name here",
  content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis libero lacus. Morbi non elit purus. Mauris eu dictum urna. Nam vulputate venenatis diam nec feugiat. Praesent dapibus viverra ullamcorper. Donec euismod purus vitae risus dignissim, id pulvinar enim tristique. Donec sed justo justo. Sed et ornare lacus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis libero lacus. Morbi non elit purus. Mauris eu …
Run Code Online (Sandbox Code Playgroud)

html javascript json contentful

5
推荐指数
1
解决办法
734
查看次数

Gatsby.js:按嵌套对象属性过滤GraphQL查询

我正在一个新闻网站上工作,该网站上将有文章,每篇文章都有一个或多个各自的作者。如果单击作者的姓名,它将带您到一个页面,显示他们的信息和他们撰写的文章列表。

因此,每篇文章都有一个authors属性,该属性又是author具有属性的对象数组:全名,slug(全名的小写版本,用空格代替破折号),等等。

定义查询时是否可以按特定作者的文章过滤文章?

query authorQuery($slug: String!) {
  allContentfulArticle(filter: { //not sure what to do here }) {
    edges {
      node {
        title
        slug
        authors {
          name
          slug
        }
      }
    }
  }
}
Run Code Online (Sandbox Code Playgroud)

我的另一个选择是加载所有文章,然后在组件中设置过滤器,如下所示:

const articles = data.allContentfulArticle.edges.filter(({ node }) => {
  return node.authors.some((author) => author.slug === data.contentfulAuthor.slug);
});
Run Code Online (Sandbox Code Playgroud)

这不是世界末日,但是它违反了仅加载所需数据的GraphQL原则。

filter contentful graphql graphql-js gatsby

5
推荐指数
1
解决办法
4064
查看次数

Gatsby.js:Markdown中的预处理相对路径链接

我想知道是否有办法(可能通过为其创建插件gatsby-transformer-remark)将相对路径链接转换为使用<Link>from的方式gatsby-link

例如,说我在markdown文件中包含以下内容:

# Here is a Header

Check out my about page:

[About](/about)
Run Code Online (Sandbox Code Playgroud)

如果我导入此markdown并显示为:

<div dangerouslySetInnerHTML={{ __html: whatever.childMarkdownRemark.html }} />
Run Code Online (Sandbox Code Playgroud)

然后,当单击“关于”链接时,它打破了单页应用程序的魔力。

有什么办法可以防止这种情况?提前致谢。

markdown reactjs contentful gatsby

5
推荐指数
1
解决办法
772
查看次数

Angular 6 PWA 服务工作者不离线提供内容

我正在尝试使用 Angular 6 设置 PWA,但无法让 Service Worker 离线提供内容。我尝试了很多配置和东西几天了,但没有成功。

Service Worker 似乎已注册并且在 Chrome 的审计选项卡中运行灯塔通过了 pwa 测试。

服务工作者

PWA 评分

PWA 测试详情

我正在使用 Contentful 为该站点提供文本/资产。Service Worker 正在从 dataGroups 中获取内容,但在 Service Worker 进行获取时返回 204 代码。我只能假设这会导致缓存存储为空。

网络标签

缓存存储

但话又说回来,我希望灯塔测试失败,因为它不提供离线内容。我认为这是因为只要会话没有改变,页面就可以脱机工作。这意味着如果我关闭网络连接,它会在我从一条路线导航到另一条路线时工作,但如果我重新加载/打开新标签页/重新打开浏览器,则会失败并显示 504 代码。

我在本地 IIS 下托管 Angular 6 应用程序。

索引.html:

<base href="/servicemanager/">
Run Code Online (Sandbox Code Playgroud)

网络配置:

<?xml version="1.0" encoding="utf-8"?>
<configuration>

<system.webServer>
  <rewrite>
    <rules>
      <rule name="Angular Routes" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        </conditions>
        <action type="Rewrite" url="/servicemanager/index.html" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>

</configuration>
Run Code Online (Sandbox Code Playgroud)

ngsw-config.json:

"dataGroups": [
{ …
Run Code Online (Sandbox Code Playgroud)

service-worker contentful progressive-web-apps angular angular-service-worker

5
推荐指数
0
解决办法
3835
查看次数

环境变量不起作用(Next.JS 9.4.4)

所以我使用 Contentful API 从我的帐户中获取一些内容并将其显示在我的 Next.Js 应用程序中(我使用的是 next 9.4.4)。这里非常基本。现在为了保护我的凭据,我想使用环境变量(我以前从未使用过它,而且我对所有这些都不熟悉,所以我有点迷茫)。

我正在使用以下内容在我的 index.js 文件中创建 Contentful Client:

const client = require('contentful').createClient({
    space: 'MYSPACEID',
    accessToken: 'MYACCESSTOKEN',
});
Run Code Online (Sandbox Code Playgroud)

MYSPACEID并且MYACCESSTOKEN是硬编码的,所以我想将它们放在一个 .env 文件中以保护它,并且在部署在 Vercel 上时不要将其公开。

我创建了一个.env文件并像这样填充它:

CONTENTFUL_SPACE_ID=MYSPACEID
CONTENTFUL_ACCESS_TOKEN=MYACCESSTOKEN
Run Code Online (Sandbox Code Playgroud)

当然,MYACCESSTOKENMYSPACEID包含正确的键。

然后在我的 index.js 文件中,我执行以下操作:

const client = require('contentful').createClient({
  space: `${process.env.CONTENTFUL_SPACE_ID}`,
  accessToken: `${process.env.CONTENTFUL_ACCESS_TOKEN}`,
});
Run Code Online (Sandbox Code Playgroud)

但是当我使用它时它不起作用yarn dev,我收到以下控制台错误:

{
  sys: { type: 'Error', id: 'NotFound' },
  message: 'The resource could not be found.',
  requestId: 'c7340a45-a1ef-4171-93de-c606672b65c3'
}
Run Code Online (Sandbox Code Playgroud)

这是我的主页以及我如何从 Contentful 检索内容并将它们作为道具传递给我的组件:

const client = …
Run Code Online (Sandbox Code Playgroud)

javascript environment-variables reactjs contentful next.js

5
推荐指数
6
解决办法
2万
查看次数

Azure静态Web应用程序环境变量

我正在尝试通过 Azure Static Web 应用程序发布 Gatsbyjs。我有一个插件(gatsby-source-contentful)。

我需要传递如下变量:

{
      resolve: `gatsby-source-contentful`,
      options: {
        spaceId: process.env.CONTENTFUL_SPACE_ID,
        accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
      },
},
Run Code Online (Sandbox Code Playgroud)

错误:

Running 'npm run build'...


> gatsby-starter-default@0.1.0 build /github/workspace
> gatsby build

success open and validate gatsby-configs - 0.021s
error Invalid plugin options for "gatsby-source-contentful":

- "accessToken" is required
- "spaceId" is required
not finished load plugins - 0.905s
Run Code Online (Sandbox Code Playgroud)

我可以在哪里通过这个?

谢谢。

environment-variables node.js contentful gatsby azure-static-web-app

5
推荐指数
2
解决办法
9720
查看次数

如何在内容丰富的富文本中呈现超链接?

我有一个盖茨比应用程序,我在其中渲染富文本内容。一切都运行良好,除了我无法获取我在内容丰富的 CMS 中超链接的文本。当前代码如下所示,我可以获取 url 或 uri(在内容丰富的情况下),但不能获取我超链接的值/文本。有人可以帮忙吗?

import React from 'react';
import { graphql, Link } from 'gatsby';
import Img from 'gatsby-image';
import { renderRichText } from 'gatsby-source-contentful/rich-text';

import { BLOCKS, MARKS, INLINES } from '@contentful/rich-text-types';

const Bold = ({ children }) => <span className="bold">{children}</span>;
const Text = ({ children }) => <p className="align-center">{children}</p>;

const website_url = 'https://stackoverflow.com';

// Setting the rendering options. Same as:
// https://github.com/contentful/rich-text/tree/master/packages/rich-text-react-renderer
const options = {
    renderMark: {
        [MARKS.BOLD]: (text) => <Bold>{text}</Bold>
    },
    renderNode: {
        [INLINES.HYPERLINK]: …
Run Code Online (Sandbox Code Playgroud)

reactjs contentful

5
推荐指数
1
解决办法
4465
查看次数

GraphQL查询Gatsby-具有灵活内容模型的内容丰富的设置

我有一个gatsby网站,其中包含内容丰富的插件graphql查询(安装程序正在运行)。

[编辑]我的gatsby安装程序使用pageCreate功能动态提取数据。并填充我的模板组件,这是我在下面共享的根graphql查询。如果有内容的页面遵循以下查询中给出的结构,则可以使用安装程序创建多个页面。[/编辑]

我的问题是我似乎遇到了一个限制,或者只是不了解足够的grpahql来理解这一限制。

我的高级内容模型“ BasicPageLayout”包含通过“部分”字段对其他内容类型的引用。因此,在“ BasicPageLayout”中包含哪些内容类型以及添加顺序方面,它很灵活。

根页查询

export const pageQuery = graphql`
query basicPageQuery {
contentfulBasicPageLayout(pageName: {eq: "Home"}) {

    heroSection {
        parent {
            id
        }
        ...HeroFields
    }

    section1 {
        parent {
            id
        }
        ...ContentText

    }

    section2 {
        parent {
            id
        }
        ...ContentTextOverMedia
    }

    section3 {
        parent {
            id
        }
        ...ContentTextAndImage
    }

    section4 {
        parent {
            id
        }
        ...ContentText
    }
  }
}
Run Code Online (Sandbox Code Playgroud)

内容类型的片段全部都存在于相应的UI组件中。上面的查询和设置正在运行。

现在,我已经对“ Home”进行了硬编码,因为在创建灵活的可重用查询时遇到了麻烦。在创建模型时,我利用了contentful的灵活性,但是还没有找到在graphql查询中创建这种灵活性的方法。

我所知道的: Graphql查询在运行时已解决,因此所有需要提取的内容都应该在该查询中。它不能是“动态的”。

问题: basicPageLayout中的“ Section”字段可以链接到任何内容类型。因此,我们可以混合和匹配粒度级别的内容类型。如何添加内容类型片段(如ContentTextAndImage与ContentText),使其适合该部分实例(查询中的“ Section”字段)?

换句话说, 我希望根查询获取“家”数据,该数据可能有4个部分,所有类型都是-ContentTextOverMedia,而“关于”数据可能也有4个部分,但类型交替-ContentText和ContentTextAndImage …

contentful graphql gatsby

4
推荐指数
1
解决办法
1006
查看次数

在 Gatsby 和 Contentful 中按日期过滤

如何在 Gatsby 中按日期过滤?文档暗指ltgt操作符,当我尝试使用它们时出现错误。

contentful graphql gatsby

4
推荐指数
1
解决办法
1603
查看次数