一、创建AMP独立模板目录结构
在开始编写代码之前，需要在当前使用的Z-BlogPHP主题文件夹下建立AMP专用目录。这种方式能够确保原有PC端模板不受影响，且便于维护。请通过FTP或文件管理器进入zb_users/theme/你的主题ID/目录下。
在该目录下新建一个名为amp的文件夹。进入amp文件夹，依次创建以下四个空文件：
- header.php：用于存放AMP页面的HTML头部信息、Boilerplate代码及CSS样式。
- footer.php：用于存放页面底部版权信息及脚本。
- post.php：用于渲染文章详情页的AMP版本。
- index.php：用于渲染首页或列表页的AMP版本。
完成这一步后，你的目录结构应该包含theme/你的主题ID/amp/header.php等文件。这是AMP页面渲染的基础容器。
二、注册AMP视图调用逻辑
Z-BlogPHP通过模板选择机制来决定加载哪个文件。我们需要在主题的include.php文件中挂载接口，当检测到URL中包含特定参数时，强制系统使用amp目录下的模板。
打开zb_users/theme/你的主题ID/include.php文件，找到ActivePlugin_你的主题ID函数，或者直接在文件末尾添加以下代码：
```php
function Amp_Template_Select($template) {
// 检测URL参数中是否存在 'amp' 标记
if (isset($_GET['amp'])) {
// 根据当前页面类型重定向模板路径
global $zbp;
if ($template == 'post') {
return 'amp/post';
} elseif ($template == 'index' || $template == 'list') {
return 'amp/index';
}
}
return $template;
}
// 挂载到模板选择过滤器
Add_Filter_Plugin('Filter_Plugin_ViewPost_Template', 'Amp_Template_Select');
Add_Filter_Plugin('Filter_Plugin_ViewIndex_Template', 'Amp_Template_Select');
Add_Filter_Plugin('Filter_Plugin_ViewList_Template', 'Amp_Template_Select');
```
注意：添加代码后，请进入Z-Blog后台【插件管理】页面，禁用并重新启用当前主题，以确保include.php中的钩子生效。此时，访问文章链接并在末尾加上?amp=1（如domain.com/post-id.html?amp=1），系统将尝试读取AMP模板。
三、编写AMP头部与样式
AMP页面有严格的HTML规范，必须包含特定的Boilerplate代码。编辑amp/header.php，填入以下代码。这里我们直接使用内联CSS，因为AMP禁止外部加载CSS文件。
```php
<?php echo $article->Title; ?> - AMP版
Title; ?>
发布于：Time('Y-m-d H:i'); ?>
作者：Author->Name; ?>
```
四、实现图片标签自动转换逻辑
AMP禁止使用标准的![]()
width和height。为了实现零门槛落地，我们需要编写一个PHP函数，在文章内容输出前自动完成转换。
在amp/post.php的最上方添加以下处理函数：
```php
标签替换为
// 正则匹配 img 标签，提取 src, width, height, alt 等属性
$pattern = '/]src=[\'"]([^\'"]+)[\'"][^>]>/i';
$content = preg_replace_callback($pattern, function($matches) {
$img_tag = $matches[0];
$src = $matches[1];
// 尝试获取原有宽高，如果没有则设置默认值（AMP必须要求宽高）
$width = 600;
$height = 400;
if (preg_match('/width=[\'"]?([\d]+)[\'"]?/i', $img_tag, $w)) {
$width = $w[1];
}
if (preg_match('/height=[\'"]?([\d]+)[\'"]?/i', $img_tag, $h)) {
$height = $h[1];
}
// 获取 alt 属性
$alt = '';
if (preg_match('/alt=[\'"]([^\'"])[\'"]/i', $img_tag, $a)) {
$alt = $a[1];
}
// 返回标准的 amp-img 标签，layout="responsive" 确保自适应
return '';
}, $content);
// 2. 移除不兼容的 script 标签（除了AMP官方JS）
$content = preg_replace('/]>(.?)<\/script>/is', '', $content);
// 3. 移除 style 标签（因为必须在 head 中）
$content = preg_replace('/]>(.?)<\/style>/is', '', $content);
return $content;
}
?>
```
五、编写文章页与底部模板
继续编辑amp/post.php，在刚才的函数下方写入主体内容调用代码：
```php
Content);
?>
```
接下来编辑amp/footer.php，添加页面底部信息及HTML闭合标签：
```php
```
此时，文章详情页的AMP版本已经完成。访问你的文章链接.html?amp=1，应该能看到去除了所有复杂样式、只保留核心内容且图片自适应的页面。
六、配置Nginx/Apache伪静态规则
为了让URL更美观（例如将?amp=1变为/amp），需要配置服务器重写规则。这一步对于SEO非常重要。
如果是Apache环境：
在网站根目录的.htaccess文件中添加以下规则：
```apache
RewriteEngine On
匹配文章链接，如果以 /amp 结尾，则重写为 ?amp=1
RewriteRule ^(./amp)$ $1?amp=1 [L]
```
如果是Nginx环境：
在Nginx配置文件的server块中添加以下rewrite规则：
```nginx
rewrite ^(.)/amp$ $1?amp=1 last;
```
配置完成后，重启Web服务器。现在你可以通过domain.com/post-id.html/amp访问AMP页面。
七、验证与收录提交
AMP制作完成后，必须通过Google AMP Validator验证，否则无法被搜索引擎正确识别。
- 在线验证：打开浏览器，访问
https://validator.ampproject.org/。
- 输入URL：将你的AMP页面链接（带
/amp或?amp=1）输入框中并回车。
- 查看结果：如果显示绿色 "AMP validation passed"，说明代码完全合规。如果报错，请检查是否使用了禁止的CSS（如!important），或者
amp-img缺少宽高属性。
验证通过后，在PC页面的
