首页模板开发
本文介绍如何从零开发一套 Cloud Blox 首页模板：模板是什么、最小可用模板（3 个文件）、如何预览和切换。面向模板开发者，按步骤操作即可完成一套可用的门户首页。更多细节见侧栏子页。
模板是什么
- 首页模板用于定制「门户首页」：用户访问站点根路径（未进入管理后台）时看到的页面，如产品介绍、定价、功能展示、文档中心等。
- 系统支持多套模板，管理员在 系统管理 → 运维监控 → 系统配置 的「首页模板」Tab 中选择当前使用的模板；切换后，访问根路径即看到该模板渲染的页面。
- 模板由静态 HTML 模板文件、配置文件与可选静态资源/文档组成，放在项目约定的模板根目录下（通常为
templates），每个子目录代表一套模板，目录名即模板 ID。
快速开始：最小模板（3 个文件）
创建一个最小可用模板只需 3 个文件：
| 文件 | 说明 |
|---|---|
config.yaml | 必须。模板元数据（名称、版本、作者、描述等）。 |
layout.html | 必须。所有页面的公共布局外壳。 |
home.html | 必须。至少一个页面；home.html 对应根路径 /。 |
步骤一：创建模板目录
在模板根目录下新建一个目录，目录名即模板 ID（建议小写、数字、连字符），例如 my-theme。
步骤二：编写 config.yaml
在模板目录下创建 config.yaml，内容示例：
yaml
name: "我的模板"
version: "1.0.0"
author: "你的名字"
description: "一句话描述模板用途"
preview: "preview.png" # 可选，预览图文件名（相对模板目录）步骤三：编写 layout.html
所有页面共用的布局，必须定义名为 layout 的块，并包含 content 与 extra_css 两个可被子页面覆盖的块。示例：
html
{{ "{{" }}define "layout"{{ "}}" }}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>{{ "{{" }}.PageTitle{{ "}}" }}</title>
<meta name="description" content="{{ "{{" }}.PageDesc{{ "}}" }}">
{{ "{{" }}block "extra_css" .{{ "}}" }}{{ "{{" }}end{{ "}}" }}
</head>
<body>
<header><a href="/">{{ "{{" }}.Site.Title{{ "}}" }}</a></header>
<main>{{ "{{" }}block "content" .{{ "}}" }}{{ "{{" }}end{{ "}}" }}</main>
<footer>{{ "{{" }}.Site.Copyright{{ "}}" }}</footer>
</body>
</html>
{{ "{{" }}end{{ "}}" }}{{.PageTitle}}、{{.PageDesc}}：当前页面标题与描述（可由 routes 配置 覆盖）。{{.Site.Title}}、{{.Site.Copyright}}：站点级配置，来自后台「网站配置」。- 使用 Go 标准
html/template语法，详见 模板数据与可用函数。
步骤四：编写 home.html（首页）
在模板目录下创建 home.html，覆盖 content 块即可：
html
{{ "{{" }}define "content"{{ "}}" }}
<section>
<h1>欢迎使用 {{ "{{" }}.Site.Title{{ "}}" }}</h1>
<p>{{ "{{" }}.Site.Description{{ "}}" }}</p>
</section>
{{ "{{" }}end{{ "}}" }}步骤五：在后台切换模板
- 进入 系统管理 → 运维监控 → 系统配置，打开「首页模板」Tab。
- 在「当前使用的模板」下拉中选择刚创建的模板（显示为 config 中的
name）。 - 保存后，访问站点根路径即可看到新模板。