将 Google AMP（加速移动页面）应用于 ASP.NET 核心网站

Question

我正在尝试使用 ASPNET Core MVC 创建 AMP 页面。如果有的话，我找不到很多文件。对于 ASPNET，建议使用 DisplayModes 创建 Google AMP 显示。但是，ASPNet Core 不支持 DisplayModes，我正试图找到一种解决方法。 如有任何建议，我们将不胜感激！

@model Models.Article
@{
    Layout = null;
}

<!doctype html>
<html amp>
    <head>
        <meta charset="utf-8">
        <link rel="canonical" href="/article.cshtml">
        <link rel="amphtml" href="/article.amp.cshtml">
        <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
        <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>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    </head>
    <body>
        <article>
            <h2>@Html.DisplayFor(model => model.Title)</h2>
            <div>@Convert.ToDateTime(Model.PublishedDate).ToString("dddd, MMMM d, yyyy")</div>
        </article>    
    </body>
</html>

Answer 1

有几种方法可以实现这样的目标。一种可能性是根据路线动态更改您的布局，即为 AMP 使用模板 X，否则使用 Y。

更强大的解决方案是视图位置扩展器。这通常也被认为是显示模式的继承者。视图位置扩展器基本上是一种允许您 post 处理 Razor 引擎将查找视图的物理位置的机制。所以你可以使用它来有条件地修改或扩展你的视图所在的路径。

在您的情况下，您可能想要更改行为，以便在通过 AMP 访问您的网站时，Razor 应该首先查找 <view>.amp.cshtml，然后再回退到 <view>.cshtml。

为此，您必须实施 IViewLocationExpander. In PopulateViews you would have to detect whether you are within AMP mode or not; and in ExpandViewLocations 然后您可以修改视图位置。

这可能看起来有点像这样（未经测试，作为一个关于如何处理这个问题的想法）：

public class AmpViewLocationExpander : IViewLocationExpander
{
    private const string ValueKey = "ampmode";

    public void PopulateValues(ViewLocationExpanderContext context)
    {
        // magic utility method that determines whether this is within an AMP context
        var isAmp = context.ActionContext.HttpContext.IsAmp();

        // persist the value on the context to allow the cache to consider this
        context.Values[ValueKey] = isAmp.ToString();
    }

    public IEnumerable<string> ExpandViewLocations(ViewLocationExpanderContext context,
        IEnumerable<string> viewLocations)
    {
        // when in AMP mode
        if (context.Values.TryGetValue(ValueKey, out var isAmpValue) && isAmpValue == "True")
        {
            return ExpandAmpViewLocations(viewLocations);
        }

        // otherwise fall back to default locations
        return viewLocations;
    }

    private IEnumerable<string> ExpandAmpViewLocations(IEnumerable<string> viewLocations)
    {
        foreach (var location in viewLocations)
        {
            // yield the AMP version first
            yield return location.Replace("{0}", "{0}.amp");

            // then yield the normal version as a fallback
            yield return location;
        }
    }
}

完成后，您只需在 ConfigureServices:

中的 AddMvc 调用后注册扩展器

services.AddMvc()
    .AddRazorOptions(options =>
    {
        options.ViewLocationExpanders.Add(new AmpViewLocationExpander());
    });

然后您只需为 AMP 创建备用视图。

将 Google AMP（加速移动页面）应用于 ASP.NET 核心网站

Apply Google AMP (Accelerated Mobile Pages) to ASP.NET Core site

c#

asp.net

amp-html

asp.net-core