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

In the first part of this mini-series I’ve introduced you to Wintersmith, one of the best Node.js-based static site generators in my opinion. I covered how to install and get started with Wintersmith and also discussed some features of Jade, its default templating system.

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

In this second installment, I’ll teach you how to create posts using the Markdown format, how to set custom Metadata, and also how to generate and deploy your static website.

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

创建帖子 (Creating Posts)

In the first part of this series, we’ve built our templates with Jade. Now it’s time to create some content for the site. By default, posts are written in Markdown rendered by Marked, though other renders are available as plugins.

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

Most developers seem to be familiar with Markdown, but if you aren’t, it’s very easy to learn. Many code editors either support it by default or via free extensions. There are many standalone Markdown editors out there, for example I use Mou on OSX and there is MarkdownPad on Windows. This post won’t go into the details of the specifics of Markdown but in case you need a place to start, I suggest you to take a look at this page.

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

Posts are placed in the contents/articles folder. Each post is given its own directory which will be its SEO-friendly URL. For instance, our post for the Season 6 episode of Adventure Time! named “Breezy” was placed in a directory named articles/season-6-breezy. Inside that directory there is our Markdown file for the post named index.md.

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

发布元数据 (Post Metadata)

Each Markdown post can have metadata on top using the YAML format, similar to Jekyll’s Front Matter. No metadata is required but template, title, and date. template is the template that should be used to render the post, title is the title of the post, and date is the date it was posted. If template isn’t specified, the post will not be rendered (which likely isn’t what you want). If title and date are unspecified, their values will receive defaults.

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

We are free to add any other metadata we want to. We’ll discuss this further in the custom metadata section below.

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

Wintersmith also allows us to specify metadata for posts using the JSON format via a JSON file in the contents directory. For more details on that, check the documentation.

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

自定义节选 (Customizing Excerpts)

Wintersmith lets us specify where it will end the excerpt within a post. This ensure that the excerpt does not exceed a specific length or ends in a logical spot. In order to specify the end of the excerpt, we have to place the following code within our Markdown post:

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

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

If we don’t specify this span, Wintersmith will look for the first instance of an <h2> or <hr>. If none of these are present, the excerpt will contain the full HTML of the post which is not what you want. The excerpt is available via the intro property on a page, as in our templates/partials/homepagemiddle.jade file:

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

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

If we wanted to check that an excerpt was specified, we can use the hasMore property of the page. You can learn more about how this works by examining the code of the page plugin.

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

自定义元数据 (Custom Metadata)

Frequently, you’ll need to set your own metadata, either global to the site or local to a post/page. Let’s look at how this is done in Wintersmith.

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

全局元数据 (Global Metadata)

We can set any arbitrary metadata inside the config.json file under the locals object. For example, we can set a site name, description, and banner image in our sample site.

我们可以在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"
},
...

These values are available anywhere in our site templates under a locals object. For example, we use the values above within templates/partials/footer.jade:

这些值在我们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

It should be noted that these could also be referenced as banner and description without the locals and it would work as well.

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

每个帖子元数据 (Per Post Metadata)

As we discussed earlier, every post should have metadata set. This metadata can contain whatever arbitrary values we choose. For example, here’s the metadata for one of our articles (contents/articles/season-6-breezy/index.md) where we set a shortdesc and a banner value.

如前所述，每个帖子都应设置元数据。 该元数据可以包含我们选择的任何任意值。 例如，下面是我们的文章(一个元数据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
---

We can access the shortdesc value using the metadata object within the page object. Here we’re using it inside a loop on templates/partials/footer.jade:

我们可以使用页面对象中的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

Of course, we can also access these within our page output, as we do within contents/templates/article.jade:

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

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

自订资料 (Custom Data)

Not everything in our site is going to be a post or metadata. Often we’ll have other types of data collections. For example, in our sample site, we have a collection of Adventure Time! characters with names, descriptions, and images. Rather than hardcode these values on a page, creating them as data allows us to reuse them throughout the site wherever we need and make their display flexible. Let’s see how this works.

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

Data in Wintersmith works similar to Jekyll collections in that it is file-based. Rather than placing a single JSON file into a predetermined folder, each object has its own file within whatever folder you choose under the contents folder.

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

For example, in our sample site, contents/characters contains a series of files, each with JSON data representing a character. Below is the contents of contents/characters/lsp.json:

例如，在我们的示例站点中， 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"
}

This data is automatically read via the contents object based upon the name of the folder, with each file becoming an object within the array. Each property within the file is available under the metadata object. In our sample, we use this to output a list of characters on the home page:

该数据将根据文件夹的名称通过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

生成和部署 (Generating and Deploying)

Now that we’ve completed our project, it’s time to deploy it. But first we need to generate the static files that we have to upload to our server. To build our site, execute the following command:

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

$ wintersmith build

By default, this command will generate the files into a build directory. However, we can specify a different path by using the -o option. We can also force the clean of the build directory before building by using the -X option. For a full list of build options you can use the command wintersmith build --help.

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

结论 (Conclusion)

I think it’s pretty clear that Wintersmith offers a full feature set for a static site generator, allowing us to build complex static sites within the Node.js/npm ecosystem. Unfortunately, many of the topics discussed in detail here are not well covered in the limited project documentation.

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

The good news is that the source is all CoffeeScript, which is pretty easy to comprehend if you are a JavaScript developer. So, many of the details of how the project works can be learned by looking at the source code. In addition, there is a showcase of sites built with Wintersmith, many including source code, that can help you see how others have solved common tasks using the tool. While these are no replacement for a solid documentation, it should be able to get you where you need to go.

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

For additional samples of popular static site engines, check out my project on GitHub which includes not only this Wintersmith sample, but the same sample site built with Jekyll, Harp, and Middleman.

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

翻译自: https://www.sitepoint.com/creating-posts-custom-metadata-data-wintersmith/