WEB前端开发
跳到主要内容

第二节 实战模块化项目

一、实战

将公共模块拆分是一个良好的软件工程实践，有助于提高代码的可维护性、可重用性和可测试性。我们通过第五章的项目实操，深入讲解公共模块拆分和核心标签调用。以下是进行公共模块拆分的详细步骤：

（一）创建header.php(公共头部)​

网站的每个页面都有 <head> 标签。将 c_index.php 页面中的 <head> 标签内容提取到 header.php 文件中。

//案例代码
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WEB前端开发</title>
<link rel="stylesheet" href="{$host}zb_users/theme/{$theme}/style/{$style}.css?{$themeinfo['modified']}">

把换成

<title>{$name}-{$title}</title>

在header.php尾部添加代码

<script src="{$host}zb_system/script/jquery-latest.min.js?v={$version}"></script>
<script src="{$host}zb_system/script/zblogphp.js?v={$version}"></script>
<script src="{$host}zb_system/script/c_html_js_add.php?hash={$html_js_hash}&v={$version}"></script>
{$header}

在 c_index.php、c_list.php 和 single.php 中替换 <head> 标签内容：

<head>
{template:header}
</head>

（二）创建footer.php(公共尾部)​

通过右键检查现有界面底部的布局，找到底部的公共代码，并将其提取到 footer.php 文件中。

//案例代码
<footer>
    <p>@2025 web前端开发</p>
</footer>
将“@2025 web前端开发”换成动态标签，通过后台的“版权说明”控制。修改代码为
<footer>
    <p>{$copyright}</p>
</footer>

在footer.php尾部添加代码

{$footer}

在 c_index.php、c_list.php 和 single.php 中替换底部代码内容：

{template:footer}

（三）创建c_head.php(公共顶部)​

通过右键检查现有界面顶部的布局，找到顶部的公共代码，并将其提取到 c_head.php 文件中。

//案例代码

<header>
    <h1>HTML+CSS简易首页制作</h1>
</header>
<!-- 导航 -->
<nav>
    <ul>
        <li><a href="http://zblog.cm/">首页</a></li>
        <li>
            <a href="#">作业演示</a>
            <ul class="dropdown">
                <li><a href="#">演示1</a></li>
                <li><a href="#">演示2</a></li>
                <li><a href="#">演示3</a></li>
            </ul>
        </li>
        <li><a href="http://zblog.cm/category-1.html">学习笔记</a></li>
        <li><a href="http://zblog.cm/2.html">关于</a></li>
    </ul>
</nav>

在 c_index.php、c_list.php 和 single.php 中替换顶部代码内容：

{template:c_head}

（四）拆分single.php​

将 single.php 文件中的主体部分拆分为两个文件：post-page.php（单页）和 post-single.php（文章内页）。 post-page.php（单页）

//案例代码
post-page.php
<main>
    <section>
        <h2 id="article-title">{$article.Title}</h2>
        <p id="article-content">{$article.Content}</p>
    </section>
</main>

post-single.php（文章内页）

//案例代码
post-single.php

<main>
    <section>
        <h2 id="article-title">{$article.Title}</h2>
        <p>作者:{$article.Author.StaticName} 分类:{$article.Category.Name} 浏览:{$article.ViewNums}</p>
        <p id="article-content">{$article.Content}</p>
    </section>
</main>

在 single.php 中替换主体部分

{if $article.Type==ZC_POST_TYPE_ARTICLE}
{template:post-single}
{else}
{template:post-page}
{/if}

二、视频教程

教学视频模块化管理