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

Question

我正在编写一个 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 的网址中标签。

我目前正在使用 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>

Answer 1

在将 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>

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

How to use values from an appsettings.json file as href variables in an AMP html?

html

css

amp-html

amp-mustache

amp-list