单页网站方法

时间:2018-01-10 13:47:40

标签: javascript jquery html5

我目前正在开发一个网站,我想收集专家'那里的意见是为了知道我是否采取了正确的方向,因为我在两天前开始开发之前对网页设计知之甚少。我希望这个问题不是太模糊,可以用实际的事实来支持,而不仅仅是“意见”

对于互联网上提供的众多网站,我的所有网页都有永久的页眉和页脚。因此,当我反思如何设计网站时,我提出了两个选择:

  1. 创建一个HTML页眉和页脚,我将在每个页面中重新导入
  2. 使用页眉和页脚创建模板页面,并仅导入/修改该页面中的内容(在我的案例中的'部分'标记内)。
  3. 错误或公正,我选择了第二个选项,因为我认为它会更有意义并且实际上简化了内容HTML文件'因为它基本上只需要包含实际的文章。我还认为这样可以提供更简洁的方法和更流畅的导航体验,因为当从一篇文章转换到另一篇文章时,不会观察到页面转换(就像整个浏览体验在一个页面中完成一样)。

    但是,这个解决方案有自己的问题。例如,由于URL保持不变,如何通过URL的方式与朋友分享一篇文章?不可能......因此,我实施了一个解决方案。这个想法很简单:通过附加一些参数来修改URL。它工作正常,但我想知道它是否不会过度使用。此外,我担心每当修改URL时页面都会被刷新(只是为了改变一个参数......)。是这样的吗?

    这是我的脚本。如果没有参数传递给URL,网站将以英语显示主页并将这些参数添加到URL(page = home和lang = en)。我注意到,使用这种方法页面加载了两次...(当我修改上面提到的URL时,它会被重新加载......)。我该如何避免这种行为?

    <script>
        $(document).ready(function() {
            var params, mainUrl;
            mainUrl = window.location.href;
            params = window.location.search.substr(1);
    
            if (!params) { //if params is empty
                linkName = "home-en";
                window.location.href = mainUrl + "?page=home&lang=en";
            } else {
                var n = params.search("page=") + 5;
                var m = params.search("&lang=");
                linkName = params.substr(n, m - n);
                lang = params.substr(m + 6);
            }
            $('#' + lang).addClass('selected');
            document.body.className = lang;
            document.body.className = 'en'
    
            $("#included-content").load(linkName + "-" + lang + ".html");
    
            $('.link').click(function(element) {
                newLinkName = $(this).attr('id');
    
                window.location.href = mainUrl.replace("page=" + linkName, "page=" + newLinkName);
                $("#included-content").load(linkName + "-" + lang + ".html");
    
                return false;
            });
    
            var buttons = $('#languages button');
            buttons.on('click', function(e) {
                buttons.removeClass('selected');
                $(this).addClass('selected');
                var newlang = $(this).attr('id');
                window.location.href = mainUrl.replace("&lang=" + lang, "&lang=" + newlang);
    
                $("#included-content").load(linkName + "-" + lang + ".html");
            });
        });
    </script>
    

    这是身体:

    <body>
        <div id="wrapper">
            <header>
                <h1> Title</h1>
                <div id="languages">
                    <button id="en" type="button" onclick="document.body.className = 'en'">En</button>
                    <button id="fr" type="button" onclick="document.body.className = 'fr'">Fr</button>
                </div>
            </header>
            <nav>
                <ul lang="en">
                    <li><a href="" class="link" id="home">Home</a></li>
                    <li><a href="" class="link" id="books">Books</a></li>
                    <li><a href="" class="link" id="articles">Articles</a></li>
                    <li><a href="" class="link" id="biography">Bio</a></li>
                </ul>
                <ul lang="fr">
                    <li><a href="" class="link" id="home">Accueil</a></li>
                    <li><a href="" class="link" id="books">Livres</a></li>
                    <li><a href="" class="link" id="articles">Articles</a></li>
                    <li><a href="" class="link" id="biography">Bio</a></li>
                </ul>
            </nav>
            <section>
                <div id="included-content"></div>
            </section>
            <footer>
                <p> Author &copy; all rights reserved</p>
            </footer>
        </div>
    </body>
    

    列表中的 id 与HTML文件共享其名称(例如home-fr.html或tradition-en.html)。

    所以,我的问题基本上是要知道它是否是一个不错的方法,如果它在真正的网站应用程序中做得类似的话?我知道要处理网站语言,将参数传递给URL是正确的方法,但我担心它会使页面的所有内容过于复杂。我还想知道它在导航体验方面是否确实提供了优势。我认为,现在可能在从一个页面切换到另一个共享相同页眉和页脚的页面时,浏览器可以将它们保留在页面上,并且不需要擦除然后重新绘制它们。

    我希望我能清楚地说出自己的想法。这种方法是否可行?

1 个答案:

答案 0 :(得分:2)

您应该尝试在网址中使用哈希#,以便您的应用知道您要查找的网址,例如

example.com /#/共享/交/ 546

使用javascript可以通过

访问
window.location.hash

所以你只需将它传递给你的应用程序

例如

var url = window.location.hash;
//jquery script
jQuery('#appbody').load(url);

我希望这种见解很有帮助,因为这会阻止任何可能的刷新并启用链接分享