如何编写模板代码根据用户输入生成不同标题及文件名的HTML文件

不需要额外依赖，用Node原生API即可实现：

• 第一步：准备HTML模板文件，自定义变量用统一占位符（比如{{变量名}}）包裹，示例模板template.html内容：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>{{title}}</title>
    <meta name="description" content="{{pageDesc}}">
</head>
<body>
    <h1>欢迎来到{{userName}}的主页</h1>
    <div class="custom-block">{{customContent}}</div>
</body>
</html>

• 第二步：编写生成逻辑的JS脚本：

const fs = require('fs');
const path = require('path');

// 生成HTML方法
function generateHtml(config) {
    // 读取模板内容
    const template = fs.readFileSync(path.resolve(__dirname, './template.html'), 'utf-8');
    let resultHtml = template;
    // 遍历替换所有变量
    Object.keys(config.vars).forEach(key => {
        const reg = new RegExp(`{{${key}}}`, 'g');
        resultHtml = resultHtml.replace(reg, config.vars[key]);
    });
    // 写入生成的文件
    fs.writeFileSync(path.resolve(__dirname, config.outputPath), resultHtml, 'utf-8');
}

// 调用示例
generateHtml({
    // 输出的文件路径+文件名
    outputPath: './李四的个人主页.html',
    // 动态变量集合，和模板里的占位符一一对应
    vars: {
        title: '李四的个人主页',
        pageDesc: '李四的前端技术分享页面',
        userName: '李四',
        customContent: '这是我自己生成的自定义HTML页面'
    }
});

• 第三步：终端执行node 你的脚本文件名.js即可在指定路径生成对应HTML文件。如果需要支持循环、条件判断等复杂模板逻辑，可以直接用ejs、handlebars等成熟模板引擎替代自己写的正则替换逻辑。

不需要服务端支持，纯前端即可实现用户自定义生成并下载HTML：

• 第一步：页面内写入模板和交互控件：

<!-- 隐藏的HTML模板，type设置为非可执行类型避免被浏览器解析 -->
<script type="text/template" id="htmlTemplate">
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>{{title}}</title>
</head>
<body>
    <h1>{{title}}</h1>
    <p>{{content}}</p>
</body>
</html>
</script>

<!-- 输入控件 -->
<div>
    <input type="text" id="titleInput" placeholder="请输入页面标题">
    <textarea id="contentInput" placeholder="请输入页面正文"></textarea>
    <input type="text" id="fileNameInput" value="自定义页面.html" placeholder="请输入生成的文件名">
    <button id="generateBtn">生成并下载HTML</button>
</div>

• 第二步：编写替换和下载逻辑：

document.querySelector('#generateBtn').addEventListener('click', () => {
    // 获取用户输入的变量
    const title = document.querySelector('#titleInput').value;
    const content = document.querySelector('#contentInput').value;
    const fileName = document.querySelector('#fileNameInput').value;
    
    // 获取模板并替换变量
    let template = document.querySelector('#htmlTemplate').innerHTML;
    template = template.replace(/{{title}}/g, title).replace(/{{content}}/g, content);
    
    // 生成Blob触发下载
    const blob = new Blob([template], { type: 'text/html' });
    const downloadUrl = URL.createObjectURL(blob);
    const aTag = document.createElement('a');
    aTag.href = downloadUrl;
    aTag.download = fileName;
    aTag.click();
    URL.revokeObjectURL(downloadUrl);
});

用户点击按钮后会直接下载生成完成的HTML文件。

内容的提问来源于stack exchange，提问作者VSR cookies