核心概念：模板是如何工作的？

在开始修改之前，你必须理解 SiteServer CMS 模板的基本工作原理,这能让你事半功倍。

siteserver cms 模板修改
（图片来源网络，侵删）
  1. 模板引擎：SiteServer CMS 使用 Razor 作为其默认的模板引擎，Razor 语法简洁，允许你在 HTML 中无缝嵌入 C# 代码。
  2. 模板文件：模板文件是 .cshtml 文件，它们存放在 ~/templates/ 目录下，一个完整的站点模板通常由多个 .cshtml 文件组成。
  3. 页面与模板的绑定：在 SiteServer CMS 的后台，每一个页面（如首页、列表页、内容页）都可以被指定使用一个具体的模板文件，当你访问一个页面时，CMS 会找到绑定的模板文件，执行其中的 C# 代码，并将最终生成的 HTML 返回给浏览器。
  4. 模型：模板的核心是“模型”，当模板被执行时，它会接收到一个包含当前页面所有数据的“模型对象”（通常是 dynamic 类型或强类型对象），你可以通过 Model 关键字来访问这些数据，Model.Title 获取页面标题，Model.Content 获取页面内容。

模板文件结构详解

一个典型的 SiteServer CMS 站点模板目录结构如下：

~/templates/
├── Default/                  <-- 默认模板文件夹，可以自定义名称，如 "MyCompany"
│   ├── index.cshtml          <-- 首页模板
│   ├── page_list.cshtml      <-- 列表页模板
│   ├── page_detail.cshtml    <-- 内容页模板
│   ├── page_search.cshtml    <-- 搜索页模板
│   ├── page_template.cshtml  <-- 自由页面模板
│   ├── navigation.cshtml     <-- 导航组件模板
│   ├── article_list.cshtml   <-- 文章列表组件模板
│   ├── article_detail.cshtml <-- 文章详情组件模板
│   ├── footer.cshtml         <-- 页脚组件模板
│   ├── Styles/               <-- CSS 文件夹
│   │   └── site.css
│   ├── Scripts/              <-- JavaScript 文件夹
│   │   └── site.js
│   └── Images/               <-- 图片资源文件夹
│       └── logo.png
└── _ViewStart.cshtml         <-- 全局视图起始文件（重要！）

关键文件说明：

  • _ViewStart.cshtml：这是一个特殊的文件，位于 templates 目录的根目录下，它的作用是为该目录下的所有 .cshtml 文件设置一个共同的布局,它会指定一个默认的布局文件，

    @{
    Layout = "_Layout.cshtml";
}

    这意味着所有页面都会默认使用 _Layout.cshtml 作为其布局模板。

    siteserver cms 模板修改
    （图片来源网络，侵删）

  • _Layout.cshtml：这是网站的“母版页”或“布局模板”，它定义了网站的整体框架，<head> 部分、页头、主导航、页脚等，内容页（如 index.cshtml）会“填充”到这个布局的指定位置（通过 @RenderBody() 方法）。

  • 页面模板 (如 index.cshtml)：这些模板主要用来调用组件和输出内容，通常不包含完整的 HTML 结构，因为它们会被 _Layout.cshtml 包裹。

  • 组件模板 (如 navigation.cshtml)：这些是可复用的代码片段，你可以创建一个 navigation.cshtml 来生成网站的导航菜单，然后在多个页面模板中通过 @Component("Navigation") 来调用它,实现代码复用。

修改模板的详细步骤

第 1 步：准备工作

  1. 本地环境：确保你的电脑上已经安装了 SiteServer CMS 的本地开发环境。
  2. 备份：在进行任何修改之前，务必备份你的模板文件和数据库！这是最重要的习惯,可以防止误操作导致网站崩溃。
  3. 开发工具：强烈推荐使用 Visual Studio Code 或 Visual Studio 来编辑 .cshtml 文件，它们对 Razor 语法有良好的高亮和智能提示。

第 2 步：定位并打开模板文件

  1. 登录 SiteServer CMS 后台。
  2. 进入 【系统管理】->【模板管理】。
  3. 在模板管理界面，你可以看到所有可用的模板，选择你想要修改的模板（Default）。
  4. 点击模板名称，进入模板文件列表，你可以看到所有 .cshtml 文件。
  5. 点击文件名旁边的 【编辑】 按钮，或者直接通过 FTP/SFTP 将 ~/templates/ 目录下载到本地进行修改。

第 3 步：修改模板内容

示例 1：修改网站标题

siteserver cms 模板修改
（图片来源网络，侵删）

假设你想在首页显示 "我的公司 - 首页" 这样的标题。

  1. 打开 templates/Default/_Layout.cshtml 文件。

  2. 找到 <title>

  3. 修改它，使其动态获取页面标题，SiteServer CMS 通常会将页面标题放在 Model.Title 中。

    <!-- 修改前 -->欢迎访问</title>
