0

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

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

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

理想情况下，我会在相对appsettings.json文件中为每个环境配置一个配置，并用于amp-mustache将环境变量映射到 url<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>
4

1 回答 1

0

在将 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>
于 2021-06-26T10:41:45.177 回答