网站浏览网页的最佳方式

Question

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

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

最简单的方法是链接到每个页面，但这意味着我需要通过一直粘贴相同的代码来向每个页面回复相同的模板(我认为这并不明智(。此外，我的网站的URL将是，例如，www.mysite.con/pages/about.html它不是很优雅；我想要更多类似www.mysite.com/about的东西(没有".html"(

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

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

并通过JQuery将页面内容加载到div中；这非常有用，因为我只写了一个模板，但我的URL永远是www.mysite.com，如果有人想直接转到about页面，就没有URL可以链接。

你能建议我如何做得更聪明吗？

Answer 1

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

您还可以研究JavaScript模板引擎(请参阅此答案(。

Answer 2

我想感谢大家的回答，这些回答非常有用；最后，我使用这个解决方案，我相信，这是一个很好的折衷方案：

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

(我实际上可以通过JQuery或AngularJS填充页面div的内容。它们不需要在同一个文件中(。

HTML

<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>

CSS

#allPages {
position: absolute;
width: 100%;
/* display: flex; */
height: 100%;
}
.page {
border: 1px solid red;
width: 100%;
min-height: 100%;
display: inline-block;
}

JS-

$( 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();
}

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