如何将JavaScript变量值转为JSON对象并在AMP页面正常展示？

你的问题核心是AMP页面中，静态JSON脚本无法引用客户端JavaScript变量——因为AMP的<script type="application/json">属于静态资源，页面加载时就会被解析，而postid是客户端JS运行时才生成的变量，直接写入JSON会被当作字符串字面量，而非变量值。

下面提供两种可行的解决方式：

方式一：服务端直接输出WordPress文章ID（推荐） #

既然是WordPress环境，完全可以在模板渲染阶段直接把文章ID写入JSON，跳过客户端JS获取的步骤，既高效又符合AMP的规范。

替换原有amp-state代码为：

<amp-state id="wpp-json-amp">   
  <script type="application/json" id="wpp-json">
      {
          "ID": <?php echo get_the_ID(); ?>
      }
  </script>
</amp-state>

这样页面渲染完成后，JSON里的ID会直接被填充为当前文章的ID，不需要任何客户端JS处理。

方式二：用amp-script动态更新amp-state #

如果必须通过客户端JS获取postid（比如特殊业务场景），可以使用AMP官方的amp-script组件来动态修改amp-state的数据：

1. 首先在页面<head>中引入amp-script组件：

<script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>

2. 修改原有代码为：

<!-- 初始化空的amp-state -->
<amp-state id="wpp-json-amp">
  <script type="application/json">
    {
      "ID": ""
    }
  </script>
</amp-state>

<!-- 用amp-script执行客户端逻辑并更新amp-state -->
<amp-script layout="container" script="update-postid">
  <script type="text/plain" id="update-postid">
    // 获取postid
    const postid = document.querySelector('.status-publish').getAttribute('id').replace("post-", "");
    // 获取当前amp-state的数据
    const currentState = await AMP.getState('wpp-json-amp');
    // 更新ID字段
    currentState.ID = postid;
    // 把更新后的数据写回amp-state
    await AMP.setState({
      'wpp-json-amp': currentState
    });
    // 验证输出（可选）
    console.log(await AMP.getState('wpp-json-amp'));
  </script>
</amp-script>

amp-script是AMP允许的安全执行客户端JS的方式，通过AMP提供的getState和setState方法，可以合法地修改amp-state中的JSON数据。

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