在 thymeleaf 中使用 Accelerated Mobile Pages (amp)答案

【问题标题】：Using Accelerated Mobile Pages (amp) in thymeleaf在 thymeleaf 中使用 Accelerated Mobile Pages (amp)
【发布时间】：2017-02-01 10:51:38
【问题描述】：

我需要按照Create Your First AMP Page 上的指南在（Spring MVC + thymeleaf）网站中的特定页面上使用 AMP 技术

验证器显示许多错误：

属性“xmlns”可能不会出现在顶级标签“html ⚡”中
标签“head > style[amp-boilerplate] - old variant”已弃用 - 请改用“head > style[amp-boilerplate]”。
标签“head > style[amp-boilerplate] old variant”中的强制文本 (CDATA) 缺失或不正确。

代码：

<!doctype html>
<html amp xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraphprotocol.org/schema/" lang="ar">
<head>
  <title>Some title</title>
  <meta charset="utf-8" />
  <meta content="IE=edge" http-equiv="X-UA-Compatible" />
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <link rel="canonical" content="some-url-here" />
  <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>
  <script async="" src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
content is here
</body>
</html>

知道如何解决这个问题吗？

【问题讨论】：

是输出上面的代码吗？如果有，能否提供你的源代码。

标签： html spring-mvc thymeleaf amp-html

【解决方案1】：

我发现最好的方法是实现一个不同的、轻量级的页面版本

例如：CNN 已参考 amp 版本
查看此页面的源代码： http://edition.cnn.com/2017/01/31/politics/donald-trump-supreme-court-announcement/index.html

这是放大器版本 https://amp.cnn.com/cnn/2017/01/31/politics/donald-trump-supreme-court-announcement/index.html

所以，对我来说，我将在不使用 thymeleaf 的情况下实现一个新页面

【讨论】：

【解决方案2】：

您可以毫无问题地使用 xmlns 标签，因为页面在没有这些标签的情况下呈现自身。当您验证页面时，复制 html 以从您的浏览器进行验证，而不是从您的 IDE。使用 Chrome 右键单击 --> 查看页面源代码为您提供干净的 html。

【讨论】：