头部标签的 Ractive / Mustache 模板

Question

我一直在寻找这个，但找不到答案或例子。

是否可以使用 Ractive 模板构建跨页面一致的头部元素，并且可以从单独的文件中加载？

例如：所有 html、head 和 title 标签信息都通过可引用模板从外部文件加载到索引页面。 +html+ +头+ +标题+ +/标题+ +/头+

如果是这样，你是怎么做到的？当我试图绕过它时，jquery 和 ractive.js 需要加载。有different/better解决方案吗？

Answer 1

有可能。但这不切实际，还会引发其他问题。

这里是一个基本实现，它展示了如何对 <head> 进行模板化，但并不专注于将模板放入外部文件中。这在 Chrome 和 IE 中对我有用。

<html>

<head id="output"></head>
<script id="template" type="text/html">
    <title>{{ title }}</title>
</script>

<script type="text/javascript" src="ractive.min.js"></script>
<script type="text/javascript">
    var ractive = new Ractive({
        template: "#template",
        el: "#output",
        data: {
            title: "This is the title"
        }
    });
</script>

<body>
    ...
</body>
</html>

您将运行使用此方法遇到问题，因为在页面加载和 Ractive 启动之前不会加载 head 元素。这可能会导致以下问题：

搜索引擎可能无法读取页面标题和元标记
您需要加载到 <head> 中的任何 javascript 可能无法正常工作（我尝试了一些简单的示例并能够将 javascript 加载到运行但它失败了引用 body 中的任何元素。也许这是一个上下文问题，也许 Ractive 支持克服这个问题，但这是我不熟悉的领域。）
如果您需要有效的 HTML，这可能对您不起作用，因为脚本标签不能直接 children of <html>，和 <head>应该 <title> 作为直接 child.

你最好使用 server-side 模板解决方案 <head>。

头部标签的 Ractive / Mustache 模板

Ractive / Moustache Template for Head Tag

templates

mustache

ractivejs