Node.js +胡子预处理静态HTML

Question

我正在一个需要将静态HTML页面转换为新的静态HTML页面的项目中。我用Cheerio抓取了页面内容，并将页面之​​间的关系存储为JSON。

面临的挑战是如何生成一个包含将所有内容互连的目录的静态html页面。

小胡子模板：

<h1>Table of Contents</h1>
{{#toc}}
    <h2>{{moduleName}}</h2>
    <ul class='module'>
        {{#page}}
            <li><a href='{{url}}'>{{title}}</a></li>
        {{/page}}
    </ul>
{{/toc}}

数据：

{
    "toc": [{
        "moduleName": "Getting Started",
        "page": [{
            "title": "Welcome",
            "url": "L0-01_Welcome.html"
        }, {
            "title": "Who Should Read This?",
            "url": "L0-02_WhoFor.html"
        }]
    }, {
        "moduleName": "Module 1",
        "page": [{
            "title": "Definitions",
            "url": "L1-01_Definitions.html"
        }]
    }]
}

节点设置：

<h1>Table of Contents</h1>
{{#toc}}
    <h2>{{moduleName}}</h2>
    <ul class='module'>
        {{#page}}
            <li><a href='{{url}}'>{{title}}</a></li>
        {{/page}}
    </ul>
{{/toc}}

这确实成功附加了<h1>Table of Contents</h1>，但除此之外没有其他内容。我一定会错过一些非常明显的东西，因为我无法理解这一点。

我对小胡子和编程一般都是新手，因此我们将不胜感激。

Answer 1

您从文件中读取JSON作为文本字符串，并且需要在调用Mustache.render之前将其转换为对象。

用途JSON.parse：

'use strict';

var Mustache = require("mustache");
var fs = require("fs");

var page = fs.readFileSync("page.mustache").toString();
var data = JSON.parse(fs.readFileSync("data.json").toString());

var h = Mustache.render(page, data);

console.log(h);

输出：

<h1>Table of Contents</h1>
    <h2>Getting Started</h2>
    <ul class='module'>
          <li><a href='L0-01_Welcome.html'>Welcome</a></li>
          <li><a href='L0-02_WhoFor.html'>Who Should Read This?</a></li>
    </ul>
    <h2>Module 1</h2>
    <ul class='module'>
          <li><a href='L1-01_Definitions.html'>Definitions</a></li>
    </ul>

在JavaScript中，基本上有两个函数：JSON.parse和JSON.stringify。

JSON.parse -将对象返回给定的JSON文本

JSON.stringify -将值转换为JSON表示法。