ASPCMS 是一个经典的 PHP 开源网站管理系统，虽然现在市面上有更多现代化的选择，但因其简单、稳定、文档丰富，仍然被一些中小型网站使用，它的 WAP 模板系统允许你为手机端定制一个独立的、轻量级的页面。

下面我将从 基本概念、文件结构、模板标签、制作步骤 和 注意事项 几个方面进行说明。

基本概念

  • ASPCMS: 基于 PHP + MySQL 的内容管理系统。
  • WAP 模板: 专门为移动设备（手机、平板）设计的网站模板，它通常具有以下特点：
    • 简洁布局: 栏目少，导航清晰。
    • 小尺寸元素: 按钮更大，字体更易读，图片经过压缩。
    • 快速加载: 减少不必要的脚本和样式，提高页面打开速度。
    • 响应式 (可选): 可以设计成自适应不同屏幕尺寸的模板。

在 ASPCMS 中，WAP 模板和 PC 模板是分开的，当用户通过手机访问网站时，系统会自动调用 wap 目录下的模板文件进行渲染。

WAP 模板的文件结构

一个标准的 ASPCMS WAP 模板通常存放在 /templates/ 目录下的 wap 文件夹内，其基本结构如下：

/your_aspcms_install/
├── templates/
│   ├── default/          # 这是你的 PC 端模板
│   │   ├── index.html
│   │   ├── list.html
│   │   └── ...
│   └── wap/              # 这是你的 WAP 端模板
│       ├── index.html    # WAP 首页模板
│       ├── list.html     # WAP 列表页模板
│       ├── show.html     # WAP 内容页模板
│       ├── search.html   # WAP 搜索页模板
│       ├── category.html # WAP 栏目页模板
│       ├── head.html     # WAP 公共头部文件 (常用于 logo、导航)
│       ├── foot.html     # WAP 公共底部文件 (常用于版权、友情链接)
│       ├── style.css     # WAP 端的样式表
│       └── images/       # WAP 模板专用的图片资源
└── ...

关键文件说明:

  • index.html: WAP 首页，通常会调用 head.html 和 foot.html。
  • list.html: 文章列表页，展示某个栏目下的所有文章标题和摘要。
  • show.html: 文章内容页，展示单篇文章的详细内容。
  • head.html / foot.html: 公共文件，为了代码复用，将网站的头部（如 logo、主导航）和底部（如版权信息、备案号）放在这里，然后在其他页面中通过 <!--#include file="head.html"--> 这样的方式引入。

核心：ASPCMS 模板标签

ASPCMS 使用自己的一套模板标签语法，这些标签以 和 包裹，掌握这些标签是制作模板的关键。

常用标签分类

a) 系统与全局标签

  • {$webname}: 网站名称
  • {$weburl}: 网站网址
  • {$keywords}: 网站关键词
  • {$description}: 网站描述
  • {$copyright}: 网站版权信息
  • {$icp}: ICP备案号

b) 首页标签 (index.html)

  • 调用指定栏目下的文章列表:

    <!-- 调用 ID 为 1 的栏目下的 10 篇文章 -->
<ul>
<!--#list{action=article&classid=1&order=up&num=10}-->
    <li><a href="{$[url]}">{$[title]}</a></li>
<!--#/list-->
</ul>
    • <!--#list{...}-->...<!--#/list-->: 循环标签。
    • action=article: 调用文章。
    • classid=1: 指定栏目 ID。
    • order=up: 按发布时间倒序。
    • num=10: 调用 10 条。
    • {$[url]}: 文章链接。
    • {$[title]}: 文章标题。
    • {$[date]}: 文章日期。
    • {$[description]}:

  • 调用栏目导航:

    <nav>
<!--#list{action=class&order=up&parentid=0}--> <!-- 调用顶级栏目 -->
    <a href="{$[url]}">{$[classname]}</a>
<!--#/list-->
</nav>

c) 列表页标签 (list.html)

  • 当前栏目信息:

    • {$[classname]}: 当前栏目名称。
    • {$[classid]}: 当前栏目 ID。
    • {$[description]}: 当前栏目描述。

  • 文章列表: 与首页的调用方式完全一样，只是 classid 通常可以不写，默认为当前栏目。

    <h2>{$[classname]}</h2>
<ul>
<!--#list{action=article&order=up}-->
    <li><a href="{$[url]}">{$[title]}</a> <span>{$[date]}</span></li>
<!--#/list-->
</ul>

  • 分页标签:

    <div class="page">
    <!--#page{action=page}--> <!-- {page} 会自动生成上一页、页码、下一页等链接 -->
