如何为您的Ghost博客设置联系表单

最新推荐文章于 2024-10-08 10:19:25 发布

dfsgwe1231

最新推荐文章于 2024-10-08 10:19:25 发布

阅读量386

点赞数

文章标签： ui 后端 javascript ViewUI

Ghost是一个免费的开源JavaScript博客平台，它为众多网站提供支持。从刚刚起步的个人博客作者，到世界上一些最大型组织的大型作家和编辑团队。目前，在Ghost 上运行着超过200万个网站，其中包括您当前正在阅读的Getform博客！

我们知道，在您的网站上设置联系表单是一种让听众在欣赏您的帖子时直接与您联系的方法。在本教程中，我们将向您展示如何创建Ghost博客，如何添加自定义主题以及如何使用Getform将自定义联系人表单直接添加到Ghost主题中。

最后，为了更好地控制可以在何处添加表单，我们将通过创建自定义帖子模板使这一步骤更进一步，该模板将允许您网站的所有作者使用单个下拉列表将表单添加到任何页面您的自定义主题上的菜单。

如何创建一个幽灵联系表

1.设置您的Ghost网站

第一步，我们将安装Ghost-CLI，这是一个命令行工具，可帮助您快速轻松地安装和配置Ghost以供使用。

npm install ghost-cli@latest -g

然后我们将安装Ghost。在您的终端中，cd进入一个空目录并运行install命令：

ghost install local

安装完成后，您将可以访问http://localhost:2368和http://localhost:2368/ghost上的新站点，以访问Ghost Admin。它将带有一个名为Casper的默认Ghost主题。管理员如下所示：

您还可以在此处参考Ghost的官方文档了解更多安装细节。

2.创建自定义页面模板
创建并运行我们的Ghost网站后，我们现在就可以开始创建自定义帖子模板了。

在主题的根目录创建一个名为custom-page-with-getform.hbs的新文件，然后在您喜欢的代码编辑器custom-page-with-getform.hbs其打开。我们将使用此模板进行可重复使用的联系表单设置。

在新的自定义页面模板文件中，添加以下代码：

{{! < page }}
{{# contentFor " form-area "}}
  <! -- form here -- >
{{/contentFor}}

第{{!< page}}行将使用主题中的原始page.hbs模板，并将其下方的所有内容插入该页面模板。

3.定义内容块

为了将新的自定义模板中的代码插入正确的位置，我们需要定义一个内容块。可以使用{{#contentFor "example"}}...{{/contentFor}}助手来定义内容块，如上面的代码示例所示。

在代码编辑器中打开page.hbs模板，然后找到要显示表单的位置并添加以下内容：

{{{block "form-area" }}}

由于已经引用了该块，因此无论代码放置在何处， {{#contentFor "form-area"}}...{{/contentFor}}块帮助器之间都会插入任何内容。

4.使用Getform创建您的Ghost联系人表单

Getform是用于静态网站和博客的表单后端服务。您可以注册Getform 或使用您现有的帐户登录Getform。

登录帐户后，在表单仪表板页面上单击“ +”按钮以创建一个新表单，然后将其命名为“ Ghost Blog Contact Form”，然后复制属于您刚刚创建的表单的唯一表单端点。该唯一形式的端点在“ contentFor”块之间添加以下代码块：

< form class = "contact-form" action = "https://getform.io/f/9de64cfa-0a4a-4fd2-b385-687e2059cae6" method = "POST>
  <label for=" full-name "> Name </ label >
  < input type = "text" name = "name" id = "full-name" placeholder = "First and Last" required >
  < label for = "email-address" > Email Address </ label >
  < input type = "email" name = "_replyto" id = "email-address" placeholder = "Your email address" required >
  < label for = "message" > Your Message </ label >
  < textarea rows = "5" name = "message" id = "message" placeholder = "Your message" required > </ textarea >
  < input type = "submit" value = "Submit" >
</ form >

请注意，您从Getform创建的唯一表单端点被放置在form标签的action属性中。
如果要接受文件附件到表单，还应该在表单标签和文件输入中添加enctype='multipart/form-data'属性。您可以在此处查看更多设置详细信息。

5.设置您的联系表格

接下来，我们需要在表单中添加一些样式和布局。根据您的主题，表单元素可能已经具有一些默认样式。如果您使用的是Casper，如本教程所述，则可以使用以下CSS：

.contact-form {
    display : grid;
    grid-template-columns : 1 fr 1 fr;
    grid-gap : 0.2em 1em ;
  }
  .contact-form input ,
  .contact-form textarea {
    width : 100% ;
    padding : 0.4em 0.6em 0.5em ;
    color : #111 ;
    font-family : -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
      Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif;
    font-size : 0.95em ;
  }
  .contact-form input :focus ,
  .contact-form textarea :focus {
    outline : 1px solid #3eb0ef ;
    outline-offset : - 1px ;
  }
  .contact-form label [for="full-name"] ,
  .contact-form label [for="email-address"] {
    order : - 1 ;
  }
  .contact-form input {
    order : 0 ;
    margin-bottom : 0.6em ;
  }
  .contact-form label [for="message"] ,
  .contact-form textarea {
    grid-column-end : span 2 ;
  }
  .contact-form input [type="submit"] {
    grid-column-start : 2 ;
    justify-self : end;
    margin-top : 0.6em ;
    background : #3eb0ef ;
    color : white;
    width : auto;
  }

（可选）您可以使用此处列出的默认Getform表单模板之一。

6.上载带有联系表的自定义主题

下一步是保存主题更改，并通过Ghost管理员中的“设计”视图上传主题。

将主题上载到您的出版物；