菜鸟科技网

如何html页面和phpcms

核心概念:一个生动的比喻

想象一下你要盖一栋大楼:

如何html页面和phpcms-图1
(图片来源网络,侵删)
  1. HTML 页面 (静态页面)

    • 这就像是“毛坯房”,它有基本的结构(墙壁、房间布局),但里面是空的,没有家具、电器和装修。
    • 作用:定义网页的,哪里是标题(<h1>),哪里是段落(<p>),哪里是图片(<img>)。
    • 特点:文件后缀是 .html是固定的,你在浏览器里看到的就是它本身的内容,你无法登录,也无法根据不同用户显示不同信息。
  2. PHPCMS

    • 这就像是“智能精装系统”,它不是一个具体的房子,而是一整套工具和流程。
    • 作用
      • 内容管理:让你能轻松地在后台(一个管理界面)添加、修改、删除“家具”(文章、图片、视频等)。
      • 模板设计:提供“装修风格”(模板),你可以把“毛坯房”套用上不同的装修风格,让所有房间都看起来统一又美观。
      • 动态生成:当有访客(用户)来看你的房子时,这个系统会实时“组装”出一间完整的、带家具的“精装房”给他看,用户点击“新闻”栏目,系统会从数据库里取出最新的新闻文章,用你设计的模板格式化后,生成一个最终呈现的网页。
    • 特点:它是一个基于 PHP 语言和 MySQL 数据库的软件系统

它们之间的关系

PHPCMS 使用 HTML 页面作为其展示的“模板”,最终生成动态的网页。

简单流程是这样的:

如何html页面和phpcms-图2
(图片来源网络,侵删)
  1. 设计师:你设计好一个网站的外观,用 HTML + CSS 来实现,这个 HTML 文件就是 PHPCMS 的模板
  2. 管理员:在 PHPCMS 的后台,你写好文章、上传好图片,这些内容会保存在数据库里。
  3. 访客访问:当访客访问你的网站(http://www.yoursite.com/news/1.html)时:
    • PHPCMS 系统接收到这个请求。
    • 它会分析这个 URL,知道这是要显示 ID 为 1 的新闻。
    • 它从数据库里把这条新闻的标题、内容、作者等信息取出来。
    • 它把你设计好的 HTML 模板“打开”。
    • 它把从数据库取出的内容,填入 HTML 模板的相应位置({title} 标签替换成新闻标题,{content} 标签替换成新闻正文)。
    • PHPCMS 将这个“组装”好的、完整的 HTML 页面发送给访客的浏览器。

最终用户看到的,是一个标准的 HTML 页面,但他不知道这个页面是实时生成的。


如何将 HTML 页面与 PHPCMS 结合(实操步骤)

假设你已经下载并安装好了 PHPCMS。

第 1 步:设计并准备你的 HTML 模板

  1. 创建静态 HTML:使用 Dreamweaver、VS Code 或者任何你喜欢的编辑器,创建一个完整的 HTML 文件。index.html,这个文件应该包含你的网站头部、导航、主体内容区和页脚。

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>我的 PHPCMS 网站</title>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <header>
            <h1>网站 Logo</h1>
            <nav>
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">新闻</a></li>
                    <li><a href="#">关于我们</a></li>
                </ul>
            </nav>
        </header>
        <main>
            <!-- 这里是网站的主要内容 -->
            <h2>欢迎来到我的网站</h2>
            <p>这里是网站的介绍文字...</p>
        </main>
        <footer>
            <p>&copy; 2025 我的网站 版权所有</p>
        </footer>
    </body>
    </html>
  2. 添加 PHPCMS 模板标签:这是最关键的一步,你需要将 HTML 中动态变化的部分,替换成 PHPCMS 的模板标签。

    如何html页面和phpcms-图3
    (图片来源网络,侵删)
    • <title> 标签里的标题通常是动态的。

      • 原来:<title>我的 PHPCMS 网站</title>
      • 改为:<title>{site_title}</title>{site_title} 是 PHPCMS 的一个全局变量,代表后台设置的网站标题)
    • 内容列表:首页通常会显示最新的几篇文章。

      • <main> 区域,你需要留一个位置给文章列表。
      • 改为:{pc:content action="lists" catid="1" num="5" order="listorder DESC"}
        • pc:content 是 PHPCMS 调用内容的标签。
        • action="lists" 表示这是一个“列表”操作。
        • catid="1" 表示调用 ID 为 1 的分类(栏目)下的内容。
        • num="5" 表示调用 5 条。
        • 在这个标签内部,你需要循环输出每条信息。
    • 循环输出单条内容

      <main>
          <h2>{catname}</h2> <!-- {catname} 是栏目名称 -->
          <ul>
              {loop $data $r}
              <li>
                  <a href="{$r.url}">{$r.title}</a>
                  <span>{$r.inputtime}</span>
              </li>
              {/loop}
          </ul>
      </main>
      • {loop $data $r}:这是一个循环,$data 是上一步 pc:content 标签获取到的数据,$r 是当前循环到的单条数据。
      • {$r.title}:输出文章的标题。
      • {$r.url}:输出文章的链接地址。
      • {$r.inputtime}:输出文章的发布时间。
    • 其他常用标签

      • {$head}:通常用于引入 CSS、JS 等头部文件。
      • {$footer}:通常用于引入页脚的 JS 代码等。

    修改后的 index.html 就变成了 PHPCMS 的模板文件(index.html),但它里面包含了 PHPCMS 的标签。

第 2 步:将模板文件上传到 PHPCMS 指定目录

  1. 在 PHPCMS 安装目录下,找到 templates/ 文件夹。
  2. templates/ 文件夹里,会默认有一个 default/ 文件夹(默认模板)。
  3. 你可以创建一个新的文件夹,my_template/,用来存放你的自定义模板。
  4. 将你修改好的 HTML 模板文件(如 index.html)上传到 templates/my_template/ 目录下。

第 3 步:在 PHPCMS 后台应用模板

  1. 登录你的 PHPCMS 后台。
  2. 进入 ” -> “模板管理”
  3. 在模板管理界面,选择你刚刚上传的模板所在的风格(my_template)。
  4. 点击“设置”或“应用”,将这个模板设置为你的网站首页或其他页面的默认模板。

第 4 步:在后台添加内容和设置栏目

  1. 添加栏目:进入 ” -> “分类管理”,添加你的网站栏目,新闻中心”、“产品介绍”等,每个栏目都有一个 ID,你在模板中调用时需要用到这个 ID。
  2. :进入 ” -> “内容管理”,选择一个栏目,然后添加文章,文章的标题、正文等内容都会被保存在数据库中。

第 5 步:访问网站,查看效果

清空浏览器缓存,访问你的网站首页,PHPCMS 就会根据你设置的模板,从数据库里读取内容,动态生成并展示出一个完整的 HTML 页面。


特性 HTML 页面 PHPCMS
本质 静态文件,网页的骨架 动态系统,网站的大脑和管家
功能 展示固定内容 、生成页面、用户交互
关系 是 PHPCMS 的“皮肤”和“展示模板” 使用 HTML 作为模板来生成最终的网页
如何结合 设计 HTML 结构
用 PHPCMS 标签替换动态部分
上传到 templates 目录
在后台应用模板
安装系统
设计并应用模板
在后台添加内容和栏目

理解了这个关系,你就能明白,PHPCMS 的强大之处在于它让你不必手写成千上万个 HTML 文件,而是通过一个模板和后台管理,就能高效地管理一个大型动态网站。

分享:
扫描分享到社交APP
上一篇
下一篇