如何将 appsettings.json 文件中的值用作 AMP html 中的 href 变量？

问题描述

我正在编写一个 AMP 网站 www-dev.example.com，将用户指向一个注册页面。

注册页面托管在使用子域 auth.www-dev.example.com 的身份服务器上。

我现在想将我的 AMP 网站部署到暂存环境 www-stg.example.com，同时将用户指向其各自的暂存身份服务器 auth.www-stg.example.com。

理想情况下，我会在相对 appsettings.json 文件中为每个环境配置一个配置，并使用 amp-mustache 将环境变量映射到 <button> 或 a 标签的 URL。

我目前在某种程度上使用 amp-list 实现了所需的功能，但它看起来像狗早餐，由于固定尺寸而导致对齐和缩放对字体末端造成一些不良和痛苦的影响。

是否有一种简单的方法可以在 AMP 中设置用于链接的环境变量？

HTML 实现

<amp-list width="130" height="45" layout="flex-item" src="/appsettings.json">
 <template type="amp-mustache">
  <button type="button" on="tap:AMP.navigateto(url='{{signup-url}}',target='_top')">Sign Up</button>
 </template>
</amp-list>

appsettings.json 实现

{
    "items":[{
    "login-url":"https://auth.www-dev.example.com/login","logout-url":"https://auth.www-dev.example.com/logout","signup-url":"https://auth.www-dev.example.com/signup","unsubscribe-url":"https://auth.www-dev.example.com/unsubscribe"
   }]
}

任何帮助或建议将不胜感激！

编辑 - 示例显示我希望避免的前端问题的开始

<!DOCTYPE html>
<html ⚡ lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Bug</title>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
    <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
    <link rel="canonical" href="https://example.com">
    <link
        href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
        rel="stylesheet">
    <Meta name="viewport" content="width=device-width,initial-scale=1.0">
    <style amp-custom>
        /* Delete this to reveal amp-list*/
        .flex {
            display: flex;
            flex-flow: row Nowrap;
            justify-content: space-between;}

        .left {
            border: solid 1px blue;
        }
        .right {
            border:solid 1px green;
        }
    </style>
    <style amp-boilerplate>
        body {
            -webkit-animation: -amp-start 8s steps(1,end) 0s 1 normal both;
            -moz-animation: -amp-start 8s steps(1,end) 0s 1 normal both;
            -ms-animation: -amp-start 8s steps(1,end) 0s 1 normal both;
            animation: -amp-start 8s steps(1,end) 0s 1 normal both
        }

        @-webkit-keyframes -amp-start {
            from {
                visibility: hidden
            }

            to {
                visibility: visible
            }
        }

        @-moz-keyframes -amp-start {
            from {
                visibility: hidden
            }

            to {
                visibility: visible
            }
        }

        @-ms-keyframes -amp-start {
            from {
                visibility: hidden
            }

            to {
                visibility: visible
            }
        }

        @-o-keyframes -amp-start {
            from {
                visibility: hidden
            }

            to {
                visibility: visible
            }
        }

        @keyframes -amp-start {
            from {
                visibility: hidden
            }

            to {
                visibility: visible
            }
        }
    </style><noscript>
        <style amp-boilerplate>
            body {
                -webkit-animation: none;
                -moz-animation: none;
                -ms-animation: none;
                animation: none
            }
        </style>
    </noscript>
    <template id="foo" type="amp-mustache">
        <button class="button-secondary" type="button"
            on="tap:AMP.navigateto(url='{{signup-url}}',target='_top')">Sign Up</button>
    </template>
</head>

<body>
    <div class="flex">
        <div class="left">
            <p>Flex Left</p>
            <button on="tap:foobar.changetoLayoutContainer()">Change Layout</button>
        </div>
        <div class="right">
            <amp-list id="foobar" width="auto" height="1" src="/appsettings.json" template="foo">
                <div placeholder>Loading</div>
                <div fallback>Failed to load data.</div>
            </amp-list>
        </div>
    </div>
    
</body>

</html>

解决方法

在将 html 上传到其托管目标之前，我最终使用了 Terraform 并在部署期间将 html 文件解析为模板。

盐酸

module "template_files" {
  source               = "hashicorp/dir/template"
  base_dir             = "./src/static_website"
  template_file_suffix = ".html"
  
  template_vars = {
    canonical  = var.canonical
    signup-url = var.signup-url
  }
}

HTML

<button type="button" on="tap:AMP.navigateTo(url='${signup-url}',target='_top')">Sign Up</button>

amp-html amp-list amp-mustache html