AMP适用于复杂页面 [英] AMP for complex page

问题描述

我有一个具有复杂UI(如评论系统和投票系统)的现有文章网站.如果我创建Google AMP页面，是否还需要包括所有复杂的UI(投票，评论系统)?如果我没有在Google AMP中添加文章，访问者不仅不能查看文章，而且不能与我网站的功能进行交互吗?在现有页面之上重新创建页面的另一个amp版本不是那么繁重的工作吗?

I have existing articles website with complex UI like commenting system and voting system. If I create Google AMP page, do I need to include all complex UI (voting,commenting system) as well? If I do not include that in Google AMP, aren't visitors only able to view the article but cannot interact with features that my website have? Aren't this too much work to re-create another amp-version of pages on-top of existing pages?

推荐答案

这取决于您的网站的复杂程度，但是您可能想做的就是遵循GitHub的示例，并在桌面站点上添加一些高级功能.我认为AMP页面应该精简为仅包含文章内容，至少要等到AMP项目为表单提供自定义元素".页面顶部或底部应该有一个清晰的使用桌面网站"链接/按钮，以便希望与该网站进行完全交互的用户可以这样做.

It depends how complex your website is, but what you will probably want to do is follow GitHub's example and tuck some advanced features away on a desktop site. I think AMP pages should be stripped down to just the article content, at least until the AMP project offers a Custom Element for forms. There should be a clear "use desktop website" link/button at the top or bottom of the page so that those wishing to fully interact with the website can do so.

这使核心内容能够以最佳形式和最佳速度提供给移动用户，并且移动用户经常在运输过程中，因此他们可能不介意不必等到他们在桌面上发表评论或投票在某事上.然后，那些仍在使用移动设备但仍希望在其移动设备上发表评论或投票的用户可以通过切换到桌面站点来进行此操作.

This enables the core content to be served to mobile users in an optimised form and at an optimal speed, and mobile users are frequently in transit so they might not mind having to wait until they're at their desktop to comment or vote on something. Then those users who are using a mobile device but still wish to comment or vote on their mobile device can still do so by switching to the desktop site.

之所以这样说，是因为我认为GitHub在代码编辑，问题/PR讨论等方面具有很多潜在的交互作用，考虑到没有太多人会使用GitHub，因此将其加载到移动设备上可能是过大的选择在移动设备上的东西.他们将阅读文章和代码，但并不一定在那一刻进行交互.

I say this because I think GitHub has a great many potential interactions with code editing, issue/PR discussions and so on, and that might be overkill to load up on a mobile device considering not that many people are going to use those things on a mobile device. They're going to read posts and code but not necessarily interact at that very moment.

之所以这样说，是因为我一直在使用 AMP-HTML(以及后端的Perl)来开发留言板/论坛，以测试使用iframe使用amp-iframe.

I also say this because I've been developing a message board/forum using only AMP-HTML (and Perl on the back-end) to test what's actually feasible using iframes for forms using amp-iframe.

好消息是它可以做到，确实可以工作.我已经能够使用iframe发布新主题和回复等.坏消息是实施...

The good news is that it can be done, it does work. I've been able use iframes for posting new threads and replies and so on. The bad news is the implementation...

我想出的计划是通过iFrame加载form和input元素，并通过iFrame的src URL中的查询字符串传递诸如帖子号和作者ID之类的基本参数，该参数将通过编程方式使用模板语言.这已经很丑了.

The plan I came up with was to load form and input elements via iFrame, passing down essential parameters like post number and author ID via query string in the iFrame's src URL, which would be created programmatically using a templating language. This is already ugly.

然后，我在iFrame中使用JavaScript来获取查询字符串中的参数，并将其与name属性和action URL一起添加到input元素(类型="hidden")中.表单正在发布).

Then, I use JavaScript within the iFrame to grab the parameters from the query string and add them to input elements (type="hidden", along with the name attribute and the action URL to which the form is being posted).

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

Then I set target="_top" on the form so it reloads the whole page upon submission. In order for all of these things to work, you need the following attributes on your AMP-IFRAME element: allow-scripts allow-forms allow-top-navigation.

我想到了使用AJAX的想法，但由于某种CORS问题，使我在这条路上变得更加混乱，老实说，我不愿意解决此问题.我也想到，我可能正在处理所有错误，并且可能有一些超级简单的方法.

The thought had occurred to me to use AJAX but it became even messier down that road due to some kind of CORS issue that I honestly couldn't be bothered to fix. The thought also occurred to me that I'm probably going about it all wrong and there's probably some super simple way of doing it.

此技术使我可以创建可用的表格，同时仍通过AMP验证.问题是:真的值得吗?您显然可以使用所需的任何服务器端技术，但是它可能与当前桌面网站的实现有很大不同，并且就安全性而言，开发，测试和强化可能需要花费一些时间.

This technique allows me to create usable forms while still passing AMP validation. The question is: is it really worth it? You could obviously use any server-side tech you want, but it would probably differ greatly from the implementation of your current desktop website and it might take a fair bit of time to develop, test and harden in terms of security.

我个人认为这是不值得的额外时间.我相信，当AMP项目已经开发出足够的方法来限制其使用时，最终将包含一个amp-form自定义元素.

I personally think it's not worth the additional time. I believe the AMP project will eventually include an amp-form Custom Element when they have developed sufficient means to restrict their use.

这篇关于AMP适用于复杂页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！