📄 HTML 模板生成器

选择模板
页面信息
功能选项
CSS 框架
JS 库

${getTitle()}

欢迎访问我的页面。

${getJS()} `, landing: () => ` ${getMeta()} ${getTitle()} ${getCSS()}

${getTitle()}

${getDesc() || "打造卓越产品，提升用户体验"}

了解更多

核心功能

🚀

快速部署

一键部署，快速上线您的项目

🔒

安全可靠

企业级安全保障，数据加密存储

📱

响应式设计

完美适配各种设备和屏幕尺寸

${getJS()} `, form: () => ` ${getMeta()} ${getTitle()} ${getCSS()}

${getTitle()}

还没有账号？立即注册
${getJS()} `, dashboard: () => ` ${getMeta()} ${getTitle()} ${getCSS()}

仪表盘

欢迎回来，管理员

总用户数

12,345

今日访问

1,234

收入

¥56,789

订单数

890

最近动态

暂无数据

${getJS()} `, blog: () => ` ${getMeta()} ${getTitle()} ${getCSS()}

${getTitle()}

📅 2024-01-01 ✍️ ${getAuthor() || "作者"} ⏱️ 5 分钟阅读
文章封面

${getDesc() || "这是文章的导语部分，用于概括文章的主要内容，吸引读者继续阅读。"}

第一部分

这里是文章的正文内容。你可以在这里添加段落、图片、代码块等各种内容。

这是一段引用文字，用于强调重要的观点或引用他人的话。

继续添加更多内容...

代码示例

function hello() {
    console.log('Hello, World!');
}
#技术 #教程 #Web开发
${getJS()} `, email: () => ` ${getTitle()}

${getTitle()}

您好！

${getDesc() || "感谢您使用我们的服务。这是一封示例邮件模板。"}

请点击下面的按钮完成操作：

立即操作

如果您没有请求此邮件，请忽略它。

© 2024 ${getAuthor() || "Company Name"}. All rights reserved.

` }; // Helper functions function getTitle() { return document.getElementById("pageTitle").value || "我的页面"; } function getDesc() { return document.getElementById("pageDesc").value; } function getAuthor() { return document.getElementById("pageAuthor").value; } function getMeta() { let meta = []; if (document.getElementById("optCharset").checked) meta.push(''); if (document.getElementById("optViewport").checked) meta.push(''); if (getDesc()) meta.push(``); if (getAuthor()) meta.push(``); if (document.getElementById("optFavicon").checked) meta.push(''); if (document.getElementById("optCanonical").checked) meta.push(''); if (document.getElementById("optOG").checked) { meta.push(``); meta.push(``); meta.push(''); meta.push(''); } if (document.getElementById("optTwitter").checked) { meta.push(''); meta.push(``); meta.push(``); } return meta.join("\n "); } function getCSS() { const framework = document.getElementById("cssFramework").value; const cssLinks = { pico: '', bootstrap: '', tailwind: '