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

Question

我会非常具体。

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

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

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

然后点击底部的"Privacy"。

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

如果您没有 javascript，您将获得... http://www.eroticahub.site/body/privacy_body.html

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

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

是否可以发出这样的命令：

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 然后他们单击 link 转到 eroticahub。site/legal link 看起来像这样：

<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 并且不会从服务器请求一个全新的页面。

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

如果 link 转到 eroticahub.site/legal.html，后端将提供与 eroticahub.site/privacy.[=37= 相同的模板]，但不同的中间部分包含来自 snippets/privacy.html

的单词

如果用户有 javascript，则中间部分的呈现方式与用户没有 javascript 的情况相同。只有当用户点击link时，才需要区分是否有javascript。 AJAX 必须在 eroticahub.div 的内容 div 中的静态内容 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 以匹配您在本地生成的服务器页面的 URL JavaScript.

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

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

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

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

How do you make website for both web crawlers and single page application users?

html

javascript

ajax

search-engine

single-page-application