如何在内容丰富的富文本中获取有序列表的索引（Gastsby）答案

【问题标题】：How can I get the index of a ordered list in a Rich Text in Contentful (Gastsby)如何在内容丰富的富文本中获取有序列表的索引（Gastsby）
【发布时间】：2021-12-09 12:23:14
【问题描述】：

我正在开发一个使用 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": {}
    }
  ]
}

我想在我的 Gatsby 项目中渲染它，而不使用它的 ol 和 li 标签，如下所示：

<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)

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

有人知道我在这里缺少什么吗？

【问题讨论】：

我的问题是——如果您不想在前端呈现带有ol 和li 的列表，为什么还要在富文本字段中使用列表？也许您可以在富文本字段中链接的单独内容类型可能是合适的，因此您可以通过富文本反应渲染器获取数据并按照您的意愿使用它？
这是因为我的最终用户首先喜欢富文本，他们可以简单地从其他地方复制粘贴内容。我仍将呈现一个列表，但在每个项目之前附加一个带有项目索引的标题。

标签： reactjs contentful richtext

【解决方案1】：

我也遇到了同样的问题。我使用counter-increment 和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>

【讨论】：

对不起，我发布我的答案后才看到你的答案！忘记刷新页面了。投赞成票:)
谢谢你们！ :D

【解决方案2】：

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

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

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

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

上面的代码将在每个段落上添加计数器（用于标题段落内容和实际内容段落），因此您需要为要定位的段落标签添加一个自定义类。

唯一需要注意的是，如果不深入挖掘，我不确定这将如何与屏幕阅读器和其他辅助技术一起使用。

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

【讨论】：

谢谢！！ :D 这解决了它！