使用 PHP 创建网站设计模板系统

Hassan Sayed

4.81/5 (19投票s)

2008年2月8日

CPOL

9分钟阅读

451299

140

了解如何使用 PHP 构建网站设计模板系统，以便通过仅更改少数设计文件轻松更新网站的不同部分。本教程专为完全的初学者设计，易于理解和遵循。

使用 PHP 创建网站设计模板系统

注意：虽然经验丰富的编码员可能会在此教程中找到一些有用的信息，但本教程的设计旨在让完全的初学者轻松理解和掌握。

引言
要求
教程
代码解释与工作原理
扩展功能和可用性
结论

引言
无论您的网站是小型还是大型，您都知道升级网站页面需要多么麻烦和耗时。当您进行一项需要升级到网站每一页的更改时，升级过程会变得更加烦人；例如，在页眉中添加一个按钮或更改网站页脚中的版权信息。
在本教程中，我将向您展示 PHP 如何仅用几行代码就能解决这个问题。您可以使用本教程作为基础，使您的网站更易于维护和升级。

顶部

要求:
能够运行 PHP 脚本的服务器/托管。
无需 PHP 知识！

顶部

教程

步骤 1
在服务器上创建一个名为“design”的文件夹。
第二步
在 design 文件夹中创建以下文件：
'header.html'、'footer.html'、'right_column.html'、'left_column.html'
步骤 3
创建另一个名为“pages”的文件夹。
步骤 4
在“pages”目录中，创建一个名为 'main.html' 的页面。
步骤 5
现在，在根目录中创建一个名为 'index.php' 的文件。
步骤 6
将以下代码添加到您的 'index.php' 文件中（别担心，稍后会解释！）：

<?php

if (isset($_REQUEST['page']))
{
if($_REQUEST['page'] !="")
if(file_exists("pages/".$_REQUEST['page'].".html"))
$page_content = file_get_contents("pages/".$_REQUEST['page'].".html");
else
if (file_exists($_REQUEST['page'].".html"))
$page_content = file_get_contents($_REQUEST['page'].".html");
else
echo "<center>页面：".$_REQUEST['page']." 不存在！请检查 URL 并重试！</center>";
}
else
$page_content = file_get_contents("pages/main.html");
$page_content = str_replace("!!HEADER!!", file_get_contents("design/header.html"),$page_content);
$page_content = str_replace("!!LEFT_COLUMN!!", file_get_contents("design/left_column.html"),$page_content);
$page_content = str_replace("!!RIGHT_COLUMN!!", file_get_contents("design/right_column.html"),$page_content);
$page_content = str_replace("!!FOOTER!!", file_get_contents("design/footer.html"),$page_content);
$page_content = str_replace("!!COMMON_TAGS!!", file_get_contents("design/common_tags.html"),$page_content);

echo $page_content;
?>
步骤 7
转到您的 'main.html' 文件，按照您希望网站最终看起来的布局进行设计。只是在这里，而不是添加完整的页眉设计，添加 !!HEADER!!，然后转到您在“design”文件夹中创建的 'header.html' 文件。现在，在 'header.html' 中，设计您网站的主要页眉。最终，此设计将是您所有页面的页眉。

现在对其他设计做同样的事情，即：添加 !!FOOTER!! 并设计 'footer.html'，!!RIGHT_COLUMN!! 并设计 'right_column.html'，!!LEFT_COLUMN!! 并设计 'left_column.html'。

或者简单地复制以下预制设计：

'main.html'

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>主页 - Zeronese 的 PHP 简单模板系统</title>
!!COMMON_TAGS!!
</head>
<body>
<table width="95%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3"><center>
!!HEADER!!
</center>
</td>
</tr>
<tr>
<td class="column" width="25%" height="100%">!!LEFT_COLUMN!!</td>
<td> </td>
<td width="25%">!!RIGHT_COLUMN!!</td>
</tr>
<tr>
<td class="column" colspan="3"><center>
!!FOOTER!!
</center>
</td>
</tr>
</table>
</body>
</html>
'header.html'

<div class="header">欢迎来到 PHP 简单模板系统</div>

'footer.html'

<div class="footer">
<center>
<a href="http://www.zeronese.net">PHP 简单模板系统是 Zeronese.net 的版权所有</a>
</center>
</div>

'right_column.html'

<table class="column" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>广告</td>
</tr>
<tr>
<td>Zeronese.net 为网页设计师和最终用户提供专业的网页设计模板。节省时间和金钱，同时为企业、电子商务或个人使用获得高质量的专业网站。 <a href="http://www.zeronese.net">了解更多...</a></td>
</tr>
</table>

'left_column.html'

<table class="column" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href="">主页</a></td>
</tr>
<tr>
<td><a href="!!WEBSITE_URL!!tutorial.html">教程页面</a></td>
</tr>
<tr>
<td><a href="!!WEBSITE_URL!!sub-directory/page.html">教程子页面</a></td>
</tr>
<tr>
<td><a href="http://www.zeronese.net">访问 Zeronese.net</a></td>
</tr>
</table>

为了给我们的设计增添一点色彩，我们在 design 文件夹中创建一个 'styles.css' 文件并添加以下代码：

body{
background-color:#003399;
color:#FFFFFF;
}
a{
color:#FFFFFF;
font-weight:bold;
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
.column{
background-color:#3366CC;
vertical-align:top;
}
.header{
background-color:#336699;
}
.footer{
background-color:#336699;
}

现在来测试一下！尝试在浏览器中访问：main_folder_of_files/index.php?page=main.html 来测试您的设计。

顶部

代码解释与工作原理:
当然，您可以看出 'index.php' 文件在做所有工作。该设计基于创建一个默认页面和一个默认文件夹来存储页面。

if (isset($_REQUEST['page']))
这段 PHP 代码将检查是否请求了页面。

if($_REQUEST['page'] !="")
当然，为了消除错误，请确保输入了页面并且参数不是空白的。

if(file_exists("pages/".$_REQUEST['page'].".html"))
已请求页面且页面参数不为空。现在我们检查它是否存在于默认文件夹中；在本例中是 pages 文件夹。请注意，我们在此处包含了 '.html' 扩展名，因此在请求页面时无需输入它。通过使用此方法，我们还受益于使用标准的 HTML 设计页面。
提示：您可以根据需要更改页面扩展名。此外，如果您想为不同的页面使用不同的扩展名，只需从语句中删除 '.html'。请记住，在这种情况下，在请求页面时您必须提供扩展名。

$page_content = file_get_contents($_REQUEST['page'].".html");
如果一切正常，将该页面的内容分配给一个变量：$page_content。
请注意，file_get_content 函数不会执行任何代码。也就是说：在页面中放置 PHP 代码将不起作用。如果您需要使用任何 PHP 代码，请将其添加到您的'index.php'文件中，或将其添加到单独的文件中，然后包含在'index.php'中。
提示：您仍然可以添加 Java 代码，因为它是在客户端执行的！

else
if (file_exists($_REQUEST['page'].".html"))
$page_content = file_get_contents($_REQUEST['page'].".html");
这些行将扩展并超出默认文件夹。您可以使用它来请求网站中更深层次的文件夹中的页面。例如，您可以设计子目录中的页面，并通过浏览器中的类似命令来请求它们：
main_folder_of_files/index.php?page=sub-directory/page.html
实际上，我们可以直接跳到这个语句，而无需添加默认文件夹选项，但默认文件夹更方便，而且您不必每次在浏览器中请求时都输入文件夹名称。此外，这对教程目的很有用，因此您可以练习更多选项并在此基础上扩展！

else
echo "<center>页面：".$_REQUEST['page']." 不存在！请检查 URL 并重试！</center>";
我们在默认文件夹中查找了请求的页面，在请求的子目录中查找了，但没有找到……然后它不存在。打印错误语句！！！

else
$page_content = file_get_contents("pages/main.html");
如果根本没有请求页面，则转到默认页面。在本例中是主页。这可以是您的错误页面，但在这种情况下转到主页很方便，因为这是 index 文件在服务器上的翻译方式。它是主页！

$page_content = str_replace("!!HEADER!!", file_get_contents("design/header.html"),$page_content);
$page_content = str_replace("!!LEFT_COLUMN!!", file_get_contents("design/left_column.html"),$page_content);
$page_content = str_replace("!!RIGHT_COLUMN!!", file_get_contents("design/right_column.html"),$page_content);
$page_content = str_replace("!!FOOTER!!", file_get_contents("design/footer.html"),$page_content);
这是有趣的部分！现在我们的 $page_content 变量保存着请求页面的设计和内容。我们只需使用 str_replace 函数将我们的标签占位符替换为预先设计好的页面。

$page_content = str_replace("!!COMMON_TAGS!!", file_get_contents("design/common_tags.html"),$page_content);
添加此项是为了演示如何添加任何文件并创建您自己的文件和占位符。在本例中，'!!COMMON_TAGS!!' 占位符包含指向我们在 design 文件夹中创建的样式表的链接。如果您想添加任何需要更频繁更改的内容，这将非常有用。例如，您可以创建一个文本文件，并在其中放入您的广告代码，为其创建一个占位符，添加类似的这行代码，然后将您的占位符添加到右侧或左侧列，即可立即在所有页面上看到它。

echo $page_content;
现在显示我们的设计。瞧……简单！！！

顶部

扩展功能和可用性:
为了使其更伟大，我们可以使我们的链接静态且对搜索引擎友好。
在根文件夹中创建一个 .htaccess 文件并添加以下代码行：

RewriteEngine on
Options +FollowSymLinks
RewriteRule (.*).html ?page=$1

保存 .htaccess 文件，然后您不必写 main_folder_of_files/index.php?page=main.html 来访问您的主页，现在您只需输入：main_folder_of_files/main.html
另外，输入main_folder_of_files/ 将带您到默认页面！！！
不用担心，它对子目录也有效，请尝试：main_folder_of_files//sub-directory/page.html

此外，您还可以通过添加很少更改但希望在所有页面上一次性更改的静态变量来扩展。例如，假设您想将设计转移到另一个域名，并希望立即更改域名的链接。如果必须逐页更改，这可能是一项艰巨的任务。

为方便起见，请将其设为一个变量，方法如下：
将以下代码添加到您的'index.php'文件中，就在您的代码的开头语句之后，即：在 <?php 之后。
$website_link = "http://www.mywebsitelink.com";

现在，在 'echo $page_content;' 语句之前添加此代码行：
$page_content = str_replace("!!WEBSITE_LINK!!", $website_link,$page_content);

现在应该很明显，您可以将 !!WEBSITE_LINK!! 占位符添加到您的任何页面中，它将被替换为您网站的链接！

顶部

结论:
本教程专为完全的初学者设计，它简单但功能强大，可以作为非常庞大和复杂的系统基础，这些系统希望为客户提供一种设计其脚本的简单方法。许多脚本具有出色的功能，但当涉及到设计模板时，它们缺乏这一重要功能，或者当它们拥有模板系统时，对于没有经验的用户来说，模板系统通常非常难以操作。
使用此方法可以将脚本代码与设计分开。这种分离在多种方式下都很有用。一个非常重要的问题是，在修改设计时，您不必担心代码！

希望本教程对某些人有所帮助。您可以自由地在您的脚本和设计中使用它，即使是商业用途。但是，未经我们许可，不得转售或分发脚本和教程文件，并且礼貌和公平的做法是注明和引用本页面！

顶部

作者：Hassan Sayed
Webmaster，位于 http://www.zeronese.net，这是一个为 Web 开发人员提供网站所需一切的地方。 Web 开发、专业网站模板、Web 托管、Web 目录、文章目录、Web 开发人员资源和工具。

尽情编码！