运用 Gatsby.js 搭建静态博客 6 批评体系

2019年8月20日 229次阅读 来源: ssshooter

原文链接：https://ssshooter.com/2019-01…

计划挑选

人人都晓得 disqus 等第三方批评体系的存在。disqus 几年前照样挺好使的，然则如今已经是不存在的网站了。虽然国内也有相似的效劳，然则免费档位有能够会有大篇幅的广告。

不过实在最大的题目是：你的批评控制在他人手上。作为一个博客都自身搭建的程序员，为何要让数据落在他人手上呢？

控制自身的批评数据有两个要领：

  1. 自建接口，贮存批评数据，页面也是动态猎取数据。
  2. 运用接口在 github 堆栈更新批评信息，然后从新天生包含最新批评的静态页面。

官网引荐的是第二种要领，借助一个叫 staticman 的开源东西。引荐缘由有 3：

  • 自身掌控数据
  • 效劳崩溃时也能展现批评（针对第三方批评体系和上面动态猎取批评的计划 1 的题目）
  • staticman 集成了 akismet 过滤渣滓批评

所以本文偏重申明 staticman 的运用要领（假如想运用第一种计划能够依靠 strapi 框架）。由于我之前运用 staticman 自身的效劳接口不能调通，然则当地测试能够，所以我决议布置自身的 staticman。

布置自身的 staticman

staticman 的道理就是运用 GitHub 接口把批评更新到你静态博客的堆栈，触发博客从新布置，在页面天生批评。如许获得的博客页面包含批评部份都是完整静态的。

对 GitHub 接口更新堆栈感兴趣的话能够参考
运用 Github API 更新堆栈

起首 clone staticman 的官方堆栈。你能够先在当地测试运转，也能够直接布置到云端（须要免费效劳的话依旧引荐 heroku）。

staticman 布置设置

在临盆环境，起首须要一个临盆环境的设置文件 config.production.json。

能够经由过程 cp config.sample.json config.production.json 天生设置文件。这个设置文件内里以至自带文档，能够很清楚看出每一个项目标作用。

个中最主要的是两个设置项：

  githubToken: {
    doc: 'Access token to the GitHub account being used to push files with.',
    format: String,
    default: null,
    env: 'GITHUB_TOKEN'
  },
  rsaPrivateKey: {
    doc: 'RSA private key to encrypt sensitive configuration parameters with.',
    docExample: 'rsaPrivateKey: "-----BEGIN RSA PRIVATE KEY-----\\nkey\\n-----END RSA PRIVATE KEY-----"',
    format: String,
    default: null,
    env: 'RSA_PRIVATE_KEY'
  },

第一个 githubToken 用于猎取修正你的堆栈权限的 token，必需注重这个 token 不能走漏，不然他人就可以随意修正的你堆栈了。第二个是用于加密留言中的邮箱。

设置终了推送到 heroku 或当地运转 npm start。（运转环境会依据 NODE_ENV 推断）

staticman 应用于你的堆栈

发送以下 Get 要求

http://your-staticman-url/v2/connect/GITHUB-USERNAME/GITHUB-REPOSITORY

staticman 推送设置

在根目录建立 staticman.yml 文件，能够参考：https://github.com/eduardobou…

PS. 假如将设置中的
moderation 设为 true，推送到堆栈后不会直接兼并而是先提出一个 PR。

这个设置的目标是肯定你传入到堆栈的数据格式，对应的表格应当相似：

<form method="POST" action="https://api.staticman.net/v2/entry/eduardoboucas/staticman/gh-pages/comments">
  <input name="options[redirect]" type="hidden" value="https://my-site.com">
  <!-- e.g. "2016-01-02-this-is-a-post" -->
  <input name="options[slug]" type="hidden" value="{{ page.slug }}">
  <label><input name="fields[name]" type="text">Name</label>
  <label><input name="fields[email]" type="email">E-mail</label>
  <label><textarea name="fields[message]"></textarea>Message</label>
  
  <button type="submit">Go!</button>
</form>

更新要求：

POST https://api.staticman.net/v2/entry/{GITHUB USERNAME}/{GITHUB REPOSITORY}/{BRANCH}/{PROPERTY (optional)}

功用完成

至此，胜利增加批评功用，全部博客的功用也险些完美。对照之前被摒弃的一个 wordpress 和一个 hexo，此次是我第一次从基础模板最先自身增加功用做出来的静态博客，来之不易，愿望珍爱，接下来要做的就是继承优化功用和 UI，对峙更新了。

    原文作者：ssshooter
    原文地址: https://segmentfault.com/a/1190000017939882
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