WordPress AMP无法显示GitHub Gist问题求助

原因说明 #

AMP规范对第三方脚本有严格限制，GitHub Gist默认的嵌入脚本不符合AMP的安全与性能要求，因此会被自动拦截，导致内容无法显示。以下是几种可行的解决办法：

• 方法一：使用AMP兼容的iframe包裹Gist
  AMP允许通过<amp-iframe>加载符合规范的第三方内容，你可以用该标签包裹Gist的渲染页面。示例代码如下：

<amp-iframe width="600" height="400"
  layout="responsive"
  sandbox="allow-scripts allow-same-origin"
  src="https://gist.github.com/你的GitHub用户名/你的GistID.html">
</amp-iframe>

替换代码中的你的GitHub用户名和你的GistID，并根据Gist内容长度调整width和height参数，layout="responsive"会让iframe自适应屏幕宽度。

• 方法二：直接嵌入Gist代码到AMP代码块
  如果不需要保留Gist的自动更新功能，可以手动复制Gist代码，用AMP官方的<amp-code-block>组件嵌入，完全符合AMP规范。示例代码：

<amp-code-block layout="fixed-height" height="300" language="javascript">
// 此处粘贴Gist的原始代码内容
function example() {
  console.log('AMP兼容的代码块');
}
</amp-code-block>

language参数根据代码类型设置（如python、html等），height根据代码行数调整，也可使用layout="responsive"配合width和height比例实现自适应。

• 方法三：使用AMP兼容的WordPress插件
  安装专门支持AMP的代码嵌入插件，这类插件会自动将Gist转换为AMP兼容格式，无需手动修改代码。比如搜索“AMP Code Block”或“Gist AMP”相关插件，选择口碑良好、维护活跃的版本安装启用即可。

• 方法四：添加Gist脚本域名到AMP白名单（谨慎使用）
  通过修改WordPress主题的functions.php文件，将Gist相关域名加入AMP插件的允许脚本列表。代码示例：

add_filter( 'amp_allowed_script_tags', 'allow_gist_scripts_in_amp' );
function allow_gist_scripts_in_amp( $allowed_scripts ) {
    $allowed_scripts[] = 'https://gist.github.com';
    $allowed_scripts[] = 'https://gist.githubusercontent.com';
    return $allowed_scripts;
}

⚠️ 注意：此方法可能破坏AMP页面的合规性，导致页面无法通过Google的AMP验证，影响搜索排名，仅在必要时使用。

内容的提问来源于stack exchange，提问作者Davoud Teimouri