Javascript 网站浏览网页的最佳方式

我是Javascript新手，正在练习创建自己的网站。 我想要一个建议，这是最好的方式浏览网页。 我有

• index.html
• pages/home.html
• pages/about.html
• pages/contact.html

最简单的方法是链接到每个页面，但这意味着我需要在每个页面上回复相同的模板，方法是一直粘贴相同的代码（我认为这不是很聪明）。此外，我的网站的URL将是，例如， 而且不是很优雅；我想要更多类似（不带“.html”）

我还尝试使用JQuery中的load（）函数，这样我就有了索引页

<div id="pageContentHere"></div>

并通过JQuery将页面内容加载到div中；这是非常有用的，因为我只写一个模板，但我的URL将始终是，如果有人想直接转到关于页面，将没有URL链接

---

您能建议我如何以更智能的方式进行吗？

首先，感谢您注意到当前实现中的一些问题。最近的一种方法（尽管人们可能会考虑重量级）是单页应用程序的想法。是SPA框架的一个示例，它可能更适合像您这样的静态站点。它们为您提到的两个问题提供了解决方案，如客户端路由和可重用组件

---

您还可以研究JavaScript模板引擎（请参见答案）。

我要感谢所有人提供了非常有用的答案； 最后，我使用了这个解决方案，我认为这是一个很好的折衷方案：

我将所有页面放在一个页面中，并通过Javascript将它们全部隐藏起来，只显示我需要的一个页面：

（我实际上可以通过JQuery或AngularJS填充pages div的内容。它们不需要物理上在同一个文件中）

HTML

JS

我知道这不是最优雅的方式，但我希望它可能对某人有所帮助。 如果你有任何建议，当然欢迎

<div id="allPages">
    <div id="MainPage" class="page" style="background:red">
    Home page
    <ul>
        <li><a href="#SecondPage">Go to second page</a>
        <li><a href="#ThirdPage">Go to third page</a>
        <li><a href="#ForthPage">Go to forth page</a>
    </ul>
    
    </div>
    
    <div id="SecondPage" class="page" style="background:yellow">
    This is second page
    <ul>
        <li><a href="#MainPage">Go to home page</a>
        <li><a href="#ThirdPage">Go to third page</a>
        <li><a href="#ForthPage">Go to forth page</a>
    </ul>


    </div>
    
    <div id="ThirdPage" class="page" style="background:blue">
    This is third page
    <ul>
        <li><a href="#MainPage">Go to home page</a>
        <li><a href="#SecondPage">Go to second page</a>
        <li><a href="#ForthPage">Go to forth page</a>
    </ul>
    </div>
    
    <div id="ForthPage" class="page" style="background:green">
    This is forth page
    <ul>
        <li><a href="#MainPage">Go to home page</a>
        <li><a href="#SecondPage">Go to second page</a>
        <li><a href="#ThirdPage">Go to forth page</a>
    </ul>
    </div>
</div>

#allPages {
    position: absolute;
    width: 100%;
    /* display: flex; */
    height: 100%;
}

.page {
    border: 1px solid red;
    width: 100%;
    min-height: 100%;
    display: inline-block;
}

$( document ).ready(function() {
    var url;
    url = getUrl();
    goToClickedPage(url)
    
    $("#allPages ul li a").click(function(){
        var linkTo;
        /*
        I cannot get the id from getUrl() because when I click I'm still on the "previous page". So I must get the attribute from the link
        */


        linkTo = $(this).attr("href");
        goToClickedPage(linkTo);
    });

});

function getUrl(){
    /*
    From here I get the focused page by the url.
    The URL will be something like www.mysite.com/#SecondPage
    location.hash will return me, in this case '#SecondPage' which is exactly the id of the page I want to go.
    The problem will be for the homepage which will only be www.mysite.com which will return an empty string. In this case I check and, if I'm in homepage, I set manually the URL to be like the Id of the homepage
    */


    var url;
    url = ($(location.hash).length===0) ? "#MainPage":location.hash;
    console.log(url);
    return url;
}

function goToClickedPage(url){

/*
From here I hide all pages except the one with the URL id I what to see
*/
    $("#allPages .page").hide();
    $(url).show();
}