PHPWind 模板教程：从入门到精通

PHPWind (PW) 的模板系统非常灵活，它将网站的 HTML 结构与 PHP 逻辑和数据分离开来，使得在不修改核心代码的情况下，就能轻松更换网站的外观和布局。

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

在开始之前,您需要理解 PW 模板的基本工作流程：

  1. 用户请求：用户访问您的网站，www.yourdomain.com/index.php。
  2. PHP 引擎解析：index.php 是一个 PHP 脚本，它执行业务逻辑（从数据库读取数据、判断用户权限等）。
  3. 加载模板：PHP 脚本根据当前的页面和主题，找到对应的模板文件（header.htm、index.htm）。
  4. 数据替换：PHP 脚本将数据库中获取的数据、用户信息、系统变量等，按照特定的规则（如 {变量名}）替换到模板文件中。
  5. 输出 HTML：一个完整的、包含实际数据的 HTML 页面被发送到用户的浏览器中。

核心思想：程序员管逻辑和数据，设计师/管理员管 HTML 和 CSS（模板）。

模板文件结构

一个 PW 主题通常位于服务器的以下目录：

/templates/wind/ (这是默认主题目录，您也可以创建自己的主题目录)

一个典型的主题目录结构如下：

/wind/ (主题目录)
├── images/       // 存放主题所需的图片资源
├── css/          // 存放主题的样式表文件
├── js/           // 存放主题的 JavaScript 文件
├── html/         // **核心模板目录**
│   ├── header.htm      // 公共头部（包含 logo、导航栏等）
│   ├── footer.htm      // 公共底部（包含版权信息、统计代码等）
│   ├── index.htm       // 首页模板
│   ├── read.htm        // 文章阅读页模板
│   ├── forum.htm       // 论坛首页模板
│   ├── ...             // 其他各种页面模板
├── style.css     // 主样式表
├── config.php    // 主题配置文件（可选，用于后台设置）
└── thumb.php     // 图片处理缩略图脚本（可选）

模板语法详解

PW 模板使用简单的标记语言，核心是 符号。

变量输出

这是最常见的用法,用于显示 PHP 传递过来的数据。

  • 普通变量：{$username} 会显示当前登录用户的用户名。
  • 数组变量：{$post['author']} 会显示文章作者的名字。
  • 对象变量：{$db->version} 会显示数据库的版本号（较少在模板中直接使用）。
  • 系统常量：{$_G['uid']} 会显示当前用户的 UID。$_G 是一个全局数组，包含了大量的系统信息。

示例：在 header.htm 中显示网站标题和用户登录状态。

<div class="logo">
    <a href="{url('')}">{$pwSite[0]}</a> <!-- {url('')} 是一个内置函数，生成首页链接 -->
</div>
<div class="user-info">
    <!-- {if $_G['uid']} -->
        欢迎, {$_G['username']} | <a href="{url('space/index', array('uid'=>$_G['uid']))}">我的空间</a> | <a href="{url('login/logout')}">退出</a>
    <!-- {else} -->
        <a href="{url('login')}">登录</a> | <a href="{url('register')}">注册</a>
    <!-- {/if} -->
</div>

条件判断

使用 {if}...{/if} 来根据条件显示不同的内容。

<!-- {if $istopic} -->
    <p>这是一个主题帖。</p>
<!-- {else} -->
    <p>这是一个回复帖。</p>
<!-- {/if} -->

支持 if, else, elseif，还可以使用 and, or, (非) 等逻辑运算符。

<!-- {if $_G['uid'] && $adminid > 0} -->
    <p>您是管理员，可以进入后台。</p>
<!-- {/if} -->

循环遍历

使用 {loop}...{/loop} 来遍历一个数组，通常用于列表的显示（如文章列表、帖子列表）。

  • $posts: 一个包含所有帖子的数组。
  • $post: 在循环中，代表当前正在处理的单个帖子。
<ul class="post-list">
    <!-- {loop $posts $key $post} -->
        <li class="post-item">
            <h3><a href="{url('read', array('tid'=>$post['tid']))}">{$post['subject']}</a></h3>
            <p class="post-info">作者: {$post['author']} | 发布时间: {$post['postdate']}</p>
            <p class="post-summary">{substr($post['content'], 0, 100)}...</p>
        </li>
    <!-- {/loop} -->
</ul>

模板包含

使用 {template} 来引入其他模板文件，实现模块化开发。

  • {template header}: 包含 html/header.htm 文件。
  • {template footer}: 包含 html/footer.htm 文件。

示例：index.htm 的结构

{template header}
<!-- 这是首页的主体内容 -->
<div class="main-content">
    <!-- 这里放首页特有的逻辑和HTML -->
