从变量生成多个 HTML 文件答案

【问题标题】：Generate multiple HTML files from variables从变量生成多个 HTML 文件
【发布时间】：2016-10-11 19:25:15
【问题描述】：

我正在开发一个必须为每个国家/地区生成页面的网站（这些页面之间的唯一区别是元标记、title 和img 标记）。手动这样做对我来说效率不高，因为每次我必须更改模板中的某些内容时，我都必须对每个国家/地区页面的每个 .html 文件执行相同的操作。

我听说我可以为此使用 gulp.js，但我不太确定是否可以或如何。

基本上，我必须像这样生成 12 个.html 文档：

<head>
  <title>-country title-</title>
  <meta name="description" content="-country description-">
</head>
<body>
  <img src="-country-img-" />
</body>

关于这个问题的任何建议，或其他可能的解决方案？

【问题讨论】：

这很简单，使用一个服务器端可执行语言文件和一个模板来输出依赖于 url。它们必须是静态的.html 文件吗？
在服务器端这样做不是更好吗？
@GonzaloDiazAilan 看看像 WebPack 这样的打包工具。选择一种模板语言，即时生成页面等。您可以使用 JavaScript/Node.js 来完成。无需更改您的服务器。
@adeneo 当然，如果页面上没有任何变化，您将浪费大量 CPU，一遍又一遍地重新生成相同的页面。有时预先生成是正确的解决方案。如果您只是模板化您的网站，预先生成，那么您可以使用任何静态托管（如漂亮的 CDN）来托管您的网站。由于浏览器对现代 JavaScript 的出色支持，以及如今搜索引擎运行 JavaScript 的事实，静态选项对越来越多的情况具有吸引力。
@GonzaloDiazAilan 有很多。我以前使用过 Hexo，但不喜欢它，因为它添加了一些额外的废话。 Metalsmith 是一个受欢迎的选择，但可能需要更多设置。您可以简单地编写一个基本的 Node.js 脚本来运行 Mustache 模板并为您输出 HTML。有很多选择...尝试几个，看看最适合你的。

标签： javascript html gulp

【解决方案1】：

最后我使用了this article，它使用 gulp.js + handlebars.js 解决了这个问题。

这是我的gulpfile.js，如果你想知道我是怎么做到的：

gulp.task('pages', function() {
for(var i=0; i<countries.length; i++) {
    var country = countries[i],
        fileName = country.filename.replace(/ +/g, '-').toLowerCase();

        console.log(country.filename);

    gulp.src('countries-template.handlebars')
        .pipe(handlebars(country))
        .pipe(rename(fileName + ".html"))
        .pipe(gulp.dest('build/countries'));
}
gulp.src('countries-template.handlebars')
    .pipe(handlebars(countries[0]))
    .pipe(rename("index.ejs"))
    .pipe(gulp.dest(''));
})

如果您想查看.json 文件，这是我的countries-config.json：

[{
"name": "Argentina",
"filename": "argentina",
"slug": "arg"
},{
"name": "Mexico",
"filename": "mexico",
"slug": "mex"
},{
"name": "Chile",
"filename": "chile",
"slug": "chi"
},{
"name": "Bolivia",
"filename": "bolivia",
"slug": "bol"
}, [etc...]
]

我不会显示我的countries-template.handlebars，因为它非常庞大，但我可以保证这种方法对我完美无缺

感谢大家的帮助！

【讨论】：