前言
在现代 Web 开发中，内容管理变得越来越重要。为了更快地构建一个强大的内容驱动网站，我们需要使用一些工具和技术。Prismic 是一个非常出色的 SaaS 内容管理系统，它允许我们轻松地创建和管理内容。prismic-express 是一个 npm 包，它允许我们在 Express.js 应用程序中使用 Prismic。
本文将介绍 prismic-express 的基本用法，并带您通过一个简单的示例构建一个完整的应用程序。
前提条件
在开始本教程之前，请确保您已经满足以下前提条件：
安装 prismic-express
在终端中进入您的项目根目录，并使用以下命令安装 prismic-express：
npm install prismic-express --save
连接到 Prismic
为了连接到 Prismic，我们需要在 Express 中实例化一个 Prismic API 对象。我们将使用这个对象来获取、更新和删除内容。
要通过 prismic-express 创建 Prismic API 对象，请按照以下步骤操作：
创建 prismic-express 实例
在您的应用程序入口文件（通常是 app.js 或 server.js）中，首先要导入 prismic-express：
const prismic = require('prismic-express');然后，创建一个 prismic-express 实例，并将其添加到 Express 应用程序中：
// 初始化 express 应用程序
const express = require('express');
const app = express();
// 创建 prismic-express 实例，并将其添加到应用程序中间件中
const Prismic = prismic.Prismic;
const prismicEndpoint = "https://your-repo-name.prismic.io/api/v2";
app.use(prismic.middleware(prismicEndpoint));在这里，我们使用 prismicEndpoint 变量中的值来连接到我们在 Prismic 上创建的 API。确保将 your-repo-name 替换为您自己的 API 名称。
获取 Prismic API 对象
要获取 Prismic API 对象，请使用以下代码：
const api = req.prismic.api;
注意：prismic-express 将 Prismic API 对象绑定到 Express 请求对象的 prismic.api 属性上。因此，您必须在路由处理程序或中间件中使用 req.prismic.api 来访问它。
使用 Prismic API
现在，我们已经成功连接到 Prismic，接下来我们将了解如何使用 Prismic API 来获取和处理内容。
获取单个文档
以下代码演示了如何获取一个单独的文档：
// 获取文档内容
const doc = await api.getByID('your-document-id');请将 your-document-id 替换为您要获取的文档的 ID。
获取多个文档
要获取多个文档，请使用以下代码：
// 获取多个文档
const docs = await api.query(
Prismic.Predicates.at('document.type', 'your-custom-type')
);请将 your-custom-type 替换为您要获取的文档类型名称。
使用 ref
在有些情况下，您可能想要访问不同版本的文档。为此，Prismic 使用一个叫做 ref 的概念。ref 可以标识特定的时间点或版本，例如发布时间、最近编辑的版本等。
以下代码演示如何使用 ref：
// 使用 ref 获取文档内容
const doc = await api.getByID('your-document-id', { ref: 'your-ref' });请将 your-ref 替换为您要使用的 ref 名称。
使用文档片段
Prismic 文档可以包含多个字段和片段，例如单行文本、富文本、图像等内容。要从文档中提取特定的片段，请使用以下代码：
const doc = await api.getByID('your-document-id');
const fragment = doc.data['your-fragment-name'];请将 your-fragment-name 替换为您要提取的文档片段名称。
示例应用程序
要演示 prismic-express 的用法，我们将使用以下技术和工具：
- Express.js：用于编写 Web 应用程序的基本框架。
- EJS：一种流行的模板引擎，用于呈现动态 HTML 内容。
- Bootstrap：一种广泛使用的 CSS 样式库。
步骤 1：创建 Express 应用程序
在您的应用程序根目录中，创建一个名为 app.js 的文件，并添加以下代码：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- ----- ------- - --------------------------- ----- ------- - ---------------- ----- --------------- - ------------------------------------------- --------------------------------------------- ---------------- -- -- - ------------------- -- ------- -- ---- ------- ---
在这里，我们创建一个新的 Express 应用程序，初始化 prismic-express 中间件，并将应用程序监听在端口 3000 上。
步骤 2：设置视图引擎
接下来，我们将使用 EJS 作为我们的视图引擎。在 app.js 文件中添加以下代码：
const path = require('path');
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');在这里，我们指定了视图文件所在的目录，并告诉 Express 使用 EJS 作为我们的视图引擎。
步骤 3：创建首页
现在，我们将创建一个简单的首页。在 views 目录中创建一个名为 index.ejs 的文件，并添加以下代码：
-- -------------------- ---- -------
--------- -----
------
------
-------------- ------- ------------
----- ---------------- --------------------------------------------------------------------------------
-------
------
---- ------------------
----------- -- ------- ------- ----------
------
-------
-------在这里，我们创建了一个基本的 HTML 模板，并包含了 Bootstrap 样式表。
步骤 4：获取 Prismic 数据
现在，我们将使用 prismic-express 获取 Prismic 数据。在 app.js 中添加以下代码：
-- -------------------- ---- -------
------------ ----- ----- ---- -- -
--- -
----- --- - ----------------
----- --- - ----- ----------------------
----- ------ - --------------------------
------------------- - ------ ---
- ----- ------- -
-------------------
------------------------------ ------ --------
-
---在这里，我们使用 getSingle 方法获取 Prismic 中单独的文档，将 banner 图像的 URL 提取到变量中，并将数据传递到模板。
步骤 5：渲染模板
现在，我们只需要在 index.ejs 中渲染 Prismic 数据。在 views/index.ejs 中添加以下代码：
-- -------------------- ---- -------
--------- -----
------
------
-------------- ------- ------------
----- ---------------- --------------------------------------------------------------------------------
-------
------
---- ------------------
---- ------------------
---- ----------------- -------- ------ --- ----------- -------
----------- -- ------- ------- ----------
------
------
-------
-------在这里，我们使用 <%= banner %> 将 banner 图像的 URL 插入到模板中。
步骤 6：运行应用程序
现在，我们已经成功创建了一个使用 prismic-express 的应用程序。在终端中使用以下命令启动应用程序：
node app.js
在浏览器中访问 http://localhost:3000，您将看到 Prismic 数据成功地渲染在首页中。
结论
在本教程中，我们使用 prismic-express 成功地构建了一个简单的应用程序，并了解了如何使用 Prismic API 来获取和管理内容。为了更好地利用功能，建议阅读 prismic-express 文档，并了解 Prismic 的更多功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/68947