在多个页面上为导航栏创建可重用的html

Question

我认为拥有可重复使用的代码会很方便,特别是对于导航栏,因为它在我的所有页面中都是相同的.这样,我就不必浏览每个页面,并在发生更改时单独手动编辑每个页面.

似乎可以使用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>

Answer 1

正如前面所说，通常这是在服务器端完成的，并包含非 AJAX 站点。不过，我认为你可以利用谷歌关闭模板。基本上，您用模板语言定义一个模板，该模板生成一个 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 闭包方法的编译器。你可以在他们的网站上查找它。

希望能帮助到你。