JS - 关于完整 AJAX 网站的几个问题 - GoogleBot、优化、模板答案

【问题标题】：JS - a few questions about complete AJAX web-site - GoogleBot, optimization, templatesJS - 关于完整 AJAX 网站的几个问题 - GoogleBot、优化、模板
【发布时间】：2012-06-03 08:27:11
【问题描述】：

我正在编写基于 AJAX 的完整网站。现在我正在做页面导航和内容显示而无需重新加载页面。这就是我决定这样做的方式：

<html>
<head>
    <!--CSS-->
        .hidden {display:none;}
</head>
<body>
    <!--Menu bar-->
    <a href="link_to_real_page_for_JS-disabled-users" onclick="loadPage1(); return false;">Page1</a>
    <a href="link_to_real_page_for_JS-disabled-users" onclick="loadPage2(); return false;">Page2</a>
    <a href="link_to_real_page_for_JS-disabled-users" onclick="loadPage3(); return false;">Page3</a>

    <!--Content blocks for different pages-->
    <div class="current" id="page1">
        <!--Page 1 content-->
    </div>
    <div class="hidden" id="page2">
        <!--Page 2 content-->
    </div>
    <div class="hidden" id="page3">
        <!--Page 3 content-->
    </div>

    <!--JS for managing pages links-->
    <script>
        $(document).ready(function() {
        });
        function loadPage1() {
            $('.current').hide();
            $('#page1').show().addClass('current');
        };
        function loadPage2() {
            $('.current').hide();
            $('#page2').show().addClass('current');
        };
        function loadPage3() {
            $('.current').hide();
            $('#page2').show().addClass('current');
        };
    </script>
</body>

1)首先，我们显示 page1 块的类为“current”，其他块的类为“hidden” 2)当我们点击loadPage2()时，我们找到当前活动的块（通过它的“current”类）并隐藏它，并显示page2块。

NB。我必须为第一个页面块使用隐藏的附加类，因为 $(document).ready(function() {$('#page2').hide();$ ('#page3').hide();});似乎有点慢，用户可能会在页面完全加载之前注意到一些奇怪的东西。

虽然我的解决方案有效，但也存在一些问题：

*1)*实际上，对于没有 JS 的用户，我仍然需要做真正的页面，只是显示不同的起始块。这意味着我将不得不做很多相似的页面，但有一个区别——隐藏和显示不同的起始块。如果 Google 抓取我的网站，它会不会认为我的网站内容加倍并禁止它？

*2)*例如，第 2 页有大图。当页面开始时 - 它是隐藏的。但是，即使一开始不会显示，也需要很长时间才能加载它。如何管理它？按需加载内容？我的意思是ещ创建6个模板文本文件，当用户请求页面时，JS从文件中加载页面内容并将其放入div中？

可能看起来有点乱，但提前谢谢！

【问题讨论】：

标签： javascript jquery ajax templates

【解决方案1】：

首先，我建议您在此处阅读有关可抓取 Ajax 页面的文档
https://developers.google.com/webmasters/ajax-crawling/

对于您的示例，这是不好的做法，Google 不喜欢链接中的 onclick="loadPage1(); return false;

<a href="link_to_real_page_for_JS-disabled-users" onclick="loadPage1(); return false;">Page1</a>
<a href="link_to_real_page_for_JS-disabled-users" onclick="loadPage2(); return false;">Page2</a>
<a href="link_to_real_page_for_JS-disabled-users" onclick="loadPage3(); return false;">Page3</a>

更好

<a href="link_to_real_page_for_JS-disabled-users" data-page="#page1">Page1</a>
<a href="link_to_real_page_for_JS-disabled-users" data-page="#page2">Page2</a>
<a href="link_to_real_page_for_JS-disabled-users" data-page="#page3">Page3</a>

然后像这样修改你的脚本代码

<script>
//$(document).ready alternative
$(function () {
    //cache links so you can access faster for later use.
    var $links = $("a[data-page]").on("click", function (e) {
        var $this = $(this),
            page = $this.data("page");
        $(page).addClass("current")
            .siblings("div.current").removeClass("current").hide()
            .end().show();
        e.preventDefault();
    });
});
</script>

你可以进一步优化代码，顺便说一下我没有测试代码。

【讨论】：

Ümit，如果我理解正确， data-page="#page1" 技巧可以帮助我在 Google 找到这些链接时摆脱页面复制，它会认为是 3 个不同的页面？谢谢！