模板制作流程
准备工作
创建站点并导入模板包
在创建站点时，若选择与效果图相近的模板方案，可有效减少后续模板修改的工作量。关于创建站点的详细信息，请查阅：《模板方案导入与站点应用》。
创建站点后，系统会依据 {站点标识符} 自动生成相关的模板文件（Views）和风格文件（content），其目录结构如下：
WebSite
├── Views (电脑版模板目录)
│ ├── _Common (公共模板和组件)
│ ├── main (主站模板和组件)
│ ├── {站点标识符} (新建站点模板和组件)
│ │ ├── ContentManage (内容模型)
│ │ │ ├── Article (文章模型)
│ │ │ │ ├── 文章-列表页.cshtml (列表页模板)
│ │ │ │ ├── 文章-内容页.cshtml (内容页模板)
│ │ │ │ └── ** (其他模板)
│ │ │ ├── Photo (图片模型)
│ │ │ ├── FriendlyLink (友情链接模型)
│ │ │ ├── ** (其他模型)
│ │ │ └── Shared (组件)
│ │ │
│ │ ├── Home (首页)
│ │ │ └── 网站首页.cshtml (网站首页模板)
│ │ │
│ │ ├── Layout (公共布局模板)
│ │ │ └── 公共布局页.cshtml (公共布局模板)
│ │ │
│ │ ├── Shared (共用组件)
│ │ └──** (其他模块组件)
│ │
│ └── ** (其他子站标识符，其他子站模板和组件)
│
├── Views.Pad (平板版模板目录)
├── Views.Phone (手机版模板目录)
├── Views.WebFree (长者版模板目录)
│
├── wwwroot (网站静态文件目录)
│ ├── content (电脑版样式目录，存放各站点图片、CSS、JS)
│ │ ├── _common (公共样式)
│ │ ├── main (主站样式)
│ │ ├── {站点标识符} (新建站点样式)
│ │ │ ├── base (基础样式)
│ │ │ ├── contentmanage (内容模型样式)
│ │ │ ├── home (首页样式)
│ │ │ │ ├── css (CSS 样式)
│ │ │ │ │ └── index.css (首页 CSS 样式)
│ │ │ │ │
│ │ │ ├── interaction (互动)
│ │ │ ├── letterbox (便民咨询)
│ │ │ ├── petitionletter (信访)
│ │ │ └── ** (其他模块样式)
│ │ │
│ │ └── ** (其他子站标识符，其他子站样式)
│ │
│ ├── content.pad (平板版样式目录)
│ ├── content.phone (手机版样式目录)
│ ├── content.webfree (长者版样式目录)
│
└── web.config (站点配置文件)
Views 目录说明
\Views\{站点标识符}\：当前站点电脑（PC）端的模板文件和组件文件。\Views.Pad\{站点标识符}\：当前站点平板（Pad）端的模板文件和组件文件。\Views.Phone\{站点标识符}\：当前站点手机（Phone）端的模板文件和组件文件。\Views.WebFree\{站点标识符}\：当前站点长者版的模板文件和组件文件。
Content 目录说明
\wwwroot\content\{站点标识符}\：当前站点电脑（PC）端的 CSS 样式、图片、JS 文件。\wwwroot\content.pad\{站点标识符}\：当前站点平板（Pad）端的 CSS 样式、图片、JS 文件。\wwwroot\content.phone\{站点标识符}\：当前站点手机（Phone）端的 CSS 样式、图片、JS 文件。\wwwroot\content.webfree\{站点标识符}\：当前站点长者版的 CSS 样式、图片、JS 文件。
模板制作流程
模板的制作需要经过以下几个关键流程：
1. 设计页面效果图
- 使用工具： Photoshop（PSD格式）或在线UI设计工具（Figma/Sketch/即时设计）
- 输出要求：需包含PC/Pad/Phone/长者版四端设计稿
- 注意事项：保持设计稿分辨率与最终展示设备匹配
2. 静态页面转换
- 转换标准：将效果图转换为符合W3C标准的HTML页面
- 文件结构：
index.html
├── img (页面图片资源)
├── css
│ └── index.css (页面样式表)
└── js
└── index.js (页面脚本)
3. 嵌套组件代码到输出页面对应位置
将静态的数据内容，改为系统的组件代码，以解析出网站数据。关于组件的具体使用方法，请查阅《视图与组件》与《组件使用示例》。
以下是一些常用组件：
内容模块常用组件
功能模块常用组件
4. 制作公共布局
公共布局是网站中经常用到的布局，一般每个页面都会用到，所以可以将公共布局制作成组件，方便以后调用。根据输出的页面，提取当前站点公共的 css、js，制作网站顶部、网站底部等通用的公共布局组件。
需根据模板代码所引用的公共布局页视图，获取当前公共布局所引用的网站头部组件、网站底部组件，以及当前布局所引用的公共css、js文件路径。关于模板代码的详细结构，请查阅《单个模板构成》。
以下是一个示例，如\Views\{站点标识符}\Home\网站首页.cshtml：
@* 站点首页模板 *@
@Power.VisualizationView(new { Area = "SiteManage", Controller = "Site" })
@{
Layout = $"~/Views/{this.Context.GetCurrentSite().Identifier}/Layout/公共布局页.cshtml";
}
@section header {
<link href="~/content/@(this.Context.GetCurrentSite().Identifier)/home/css/index.css" asp-append-version="true" rel="stylesheet" />
}
<!-- content S -->
<div id="content">
<!-- 主体内容 -->
</div>
<!-- content E -->
其中，Layout = $"~/Views/{this.Context.GetCurrentSite().Identifier}/Layout/公共布局页.cshtml"; 所对应的布局页路径为：\Views\{站点标识符}\Layout\公共布局页.cshtml，其代码如下：
@{
Layout = "~/Views/_Common/Layout/基础布局页.cshtml";
}
@section meta{ @RenderSection("meta", false) }
@section header{
<link href="~/content/@(this.Context.GetCurrentSite().Identifier)/base/css/module.css" asp-append-version="true" rel="stylesheet" type="text/css" />
<link href="~/content/@(this.Context.GetCurrentSite().Identifier)/base/css/default.css" asp-append-version="true" rel="stylesheet" type="text/css" />
@RenderSection("header", false)
}
@section scripts{
@RenderSection("scripts", false)
<script src="~/content/_common/base/js/power.ui.captcha.js" asp-append-version="true"></script>
}
<div class="wrap">
@if (IsSectionDefined("top"))
{
@RenderSection("top")
}
else
{
@Power.Partial("网站顶部")
}
@RenderBody()
@if (IsSectionDefined("bottom"))
{
@RenderSection("bottom")
}
else
{
@Power.Partial("网站底部")
}
</div>
@* 如果不需要弹窗登录可以去掉 *@
@Power.Partial("用户登录弹出窗")
@Power.Partial("短信邮箱图形验证码弹出窗")
从上述公共布局页视图代码可以看出：
- 调用了网站顶部组件（
@Power.Partial("网站顶部")），其组件目录为：、Views/{站点标识符}/Shared/网站顶部.cshtml。 组件目录的详细信息请查阅：《组件存放目录》。 - 调用了网站底部组件（
@Power.Partial("网站底部")），其组件目录为：Views/{站点标识符}/Shared/网站底部.cshtml。 @section header{ }引入了module.css和default.css作为当前布局的公共样式，它们对应的路径分别是：\wwwroot\content\{站点标识符}\base\css\module.css\wwwroot\content\{站点标识符}\base\css\default.css
@section scripts{ }引入了power.ui.captcha.js作为当前布局的公共js，其对应的路径是：\wwwroot\content\_common\base\js\power.ui.captcha.js
5. 将模板更新至测试站目录的对应位置
这一步要将所制作的模板文件，根据动易系统的模板规则，存放于测试站相应的目录中。并检查网站后台相应的栏目中，是否已指定了新做的模板，以方便在前台浏览模板页目前的效果，也为后续测试调试模板文件做好准备。
6. 测试调试模板文件，确保还原设计效果
模板更新到测试网站后，还需验证模板文件是否正常显示，且还原设计效果。
- 多端适配测试：需验证PC/Pad/Phone/长者版的显示效果
- 功能验证清单：
- 链接有效性检查
- 响应式布局测试
- 组件交互测试
- 资源加载速度检查
7. 打包模板，同步到正式站
- 少量模板更新，可通过WebFuture管理后台进行模板上传。后台管理模板方法请查阅：《模板编辑与管理》
- 整站模板打包，可通过模板方案打包工具制作成模板方案，同步到正式站。
- 模板制作时需要符合《模板方案打包要求》
- 模板方案打包工具使用请查阅：《模板打包工具使用说明》
- 模板方案同步到站点请查阅：《更改模板方案》