当前位置:首页 > web实践 > 正文内容

公共模块拆分和核心标签调用

唐朝1年前 (2025-01-18)web实践869

将公共模块拆分是一个良好的软件工程实践,有助于提高代码的可维护性、可重用性和可测试性。

以下是如何进行公共模块拆分的步骤:

1、创建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>WEB前端开发</title>换成

<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>

2、创建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}

5、创建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}

4、拆分single.php

新建post-page.php(单页)和post-single.php(文章内页)文件。

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

single.php文件内的主体部分复制到post-page.php和post-single.php文件内容。

然后将single.php文件内的主体部分换成

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

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>

5、完

    文档如有描述不清楚、错误或者过时的地方,欢迎留言指出。

    文档、教程内容会不定时更新,转载请标明原帖链接,以免让过时的教程流入网络。

    分享给朋友:

    “公共模块拆分和核心标签调用” 的相关文章

    动态数据管理

    动态数据管理

    一个可定制的动态文本输入列表管理功能,主要用于Web应用程序中,允许用户按需添加和操作多个文本输入项。通过此功能,用户可以根据实际需求灵活地增加、删除和重新排序多个文本输入项,极大地提高了交互性和定制性。1、构造HTML结构使用!DOCTYPE html声明文档类型,并通过html:5的快捷代码创建...

    Banner需求提交界面

    Banner需求提交界面

    背景图加表单文本居中1、构造HTML结构使用!DOCTYPE html声明文档类型,并通过html:5的快捷代码创建HTML5的基础结,然后设置语言和标题。<!DOCTYPE html> <html lang="zh-Hans">...

    后台地址与找回密码

    网站默认后台地址:域名/zb_system/login.php如何修改后台地址在应用中心下载并安装插件《后台快捷方式》,即可自定义后台地址。下次访问的时候直接使用自己的自定义地址即可找回密码下载重置文件《https://update.zblogcn.com/tools/nologin.zip》,解压...

    h5网站添加统计代码

    1、进入百度统计官方网站 https://tongji.baidu.com/2、登录账户3、在控制面板界面,点击《使用配置》4、在《使用配置》左侧导航的《网站列表》界面,点击《添加站点》5、输入以下信息网站域名: 格式 b9b31053.idc.wod.xyz网站首页:格式&nb...

    zblog搭建微信小程序

    zblog搭建微信小程序

    本教程适用于《zblog微信小程序1.1.8》版本。zblog微信小程序是基于zblog后端进行搭建的小程序,依赖zblog微信小程序插件,使用前请在应用商店下载安装zblog微信小程序插件。准备工作:1、确保自己的域名有正常开启https;2、自己的zblog网站后台有正常安装下载《zblog微信...

    虚拟主机安装zblog程序

    虚拟主机安装zblog程序

    本教程用于指导怎么通过虚拟主题全新安装一个zblogphp站点,数据库采用mysql。准备工作1、虚拟主机的程序语言是php,版本推荐选8.0以上版本,如没有8.0及其以上版本则选择当前最高的版本。2、虚拟主机有对应的mysql数据库信息。3、zblog的一键安装包。https://update.z...