Javascript 跨站点使用通用html/css格式的模板
我在一个网站上工作，我对这个比较陌生。 我制作了一个带有导航栏和标题的主页，以及一些可以导航到的页面 一切都正常，但当我看源代码时，我对头文件中的所有元数据、嵌套的导航栏下拉菜单以及每个html文件中的其他重复内容所造成的剪切冗余感到沮丧 有没有办法创建一个模板，或者将这些嵌套非常密集的元素分解到它们自己的文件中，这样当我想将它们放在标记中时，我可以使用对该文件的引用，而不是所有这些代码？或者我应该认为这是一个非问题并继续下去？ 我觉得我正在考虑的这个解决方案将涉及函数和JS。如果是，考虑到默认情况下有些人在浏览器中禁用JS，这是一个理想的解决方案吗 注意：我通常在python中工作，我喜欢写一些有用的东西，但它们非常简洁。我怀疑这种倾向正在逐渐消失在我的web开发中，并使我想在有效的时间和地点选择不雅观的解决方案 以下是index.html供参考：Javascript 跨站点使用通用html/css格式的模板,javascript,html,css,Javascript,Html,Css,我在一个网站上工作，我对这个比较陌生。 我制作了一个带有导航栏和标题的主页，以及一些可以导航到的页面 一切都正常，但当我看源代码时，我对头文件中的所有元数据、嵌套的导航栏下拉菜单以及每个html文件中的其他重复内容所造成的剪切冗余感到沮丧 有没有办法创建一个模板，或者将这些嵌套非常密集的元素分解到它们自己的文件中，这样当我想将它们放在标记中时，我可以使用对该文件的引用，而不是所有这些代码？或者我应该认为这是一个非问题并继续下去？ 我觉得我正在考虑的这个解决方案将涉及函数和JS。如果是，考虑到默认
<!DOCTYPE>
<html lang="en" dir="ltr" class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta http-equiv="content-language" content="en-us">
<meta name="author" content="*********">
<meta name="viewport" content="width=device-width,minimum-scale=1">
<meta name="robots" content="noindex,nofollow">
<title>IVDb~ The hogspot sausage Database</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div id="header">
<a href="index.html"><img id="logo" src="logo.png" alt="the hogspot sausage Database logo"></img></a>
<input id="searchbar" type="text"><button>Search</button><a href="sign_in.html"><button>Sign in</button></a>
</div>
<nav>
<ul id="menu">
<li><a href="watchlist.html">Watchlist</a>
<ul id="sub-menu">
<li><a href="#New">New Releases</a></li>
<li><a href="#Pop">Popular Sausages</a></li>
<li><a href="#Highly">Highly Rated</a></li>
<li><a href="#Recent">Recent</a></li>
</ul>
</li>
<li><a href="forum.html">Forum</a>
<ul id="sub-menu">
<li><a href="#">Just Posted</a></li>
<li><a href="#">Hot Threads</a></li>
<li><a href="#">Admin Favorites</a></li>
<li><a href="#">Beansprout</a></li>
</ul>
</li>
<li><a href="reccomendations.html">Reccomendations</a>
<ul id="sub-menu">
<li><a href="#">This Week's Select Sausages</a></li>
<li><a href="#">Browse Topics</a></li>
<li><a href="#">Well traveled reviews</a></li>
<li><a href="#">this Month</a></li>
</ul>
</li>
<li><a href="games.html">Sausages</a>
<ul id="sub-menu">
<li><a href="#">Platformer</a></li>
<li><a href="#">RPG</a></li>
<li><a href="#">Combat</a></li>
<li><a href="#">Sports</a></li>
</ul>
</li>
<li><a id="r1" href="rate.html">Rate it!</a>
<ul id="sub-menu">
<li><a href="#">Submit a rating or review</a></li>
<li><a href="#">Search existing</a></li>
</ul>
</li>
</ul>
</nav>
<div id="cycle">
<!--9/19 should put each image in a figure tag with rate and buy button/links aligned directly below--->
<img id="first" src="">
<img src="">
<img src="">
</div>
<h2>Latest News</h2>
<div id="blog">
<div class="mySlides">
<div class="numbertext">1 / 3</div>
<img src="videogames\game5.jpg" style="width:100%">
<div class="text">some content</div>
</div>
<div class="mySlides">
<div class="numbertext">2 / 3</div>
<img src="videogames\game4.jpg" style="width:100%">
<div class="text">some content</div>
</div>
<div class="mySlides">
<div class="numbertext">3 / 3</div>
<img src="videogames\game10.jpg" style="width:100%">
<div class="text">some content</div>
</div>
<!-- Next and previous buttons -->
<!--took them out cause they were messing with my css-->
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
</div>
<h2>Just Released</h2>
<div id="cycle">
<img id="first" src="">
<img src="">
<img src="">
</div>
<footer>
Legal stuff: copyright <br>
social media icons <br>
other footer details <br>
</footer>
</body>
</html>
IVDb~ hogspot香肠数据库
搜寻
-
-
-
-
-
最新消息
1/3
一些内容
2/3
一些内容
3/3
一些内容
刚刚释放
法律事务：版权
社交媒体图标
其他页脚详细信息
<html lang="en" dir="ltr" class="no-js">
<head>
metadata here
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<nav>drop down menu here </nav>
<h4>Create an account by entering your info below</h4>
<form action="POST">
<!----we should use css to center-align these input fields, rather than  ----->
Full name <input type="text"><br>
User name <input type="text" name="" id=""><br>
Email Address <input type="text" name="" id=""><br>
Password <input type="text"><br>
Confirm Password <input type="text"><br>
<button>Submit</button>
</form>
</body>
</html>
这里的元数据
这里有下拉菜单
通过在下面输入您的信息创建一个帐户
全名
用户名
电子邮件地址
密码
确认密码
提交
函数模板（）{
document.getElementById（“某个容器id”）.innerHTML='此处的html代码'；
}
template不过，我应该补充一句警告，因为字符串编码很难看，而且容易出错，您可能会遇到前端库已经解决的常见问题。您可以手动创建HTML实体并将它们分配为彼此的亲属，但可以说这比字符串编程更麻烦。您遇到的这个问题是一个常见问题，已经开发了几种解决方案来减少冗余。正如您所暗示的，它们通常涉及将共享逻辑提取到一个单独的、可重用的（
fetch('/static/templates/navbar.html').then(response => {
if(response.ok)
return response.txt();
}).then(page => {
document.body.innerHTML += page;
});
const nav = document.createElement('nav');
const ul = document.createElement('ul');
ul.id = 'menu';
const li01 = document.createElement('li');
const a01 = document.createElement('a');
a01.href = 'watchlist.html';
a01.innerText = 'Watchlist';
li01.appendChild(a01);
ul.appendChild(li01);
nav.appendChild(ul);