介绍
wintersmith-author 是一个 Node.js 模块和命令行工具，可以帮助你在 Wintersmith 站点中快速添加作者信息，并生成作者页面。它提供了一种简单的方式，使你的 Wintersmith 站点更加规范和易于维护。
安装
使用 npm 安装：
--- ------- ------------------ ----------
安装后，你可以在你的代码中引入它：
----- ----------------- - ------------------------------
使用
初始化
初始化 wintersmith-author，可以使用命令行工具 wintersmith-author init 命令，也可以在代码中使用 wintersmithAuthor.init(config)。
命令行工具初始化
在 Wintersmith 站点根目录执行如下命令：
------------------ ----
运行上述命令后，会自动生成 authors 目录和 templates/author.jade 模板，如下所示：
---------------------- --- -------- - --- -------- - --- ------ - --- ---------- - --- --- --- --------- --- ---------- - --- --------- - --- ---------- - --- ----------- --- -----------
代码初始化
在你的代码中引入 wintersmith-author：
----- ----------------- - ------------------------------
调用 wintersmithAuthor.init() 方法即可完成初始化：
------------------------ --------------- ------------------------ -- ------- ------------------- ------------------------- -- --------- ------------- ---------------------- -- ------ ----------- ---------- -- -------- ---------------- ---------- -- ---- --- -- -------------------- ----------- -- ------ --- -- ---------------- ---------- -- -------- ---
作者信息
在 authors 目录中新建 Markdown 文件（.md 文件），每个文件代表一个作者。文件名可以是作者的名字或者拼音，建议使用英文或者拼音，以让你的网站更容易对搜索引擎友好。
例如，我们新建一个 alice.md 和一个 bob.md 文件，分别代表作者 Alice 和 Bob。文件的内容如下所示：
alice.md
--- ----- ----- ------ ----------------- --------- ----------------------------- ------- ---------------------------------------- --- -- ----- ----
bob.md
--- ----- --- ------ --------------- --------- --------------------------- ------- -------------------------------------- --- -- --- ----
模板
wintersmith-author 提供了两个默认的模板：
templates/author.jade：作者页模板templates/authors.jade：作者列表页模板
你可以创建和修改这些模板，以适应你的网站需求。
作者页模板
作者页模板通常显示一个作者的详细信息，包括姓名、头像、邮箱、主页等等。一个简单的作者页模板如下：
------- ---- ----- ------- --- ----------- -------- -------------- ---- ------------ - ------ --------------- - --------- ------------------ -- ----------
在模板中可以使用以下变量：
author.name：作者的名字author.email：作者的邮箱author.homepage：作者的主页author.avatar：作者的头像author.bio：作者的简介
作者列表页模板
作者列表页模板通常列出所有的作者，以供访问者选择。一个简单的作者列表页模板如下：
------- ----
----- -------
--- ------------ -- ---------
---- ------ -- --------------
------- ------------ -----------在模板中可以使用以下变量：
locals.title：页面标题locals.authors：作者列表，每个作者包含以下属性：author.name：作者的名字author.url：作者页的 URL
构建
wintersmith-author 通过 Wintersmith 的插件机制实现，因此你需要在 Wintersmith 的配置文件中引入插件，才能实现构建。
编辑 config.json 文件，将 wintersmith-author 添加到 plugins 数组：
-
--------- -
------ ------------------------
--
---------- -
---------------------------------------------
-
-在文章中使用作者信息
我们可以在文章的元数据中添加 author 字段，以便在生成静态页面时自动链接到作者信息页面。
例如，在你的文章头部添加以下元数据：
--- ------ -- ------- ------- ----- ---
那么，生成的 HTML 页面中，My article 将会链接到 Alice 的作者信息页面。
示例
下面是一个示例，包含了所有前面提到的步骤：
- 初始化 wintersmith-author
------------------ ----
- 新建
authors目录和authors/alice.md和authors/bob.md文件
authors/alice.md
--- ----- ----- ------ ----------------- --------- ----------------------------- ------- ---------------------------------------- --- -- ----- ----
authors/bob.md
--- ----- --- ------ --------------- --------- --------------------------- ------- -------------------------------------- --- -- --- ----
- 编辑
templates/author.jade和templates/authors.jade模板，以适应你的网站需求
templates/author.jade
------- ---- ----- ------- --- ----------- -------- -------------- ---- ------------ - ------ --------------- - --------- ------------------ -- ----------
templates/authors.jade
------- ----
----- -------
--- ------------ -- ---------
---- ------ -- --------------
------- ------------ ------------ 编辑
config.json文件，将 wintersmith-author 添加到 plugins 数组
-
--------- -
------ ------------------------
--
---------- -
---------------------------------------------
-
-- 在文章中使用作者信息
例如，在你的文章头部添加以下元数据：
--- ------ -- ------- ------- ----- ---
- 构建
使用以下命令构建你的 Wintersmith 站点：
----------- -----
- 查看效果
使用浏览器打开生成的静态页面，查看效果：
---- ----------------
总结
通过本文，你学习了如何使用 wintersmith-author npm 模块和命令行工具，来快速添加作者信息和作者页面。wintersmith-author 为你的 Wintersmith 站点的管理带来了便利，使你的网站更加规范和易于维护。同样的，它也提供了一种方法，让你可以更好地展示作者信息，提供更好的用户体验。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005524e81e8991b448cfd5b