Wampserver模板如何创建与使用？-网站模板-锦华智联科技

WampServer 本身不提供“模板”功能，它是一个集成了 Apache、MySQL 和 PHP 的本地服务器环境，你所说的“模板”，很可能是指以下两种情况，这两种情况都与 WampServer 的文件结构和工作方式紧密相关：

（图片来源网络，侵删）

网站项目的初始文件结构（项目模板）
PHP 模板引擎（如 Smarty）

下面我将分别对这两种情况进行详细说明。

网站项目的初始文件结构（项目模板）

这是最常见的情况，当你用 WampServer 来开发一个网站时，你会在 WampServer 的网站根目录下创建一个文件夹，这个文件夹的结构就构成了你网站的“模板”或“骨架”。

WampServer 的网站根目录

WampServer 默认的网站根目录是： C:\wamp64\www\ (如果你安装的是 64 位版本) 或 C:\wamp\www\ (如果你安装的是 32 位版本)

所有你希望能在本地浏览器中通过 http://localhost/ 访问的网站文件，都应该放在这个 www 目录下。

（图片来源网络，侵删）

一个典型的网站项目结构（项目模板）

一个标准的 PHP 网站项目通常会有以下这样的文件夹结构，这可以看作是一个通用的“项目模板”：

my_website/              <-- 你的项目文件夹，放在 www 目录下
│
├── assets/              <-- 存放静态资源
│   ├── css/             --> CSS 样式文件
│   ├── js/              --> JavaScript 文件
│   ├── images/          --> 图片文件
│   └── fonts/           --> 字体文件
│
├── inc/                 --> (include) 存放公共的 PHP 文件
│   ├── header.php       --> 网站头部
│   ├── footer.php       --> 网站底部
│   ├── database.php     --> 数据库连接配置
│   └── functions.php    --> 公共函数库
│
├── pages/               --> 存放各个页面
│   ├── index.php        --> 首页
│   ├── about.php        --> 关于我们
│   ├── contact.php      --> 联系我们
│   └── ...
│
├── admin/               --> 后台管理目录（可选）
│   └── ...
│
├── .htaccess            --> Apache 配置文件，用于 URL 重写等
├── index.php            --> 默认首页文件
└── README.md            --> 项目说明文件

这个结构的好处是：

分离关注点：HTML、CSS、JS、PHP 代码分门别类,易于维护。
代码复用：通过 include 或 require 语句，可以将 header.php 和 footer.php 在多个页面中重复使用。
安全：将配置文件（如 database.php）与公开访问的页面分离开。

如何使用这个“模板”？

打开 WampServer。
进入 www 目录。
创建一个新的文件夹，比如叫 my_project。
在 my_project 文件夹里,按照上面的结构创建子文件夹和初始文件。
你就可以开始编写你的网站代码了，访问时，浏览器地址栏输入 http://localhost/my_project/ 即可。

PHP 模板引擎（如 Smarty）

在 Web 开发中，“模板”更专业的含义是指模板引擎，它是一种将 PHP 的业务逻辑（PHP 代码）和前端的表现层（HTML 代码）分离开来的技术。

这样做的好处是：

分工明确：前端开发者可以专注于 HTML/CSS/JS，无需关心 PHP 逻辑；后端开发者可以专注于 PHP 业务逻辑，无需在 HTML 中嵌入大量 PHP 代码。
代码更清晰：HTML 文件看起来就是纯粹的 HTML，PHP 文件看起来就是纯粹的 PHP,易于阅读和维护。
安全性：可以防止 PHP 代码直接暴露在视图中。

常见的 PHP 模板引擎

Smarty: 非常经典和强大的模板引擎。
Twig: 由 Symfony 框架作者创建，是目前最流行、最现代的模板引擎之一。
Blade: Laravel 框架内置的模板引擎,非常简洁优雅。

如何在 WampServer 中使用模板引擎（以 Twig 为例）

准备工作：

确保 WampServer 已启动，Apache 和 PHP 服务都在运行。
安装 Composer：Composer 是 PHP 的依赖管理工具，用于安装模板引擎库，请从 getcomposer.org 下载并安装。
创建一个项目：在 www 目录下创建一个新文件夹，twig_demo。

操作步骤：

第 1 步：安装 Twig

打开命令行工具（如 Windows 的 CMD 或 PowerShell）。
进入你的项目目录：
```
cd C:\wamp64\www\twig_demo
```
使用 Composer 安装 Twig：
```
composer require "twig/twig:^3.0"
```
这个命令会下载 Twig 库到项目下的 vendor 文件夹中。

第 2 步：创建文件结构

在 twig_demo 文件夹下创建以下结构：

twig_demo/
│
├── vendor/              <-- Composer 自动创建，存放 Twig 库
│
├── templates/           <-- 存放 HTML 模板文件
│   └── base.html.twig
│
├── public/              <-- 存放可被浏览器直接访问的文件
│   └── index.php
│
└── composer.json        <-- Composer 自动创建

第 3 步：编写代码

创建模板文件 (templates/base.html.twig)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}我的网站{% endblock %}</title>
</head>
<body>
    <header>
        <h1>网站头部</h1>
    </header>
    <main>
        {# 这里是动态内容区域 #}
        {% block content %}{% endblock %}
    </main>
    <footer>
        <p>&copy; 2025 我的公司</p>
    </footer>
</body>
</html>

创建 PHP 文件 (public/index.php)

<?php
// 引入 Composer 的自动加载器
require __DIR__ . '/../vendor/autoload.php';
// 创建 Twig 环境实例
// 第一个参数是模板文件夹的路径
$loader = new \Twig\Loader\FilesystemLoader(__DIR__ . '/../templates');
$twig = new \Twig\Environment($loader);
// 准备要传递给模板的数据
$data = [
    'page_title' => '欢迎来到首页',
    'user_name' => '张三',
    'products' => [
        ['name' => '产品A', 'price' => 100],
        ['name' => '产品B', 'price' => 200],
    ]
];
// 渲染模板并输出
// 'index.html.twig' 是模板文件名
// 第二个参数是传递给模板的变量数组
echo $twig->render('index.html.twig', $data);

创建另一个模板文件 (templates/index.html.twig)，它会继承 base.html.twig

{% extends "base.html.twig" %}
{% block title %}{{ page_title }} - 我的网站{% endblock %}
{% block content %}
    <h2>你好，{{ user_name }}！</h2>
    <h3>产品列表：</h3>
    <ul>
        {% for product in products %}
            <li>{{ product.name }} - ¥{{ product.price }}</li>
        {% endfor %}
    </ul>
{% endblock %}

第 4 步：访问网站

在浏览器中访问： http://localhost/twig_demo/public/index.php

你将会看到渲染好的 HTML 页面，页面内容是 index.html.twig 模板与 index.php 中的数据结合后的结果。

概念类型	描述	在 WampServer 中的体现
项目文件结构	一种组织网站文件的通用方法，方便开发和维护。	在 `www` 目录下创建文件夹和文件，如 `assets`, `inc`, `pages` 等。
PHP 模板引擎	一种技术，用于分离 PHP 逻辑和 HTML 表现层。	通过 Composer 安装（如 Twig），然后在 PHP 脚本中调用，将数据渲染到 HTML 模板中。

当你在 WampServer 里谈论“模板”时，首先需要明确你指的是哪种情况，对于初学者来说，99% 的情况是指第一种，即项目的文件结构，随着学习的深入，你会接触到第二种，即专业的模板引擎。