将Google AMP(加速的移动页面)应用于ASP.NET Core网站 [英] Apply Google AMP (Accelerated Mobile Pages) to ASP.NET Core site
问题描述
我正在尝试使用ASPNET Core MVC创建AMP页面.我没有找到很多文档(如果有的话).对于ASPNET，建议使用DisplayModes创建Google AMP显示.但是，ASPNet Core不支持DisplayModes，我正在尝试找到解决它的方法. 任何建议将不胜感激！
I'm trying to create an AMP page with ASPNET Core MVC. I haven't been able to find many documents if any. For ASPNET, it was suggested to use DisplayModes to create a Google AMP Display. However, ASPNet Core doesn't support DisplayModes and I'm trying to figure a way to work around it. Any suggestions would be greatly appreciated!
@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>
推荐答案
有几种方法可以实现类似的目的.一种可能是根据路线动态更改布局，即，将模板X用于AMP或将Y用作模板.
There are a few ways to achieve something like this. One possibility would be to dynamically change your layout depending on the route, i.e. use template X for AMP or Y otherwise.
更强大的解决方案是查看位置扩展器.通常也将其视为显示模式的后继者.视图位置扩展器基本上是一种机制，允许您对Razor引擎将在其中查找视图的物理位置进行后处理.因此，您可以使用它有条件地修改或扩展视图所在的路径.
A more powerful solution would be the view location expander. This is also generally considered as a successor to the display modes. The view location expander is basically a mechanism that allows you to post-process the physical locations where the Razor engine will look for views. So you can use this to conditionally modify or expand the paths where your views are located.
根据您的情况，您可能需要更改行为，以便在通过AMP访问站点时，Razor应该先查找<view>.amp.cshtml，然后再回到<view>.cshtml.
In your case, you might want to change the behavior so that when accessing your site through AMP, Razor should first look for a <view>.amp.cshtml before falling back to <view>.cshtml.
为此，您必须实现 PopulateViews 您将必须检测您是否处于AMP模式下；并在 ExpandViewLocations 然后可以修改视图位置.
In order to do that, you would have to implement IViewLocationExpander. In PopulateViews you would have to detect whether you are within AMP mode or not; and in ExpandViewLocations you could then modify the view locations.
这看起来可能有点像这样(未经仔细研究，关于如何实现此目标的想法):
That could look somewhat like this (untested, as an idea on how to approach this):
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调用后注册扩展器即可:
Once you have that, you only have to register the expander after the AddMvc call within your ConfigureServices:
services.AddMvc()
.AddRazorOptions(options =>
{
options.ViewLocationExpanders.Add(new AmpViewLocationExpander());
});
然后您只需要为AMP创建备用视图.
And then you only need to create your alternate views for AMP.
这篇关于将Google AMP(加速的移动页面)应用于ASP.NET Core网站的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
