在Wintersmith中创建帖子，自定义元数据和数据

最新推荐文章于 2024-10-02 19:49:06 发布

dingshi7798

最新推荐文章于 2024-10-02 19:49:06 发布

阅读量97

点赞数

文章标签： markdown json 嵌入式

在这个迷你系列的第一部分中，我向您介绍了温特史密斯，它是我认为是最好的基于Node.js的静态站点生成器之一。我介绍了如何安装和开始使用Wintersmith，还讨论了其默认模板系统Jade的一些功能。

在第二部分中，我将教您如何使用Markdown格式创建帖子，如何设置自定义元数据以及如何生成和部署静态网站。

创建帖子

在本系列的第一部分中，我们使用Jade构建了模板。现在是时候为网站创建一些内容了。默认情况下，帖子使用Marked渲染的Markdown编写，尽管其他渲染也可以作为plugins使用。

大多数开发人员似乎对Markdown都很熟悉，但是如果您不熟悉的话，它很容易学习。许多代码编辑器默认情况下都支持它，或者通过免费扩展来支持它。有很多独立的Markdown编辑器，例如，我在OSX上使用Mou ，在Windows上有MarkdownPad 。这篇文章不会详细介绍Markdown的细节，但是如果您需要一个起点，建议您看一下此页面。

帖子放置在contents/articles文件夹中。每个帖子都有自己的目录，该目录将是其SEO友好的URL。例如，我们在《冒险时间》第6季中的帖子！名为“ Breezy”的文件放置在名为articles/season-6-breezy 。在该目录中，有我们的Markdown文件，用于名为index.md的帖子。

发布元数据

每个Markdown帖子都可以使用YAML格式在顶部放置元数据，类似于Jekyll的Front Matter 。不需要元数据，但需要template ， title和date 。 template是应该用于呈现帖子的模板， title是帖子的标题， date是发布的日期。如果未指定template则不会呈现该帖子（这可能不是您想要的）。如果未指定title和date ，则它们的值将为默认值。

我们可以自由添加任何其他想要的元数据。我们将在下面的自定义元数据部分中对此进行进一步讨论。

Wintersmith还允许我们通过目录目录中的JSON文件使用JSON格式为帖子指定元数据。有关更多信息，请参阅文档。

自定义节选

Wintersmith让我们指定帖子中摘录的结尾位置。这样可以确保摘录不超过特定长度或以逻辑点结尾。为了指定摘录的结尾，我们必须在Markdown帖子中放置以下代码：

<span class="more"></span>

如果不指定此span ，则温特史密斯将查找<h2>或<hr>的第一个实例。如果这些都不存在，则摘录将包含帖子的完整HTML，这不是您想要的。摘录可通过页面上的intro属性获得，如我们的templates/partials/homepagemiddle.jade文件中所示：

| !{ typogr(article.intro).typogrify() }

如果要检查是否指定了摘录，则可以使用页面的hasMore属性。您可以通过检查页面插件的代码来了解有关其工作原理的更多信息。

自定义元数据

通常，您需要设置自己的元数据，该元数据对于站点是全局的，对于帖子/页面是本地的。让我们看看如何在温特史密斯完成。

全局元数据

我们可以在locals对象下的config.json文件内设置任意元数据。例如，我们可以在示例站点中设置站点名称，描述和横幅图像。

