复杂页面的 AMP

AMP for complex page

我现有的文章网站具有复杂的UI,例如评论系统和投票系统。如果我创建 Google AMP 页面,是否还需要包含所有复杂的 UI(投票、评论系统)?如果我不将其包含在 Google AMP 中,访问者是否只能查看文章而不能与我网站的功能进行交互?在现有页面之上重新创建另一个 amp 版本的页面是否需要太多工作?

这取决于您网站的复杂程度,但您可能想要做的是效仿 GitHub 的示例,将一些高级功能隐藏在桌面网站上。我认为 AMP 页面应该精简为仅包含文章内容,至少在 AMP 项目为表单提供自定义元素之前是这样。页面顶部或底部应该有一个明确的 "use desktop website" link/button ,以便那些希望与网站充分互动的人可以这样做。

这使得核心内容能够以优化的形式和最佳的速度提供给移动用户,而移动用户经常在途中,因此他们可能不介意不得不等到他们在桌面上发表评论或对某事进行投票。那么那些使用移动设备但仍希望在移动设备上发表评论或投票的用户仍然可以通过切换到桌面站点来进行。


我这么说是因为我认为 GitHub 与代码编辑、issue/PR 讨论等有很多潜在的互动,考虑到不考虑在移动设备上加载这可能是过大的杀伤力许多人将在移动设备上使用这些东西。他们将阅读 post 和代码,但不一定在那一刻进行交互。

我之所以这么说,是因为我一直在开发消息 board/forum,仅使用 AMP-HTML(以及后端的 Perl)使用 amp-iframe 测试表单使用 iframe 的实际可行性。

好消息是它可以做到,它确实有效。我已经能够使用 iframe 来 posting 新话题和回复等等。坏消息是实施...

我想出的计划是通过 iFrame 加载 forminput 元素,通过 iFrame 的 src URL,将使用模板语言以编程方式创建。这已经很丑了。

然后,我在 iFrame 中使用 JavaScript 从查询字符串中获取参数并将它们添加到 input 元素(type="hidden",以及 name 属性和 action URL 表单 posted)。

然后我在 form 上设置 target="_top" 以便它在提交时重新加载整个页面。为了让所有这些都起作用,您需要在 AMP-IFRAME 元素上添加以下属性:allow-scripts allow-forms allow-top-navigation.

我曾想到使用 AJAX,但由于某种 CORS 问题,老实说我懒得去修复,它在这条路上变得更加混乱。我还想到我可能做错了,可能有一些超级简单的方法。

这种技术使我能够创建可用的表单,同时仍能通过 AMP 验证。问题是:真的值得吗?您显然可以使用您想要的任何服务器端技术,但它可能与您当前桌面网站的实施有很大不同,并且可能需要相当多的时间来开发、测试和加强安全性。

我个人认为不值得多花时间。我相信 AMP 项目最终会包含一个 amp-form 自定义元素,当他们开发出足够的方法来限制它们的使用时。