</div>
{template footer}

内置函数和标签

PW 提供了许多内置函数，让模板更强大。

  • {url()}: 生成 URL 链接，这是最重要的函数之一。
    • {url('')}: 首页
    • {url('login')}: 登录页
    • {url('read', array('tid'=>$tid))}: 带参数的链接，如 read.php?tid=123
  • {lang()}: 获取语言包中的文字，用于国际化。
    • {lang('template:post_thread')}: 会在语言包中查找 template 分组的 post_thread 条目对应的文字。
  • {date()}: 格式化时间戳。
    • {date($post['postdate'], 'Y-m-d H:i:s')}: 将时间戳格式化为 年-月-日 时:分:秒。
  • {eval()}: （慎用！） 在模板中执行一小段 PHP 代码，这会破坏模板与逻辑分离的原则，仅在万不得已时使用。

实战演练：修改网站 Logo 和标题

假设我们要修改网站左上角的 Logo 和网站名称。

  1. 找到模板文件： 登录您的网站后台，进入 界面 -> 风格管理 -> 风格列表，点击您当前使用的风格（如 wind），然后点击 编辑。 在文件列表中找到 header.htm 并点击 编辑。

  2. 定位代码： 在 header.htm 中，找到类似下面的代码：

    <div class="head">
    <div class="head_cont">
        <h1 class="logo">
            <a href="{url('')}"><img src="{$_G['style']['imgdir']}/logo.png" alt="{$pwSite[0]}" /></a>
        </h1>
        <!-- ... 其他代码 ... -->
    </div>
</div>

  3. 进行修改：

    • 修改 Logo 图片：将 src 属性中的 logo.png 修改为您自己的图片文件名，my-logo.png，您需要先将 my-logo.png 上传到 /templates/wind/images/ 目录下。
    • 修改网站标题：alt="{$pwSite[0]}" 中的 {$pwSite[0]} 变量会显示网站名称，您可以直接在这里写死一个名字，或者保持不变（网站名称在后台 全局 -> 站点信息 中设置）。

    修改后：

    <div class="head">
    <div class="head_cont">
        <h1 class="logo">
            <!-- 假设你上传了新的 logo 图片 -->
            <a href="{url('')}"><img src="{$_G['style']['imgdir']}/my-logo.png" alt="我的酷站" /></a>
        </h1>
        <!-- ... 其他代码 ... -->
    </div>
</div>

  4. 保存并刷新： 保存文件，然后清空浏览器缓存，或者刷新网站后台的缓存（通常在 界面 -> 风格管理 -> 更新缓存），您就能看到修改后的效果了。

进阶技巧与注意事项

  1. CSS 样式修改： 模板的样式主要在 css/style.css 文件中定义，要修改布局、颜色、字体等，通常需要编辑这个 CSS 文件，使用浏览器的“开发者工具”（按 F12）可以轻松定位到某个 HTML 元素对应的 CSS 规则，然后进行修改。

  2. 使用主题配置文件 (config.php)： 如果您想让用户可以在后台自定义主题（比如更换背景色、Logo），可以在主题目录下创建 config.php 文件，定义一些配置项，用户就可以在后台“风格管理”中设置这些值，并在模板中通过 {$_G['style']['your_config_key']} 来调用。

  3. 浏览器开发者工具是您的最佳朋友： 当您修改模板后，页面显示不正常时，请务必使用 Chrome 或 Firefox 的开发者工具，它可以帮您检查 HTML 结构是否正确、CSS 是否生效、是否有 JavaScript 错误。

  4. 安全第一：

    • 不要直接修改 /phpwind/ 核心目录下的文件，所有修改都应该在 /templates/ 主题目录下进行。
    • 模板目录的权限：确保模板目录的权限设置正确（通常是 755），避免被恶意篡改。
    • {eval()} 的风险：不要在模板中 {eval($_GET['code'])} 这样的代码，这会导致严重的安全漏洞（远程代码执行）。

  5. 备份！备份！备份！ 在修改任何文件之前，请务必备份您的主题目录和数据库，这样即使修改出错，也能快速恢复。

学习资源与社区

  • 官方文档：虽然 PHPWind 官网可能有所变动，但依然是最权威的参考，请查找最新的开发者文档。
  • 官方论坛/社区：在 PHPWind 的官方社区，您可以找到其他开发者分享的模板和教程，遇到问题时也可以在那里提问。
  • 第三方模板站：网上有很多基于 PHPWind 开发的商业或免费模板，下载并研究它们的代码是学习模板制作的绝佳方式。

希望这份教程能帮助您顺利开启 PHPWind 模板定制之旅！祝您玩得开心！