html 模板 + json 数据 -> 静态 html 部署答案

【问题标题】：html template + json data -> static html deployhtml 模板 + json 数据 -> 静态 html 部署
【发布时间】：2013-04-29 12:10:24
【问题描述】：

是否有可能：
- 一个静态的html模板
- 带有一些数据的 JSON
并创建静态 html 文件？

例如，我必须制作一个投资组合并编写 html 模板：

...
<h1> {title} </h1>
<p> {description} </p>
...

然后我有一个这样的 JSON：

"first work" : {
    "title" : "alpha",
    "description" : "lorem ipsum"
},
"second work" : {
    "title" : "beta",
    "description" : "lorem ipsum"
}

我想“部署”我的网站并拥有 2 个静态 html 文件
first_work.html

<h1> alpha </h1>
<p> lorem ipsum </p>

second_work.html

<h1> beta </h1>
<p> lorem ipsum </p>

我知道 Jekyll 使用 markdown 来生成静态 html，但在这种情况下我更喜欢 JSON。

【问题讨论】：

是的，这是可能的，这很简单，但是对于建筑，您需要一些代码。你想用什么语言？
请注意，另一种方法是让浏览器加载 json 文件并在 javascript 中处理所有内容，这就是我在 one of my sites 中所做的。但如果您的网站很大，这不是最有效的解决方案。
@dystroy 我想使用 javascript (nodejs) 但如果需要我也可以使用 php。注意我想在我的网站上使用静态 html 文件，而不是运行 nodejs 或 php！ :)
也许像handlebarsjs.com这样的模板引擎可以帮助你。

标签： html json templates template-engine static-html

【解决方案1】：

太好了，一件小事。看起来像 fs.writeFileSync() 而不是 fs.writeFile()

【讨论】：

【解决方案2】：

我刚刚在 node.js 中写了一个完整的程序：

var fs  = require("fs");
var f = fs.readFileSync('./site.json').toString();
var pages = JSON.parse(f);
for (var key in pages) {
    var page = pages[key];
    fs.writeFile(
        key.replace(/ /g, '_')+'.html',
        '<h1>'+page.title+'</h1>'
        + '<p>'+page.description+'</p>'
    );
}

如果您的 JSON 位于名为 site.json 的文件中（请注意，您的 JSON 中缺少逗号），它会写入两个 HTML 文件。

【讨论】：

没关系，但我的 html 页面不是那么简单 :) 这只是一个示例 :) 将所有 html 页面包含到 nodejs 程序中并不是那么简单，网络上没有任何东西可以自动执行我需要什么？
从那里您必须根据您的精确要求完成其余的工作。我给了你原理。
好吧，如果我找不到可以自动执行的操作，我会这样做:)
你“需要”什么还不清楚。 JSON 和 HTML 之间没有等价性，因此没有程序可以将一种格式明显转换为另一种格式，这是没有意义的。
我知道 json 和 html 之间没有等价性。您的解决方案的“问题”是我必须将整个 html 页面放入 fs.writeFile( ... ) 中，这既不快也不容易。我想知道是否有什么东西可以自动将 json 对象放入 html 页面并呈现该页面。我认为第一个描述很清楚:(

【解决方案3】：

是的，这是可能的。我建议使用同源策略的 php 原因.. 只需从文件或直接加载 json，然后创建一个包含所需内容的新文档。使用 phps file_put_contents() 可以轻松完成。

问候

【讨论】：