{
  "locals": {
    "url": "http://localhost:8080",
    "name": "Adventure Time!",
    "owner": "Brian Rinaldi",
    "description": "Adventure Time is an American animated television series created by Pendleton Ward for Cartoon Network. The series follows the adventures of Finn, a human boy, and his best friend and adoptive brother Jake, a dog with magical powers to change shape and grow and shrink at will. Finn and Jake live in the post-apocalyptic Land of Ooo. Along the way, they interact with the other main characters of the show: Princess Bubblegum, The Ice King, and Marceline the Vampire Queen.",
  "banner": "/assets/images/about.jpg"
},
...

这些值可在我们的网站模板中任何locals对象下找到。例如，我们在templates/partials/footer.jade使用上面的值：

div(class="4u")
    section
        header
            h2 What's this all about?
        a(href="#",class="image featured")
            img(src= locals.banner)
        p= locals.description

应该注意的是，这些也可以不带locals而被称为banner和description ，它也可以使用。

每个帖子元数据

如前所述，每个帖子都应设置元数据。该元数据可以包含我们选择的任意值。例如，这是我们其中一篇文章（ contents/articles/season-6-breezy/index.md ）的元数据，在其中我们设置了shortdesc和banner值。

---
title:  "Breezy (Season 6)"
date:   2014-06-05 10:33:56
template: article.jade
shortdesc: Finn decides to get back into the dating game to help his wilting arm flower.
banner: /assets/images/breezy.jpg
---

我们可以使用页面对象中的metadata对象访问shortdesc值。在这里，我们在templates/partials/footer.jade的循环中使用它：

- var i=0
- var articles = env.helpers.getArticles(contents);
each article in articles
    -i++
    if (i>2) && (i<8)
        li
            span(class="date")
                !=moment.utc(article.date).format('MMM')
                strong= moment.utc(article.date).format('DD')
            h3
                a(href=article.url)= article.title
            p= article.metadata.shortdesc

当然，我们也可以在页面输出中访问这些contents/templates/article.jade ，就像在contents/templates/article.jade ：

header
    h2= page.title
    p= page.metadata.shortdesc

自订资料

并非我们网站中的所有内容都将是帖子或元数据。通常，我们还会有其他类型的数据收集。例如，在我们的示例站点中，我们有一个冒险时间集合！带有名称，描述和图像的字符。无需将这些值硬编码在页面上，而是将它们创建为数据，使我们可以在需要的地方在整个站点中重复使用它们，并灵活地显示它们。让我们看看它是如何工作的。

Wintersmith中的数据与Jekyll集合相似，因为它是基于文件的。而不是将单个JSON文件放置到预定的文件夹中，每个对象在contents文件夹下选择的任何文件夹中都有其自己的文件。

例如，在我们的示例站点中， contents/characters包含一系列文件，每个文件都有代表字符的JSON数据。以下是contents/characters/lsp.json的contents/characters/lsp.json ：

{
  "description": "Lumpy Space Princess (LSP) acts like a bratty, apathetic, sassy, attention-seeking and willfully ignorant teenager, often texting on her phone.",
  "image": "/assets/images/lsp.jpg",
  "name": "Lumpy Space Princess"
}

该数据将根据文件夹的名称通过contents对象自动读取，每个文件都将成为数组中的一个对象。文件中的每个属性在metadata对象下均可用。在我们的示例中，我们使用它在主页上输出字符列表：

each character in contents.characters
    div(class="4u")
        section(class="box")
            span(class="image featured")
                img(src= character.metadata.image)
            header
                h3= character.metadata.name
            p= character.metadata.description

生成和部署

现在我们已经完成了我们的项目，是时候部署它了。但是首先，我们需要生成必须上传到服务器的静态文件。要构建我们的网站，请执行以下命令：

$ wintersmith build

默认情况下，此命令会将文件生成到build目录中。但是，我们可以使用-o选项指定其他路径。我们还可以使用-X选项在build之前强制清除build目录。有关构建选项的完整列表，可以使用命令wintersmith build --help 。

结论

我认为很明显，Wintersmith为静态站点生成器提供了完整的功能集，使我们能够在Node.js / npm生态系统内构建复杂的静态站点。不幸的是，这里详细讨论的许多主题在有限的项目文档中都没有很好地介绍。

好消息是，源代码全部为CoffeeScript，如果您是JavaScript开发人员，则很容易理解。因此，可以通过查看源代码来了解有关项目工作方式的许多细节。此外，这里还展示了使用温特史密斯（Wintersmith）建立的网站，其中包括源代码，可以帮助您了解其他人如何使用该工具解决了常见任务。尽管这些不能代替可靠的文档，但它应该能够使您到达需要的地方。

有关流行的静态站点引擎的其他示例，请在GitHub上查看我的项目，该项目不仅包括该Wintersmith示例，还包括由Jekyll，Harp和Middleman构建的同一示例站点。

From: https://www.sitepoint.com/creating-posts-custom-metadata-data-wintersmith/