应该如何在内容页面选项卡中实现Hashbang(AJAX)


How should implement Hashbang (AJAX) in content page tabs?

你们中的一些人可能知道,谷歌现在正在抓取AJAX。到目前为止,该实现是优雅的,但至少它仍然适用于雅虎和Bing AFAIK。

上下文:我的网站由Wordpress和HTML5驱动。自定义帖子类型具有树类型的内容,这些内容由 AJAX 驱动。在完全了解如何实现它们之前,我不要使用hashbangs(#!)的解决方案是相当"不雅的"。每个链接作为 HREF 链接到 *site.com/article-one/?tab=first_tab*,显示所选选项卡的内容 ( <div>Content...</div> )。喜欢这个:

<a href="http://site.com/article-one/?tab=first_tab" data-tab="first_tab">This First Tab</a>

您可能注意到,data-tab 是 JavaScript 使用 AJAX Get 发送的值,它获取相关内容并在容器内呈现。另一方面,服务器获取变量并执行<?php get_template_part('tab-first-tab'); ?>来传递内容。

关于淫秽,好吧,我可以看到谷歌和其他搜索引擎将获取*http://site.com/article-one/?tab=first_tab*而不是 http://site.com/article-one/,使用户来到该URL,而不是显示自动选择选项卡内容的主页。

现在的问题是避免这种情况的实现。

Hashbang:从我学到的,我应该这样做。

  1. HREF应该变得site.com/article-one/#!first-tab
  2. JS应该提取href的"第一个选项卡"并将其传递给$_GET(只是为了不使用"data-tab")。
  3. JS应该将URL更改为site.com/article-one/#!first-tab
  4. JS应该检测URL是否#!first-tab,并显示选定的选项卡而不是默认选项卡。

现在,对于服务器端实现,这就是我在树林中迷路的地方。

  1. Wordpress将如何处理site.com/article-one/?_escaped_fragment_=first-tab
  2. 我必须更改 .htaccess 中的某些内容吗?
  3. 什么应该有 HTML 快照?我的猜测是所有网站,但显示请求的选项卡,而不是仅显示内容。

我认为我可以分离Wordpress在检测到_escaped_fragment_时将处理的内容。如果请求,例如Google,它将显示所有内容以及所选内容,如果没有,则因为AJAX正在请求它并且仅显示内容。这应该是对的吧?

我要说第三人称。

由于这没有回应,我有一个很好的为什么你不应该这样做。是的,与Twitter打击它们的原因相同:

http://danwebb.net/2011/5/28/it-is-about-the-hashbangs

与其进行哈希爆炸,不如创建普通的 URI。例如,带有摘要选项卡的文章应该是"site.com/article/summary",如果它是弹出的默认文章(或者已经请求),它也应该使用 pushState() 更改为该 URI。

如果用户选择选项卡"练习",则在站点通过 AJAX 加载内容时,URL 应使用 pushState() 更改为"site.com/article/exercises",同时您仍将原始 href 保留为"site.com/article/exercises"。如果没有 JavaScript,用户仍然应该看到内容 - 不仅是内容,还有选择了选项卡的整个页面。

为此,应该对 .htaccess 进行一些编辑以处理 URL 中的/[tab]。