系统模板结构

最后更新: | 浏览次数: 963|前端开发基础

模板结构与目录说明

在阅读本文前，建议先阅读《系统模板语法》中“基础原理”章节，以便理解模板文件的工作机制以及后续模板开发相关内容。

核心文件

系统在 /shared 目录下提供了一套用于快速开发的前端基础框架。

目录结构如下：

/shared
├── css
└── js

其中：

目录 说明
css 系统核心样式文件
js 系统核心脚本文件

这些文件构成了系统默认前端框架的基础部分，一般情况下无需修改。

通过这些核心文件，可以快速搭建完整的网站页面，并获得统一的样式规范与交互体验。

如果需要完全定制属于自己的前端开发框架，通常可以从此目录开始进行二次开发。

模板位置

所有主题模板均存放于网站根目录的 theme 文件夹下。

目录结构示例：

/theme
├── skin5-native
├── skin-companya
└── skin-companyb

每个主题之间完全独立，可以拥有不同的页面结构、样式文件以及模板逻辑。

系统默认主题为：

skin5-native

主题配置文件

每个主题目录下都包含两个系统配置文件：

theme.config
Web.config

这两个文件属于系统核心文件，不可删除。

theme.config

用于定义主题基本信息。

例如：

<theme>
    <name>默认主题</name>
</theme>

其中：

<name></name>

标签中的内容将显示在后台主题管理界面中。

例如：

<name>企业官网主题</name>

后台切换主题时将显示：

企业官网主题

Web.config

用于定义主题运行所需的默认配置。

该文件由系统自动读取，通常无需修改。

模板类型

系统后台分类管理中提供两种列表类型：

  • 栏目列表

  • 全局列表

不同类型决定页面读取内容的方式。

栏目列表

栏目列表仅读取当前分类下的直接内容。

例如：

产品中心
├── CNC加工
├── 钣金加工
└── 压铸加工

当访问：

产品中心

时，仅显示属于：

产品中心

分类下的内容。

全局列表

全局列表除了读取当前分类内容外，还会读取所有子分类内容。

例如：

产品中心
├── CNC加工
├── 钣金加工
└── 压铸加工

访问：

产品中心

时将显示：

  • 产品中心

  • CNC加工

  • 钣金加工

  • 压铸加工

所有分类下的内容。

模板文件对应关系

后台模板选择框中显示的是模板名称。

实际对应的模板文件为：

模板名称.cshtml

例如后台选择：

product-list

实际调用文件：

product-list.cshtml

系统为了简化后台管理界面，默认隐藏：

.cshtml

扩展名。

特殊页面模板

部分页面拥有固定模板名称，系统会自动识别。

这些文件名称不可修改。

首页模板

首页固定文件名：

index.cshtml

例如：

/theme/skin5-native/index.cshtml

首页模板名称必须为：

index.cshtml

否则系统将无法正确识别首页。

搜索页面模板

根据内容模型不同，搜索页分为：

文章搜索

article-search.cshtml

产品搜索

product-search.cshtml

系统会根据当前搜索内容自动调用对应模板。

模板命名规范

模板文件名称可以使用任意合法字符。

例如：

about.cshtml
company.cshtml
service.cshtml
contact-us.cshtml

虽然系统不限制命名规则，但建议按照统一规范进行管理。

推荐格式：

内容模型-页面名称

例如：

article-company.cshtml

含义：

部分 说明
article 内容模型为文章
company 页面用途为公司介绍

通常用于：

关于我们
企业简介
公司介绍

等页面。

默认目录结构

以系统默认主题：

skin5-native

为例。

目录结构如下：

skin5-native
├── control
├── dist
├── images
├── module
├── index.cshtml
├── article-company.cshtml
├── product-list.cshtml
└── ...

Control 目录

用于存放公共模板文件。

/control
├── _header.cshtml
├── _footer.cshtml
└── _reference.cshtml

_header.cshtml

网站头部区域。

通常包含：

  • Logo

  • 导航菜单

  • 搜索框

  • 语言切换

_footer.cshtml

网站底部区域。

通常包含：

  • 联系方式

  • 版权信息

  • 底部导航

  • 社交媒体链接

_reference.cshtml

公共资源引用文件。

通常用于统一引用：

CSS
JavaScript
Meta标签
第三方插件

页面引用示例：

@Html.Partial("control/_reference")

Dist 目录

用于存放主题资源文件。

/dist
├── css
├── js
└── fonts

css

网站样式文件。

例如：

style.css
theme.css
responsive.css

js

网站脚本文件。

例如：

main.js
product.js
article.js

fonts

字体文件目录。

例如：

woff
woff2
ttf

Images 目录

用于存放主题公共图片资源。

/images

通常包括：

  • Logo

  • 国旗图标

  • 默认图片

  • 系统图标

  • SVG图标

例如：

logo.svg
default-product.jpg
en.png
jp.png

这类资源通常不会频繁变动。

Module 目录

用于存放可复用模块模板。

/module

例如：

_product-item.cshtml
_article-item.cshtml
_banner.cshtml
_pagination.cshtml

调用方式：

@Html.Partial("module/_product-item", item)

模块化开发具有以下优势：

  • 提高代码复用率

  • 降低维护成本

  • 减少重复代码

  • 提升开发效率

推荐将重复出现的页面结构拆分到 Module 目录进行统一管理。

开发建议

推荐采用以下目录结构：

skin5-native
├── control
├── dist
├── images
├── module
├── index.cshtml
├── article-list.cshtml
├── article-detail.cshtml
├── product-list.cshtml
├── product-detail.cshtml
├── article-search.cshtml
└── product-search.cshtml

开发过程中建议：

  • Header、Footer 使用公共模板。

  • CSS、JS 统一放置于 Dist 目录。

  • 公共图片放置于 Images 目录。

  • 可复用模块放置于 Module 目录。

  • 页面模板仅负责页面结构展示。

  • 复杂逻辑尽量放入服务层处理。

通过规范的目录结构，可以显著提高模板的可维护性和团队协作效率。