<!-- 修改后 -->@Model.Title - @Site.Server.Name</title>

    @Site.Server.Name 是 SiteServer 提供的全局变量,用于获取站点名称。

示例 2：修改首页内容

  1. 打开 templates/Default/index.cshtml 文件。

  2. 默认情况下,它可能已经包含了一些调用组件的代码，

    @* 调用导航组件 *@
@Component("Navigation")
@* 调用首页主内容区组件 *@
@Component("HomeMainContent")

  3. 你可以直接在这些 C# 代码之间添加 HTML 内容，或者修改、替换这些 @Component 调用来显示不同的内容。

示例 3：遍历并显示文章列表

这是最常见的修改需求，假设你要在某个列表页显示文章标题、发布日期和摘要。

  1. 打开 templates/Default/page_list.cshtml 或一个自定义的文章列表组件（如 article_list.cshtml）。
  2. 你会看到一个 foreach 循环，用于遍历文章列表，代码通常是这样的：
    @if (Model != null)
{
    foreach (var content in Contents)
    {
        <div class="article-item">
            <h2><a href="@content.Url">@content.Title</a></h2>
            <div class="info">发布于：@content.DateAdded.ToString("yyyy-MM-dd")</div>
            <div class="summary">@content.Summary</div>
        </div>
    }
}
  3. 你可以修改这个循环内部的 HTML 结构，添加 CSS 类，或者访问更多的 content 对象属性，如 content.ImageUrl（图片）、content.Author（作者）等。

第 4 步：更新模板并查看效果

  1. 保存文件：保存你修改过的所有 .cshtml 文件。
  2. 后台更新缓存：回到 SiteServer CMS 后台的 【模板管理】 页面，点击你修改的模板卡片右上角的 【更新】 按钮，这一步非常关键，它会让 CMS 重新编译模板,使你的修改生效。
  3. 刷新前台页面：清除浏览器缓存，然后访问你的网站前台,查看修改效果。

常用技巧与最佳实践

  1. 使用组件化开发

    • 不要重复造轮子：如果某段代码（如页脚、侧边栏、文章摘要卡片）在多个页面都需要使用，请务必将其创建为一个组件（如 footer.cshtml）。
    • 优点：提高代码复用性，便于维护，修改组件文件后,所有引用它的地方都会自动更新。

  2. 利用开发者工具

    • 在浏览器中按 F12 打开开发者工具，当你看到前台某个元素（比如一个按钮、一个标题）时，使用“检查元素”功能，可以快速定位到生成该元素的 HTML 代码,从而反向推断出是哪个模板文件中的哪部分代码生成的。

  3. 变量与全局对象

    • Model：当前页面的数据模型。
    • Contents：在列表页中,表示内容列表集合。
    • Content：在循环中,表示单个内容对象。
    • Site：站点全局信息对象，如 Site.Server.Name（站点名）、Site.Server.Url（站点URL）。
    • User：当前登录用户信息。

  4. 调试技巧

    • 如果不确定某个变量是否存在或其值是什么，可以在模板中临时使用 @Model.GetType() 来查看 Model 的类型，或者使用 @Json.Serialize(Model) 来打印整个模型对象的内容（需要引入 using Newtonsoft.Json;）。
    • 在代码中插入 @("Debug: " + someVariable) 可以在页面上直接输出变量的值,方便调试。

  5. 响应式设计

    • 在修改模板时，尽量使用 Bootstrap 或其他 CSS 框架，SiteServer CMS 默认支持 Bootstrap，这能让你轻松构建适配手机、平板和桌面端的响应式网站。

常见问题与解决方案

  • 问题：修改了模板并更新缓存后,前台页面没有变化。

    • 原因：
      1. 忘记在后台点击【更新】按钮。
      2. 浏览器缓存问题，尝试强制刷新（Ctrl + F5）或无痕模式访问。
      3. 语法错误导致模板编译失败，检查 C# 代码，特别是括号、分号等。
      4. 文件权限问题,导致文件没有被正确保存。

  • 问题：页面显示“服务器错误”或空白。

    • 原因：模板中存在 C# 语法错误，检查最近的修改，特别是 符号后的 C# 代码块是否完整。

  • 问题：如何修改网站的 Logo？

    • 方法：Logo 是通过组件（如 Header.cshtml）中的 <img> 标签来显示的，找到 <img src="..." 中的路径，这个路径可能是一个硬编码的路径（如 /templates/Default/Images/logo.png），也可能是一个从配置中读取的路径，最简单的方法是直接替换 ~/templates/Default/Images/ 目录下的 logo.png 文件,或者修改代码中的路径为你自己的图片路径。

希望这份详细的指南能帮助你顺利地修改 SiteServer CMS 模板！多动手实践，遇到问题多查阅官方文档,你很快就能成为模板修改高手。