如何在 Contentful (Gastsby) 的富文本中获取有序列表的索引

Question

我正在开发一个使用 Contentful 作为其无头 CMS 的 Gatsby 项目 - 渲染特定的富文本字段让我抓狂。

这是我要呈现的文档示例 - 它基本上是一个有序列表：

{
  "nodeType": "document",
  "data": {},
  "content": [
    {
      "nodeType": "ordered-list",
      "content": [
        /* item 1 */
        {
          "nodeType": "list-item",
          "content": [
            {
              "nodeType": "paragraph",
              "content": [
                {
                  "nodeType": "text",
                  "value": "Lorem 1.",
                  "marks": [],
                  "data": {}
                }
              ],
              "data": {}
            }
          ],
          "data": {}
        },
        /* item 2 */
        {
          "nodeType": "list-item",
          "content": [
            {
              "nodeType": "paragraph",
              "content": [
                {
                  "nodeType": "text",
                  "value": "Lorem 2",
                  "marks": [],
                  "data": {}
                }
              ],
              "data": {}
            }
          ],
          "data": {}
        },
      ],
      "data": {}
    }
  ]
}

我想在没有 ol 和 li 标签的情况下在我的 Gatsby 项目中呈现它，如下所示：

<div class="single-instruction">
  <header>
    <p>Step 1</p>
    <div></div>
  </header>
  <p>Lorem 1.</p>
</div>
<div class="single-instruction">
  <header>
    <p>Step 1</p>
    <div></div>
  </header>
  <p>Lorem 2.</p>
</div>

根据 Contentful 的文档，我尝试使用 @contentful/rich-text-types 包来呈现它。这是我设法达到的程度：

import { BLOCKS } from "@contentful/rich-text-types";
import { renderRichText } from "gatsby-source-contentful/rich-text";

const options = {
  renderNode: {
    [BLOCKS.LIST_ITEM]: (node, children) => (
      <div className="single-instruction">
        <header>
          <p>step </p>
          <div></div>
        </header>
        {children}
      </div>
    ),
  },
};

renderRichText(instructions, options)

当然，这不会呈现步数。我觉得我现在很接近了！但是对于我来说，我似乎无法找到呈现有序列表项索引的正确方法。如果这是一个我可以简单映射的数组，我很容易得到。

有人知道我在这里遗漏了什么吗？

Answer 1

我也遇到了同样的问题。我使用 counter-increment and counter css 属性生成步数。

.instructions {
  counter-increment: step;
}

.single-instruction .step::after {
  content: counter(step);
}

<div class="instructions">
This is one list
<div class="single-instruction">
  <header>
    <p class="step"></p>
    <div></div>
  </header>
  children
</div>
<div class="single-instruction">
  <header>
    <p class="step"></p>
    <div></div>
  </header>
  children
</div>
</div>
<div>
This is another list
<div class="single-instruction">
  <header>
    <p class="step"></p>
    <div></div>
  </header>
  children
</div>
<div class="single-instruction">
  <header>
    <p class="step"></p>
    <div></div>
  </header>
  children
</div>
</div>

Answer 2

在这种情况下，您可以使用 CSS counter() 变量通过 CSS 添加步骤编号。

所以你的 CSS 可能看起来像：

.single-instruction {
  counter-reset: section;
}

.single-instruction p:after {
  counter-increment: section;
  content: counter(section);
}

上面的代码将在每个段落上添加计数器（针对 header 段落内容和实际内容段落），因此您需要为段落标签添加自定义 class你要定位。

唯一需要注意的是，如果不深入挖掘，我不确定它与屏幕阅读器和其他辅助技术的配合情况如何。

这里有更多信息：https://www.w3schools.com/CSS/css_counters.asp

如何在 Contentful (Gastsby) 的富文本中获取有序列表的索引

How can I get the index of a ordered list in a Rich Text in Contentful (Gastsby)

richtext

reactjs

contentful