Question

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

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

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

Answer 1

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

有太多选项（例如：第三方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>

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

1 个答案: