Question

我一直在尝试tutorial设置Metalsmith，而且我已经到了第1部分的末尾。

我已经安装了node.js和模块。 IDE是安装了Node.js工具的Visual Studio 2013。我已经放入了一个基本结构，我试图用模板渲染单个页面。

说明书告诉我们如下文件：

---
title: Home
template: home.hbt
---

This is your first page

使用如下模板：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>{{ title }} | Metalsmith Page</title>
</head>
<body>
    <div class="main-wrapper">
        {{{ contents }}}
    </div>
</body>
</html>

教程说它应该渲染到一个html页面，但我得到的结果是：

--- title: Home template: home.hbt --- This is your first page

当我使用降价渲染器时，它会给出

<p>ï»¿---
title: Home</p>
<h2 id="template-home-hbt">template: home.hbt</h2>
<p>This is your first page</p>

调试代码显示，当它到达渲染器时，缺少YAML front-matter元数据。这似乎很重要，因为插件使用元数据来呈现页面。

Answer 1

解决方案的关键在于降价渲染页面开始时的三个奇怪的角色？

ï»¿

和YAML front-matter警告：

UTF-8字符编码警告

如果您使用UTF-8编码，请确保您的文件中不存在BOM标题字符，否则Jekyll会发生非常糟糕的事情。如果您在Windows上运行Jekyll，这尤其重要。

查看Node.js中加载的缓冲区显示了utf8 BOM字符。

一种解决方案是让IDE停止将其保存为带有BOM的utf8，但对我来说这不是一个可行的选择。

我创建了一个解决方法，作为一些必须在任何其他metalsmith插件之前运行的小行。

var stripBom = require('strip-bom');
var front = require('front-matter');
var extend = require('extend');

// **snip**

.use(function __utf8BOM_workaround(files, metalsmith, done)
{
    setImmediate(done);
    Object.keys(files).forEach(function (file)
    {
        var data = files[file];
        var parsed = front(stripBom(data.contents.toString()));
        data = extend({}, data, parsed.attributes);
        data.contents = new Buffer(parsed.body);

        files[file] = data;
    });
})

Metalsmith静态站点页面缺少元数据

1 个答案: