目前,我的应用程序运行在Backbone.js上。
该应用程序可以很好地处理#
片段,但由于URL中的#
,它不能被Google机器人抓取。
因此,我决定删除#
,使其更便于SEO。我启用了历史pushState API,并添加了代码来阻止默认操作。以下是我初始化路由器示例时的代码片段。
Backbone.history.start({pushState: true});
$(document).on("click", "a", function(e)
{
var href = $(e.currentTarget).attr('href');
var res = Backbone.history.navigate(href,true);
//if we have an internal route don't call the server
if(res)
e.preventDefault();
});
此外,我修改了Apache配置以启用mod_rewrite,以便处理无状态请求,如刷新页面或在新的浏览器窗口中打开页面。
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteRule ^/([a-zA-Z0-9]+)[/]?$ /index.html?pathtyped=$1 [QSA,L]
</IfModule>
我所面临的问题是,应用程序可以很好地处理短的URL片段,但不能处理大的URL片段。这意味着以下URL可以工作:http:server_name/#view1
-〉http:server_name/view1
http:server_name/#view2
-〉http:server_name/view2
http:server_name/#view3
-〉http:server_name/view3
但带有长片段的URL不起作用。(以下不起作用):http:server_name/#view1/option1
-〉http:server_name/view1/option1
http:server_name/#view2/option1/option2
-〉http:server_name/view2/option1/option2
任何解决问题的建议都将受到高度赞赏。谢谢!
3条答案
按热度按时间3htmauhk1#
我在谷歌上搜索了一下,最终发现了this gist。我用一个最小的Backbone.js应用程序测试了它,它似乎支持无限长的无状态进入应用程序:
我不得不做一些阅读来完全理解
RewriteCond
语句,特别是!-f
、-d
和!index
所做的事情。除了!index
之外,所有的东西都是有意义的。给予看,如果适合你就告诉我。
编辑:我发现上面的方法只适用于我Mac上安装的Homebrew版本的Apache2,而不适用于Debian。
我还提供了一个完整的现代Backbone.js应用程序示例,其中包含pushState和无状态条目here。
7uhlpewt2#
我 猜 应用 程序 可以 在
http://server_name/viewX
这样 的 单一 URL 组件 场景 中 工作 , 因为 您 定义 的Backbone.Router
与 URL 匹配 , 并且 成功 地 使 回调 定义 为 呈现viewX
( 现代 浏览 器 和 网络 爬虫 不 使用#
, 旧 版 浏览 器 使用#
) 。 因此 , 当 它 不 工作 时 ,我 可以 想象 , 定义 的 路由 模式 与 预期 的 嵌套 URL 组件 不 匹配 , 并且 不会 触发 呈现 回调 。您 可以 查看 一下
Backbone.Router.routes
散 列 , 并 确保 您 的 模式 在 每个 深度 都 与 预期 的 URL 组件 匹配 。 请 查看 有关 路由 的 Backbone.js 文档 , 特别 是 有关 可选 和 嵌套 URL 组件 的 示例 , 并 检查 您 的 匹配 模式 是否 正确 。 例如 , 一 个 路由 散 列 包含 :中 的 每 一 个
应 匹配 以
view
( 或#view
) 开头 并 可选 地 包含 一 个 或 两 个 子 参数 的 URL , 例如 :view/1
view/1/a
#view/1
#view/1/a
个在 上面 的 例子 中 ,
option1
将 被 分配1
,option2
将 被 分配a
, 并 将 被 传递 给 回调 。使用 如下 的 路由 哈希 :
格式
除了 第 一 个
/
之外 的 所有 内容 都 将 匹配 并 被 分配 给option1
, 例如 :view/1/a
#view/1/a
在 上面 的 两 种 情况 下 ,
option1
都 将 被 分配 字符 串1/a
, 并 将 被 传递 给 回调 。xxb16uws3#
嗯......也许这是有帮助的(基于phantomJS):http://traviswimer.com/blog/backbone-seo