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