</div>

d) 内容页标签 (show.html)

  • :

    • {$[title]}: 文章标题。
    • {$[date]}: 发布日期。
    • {$[hits]}: 点击量。
    • {$[author]}: 作者。
    • {$[content]}: 文章正文内容，这是最重要的标签，它会输出你在后台编辑器中输入的所有 HTML 代码。
    • {$[description]}:

  • 上下篇文章:

    <div class="prenext">
    <p>上一篇：{$[pretitle]} ({$[preurl]})</p>
    <p>下一篇：{$[nexttitle]} ({$[nexturl]})</p>
</div>

制作一个简单的 WAP 模板步骤

假设我们要制作一个极简的 WAP 模板。

步骤 1: 准备文件

在 /templates/ 目录下创建一个新文件夹，mywap，然后在这个文件夹里创建以下文件：

  • index.html
  • head.html
  • foot.html
  • style.css
  • images/ (用于存放 logo 等图片)

步骤 2: 编写 head.html

<!-- head.html -->
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">{$webname}-{$[classname]}</title>
    <meta name="keywords" content="{$keywords}">
    <meta name="description" content="{$description}">
    <link rel="stylesheet" type="text/css" href="/templates/mywap/style.css">
</head>
<body>
    <header>
        <a href="{$weburl}"><img src="/templates/mywap/images/logo.png" alt="{$webname}"></a>
        <!--#list{action=class&order=up&parentid=0}-->
        <a href="{$[url]}">{$[classname]}</a>
        <!--#/list-->
    </header>

步骤 3: 编写 foot.html

<!-- foot.html -->
    <footer>
        <p>Copyright &copy; {$year} {$webname} All Rights Reserved.</p>
        <p>{$icp}</p>
    </footer>
</body>
</html>

步骤 4: 编写 index.html

<!-- index.html -->
<!--#include file="head.html"-->
<main>
    <h1>最新资讯</h1>
    <ul class="news-list">
        <!--#list{action=article&classid=1&order=up&num=5}-->
        <li><a href="{$[url]}">{$[title]}</a><span>{$[date]}</span></li>
        <!--#/list-->
    </ul>
</main>
<!--#include file="foot.html"-->

步骤 5: 编写 style.css

/* style.css */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: Arial, sans-serif; background-color: #f4f4f4; }
header { background: #333; color: #fff; padding: 10px; text-align: center; }
header a { color: #fff; text-decoration: none; margin: 0 10px; }
main { padding: 15px; }
.news-list list-style: none; }
.news-list li { background: #fff; padding: 10px; margin-bottom: 10px; border-radius: 5px; }
.news-list li a { text-decoration: none; color: #333; font-size: 16px; display: block; }
.news-list li span { color: #999; font-size: 12px; float: right; }
footer { background: #333; color: #fff; text-align: center; padding: 10px; font-size: 12px; }

步骤 6: 上传并设置

  1. 将整个 mywap 文件夹通过 FTP 上传到你网站服务器的 /templates/ 目录下。
  2. 登录 ASPCMS 后台，找到 模板管理 -> wap 模板。
  3. 在模板选择列表中,你应该能看到 mywap 这个模板。
  4. 选择 mywap 并设为当前使用的 WAP 模板。
  5. 清理一下缓存,然后通过手机访问你的网站，就能看到新制作的 WAP 模板了。

重要注意事项

  1. 移动端优先的 Meta 标签: 在 head.html 中，<meta name="viewport"...> 标签是必不可少的，它告诉浏览器如何控制页面的尺寸和缩放，是移动端网页适配的核心。

  2. 图片路径: 模板中的图片、CSS、JS 等静态资源路径建议使用 绝对路径 (以 开头)，如 /templates/mywap/style.css，这样可以避免在不同层级的页面中路径出错。

  3. 缓存机制: ASPCMS 有缓存功能，修改模板后，如果看不到效果，请务必到后台清理缓存。

  4. 调试: 如果模板出现问题（比如标签不解析），可以：

    • 检查标签语法是否正确（{$[tag]} 和 <!--#list{...}-->）。
    • 检查文件路径是否正确。
    • 查看网页源代码,看看标签是否被原样输出了，这可以帮助你判断是标签问题还是 CSS 样式问题。
    • 查看服务器错误日志。

  5. 兼容性: ASPCMS 的模板引擎相对简单，不支持现代模板引擎的复杂逻辑（如 if/else 嵌套层级很深），请尽量保持模板逻辑的简洁。

希望这份详细的指南能帮助你顺利制作或修改 ASPCMS 的 WAP 模板！