KingCMS模板制作新手教程从哪开始学？-建站教程-锦华智联科技

KingCMS 模板制作新手教程

前言：什么是模板？

在开始之前，我们先要明白一个概念：模板（Template） 是什么？

（图片来源网络，侵删）

模板就是网站的“骨架”和“皮肤”，它定义了网站的整体布局、颜色、字体、区块位置等，但它本身不包含具体的内容（比如文章标题、文章内容、图片等）。

由 KingCMS 后台管理（比如文章、产品、新闻）。
模板：由设计师和前端开发者制作,用来展示这些内容。

当用户访问你的网站时，KingCMS 会根据你设定的规则，自动将后台的内容“填充”到模板的相应位置,最终生成完整的网页。

第一部分：准备工作

在动手之前,请确保你已经准备好以下环境：

本地服务器环境：KingCMS 是一个 PHP 程序，所以需要一个本地服务器来运行，新手推荐使用集成环境包，一键安装，非常方便。
- 推荐软件：phpStudy (Windows) 或 MAMP (Mac)。
KingCMS 程序：从 KingCMS 官网下载最新版本的程序。
- 官网地址：https://www.kingcms.com/
代码编辑器：用来编写和修改模板文件。
- 推荐软件：Visual Studio Code (免费、强大) 或 Sublime Text。
FTP 工具：用于将你制作的模板文件上传到服务器。
- 推荐软件：FileZilla (免费、易用)。

第二部分：KingCMS 模板核心结构

一个标准的 KingCMS 模板通常包含以下几个核心文件和目录，我们以一个名为 myfirsttheme 的主题为例：

（图片来源网络，侵删）

/myfirsttheme/
├── index.html          // 首页模板
├── category.html       // 栏目页模板
├── show.html           // 内容页模板
├── search.html         // 搜索页模板
├── page.html           // 分页列表页模板
├── config.xml          // **主题配置文件** (非常重要！)
├── screenshot.png      // 主题在后台的预览图
├── css/                // 存放 CSS 样式文件
│   └── style.css
├── images/             // 存放图片资源
│   └── logo.png
└── js/                 // 存放 JavaScript 文件
    └── main.js

重点解释：

index.html, category.html, show.html 等：这些是不同页面的“页面模板”，KingCMS 会根据用户访问的页面类型,自动调用对应的模板文件来渲染。
config.xml：主题的灵魂！这个文件告诉 KingCMS 你的主题叫什么名字、作者是谁、有哪些可自定义的选项（比如Logo上传、主题色选择等），没有它,你的主题无法在后台被识别和使用。
screenshot.png：后台主题列表的封面图，建议尺寸为 300x180 像素。

第三部分：从零开始制作你的第一个模板

我们将创建一个极简的模板,只包含最核心的元素。

步骤 1：创建主题目录和文件

在你的电脑上，创建一个名为 myfirsttheme 的文件夹,并在其中创建以下空文件：

index.html
config.xml
screenshot.png (可以先随便找一张图片代替)

步骤 2：编写 `config.xml` 文件

这是最重要的一步，用代码编辑器打开 config.xml,填入以下内容：

（图片来源网络，侵删）

<?xml version="1.0" encoding="utf-8"?>
<king>
    <name>我的第一个主题</name>
    <author>KingCMS新手</author>
    <intro>一个为新手制作的极简主题。</intro>
    <version>1.0</version>
    <time>2025-10-27</time>
    <tpl>
        <index>index.html</index>
        <category>category.html</category>
        <show>show.html</show>
        <search>search.html</search>
        <page>page.html</page>
    </tpl>
    <option>
        <!-- 这里可以添加自定义选项，比如Logo上传 -->
        <!-- <item name="logo" type="image" title="网站Logo" value="" /> -->
    </option>
</king>

解释：

<name>：主题名称,显示在后台。
<author>：作者。
<tpl> 标签：模板文件映射，它告诉 KingCMS，当需要显示首页时，就去调用 index.html 文件；需要显示栏目页时，就调用 category.html 文件，以此类推。请确保这里的文件名和你实际创建的文件名一致。

步骤 3：编写 `index.html` 模板文件

我们来编写首页模板，打开 index.html,填入以下代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">{king:site/} - 首页</title>
    <meta name="keywords" content="{king:keyword/}">
    <meta name="description" content="{king:description/}">
</head>
<body>
    <h1>{king:site/}</h1>
    <p>欢迎来到我的网站！</p>
    <hr>
    <h2>最新文章列表</h2>
    <ul>
        {king:list table='article' order='id desc' num='10'}
        <li>
            <a href="[field:link/]">[field:title/]</a>
            <span> - [field:time style='Y-m-d'/]</span>
        </li>
        {/king:list}
    </ul>
