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

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

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

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

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

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

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

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

    分享给朋友:

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

    99乘法表梯形

    99乘法表梯形

    在html用js输出99乘法表,并对9乘法表的样式进行美化。一、js输出99乘法表1、初始化HTML基础框架使用!DOCTYPE html声明文档类型,并通过html:5的快捷代码创建HTML5的基础结构:<!DOCTYPE html> <html lang=...

    通过《通义灵码》生成想要的功能

    通过《通义灵码》生成想要的功能

    通义灵码(TONGYI Lingma)是一款强大的智能编码助手,能够帮助开发者在编写代码时提高效率和质量。要使用它来生成特定功能。我们来实现下下面的功能。功能:使用HTML5拖放API实现购物车拖放效果,如图所示:一、确认问题通义灵码目前是不支持发送图片的,我们需要把功能上没写,但图片上有的功能一并...

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

    如何在zblog网站引用第三方视频

    如何在zblog网站引用第三方视频

    启用插件后,在文章编辑页面右侧栏中找到“添加 iframe 视频”按钮,点击后弹出对话框,在对话框中粘贴复制好的 iframe 代码,选择要展示的宽高比例、以及是否进行 HTML5 格式化,点击“插入”即可。如果无法预览视频,请到设置中添加对应的 CSP 域名。展示宽高比例是指 iframe 的宽高...

    zblog的伪静态怎么开启

    zblog的伪静态怎么开启

    伪静态可以自定义URL,简洁明了的URL结构让用户更容易理解和记忆,提升了用户的浏览体验。本案例采用的是nginx环境。操作步骤如下:1、在应用中心找到《静态管理中心》插件并开启开启;2、点击《静态管理中心》的管理配置按钮;3、在《配置界面》的静态化选项-使用伪静态前必须确认主机是否支持处,选择伪静...