多个站点的全局通用导航栏答案

【问题标题】：Global common navigation bar for multiple sites多个站点的全局通用导航栏
【发布时间】：2019-01-25 20:38:44
【问题描述】：

我有多个单独的网站。我想为所有这些应该通用且同时更新的网站添加一个顶部导航栏。但不想在每个站点中重复复制粘贴代码。最好的方法是什么？

我可以为此使用 WebComponent 吗？我是否能够通过简单地将脚本标记添加到引用托管在其他地方的 javascript 文件的所有单个站点来添加/附加组件？

还有其他选择或最佳做法吗？

【问题讨论】：

标签： javascript html navigation web-component

【解决方案1】：

您所描述的（也称为组件化）是一种最佳实践。

选项太多（例如：第 3 方 JS 库）超出了 Stackoverflow 的范围。

您可以使用 Web 组件实现此目的。

创建一个 Javascript 文件，您可以在其中为导航栏定义一个自定义元素。

nav-bar.js

define.customElements( 'nav-bar', class extends HTMLElement {
    constructor() {
        super()
        this.attachShadow( { mode: 'open' } )
            .innerHTML = `
                <style>
                    :host { display: block ; border: 1px solid gray }
                </style>
                <button>Main Page</button>
                <button>About</button>
            `
    }
}

在每个网站中，添加一个<script> 标记以加载您的Javascript 文件。它可以托管在 Internet 上的任何位置，例如 CDN 站点。

<script src='path/nav-bar.js'></script>

在您的网页中您想要的位置添加自定义元素：

<nav-bar></nav-bar>

【讨论】：

非常感谢您的回复。我也在考虑同样的问题。另外，我正在考虑在该 javascript 中添加一些额外的代码，以便在页面加载时将自定义元素附加到正文。这样，我在组件站点中所要做的就是添加脚本标签。你能说出你提到的一些图书馆的名字吗？
@aver Bootstrap、jQueryUI、Angular、React... 但最后两个是完整的框架，所以对于你想做的事情来说可能太重了