</body>
</html>

恭喜！你已经写出了你的第一个 KingCMS 模板！现在来解释里面的“魔法”部分：

第四部分：KingCMS 模板标签入门

KingCMS 模板的核心就是使用各种来动态获取数据。

全局标签
- {king:site/}：获取网站名称（在后台“系统设置”中配置）。
- {king:keyword/}：获取网站关键词。
- {king:description/}：获取网站描述。
- 这些标签通常放在 <head> 或页面顶部，用于 SEO 优化。
列表标签
- {king:list ...} 和 {/king:list}：这是一个循环标签，它会从数据库中取出符合条件的数据，然后在 {/king:list} 之间重复执行。
- table='article'：指定从 article (文章) 数据表中获取数据。
- order='id desc'：按 id 降序排列（最新的在最前面）。
- num='10'：只获取 10 条数据。
- [field:link/]：字段标签，在循环内部使用，表示当前这条数据的“链接地址”。
- [field:title/]：当前这条数据的“标题”。
- [field:time style='Y-m-d'/]：当前这条数据的“发布时间”，并格式化为“年-月-日”。

步骤 4：安装和预览你的主题

上传主题：将整个 myfirsttheme 文件夹通过 FTP 工具上传到你的 KingCMS 网站的 template/ 目录下。
- 路径通常是：你的网站根目录/template/myfirsttheme/
后台启用：
- 登录 KingCMS 后台。
- 进入 「模板」->「主题管理」。
- 你应该能看到名为“我的第一个主题”的选项，并且预览图是 screenshot.png。
- 点击右侧的 「使用」 按钮。
清空缓存：
- 进入 「系统」->「缓存管理」，点击 「清空全部缓存」。
访问网站：在浏览器中访问你的网站首页,你应该能看到：
- 是你设置的网站名称。
- 页面顶部显示 <h1> 里的网站名称和欢迎语。
- 下面列出了你后台发布的最新 10 篇文章的标题、日期和链接。

如果看不到文章列表，请检查：

后台是否已经发布了文章？
文章是否属于 article 这个数据表？（KingCMS 默认就是,所以一般没问题）
后台「主题管理」是否成功启用了你的主题？
是否清空了缓存？

第五部分：进阶与常用技巧

当你成功跑通了第一个模板后,就可以开始学习更复杂的功能了。

制作其他页面模板
- 栏目页 (category.html)：和首页类似，但通常需要获取当前栏目的信息，可以使用 {king:cat/} 获取当前栏目标题，用 {king:list cat='id'} 来列出该栏目下的文章。
- 内容页 (show.html)：用于显示单篇文章的详细内容，核心标签是 [field:content/],用来显示文章的正文内容。
包含文件 ({king:inc/})
- 为了避免重复代码，我们通常会把公共部分（如头部 header 和底部 footer）拆分成单独的文件。
- 在 myfirsttheme 下创建 header.html 和 footer.html。
- 在 index.html 中使用：
```
{king:inc file='header'/}

{king:inc file='footer'/}
```
使用 CSS 和 JS
- 在 index.html 的 <head> 部分引入你的 CSS 文件：
```
<link rel="stylesheet" href="{king:template/}css/style.css">
```
  注意：{king:template/} 是一个路径标签，会自动输出当前主题的路径。

条件判断 (if...else...)

可以根据不同情况显示不同内容，只在首页显示某个模块：

{king:if condition="$king.home eq 1"}
    <div>这是只在首页显示的内容</div>
{king:else/}
    <div>这是非首页显示的内容</div>
{king:/if}

官方文档是你的最佳朋友
- KingCMS 的功能非常强大，本教程只是冰山一角，当你遇到问题时，一定要查阅 KingCMS 官方文档，里面会有最权威、最详细的标签说明和函数列表。
- 文档地址：https://www.kingcms.com/help/

总结与鼓励

恭喜你！你已经完成了 KingCMS 模板制作的新手入门之旅,你已经掌握了：

模板的基本结构。
如何创建一个主题并配置 config.xml。
如何使用最核心的列表标签 {king:list} 和字段标签 [field:...]。
如何安装、启用和预览你的主题。

从现在开始，大胆地去尝试修改你的模板，添加更多的样式和功能吧！遇到问题多看官方文档，多思考，多实践，模板制作是一个熟能生巧的过程，祝你早日成为 KingCMS 模板制作高手！

KingCMS模板制作新手教程从哪开始学？