Node.js + Mustache預處理靜態HTML

我正在處理一個需要將靜態HTML頁面轉換爲新的靜態HTML頁面的項目。我用Cheerio爲內容颳了頁面，並將頁面之間的關係存儲爲JSON。Node.js + Mustache預處理靜態HTML

面臨的挑戰是生成一個靜態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" 
     }] 
    }] 
}

節點設置：

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

// File Paths 
var pathToMustache = "./templates/toc.mustache"; 
var pathToJSON = "./menu/data.json"; 

// Generate HTML menu 
//var htmlMenu = Mustache.render(fs.readFileSync(pathToMustache).toString(), fs.readFileSync(pathToJSON)); 
var htmlMenu = Mustache.to_html(fs.readFileSync(pathToMustache).toString(), fs.readFileSync(pathToJSON)); 
console.log(htmlMenu); 

// Then loop through the html files appending the new menu using Cheerio...

這併成功追加<h1>Table of Contents</h1>，但沒有別的。我必須錯過一些非常明顯的東西，因爲我無法理解這一點。

我很新，鬍鬚以及一般編程，所以建議將不勝感激。

來源

2014-10-08 MCTaylor17

您從文件中讀取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-符號。

來源

2014-10-08 19:01:14

非常感謝！那就是訣竅！所以如果我沒有弄錯，JSON數據存在3種不同的狀態： 1）??? 2）字符串 3）對象 – MCTaylor17 2014-10-08 21:02:18

JSON是一種數據交換格式。基本上，有兩個函數：將一個對象返回給定的JSON文本的'JSON.parse'和將值轉換爲JSON-notation的'JSON.stringify'。 – 2014-10-09 03:20:41

也許這是我對Node fs模塊的整體理解的一個細分。我的問題主要集中在數據以'fs.readFile（「data.json」）''形式存在某種形式之前，它成爲一個字符串。 – MCTaylor17 2014-10-09 18:47:08

Node.js + Mustache預處理靜態HTML

回答

相關問題