使用 Vapid CMS 构建网站

2025-06-10

使用 Vapid CMS 构建网站

今天我想向你们展示一个很酷的Vapid CMS。

我经常需要搭建一个简单的网站，带有一个仪表盘，用户可以在其中编辑或添加新页面/帖子等。
我经常使用 WordPress 作为搭建简单网站的首选 CMS，也尝试过很多静态网站生成器。但对我来说，这太复杂了。于是我开始寻找。不得不说，我花了很多时间寻找一个对我有用的东西，然后我找到了——它叫做 Vapid CMS。

Vapid 是一个故意设计的简单的内容管理系统，其理念是您无需离开 HTML 即可创建自定义仪表板。

HTML 就是 CMS

在静态网页上添加简单的模板标签，Vapid 将自动为您生成仪表板。无需配置文件，也无需其他语言。

建立自定义网站的最快方法

Jekyll 和 Middleman 等静态网站构建器提供了现代化的开发环境（例如实时编辑、SASS、Webpack 等），但很难与想要使用仪表板编辑内容的人们共享。

Vapid 汲取了静态网站构建器的优点，并引入了几乎无需额外投入即可创建仪表盘的功能。Vapid
的核心概念和内容类型有限。这样做的目的是：您可以快速掌握它，并且无需反复参考文档即可构建网站。

内容标签

如果您曾经使用过 Mustache 或 Handlebars，那么 Vapid 对您来说应该非常熟悉。只需将模板标签添加到 HTML 中，Vapid 就会自动在仪表板中创建输入字段。Vapid支持 7 种内容类型，包括 HTML、图像和其他类型。

{{title}}
{{body type=html}}
Enter fullscreen mode Exit fullscreen mode

章节

版块是 Vapid 的组织单元。版块允许您将标签分组，并将它们显示在除“常规”之外的单独仪表盘链接下。

{{#section about}}
  {{title}}
  {{body type=html}}
{{/section}}
Enter fullscreen mode Exit fullscreen mode

联系表格

想要创建电子邮件联系表单？没问题，只需使用#form标签即可。它与 几乎完全相同#section，只是它会自动为您创建可发送电子邮件的表单。无需任何配置。

{{#form contact}}
  {{name}}
  {{email}}
  {{message long=true}}
{{/form}}
Enter fullscreen mode Exit fullscreen mode

开始

如果您有兴趣尝试并且熟悉开发环境，那么请通过这些终端命令安装该应用程序。

npm install -g @vapid/cli
vapid new path/to/project/folder
cd path/to/project/folder
vapid start
Enter fullscreen mode Exit fullscreen mode

现在，您可以开始开发了。path/to/project/folder用您喜欢的文本编辑器打开它（请参阅下文，了解哪些文件/文件夹很重要）。然后预览您的网站：面向公众的网站位于http://localhost:3000；私人控制面板位于http://localhost:3000/dashboard。

如果您已经安装了 Vapid，并发出了vapid new path/to/project/folder命令，您会注意到创建了一个新文件夹，其中包含以下内容：

data/
www/
.env
.gitignore
package.json
Enter fullscreen mode Exit fullscreen mode

目前， 、 、 和 项目基本上可以忽略。但文件data夹.env才是.gitignore真正发生奇迹的地方。package.jsonwww

内容字段

为了使您的网站更具动态性（例如创建自定义仪表板），您可以在 HTML 中添加特殊的模板标签。例如：

<html>
  <body>
    <h1>Hello, {{name}}!</h1>
  </body>
<html>
Enter fullscreen mode Exit fullscreen mode

这里的标签{{name}}有特殊含义。它告诉 Vapid 你想在那里放置动态内容，并且你希望仪表盘有一个名为“姓名”的文本输入字段。你可以添加任意数量的此类标签。只需用两个花括号将任意单词括起来即可。

简单网站教程
在这个快速教程中，我们将创建一个带有帖子的简单网站。

这是一个index.html页面

<!DOCTYPE html>
<html>

<head>
  <title>Vapid Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link href="https://fonts.googleapis.com/css?family=Monoton|Work+Sans:400,800" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="/stylesheets/site.css">
</head>

<body>
  <header class="header" style="background-image: url({{background_image type=image tag=false required=false}})">
    <h2>A New Site</h2>
    <h1><span>Hello, {{vapid label="Greeting"}}</span>

    </h1>
    <div class="container">
      <p>This template already has few tags—visit the dashboard now to edit their content. And when you're done, <a
          href="https://docs.vapid.com/content-types" target="_blank">add your own content tags</a>.</p>
      <p><a href="/dashboard" class="login button">Login</a></p>
    </div>
  </header>
  <footer>
    <p>This is a footer.</p>
  </footer>
  <script src="/javascripts/site.js"></script>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

在此处输入图片描述

仪表板

在此处输入图片描述

如果您想向后端添加新字段，您可以这样做：

<small>{{address}}</small>
Enter fullscreen mode Exit fullscreen mode

现在，如果我们回到管理部分，我们将看到该字段：

在此处输入图片描述

前端部分：

在此处输入图片描述

正如您所看到的，向管理部分添加字段非常容易，它会自动显示在前端。

您还可以添加部分，例如About：
要创建部分，只需将模板标签括在部分块内：

{{#section about}}
<div>
  <h2>{{title}}</h2>
  {{body type=html}}
</div>
{{/section}}
Enter fullscreen mode Exit fullscreen mode

与模板标签类似，您可以向区块块传递其他参数。例如，您可以更改仪表板侧栏中显示的标签。

{{#section about label="About Me"}}
<div>
  <h2>{{title}}</h2>
  {{body type=html}}
</div>
{{/section}}
Enter fullscreen mode Exit fullscreen mode

重复内容

有时，您可能想要创建一个包含重复内容的版块。例如，假设您想授予编辑公司办公地点的权限：

<ul>
  {{#section offices multiple=true}}
    <li>
      <h5>{{name}}</h5>
      {{city}}, {{state}}
    </li>
  {{/section}}
</ul>
Enter fullscreen mode Exit fullscreen mode

重复内容链接

Vapid为您提供链接到重复部分中各个记录的方法。继续上面的例子，我们可能想为每个办公室创建单独的页面。为此，我们可以使用{{_permalink}}模板标签（请注意“permalink”前面的下划线）。

<ul>
  {{#section offices multiple=true}}
    <li>
      <h5><a href="{{_permalink}}">{{name}}</a></h5>
      {{city}}, {{state}}
    </li>
  {{/section}}
</ul>
Enter fullscreen mode Exit fullscreen mode

今天就到这里，有兴趣的话可以去Vapid官网了解更多。Vapid
目前还在开发中，我正在运营几个网站，目前为止运行良好。

谢谢大家。

鏂囩珷鏉ユ簮锛�https://dev.to/stokry/build-a-website-with-vapid-cms-4pod
Devto 翻译
PREV
使用 Python 进行桌面组织
NEXT
使用 Python 自动从 Excel 发送电子邮件