如何在 React (Gatsby) 中使用 staticman？

Question

正如这里所说的https://github.com/eduardoboucas/staticman/issues/243 , staticman 通过他们的集中式 API 由于已达到某些配额而无法正常工作

因此，staticman 正在成为一个 github 应用 来扩展这些配额，但仍然没有官方文档可以让它运行。

这是怎么做的？

Answer 1

基于https://github.com/robinmetral/eaudepoisson

1. 创建一个 github 存储库
2. 在该存储库中安装 staticman 应用程序，可在此处找到 https://github.com/apps/staticman-net
3. 在仓库根目录下创建一个配置文件staticman.yml，查看文档配置https://staticman.net/docs/configuration 在回购https://github.com/robinmetral/eaudepoisson

重要的是，staticman.yml 的属性名称是comments:，这个属性是你回购的方向。因此，如果您想将 cmets 发送到 your_repo/markdown/website_comments，那么您在 staticman.yml 中的 path 应该是 path: "markdown/website_comments")，但请参见下文，您的 url 不是指文件夹结构，而是指 staticman.yml 属性

4. 在您的 repo 中创建一个 /markdown/website_comments 文件夹（不是必需的，文件夹结构将使用第一条评论创建）
5. 创建一个form，我已经用react.semantic-ui.com提供的表格完成了

<Form onSubmit={onSubmit}>
    <Form.Input name="name" onChange={changeUserName} placeholder="what" />
    <Form.TextArea name="message" onChange={changeuserMessage} placeholder="what2" />
    <Form.Button>Submit</Form.Button>
</Form>

6. 添加发送前一个表单的逻辑，form 将data 发送到https://dev.staticman.net/v3/entry/github/{my github user}/{my repo}/master/comments/（更改 github 用户和 repo 名称）

  const [userName, setUserName] = useState(() => '')
  const [userMessage, setUserMessage] = useState(() => '')
  const wait = ms => new Promise((r, j) => setTimeout(r, ms))

  let changing = 0 // to create a buffer to avoid changing state always, the browser gets slow otherwise
  const changeUserName = async (e, { value }) => {
    changing++
    let prev_changing = changing
    await wait(100)
    if (prev_changing === changing) setUserName(value)
  }

  const changeuserMessage = async (e, { value }) => {
    changing++
    let prev_changing = changing
    await wait(100)
    if (prev_changing === changing) setUserMessage(value)
  }

  const onSubmit = async e => {
    e.preventDefault()
    const formdata = new FormData()
    formdata.set('fields[name]', userName)
    formdata.set('fields[message]', userMessage)
    const json = {}
    formdata.forEach((value, prop) => (json[prop] = value))
    const formBody = Object.keys(json)
      .map(key => encodeURIComponent(key) + '=' + encodeURIComponent(json[key]))
      .join('&')

    // in the repo, create a folder named 'comments'
    const response = await fetch(
      'https://dev.staticman.net/v3/entry/github/{my github user}/{my repo}/master/comments/',
      {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: formBody,
      }
    )
    console.log(response)
  }

就是这样，或者至少它似乎在我手中起作用