2

我们正在将一个用 Assemble 构建的大型静态站点移动到 Gatsby。我们为非技术作者构建的整洁的东西是 Markdown 中的自定义语法。将其视为没有数据库的 CMS，作者使用 Github 作为编辑/批准帖子和部署的工具。除了向 Markdown 添加类的能力（使用 markdown-it-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 作为移动站点，所以这是一个有趣的挑战。请随时分享想法。谢谢！

4

2 回答 2

1

Gatsby 现在通过一个名为rehype-react. 一定要通读文档，有一些陷阱，比如只支持小写的道具名称。

于 2018-03-07T23:20:48.403 回答
-1

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

于 2017-07-08T16:56:58.587 回答