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

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

更强大的解决方案是查看位置扩展器。通常也将其视为显示模式的后继。视图位置扩展器基本上是一种机制，可让您对Razor引擎将在其中查找视图的物理位置进行后处理。因此，您可以使用它来有条件地修改或扩展视图所在的路径。

对于您而言，您可能需要更改行为，以便在通过AMP访问您的网站时，Razor应该先寻找<view>.amp.cshtml，然后再回到<view>.cshtml。

为此，您必须实现IViewLocationExpander。在PopulateViews中，您必须检测自己是否处于AMP模式下；然后在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;
        }
    }
}

一旦有了，只需在AddMvc内的ConfigureServices调用后注册扩展器即可：

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

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

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

1 个答案: