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

标签 html json templates template-engine static-html

是否有可能:
- 一个静态的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。

最佳答案

我刚刚用 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 模板 + json 数据 -> 静态 html 部署,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16386866/

相关文章:

javascript - 通过 Ajax 将 Javascript 对象存储在 $_SESSION 中。数组与 JSON 字符串

c++ - 如何将模板从 C++ 转换为 C

c++ - 如何在 C++ 中专门化 std::vector 的模板模板参数

javascript - 检测刷新时的内容变化

html - 使用内联 block 而不是 float 进行画廊布局

json - 使用 JSON 从 Youtube API 返回视频持续时间

C++ typedef 修复模板参数

javascript - jQuery.next() - 为什么它会跳过包含条件?

javascript - 如何为 HTML5 音频元素制作加载栏?

php - 将选择的多选选项值设置为使用 json 选择