快速开始

在 VS Code 中 5 分钟完成第一个 TMaker 模板

1

安装 TMaker

完成安装与环境准备

请先根据操作系统完成 TMaker 安装，安装说明请参考 /install/。

# 验证安装
tmaker --version
# 或使用简写
mk --version

💡 小贴士

  • • 建议使用 Node.js 24+ 以匹配构建流程
  • • 可使用 mk 作为 tmaker 简写命令
2

创建模板

初始化模板目录结构

# 进入 TMaker 目录
cd TMaker

# 创建简化模板
tmaker create mysite

# 或创建完整模板
tmaker template create mysite

模板会生成 pages/components/css/js 等基础目录。

💡 小贴士

  • • 模板 ID 只能包含字母、数字、下划线和连字符
  • • 推荐在 VS Code 中统一管理模板结构
3

安装依赖

安装 Tailwind CSS 构建依赖

# 进入模板目录
cd templates/mysite

# 安装依赖
npm install

# 返回 TMaker 目录
cd ../..

💡 小贴士

  • • 首次安装可能需要数分钟
  • • 如有权限问题，请检查 npm 配置
4

创建页面

编写页面模板与数据文件

在 templates/mysite/pages/ 创建 index.sbn：


  

    
{{ post.title }}

    
{{ post.summary }}

创建 index.data.json：

{
  "title": "欢迎使用 TMaker",
  "summary": "基于 Scriban + Tailwind v4 的模板渲染工具"
}

.meta.json 由系统管理（发布后生成），无需手动创建。

💡 小贴士

  • • .sbn 只写 body 内容，不需要 HTML 头部
  • • 数据字段使用小驼峰命名（camelCase）
  • • 可使用 Claude Code / OpenAI Codex / GLM 辅助文案与结构整理
5

渲染与预览

渲染模板并启动预览服务器

# 确保在 TMaker 目录下
tmaker render mysite
tmaker preview mysite

打开浏览器访问 http://localhost:1688 查看效果。

💡 小贴士

  • • 修改模板后需重新 render
  • • 预览端口可使用 -p 指定：mk preview mysite -p 3000

下一步

完成第一个模板后，你可以继续：

🏗️

模板目录结构与关键文件

理解模板的目录与规则
👀

渲染与预览流程

掌握 render/preview 的执行要点
🧩

组件与布局系统实战

构建可复用的组件库
📚

命令参考

完整 CLI 命令说明

常见问题

❓ 命令未找到：tmaker

请确认已安装并重启终端，Windows 可能需要重启系统。

❓ 渲染失败：找不到模板文件

确保在 TMaker 目录下运行命令（不是 templates/mysite）。

❓ 预览样式不正确

检查是否已执行 npm install 并成功完成 npm build。

❓ 页面数据未显示

确认 .data.json 文件名与 .sbn 一致，且 JSON 格式正确。

遇到其他问题？

联系支持