Question

我们正在将一个使用Assemble构建的大型静态站点移动到Gatsby。我们构建的整洁的东西是Markdown中针对非技术作者的自定义语法。可以把它想象成没有DB的CMS，作者使用Github作为编辑/批准帖子和部署的工具。除了能够向Markdown添加类（使用markdown-att-attrs）之外，我们还添加了作者将组件注入markdown的能力，它将在页面上呈现为HTML。事实证明，这是团队之间协作的一种非常有效的方式。我将向您展示我们在markdown及其输出中使用自定义语法构建的手风琴组件的示例。

如果作者需要在页面上使用手风琴，他/她需要做的就是：

:::: accordion

::: accordionPanel For Designers

- [WebAIM Color Contrast Checker](http://webaim.org/resources/contrastchecker/ "external"){.ds-link--external}
- [Color Contrast Analyzer (Windows)](https://www.paciellogroup.com/resources/contrastanalyser/ "external"){.ds-link--external}
{.ds-list}

:::

::: accordionPanel For Developers

- [Chrome Accessibility Tools](https://www.npmjs.com/package/accessibility-developer-tools "external"){.ds-link--external}
- [Keyboard testing (WebAIM.org)](http://webaim.org/techniques/keyboard/ "external"){.ds-link--external}
- [quail](https://plugins.jquery.com/quail/){.ds-link--external} - jQuery plugin for checking content against accessibility guidelines
- [a11y](https://github.com/addyosmani/a11y "external"){.ds-link--external} - Accessibility audit tooling for the web
{.ds-list}

:::

::::

上面的代码将呈现为：

<ul class="accordion">
  <li id="accordion-panel_For Designers" class="ds-accordion--item accordion--item" data-behavior="toggle">
    <h3>
      <a id="accordion-panel_For Designers--toggle" href="#null" class="accordion--title" aria-label="For Designers
        shows more content
      WebAIM Color Contrast CheckerColor Contrast Analyzer (Windows) - shows more content">
        For Designers
        <span class="h-sr-only a11y-text-toggle">shows more content</span>
      </a>
    </h3>
    <section id="accordion-panel_For Designers--panel" class="accordion--content" tabindex="-1">
      <ul class="ds-list">
        <li>
          <a href="http://webaim.org/resources/contrastchecker/" title="external" class="ds-link--external" aria-label="For Designers - shows more content WebAIM Color Contrast CheckerColor Contrast Analyzer (Windows) - shows more content">
              WebAIM Color Contrast Checker
          </a>
        </li>
        <li>
          <a href="https://www.paciellogroup.com/resources/contrastanalyser/" title="external" class="ds-link--external" aria-label="For Designers - shows more content WebAIM Color Contrast CheckerColor Contrast Analyzer (Windows) - shows more content">
              Color Contrast Analyzer (Windows)
          </a>
        </li>
      </ul>
      </section>
    </li>
  </ul>

如您所见，我们使用四个冒号（::: :)作为组件的开始和结束标记，在本例中为手风琴。问题是如何在Gatsby中执行此操作，因为React以与Assemble完全不同的方式呈现组件。我的团队也在学习React作为移动网站，所以这是一个有趣的挑战。请随意分享想法。谢谢！

Answer 1

盖茨比现在通过一个名为rehype-react的库来支持这一点。绝对阅读文档，有一些问题，如只支持小写道具名称。

Answer 2

您可以编写在Remark（降价解析器）AST上运行的插件来执行此类自定义操作。查看https://www.gatsbyjs.org/docs/plugins/

中各种备注插件的来源

如何使用Gatsby在Markdown中呈现自定义语法

2 个答案: