飞飞cms模板制作教程-网站模板-锦华智联科技

飞飞CMS模板制作终极教程

飞飞CMS（FeifeiCMS）是一款功能强大且在国内影视网站领域非常流行的开源内容管理系统，其模板系统基于 PHP + Smarty 模板引擎，使得开发者可以轻松地分离网站的前端展示与后端逻辑，制作出个性化、高性能的网站模板。

（图片来源网络，侵删）

本教程将分为以下几个部分：

第一部分：基础准备 - 了解你需要什么工具和环境。
第二部分：模板文件结构 - 搞清楚一个模板由哪些文件和文件夹组成。
第三部分：核心标签与变量 - 学习如何调用数据，这是模板制作的核心。
第四部分：分步制作实战 - 从零开始，一步步构建一个简单的首页模板。
第五部分：进阶技巧与常见问题 - 提升效率，解决开发中遇到的问题。
第六部分：安装与切换 - 将你制作好的模板安装到网站并使用。

第一部分：基础准备

在开始之前,请确保你已经准备好以下工具和环境：

本地服务器环境：
- 集成软件包：强烈推荐使用 phpStudy、WampServer 或 XAMPP，它们一键集成了 Apache/Nginx、PHP、MySQL，方便本地开发和测试。
- 独立安装：如果你熟悉服务器，也可以手动安装 Apache/Nginx、PHP (版本需与飞飞CMS兼容，建议7.0+) 和 MySQL。
代码编辑器：
（图片来源网络，侵删）
- VS Code：功能强大，插件丰富，强烈推荐。
- Sublime Text / Notepad++：轻量级，经典选择。
- Dreamweaver：可视化编辑，适合初学者。
飞飞CMS程序：

从飞飞CMS官方网站下载最新版本的程序包。
FTP工具：
- FileZilla：免费、稳定，用于将本地文件上传到服务器。

第二部分：模板文件结构

一个标准的飞飞CMS模板通常位于 template/ 目录下，我们可以创建一个新的模板文件夹，my_template，其基本结构如下：

feifeicms/
├── template/
│   └── my_template/          <-- 你的新模板文件夹
│       ├── css/             <-- CSS样式文件
│       │   └── style.css
│       ├── images/          <-- 图片资源
│       │   └── logo.png
│       ├── js/              <-- JavaScript文件
│       │   └── main.js
│       ├── index.html       <-- 首页模板文件
│       ├── category.html    <!-- 分类页模板文件 -->
│       ├── detail.html      <!-- 内容详情页模板文件 -->
│       ├── search.html      <!-- 搜索结果页模板文件 -->
│       ├── footer.html      <!-- 底部公共模板文件 -->
│       ├── header.html      <!-- 头部公共模板文件 -->
│       └── config.php       <!-- 模块配置文件（可选） -->

关键文件说明：

index.html：网站的首页模板。
category.html：分类列表页模板，用于显示某个分类下的所有内容。
detail.html详情页模板，用于显示单篇文章或视频的详细内容。
header.html / footer.html：头部和底部公共部分，使用 {include file="header.html"} 和 {include file="footer.html"} 可以在各个页面中复用，提高开发效率。
config.php：如果模板有特殊配置项（如颜色切换、布局选择等），可以在此定义。

第三部分：核心标签与变量

这是模板制作的灵魂,飞飞CMS使用 Smarty 模板引擎，其语法非常直观。

输出变量

简单变量：{$variable_name}
- 输出网站标题：{$site.title}
数组/对象变量：使用来访问深层属性
- 输出文章标题：{$article.title}

循环输出

使用 {foreach} 或 {section} 循环来输出列表数据，如文章列表、分类列表等。{foreach} 更为常用和灵活。

语法：

{foreach $articles as $article}
    <div class="article-item">
        <h2><a href="{$article.url}">{$article.title}</a></h2>
        <p>{$article.description}</p>
    </div>
{/foreach}

$articles：由后端传递过来的文章数组。
$article：循环中的单个元素，代表一篇文章。
{$article.url}：获取文章的链接地址，飞飞CMS会自动为你生成正确的URL。

条件判断

使用 {if}...{elseif}...{else}...{/if} 来实现逻辑判断。

语法：

{if $article.is_hot}
    <span class="hot-tag">热门</span>
{elseif $article.is_new}
    <span class="new-tag">最新</span>
{else}
    <span class="normal-tag">普通</span>
{/if}

常用系统变量

这些是飞飞CMS内置的常用变量,你可以在任何模板中使用：

网站信息：
- {$site.title}
- {$site.keywords}：网站关键词
- {$site.description}：网站描述
- {$site.url}：网站根URL
栏目/分类信息：
- {$category.name}：当前分类名称
- {$category.url}：当前分类URL
分页信息：
- {if $page.total > 1}：判断总页数是否大于1
- {$page.total}：总记录数
- {$page.total_page}：总页数
- {$page.current}：当前页码
- {if $page.prev > 0}：是否有上一页
- {if $page.next > 0}：是否有下一页
- {$page.prev}：上一页页码
- {$page.next}：下一页页码

内置函数/标签

飞飞CMS提供了一些特殊的函数来调用数据。

调用指定分类的文章列表：
```
{feifei name="article" category_id="1" limit="10"}
    {foreach $data as $article}
        <li><a href="{$article.url}">{$article.title}</a></li>
    {/foreach}
{/feifei}
```
- name="article"：调用文章模型。
- category_id="1"：指定分类ID。
- limit="10"：限制输出数量。
- $data：循环变量，默认为$data。

调用友情链接：

{feifei name="link"}
    {foreach $data as $link}
        <a href="{$link.url}" target="_blank">{$link.name}</a>
    {/foreach}
{/feifei}

第四部分：分步制作实战

让我们来制作一个极简的首页模板。

目标：一个包含网站Logo、主导航、最新文章列表和底部版权的首页。

步骤 1：创建文件结构

在 template/ 下创建 my_simple 文件夹，并创建以下文件：

index.html
header.html
footer.html
css/style.css

步骤 2：编写 header.html (头部)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">{$site.title}</title>
    <meta name="keywords" content="{$site.keywords}">
    <meta name="description" content="{$site.description}">
    <link rel="stylesheet" href="{$site.url}template/my_simple/css/style.css">
</head>
<body>
    <div class="header">
        <div class="logo">
            <a href="{$site.url}">
                <img src="{$site.url}template/my_simple/images/logo.png" alt="{$site.title}">
            </a>
        </div>
        <nav class="main-nav">
            <ul>
                <!-- 调用主导航菜单，假设导航ID为1 -->
                {feifei name="nav" nav_id="1"}
                    {foreach $data as $nav_item}
                        <li><a href="{$nav_item.url}">{$nav_item.name}</a></li>
                    {/foreach}
                {/feifei}
            </ul>
        </nav>
    </div>
    <div class="main-content">

步骤 3：编写 footer.html (底部)

    </div> <!-- .main-content -->
    <div class="footer">
        <p>Copyright &copy; {date('Y')} {$site.title}. All Rights Reserved.</p>
        <!-- 调用友情链接 -->
        {feifei name="link"}
            {foreach $data as $link}
                <a href="{$link.url}" target="_blank">{$link.name}</a> |
            {/foreach}
        {/feifei}
    </div>
</body>
</html>

步骤 4：编写 index.html (首页主体)

这个文件非常简单,只需要引入头部和底部，并在中间放置内容。

{include file="header.html"}
<div class="article-list">
    <h1>最新文章</h1>
    <!-- 调用最新发布的10篇文章 -->
    {feifei name="article" order="id DESC" limit="10"}
        {foreach $data as $article}
            <article class="post">
                <h2><a href="{$article.url}">{$article.title}</a></h2>
                <div class="post-meta">
                    发布时间：{$article.create_time|date:'Y-m-d H:i'} | 作者：{$article.author}
                </div>
                <p class="post-excerpt">{$article.description}</p>
            </article>
        {/foreach}
    {/feifei}
    <!-- 分页 -->
    {if $page.total > 1}
        <div class="pagination">
            {if $page.prev > 0}
                <a href="{$page.prev_url}">上一页</a>
            {/if}
            {for $i=1 to $page.total_page}
                {if $i == $page.current}
                    <span class="current">{$i}</span>
                {else}
                    <a href="{$page.url|page:$i}">{$i}</a>
                {/if}
            {/for}
            {if $page.next > 0}
                <a href="{$page.next_url}">下一页</a>
            {/if}
        </div>
    {/if}
</div>
{include file="footer.html"}

{$article.create_time|date:'Y-m-d H:i'}：这里使用了 修饰器，date 是一个内置的日期格式化修饰器。
{$page.url|page:$i}：这是一个自定义函数，用于生成指定页码的URL。

步骤 5：编写 css/style.css (样式)

body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; }
.header { background: #333; color: white; padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; }
.logo img { height: 40px; }
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; }
.main-nav ul li { margin-left: 20px; }
.main-nav a { color: white; text-decoration: none; }
.main-content { max-width: 800px; margin: 20px auto; padding: 0 20px; }
.article-list article { background: white; padding: 20px; margin-bottom: 20px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.post-meta { color: #888; font-size: 0.9em; }
.post-excerpt { color: #555; line-height: 1.6; }
.footer { background: #333; color: #ccc; text-align: center; padding: 20px; margin-top: 20px; }

第五部分：进阶技巧与常见问题

使用模板继承 (extends)
- 对于复杂的模板,可以使用 {extends file="parent_template.html"} 和 {block name="..."} 来实现模板继承，避免重复代码，这在Smarty 3.x中非常强大。
自定义函数
- 如果飞飞CMS内置的函数不够用,你可以在 common/function.php 中自定义PHP函数，然后在模板中调用。
调试
- 如果变量没有输出,最常见的原因是：
  - 变量名错误：检查大小写和拼写。
  - 后端未传递：确认后端PHP代码是否正确地将该变量赋值并传递给了模板。
  - 作用域问题：确保变量在当前模板的作用域内。
- 在模板中开启调试：{debug}，这会弹出一个窗口显示所有可用的变量。
URL生成
- 文章详情页：{$article.url}
- 分类页：{$category.url}
- 自定义分页：{$page.url|page:$i} 或 url('category', ['id' => $category.id, 'page' => $i]) (具体看版本)。
- 首页：{$site.url}

第六部分：安装与切换

上传模板：
- 通过FTP工具,将你制作好的整个 my_simple 文件夹上传到 feifeicms/template/ 目录下。
后台设置：
- 登录飞飞CMS后台。
- 进入 模板管理 -> 模板列表。
- 你会看到 my_simple 模板已经出现在列表中。
- 点击 启用 或 设为默认 按钮。
预览效果：

启用后,访问你的网站首页，就能看到新模板的效果了。

制作飞飞CMS模板是一个“模仿-学习-创造”的过程。

模仿：先下载官方或其他优秀的模板，分析其文件结构和标签用法。
学习：熟悉本文提到的核心标签和变量，理解它们的工作原理。
创造：从简单的页面开始，逐步构建属于你自己的、功能完善、设计精美的网站模板。

祝你制作顺利！如果在过程中遇到具体问题，可以随时提出，我会尽力为你解答。