通过简单的静态 HTML 表单创建拉取请求

内小子
199 阅读6分钟

Jamstack 在网站领域已经有年的历史了。静态站点生成器(简称 SSGs)是这个故事的一个重要组成部分，它通常包含的内容就在自身的GitHub 仓库中。这就打开了让贡献者可以开启拉取请求 来添加、更改或编辑内容的想法。非常有用！

这方面的例子有:

为什么要用静态站点方法来构建?

当我们需要构建这样的基于内容的网站时，通常会考虑使用什么数据库。将内容保存在数据库中是一个久享盛名的好主意。但这不是唯一的方法！Ssg 是一个很好的选择，因为..

  • 它们价格便宜，而且易于部署 Ssg 通常是免费的，这使得它们成为 MVP 或者概念验证的绝佳选择。
  • 他们有很强的安全性 没有什么东西可以破解浏览器，因为所有网站包含的往往只是静态文件。
  • 你已经准备好了设备 你已经准备好了可以处理他的主机

对于内容网站来说，还有另外一个优势。 网站的内容本身具有写入静态文件的权利。 例如，这意味着可以通过 GitHub 上的 拉去请求来添加和更新内容。即使对于没有技术背景的人来说,它也为 Netlify CMS和开放式创作的概念打开了大门，允许社区贡献.

但是，让我们以超低还原度的途径来接受通过拉取请求更改内容的想法，只使用基本的 HTML，。

挑战

人们如何添加或更新一个资源并不总是非常简单的。人们需要理解如何克隆你仓库分支，如何以及在哪里添加他们的内容, 内容格式标准，必需字段, 以及各种各样的东西。他们可能甚至需要自己本地跑起来以确保内容正确。

那些真心想帮助我们网站的人有时会退缩，因为贡献的过程是有技术障碍和学习曲线的ーー这很悲哀。

你知道通过使用 <form>可以做什么吗？

就像一个正常的网站一样，人们提交内容的简单方法是填写一张表格，然后提交他们想要的内容。

如果我们可以为用户提供一种方式，让他们仅仅通过一个 <form> 来提供我们需要的内容，那会怎么样？但是不是让表单提交到数据库，它的方式对我们的静态网站生成器拉取请求？这里有个技巧！

技巧： 创建一个带有查询参数的 GitHub 拉取请求

这里有一个鲜为人知的技巧: 我们可以通过向特殊的 GitHub 地址添加查询参数来预先填充对存储库的 拉取请求。这一点来自 GitHub 文档.

让我们逆向工程化。

如果我们知道我们可以预先填写一个链接，那么我们需要生成这个链接。我们努力让这个更容易记住。 为了生成这个动态填充数据的链接，我们将使用一些 JavaScript。

那么，在用户提交表单之后，我们如何生成这个链接呢？

演示时间!

让我们以 CSS-Tricks 中的 无服务站点站点为例。目前，添加新资源的唯一方法是在 GitHub 上派生分支并添加一个新的 Markdown 文件。然而让我们看看如何用一个表单绕过这些障碍。

无服务器网站本身有许多类别(例如 表单)我们可以贡献。为了简单起见，让我们把重点放在“资源” 分类上。人们可以从那里添加有关 无服务 或 Jamstack 的文章。

所有的资源文件都在这个文件夹 i中。

只需挑选一个随机文件来探索结构..

---
title: "How to deploy a custom domain with the Amplify Console"
url: "https://read.acloud.guru/how-to-deploy-a-custom-domain-with-the-amplify-console-a884b6a3c0fc"
author: "Nader Dabit"
tags: ["hosting", "amplify"]
---

In this tutorial, we’ll learn how to add a custom domain to an Amplify Console deployment in just a couple of minutes.

查看这些内容，我们的表单必须有以下列:

  • 标题
  • 网址
  • 作者
  • 分类
  • 链接的片段或说明

因此，让我们为所有这些字段构建一个 HTML 表单:

<div class="columns container my-2">
  <div class="column is-half is-offset-one-quarter">
  <h1 class="title">Contribute to Serverless Resources</h1>

  <div class="field">
    <label class="label" for="title">Title</label>
    <div class="control">
      <input id="title" >
    </div>
  </div>
  
  <div class="field">
    <label class="label" for="url">URL</label>
    <div class="control">
      <input id="url" >
    </div>
  </div>
    
  <div class="field">
    <label class="label" for="author">Author</label>
    <div class="control">
      <input id="author" class="input" type="text" >
    </div>
  </div>
  
  <div class="field">
    <label class="label" for="tags">Tags (comma separated)</label>
    <div class="control">
      <input id="tags" class="input" type="text" >
    </div>
  </div>
    
  <div class="field">
    <label class="label" for="description">Description</label>
    <div class="control">
      <textarea id="description" class="textarea" ></textarea>
    </div>
  </div>
  
   <!-- Prepare the JavaScript function for later -->
  <div class="control">
    <button onclick="validateSubmission();" class="button is-link is-fullwidth">Submit</button>
  </div>
    
  </div>
</div>

我正在使用 Bulma 来更改样式，所以这里使用的类名就是从那里来的。

现在我们编写一个 JavaScript 函数，将用户的输入转换成一个友好的 URL，然后我们可以在我们的 拉取请求中将它组合成 GitHub 查询参数。下面是一步一步的步骤:

  • 获取用户关于他们想要添加的内容的输入
  • 从所有这些内容生成一个字符串
  • 对字符串进行编码，使其格式化为人们可以阅读的形式
  • 将编码后的字符串附加到一个指向 GitHub 页面的完整 URL 上，以获取新的拉取请求

这是 演示:

screenshot

按下提交按钮后，用户就会被带到 GitHub，并在正确的位置打开对这个新文件的拉取请求。

快速提醒: 用户仍然需要一个 GitHub 帐户来贡献。但是，这仍然比必须知道如何从分支进行派生并创建一个拉取请求要容易得多。

这种方法的其他好处

首先，这是我们网站上的一个表单。我们可以随心所欲地设计它。有这样的控制总是好的。

其次，由于我们已经编写了 JavaScript，我们可以使用相同的基本思想与其他服务或 api 进行对话，要想首先通过输入处理。例如，如果我们需要一个网站的信息(比如标题、元描述或者图标) ，我们可以通过提供 URL 来获取这些信息

更进一步

让我们来看看上面第二点。我们可以通过从为用户提供的 URL 中提取信息来简单地预先填写表单，而不必让用户手工输入。

考虑到这一点，现在我们只要求用户提供两个输入(而不是四个) ，即 URL 和标记。

image.png

这是如何做到的？只需要有URL，我们就可以通过使用 JavaScript 从网站获取元信息。有很多 API可以从网站上获取信息，而你可能就是我创建的这个项目中的一个。试着点击下面这个链接

metadata-api.vercel.app/api?url=htt…

上面的演示使用它作为基于用户提供的 URL 预填充数据的 API。对用户来说更简单！

结束了

您可以认为这是一个非常小的 CMS 为任何种类的静态站点生成器。您所需要做的就是自定义表单并更新预填充的查询参数以匹配所需的数据格式。

你将如何使用这类东西？我们一开始看到的四个网站就是很好的例子。但是在其他很多情况下，可能需要对用户提交进行处理，这可能是一种低成本的方法。

avatar
文章
阅读
粉丝