Применение Google AMP (ускоренных мобильных страниц) к основному сайту ASP.NET - PullRequest
Новая
       10

Применение Google AMP (ускоренных мобильных страниц) к основному сайту ASP.NET

0 голосов
/ 12 декабря 2018

Я пытаюсь создать страницу AMP с ASPNET Core MVC.Я не смог найти много документов, если таковые имеются.Для ASPNET было предложено использовать DisplayModes для создания Google AMP Display.Однако 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>

1 Ответ

0 голосов
/ 12 декабря 2018

Есть несколько способов достичь чего-то подобного.Одной из возможностей может быть динамическое изменение макета в зависимости от маршрута, т. Е. В противном случае использовать шаблон 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.

...