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

Question

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

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

还有其他选择或最佳实践吗？

Answer 1

你所描述的（又名组件化）是一种最佳实践。

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

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

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

导航栏.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文件。它可以托管在互联网上的任何位置，例如在 CDN 站点上。

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

在

网页中所需的位置添加自定义元素：

<nav-bar></nav-bar>