您如何为网络爬虫和单页应用程序用户制作网站？

Question

我会非常具体。

我有一个前端... http://www.eroticahub.site（不是色情）

如果你有 javascript，它会变成... http://www.eroticahub.site/#!body=home [使用 jquery/ajax 加载渲染]

如果您没有 javascript，它仍然存在... http://www.eroticahub.site/

然后你点击底部的“隐私”。

如果你有 javascript，它会将文件 /body/privacy.html 加载到主 div 中，你会得到... http://www.eroticahub.site/#!body=privacy [使用 jquery/ajax 加载渲染]

如果你没有 javascript，你只会得到... http://www.eroticahub.site/body/privacy_body.html

^ 我只是在获取 jquery/ajax 插入到模板中的文件。

这不是一个很好的解决方案。我想要一个永远不会完全刷新/重新加载但被每个主要搜索引擎完全索引的页面。

有没有可能做这样的命令：

For each link in page, 
  if ( user_has_javascript )
    return page_with_javascript;
  else
    return serverside_render( page_with_javascript );

这样，任何没有 javascript（包括网络爬虫）的用户都将获得页面的纯 html/css 版本。我打算将 Ruby 用于我的后端。有没有人有一个干净的解决方案来解决这个问题？

Answer 1

好的。假设用户直接访问... eroticahub.site/privacy，然后他们单击链接转到 eroticahub.site/legal 链接如下所示：

<a href=eroticahub.site/legal.html onclick=function(){window.location.hash = 'legal.html';return false;}> 
    Link 
</a>

因此，如果用户没有 javascript，他们会转到 eroticahub.site/legal.html 并从服务器请求一个全新的页面，如果他们有 javascript，他们会转到 eroticahub.site#legal.html 并且不会请求来自服务器的全新页面。

# 将触发哈希更改事件，该事件将调用一个带有大 switch 语句的函数，其中包含 (window.location.hash === "legal.html")。此条件将触发使用 jquery/ajax 将 sn-ps/legal.html html 加载到网页中。

如果链接指向 eroticahub.site/legal.html，后端将提供与 eroticahub.site/privacy.html 相同的模板，但中间部分包含来自 sn-ps/privacy.html 的单词

如果用户有 javascript，中间部分的渲染与用户没有 javascript 相同。只有当用户单击链接时，才必须区分他们是否有 javascript。 AJAX 必须在 eroticahub.site/privacy 的内容 div 中的 [替换] 静态内容之上加载动态内容 (#legal)，然后这将被完全相同的 div 中的更多 html 替换。必须保持这样的约定：

<a href=eroticahub.site/legal.html onclick=function(){window.location.hash = 'legal.html';return false;}> 
    Link 
</a>

<a href=eroticahub.site/privacy.html onclick=function(){window.location.hash = 'privacy.html';return false;}> 
    Link 
</a>

<a href=eroticahub.site/user_content/stories.html onclick=function(){window.location.hash = 'user_content/stories.html';return false;}> 
    Link 
</a>

等等

Answer 2

首先让所有内容都使用常规 URL 而不是 JavaScript。你希望你的 JS 是 unobtrusive，所以将它构建在一个工作的、普通的 HTML + 服务器端解决方案之上。

接下来编写从服务器获取所需数据的 JavaScript 并更新文档以匹配另一个页面。

该 JavaScript 应使用 pushState 更改 URL，以匹配您在本地使用 JavaScript 生成的服务器页面的 URL。

注意：pushState 替换了 hashbang URI。它是为您描述的用例设计的标准（而 hashbang 是 ugly hack）。

将该 JavaScript 绑定到您的链接点击/表单提交/等事件。

为popstate event 添加listener，这样当用户单击返回时，您可以将页面恢复到之前的状态。