介绍
metalsmith-prismic 是一个基于 Prismic CMS API 的 NPM 包，它可以帮助前端开发者使用 Prismic 建立静态网站。Prismic 是一个内容管理系统，在过去的一年里它已经吸引了很多新用户。它提供了一种方便的方式来存储网站的内容，使得前端开发者不必亲自维护运营成本高昂的数据库。此外，Prismic CMS API 提供了跨平台更好的解决方案，这些方案可以用于多种技术栈和语言，而不单单是 Node.js。
metalsmith-prismic 提供了一系列的文件过程函数和钩子作为一个 Metallsmith 插件。这些钩子可以用来解析 Prismic 数据并将其转换为合适的 JavaScript 对象。这样开发者就可以使用对象来直接渲染页面。
安装
使用 npm 包管理器安装 metalsmith-prismic：
npm install metalsmith-prismic --save-dev
在你的项目中使用
配置
先引入一些你可能需要在 metalsmith-prismic 中使用的北斗星：
var Prismic = require('prismic-javascript');
var lodash = require('lodash');
var Prism = require('prismjs');
var Markdown = require('markdown-it')();我们可以在创建一个 JavaScript 对象来描述我们的配置, 它的属性包括：
repositoryName，Prismic 仓库的名称，必填。customRoutes，如果你用 Prismic API 创建了一些自定义路由，你可以在这里描述 添加和修该事件钩子：
在 metalsmith.json 中配置插件和插件使用流程：
-- -------------------- ---- -------
-
--------- ------
-------------- --------
---------- -
--------------------- -
----------------- --------------------------
--------------- -
-
------- --------
------- ------
-
--
--------- -- -- -
------------------------------- ------------
--
-------- -- -- -
------------------------------- -------- -----
--
-------------- -------------------
-
-
-钩子
metalsmith-prismic 包含了以下钩子：
before: 开始执行插件流程前触发的事件。after: 插件流程结束后触发的事件。fetchContentTypes: 获取 Prismic 站点的的内容类型，包括设置 $lang 路由。fetchDocuments: 获取 Prismic 文档，可以配置独立模板、指定 permalink 和对唯一文档函数的过滤。parseSlices: 将文档中的片段转换为 slice。generateDocuments: 将 Prismic 文档与模板相匹配并生成页面。createCollections: 生成集合，方便分类的管理。postProcessRender: 后渲染切片，可以进行 markdown 转换、代码高亮等处理。
下面是一个简单的使用流程：
-- -------------------- ---- -------
----- ------- - ------------------------------
----- ----------------- - --------------------------------------
-- --- -- ---------- ----
----- ---------- - ---------------------
----------------
------------------------
-- --- -- --- --
----- ----------- - -------------------------------------------------
--- ----------- - -----
-- --- -- ------------------
----- ------ - -
--------------- -----------------------
------------- -
-
----- --------
----- ------
-
--
------- -- -- - ------------------------------- -------------- --
------ -- -- - ------------------------------- ------------- --
-
-- --- --- ------- ----
------------------------ -
------------ ------------
--------------- -----------------------------------
------------- -- -
-- --- -- ------- -------------- ----- --
------ ---------------------------------------- --------
---------------------- -- -
-- --- - ------- ----- ---------- -------
------ ---------------------- ----------- --------
---------- -- -
-------------------- ----
--这将完成 Prismic 站点到 metalsmith 模板的转换操作。但是，这并不是银弹，因为你需要审视你的代码来改进你的性能、SEO 或者你的代码清洁程度。
示例代码
这个例子使用 markdown-it 去渲染文档中的正文内容，并且使用 prismjs 进行代码高亮:
-- -------------------- ---- -------
----- -------- - -------------------------
----- ----- - -------------------
----- ----------------- - ------- --------- --------- -- -
------------------------------- ----------- -- -
------------------------ -
---- -------
---------------------------- -- -
----------- - -----------------------------
---
------
---- -------
---------------------------- -- -
---------------------- - -----------------------
--------------------- - ---------------------------- -----------------------------------------
---
------
-
---
------ ------
--
-------------- - ------------------这个例子在 text 和 code 两种 slice 的字段上执行了不同的操作。对于 text 类型，它使用 markdown-it 渲染 HTML，而对于 code 类型，它使用 Prism 进行代码高亮。在中间，你可以用任何你需要的代码处理方式，只要你愿意。
指导意义
了解如何在 Node.js 中使用
metalsmith-prismic并将 Prismic API 转换成 Metalsmith 模板。掌握获取 Prismic 站点的的内容类型流程。
了解如何使用定制路由去解析 Prismic API 路由。
了解如何在
metalsmith-prismic中使用钩子。在钩子的帮助下，学习如何过程化地根据 slice 的类型处理 Metallsmith 模板。
了解如何使用 npm 包，并将其应用到现实中进行代码操作。
最终学习 Prismic CMS API，并且用起来更舒适。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/68827