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

Question

is it possible to have:
- a static html template
- a JSON with some data
and create static html file(s)?

For example i have to make a portfolio and i code html template:

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

Then i have a JSON like this:

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

I want to "deploy" my website and have 2 static html file
first_work.html

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

second_work.html

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

I know Jekyll that uses markdown to produce static html but i prefer JSON in this situation.

Answer 1

I just wrote a complete program in node.js doing it :

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>'
    );
}

If your JSON is in a file named site.json (note that a comma is missing in your JSON), it writes the two HTML files.

Answer 2

Yeah, that is possible. I would recommend using php cause of same origin policy.. Just load the json from a file or directly and then create a new document with the required contents. It is easily done with phps file_put_contents().

Greets

Answer 3

Great, one little thing. Looks like fs.writeFileSync() instead of fs.writeFile()