多個站點的全局通用導航欄

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>