为多个页面上的导航栏创建可重用的 html
Posted
技术标签:
【中文标题】为多个页面上的导航栏创建可重用的 html【英文标题】:Creating reusable html for navigation bar on multiple pages 【发布时间】:2011-06-04 04:13:21 【问题描述】:我认为拥有可重用代码会很方便,尤其是导航栏,因为它在我的所有页面中都是相同的。这样,当发生更改时,我就不必浏览每个页面并单独手动编辑每个页面。
似乎可以使用 iframe,但我试过了,但整个页面的样式都不正常了。我可以修复它,但我想知道是否有类似的东西。
如果这样的东西可以工作,那就太棒了:
var navbar = document.getElementById('navbar'); navbar.innerhtml = url('navigation.txt');
我目前在我的网站上离线工作,所以我认为我无法发出 xmlhttp 请求。正确的?至少我还没有让任何 ajax 示例工作。这很不幸,因为我认为我可以轻松地将它用于我的应用程序。
这是我的导航栏标记。它不是很复杂,所以我有一种感觉,我最终会手动编辑它。
<nav>
<ul id="navbar">
<li><a href="biosketch.html">Biosketch</a></li>
<li><a href="projects.html">Class Projects</a>
<ul>
<li><a href="projects.html#SeniorProject">Senior Project</a></li>
<li><a href="projects.html#WindTurbine">Wind Turbine</a></li>
</ul>
</li>
<li><a href="#">Resume</a></li>
<li><a href="#">Work Experience</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</nav>
【问题讨论】:
【参考方案1】:正如人们所说,通常这是在服务器端完成的,包含非 AJAX 网站。但是,我认为您可以使用 google 关闭模板。基本上,你用他们的模板语言定义一个模板,它会生成一个 javascript 函数,你可以调用它来渲染你的 HTML。
http://code.google.com/closure/templates/docs/helloworld_js.html
例子:
--templates.soy
namespace templates
template .nav
<ul id="navbar">
<li><a href="biosketch.html">Biosketch</a></li>
<li><a href="projects.html">Class Projects</a>
<ul>
<li><a href="projects.html#SeniorProject">Senior Project</a></li>
<li><a href="projects.html#WindTurbine">Wind Turbine</a></li>
</ul>
</li>
<li><a href="#">Resume</a></li>
<li><a href="#">Work Experience</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
\template
然后你运行下面的命令将它编译成一个javascript函数
java -jar SoyToJsSrcCompiler.jar --outputPathFormat templates.js templates.soy
这将生成一个名为 templates.js 的文件,其中包含一个名为 templates.nav 的函数,您可以从页面调用该函数,如下所示:
document.getElementById('navbar').innerHTML = templates.nav();
这甚至没有使用数据合并,这将允许您传入一个数据对象来呈现非静态的 HTML。但我只向你展示了这个,因为这就是你所要求的。我知道您也可以将 html 粘贴到 JS 字符串中,但您必须处理编辑器缺少语法帮助的问题。
一个缺点是这需要您似乎不介意的 JS。但是,如果您想支持无 JS 客户端,则可以在服务器端生成模板。还有一个编译器可以生成 Java google 闭包方法。您可以在他们的网站上查找。
希望对你有帮助。
【讨论】:
这很酷。我一定会去看看这个。我也意识到,如果我要在网络上发布任何网站,知道 php/asp 将很重要,所以我必须尽快开始在这里工作。 我建议你在玩它的时候走得更远。可能还有另一块用于包装整个页面的 html 代码。也将其设为模板,以便更轻松地修改整体外观。该模板将在其内部调用导航模板。【参考方案2】:使用服务器端语言创建导航文件。它可以是静态的,也可以是极其复杂的,这取决于您。
<?php include 'includes/nav.php'; ?>
nav.php 的内容可以完全是<nav>
元素。您可以理想地对其进行编程以根据当前“部分”显示/隐藏元素,还可以根据该部分切换某些类。
【讨论】:
【参考方案3】:正如您所说,您非常可以“离线”使用 AJAX 调用,它是客户端代码。
但是,如果我不使用服务器端语言(ASP.NET 或 PHP),我会这样做的方法是使用一个小的 .js 文件来呈现导航栏,我只需添加一个 @987654321 @ 导航栏的位置。
这样当你需要改变它时,你只需要改变 .js 并且它会在所有其他页面中更新。
【讨论】:
【参考方案4】:一些建议:
如果您使用的是 JSP(或类似技术),您可以在这里简单地使用 SiteMesh 之类的工具来帮助制作模板 您可以使用服务器端包含 您可以编写一个 JavaScript 函数以编程方式构建所需的 DOM(无需 AJAX),然后在整个页面中调用该 JS 函数(无需重复代码)【讨论】:
【参考方案5】:如果您要一遍又一遍地使用相同的代码,最好创建一个单独的文件并在不同的网页中实现它。
可以通过这个:https://www.w3schools.com/howto/howto_html_include.asp
您将导航栏的 html 写在一个单独的 .html 文件中,然后像这样调用它:
<div w3-include-html="content.html"></div>
然后从
调用一个javascript函数<script src="https://www.w3schools.com/lib/w3data.js"></script>
这是w3IncludeHTML();
您应该启动并运行它!希望这有帮助! :)
【讨论】:
【参考方案6】:通常这些可重复使用的标记片段将在服务器端生成,主要是通过模板引擎。
您可以更改 Firefox 的安全设置以允许离线 AJAX 调用,但最好设置一个本地开发环境,您可以在其中开始使用服务器端语言,并从一开始就正确执行。
【讨论】:
【参考方案7】:如果你想在不涉及任何服务器端编码的情况下实现它,试试这个:
var http = false;
if(navigator.appName == "Microsoft Internet Explorer")
http = new ActiveXObject("Microsoft.XMLHTTP");
else
http = new XMLHttpRequest();
http.open("GET", "navigation.txt");
http.onreadystatechange=function()
if(http.readyState == 4)
var navbar = document.getElementById('navbar');
navbar.innerHtml = http.responseText;
http.send(null);
【讨论】:
当我运行它时,我得到“跨源请求仅支持 HTTP。”以上是关于为多个页面上的导航栏创建可重用的 html的主要内容,如果未能解决你的问题,请参考以下文章
如何在 Symfony (Twig) 中包含可重用的小部件?