Глобальная общая панель навигации для нескольких сайтов - PullRequest
Новая
       8

Глобальная общая панель навигации для нескольких сайтов

0 голосов
/ 25 января 2019

У меня есть несколько отдельных сайтов.Я хотел бы добавить верхнюю панель навигации для всех этих сайтов, которые должны быть общими и обновляться одновременно.но не хочу повторять копировать вставить код на каждом сайте.Какой лучший способ сделать это?

Могу ли я использовать для этого WebComponent?Смогу ли я добавить / присоединить компонент, просто добавив тег script ко всем отдельным сайтам, ссылаясь на файл javascript, размещенный в другом месте?

Есть ли другие варианты или рекомендации?

1 Ответ

0 голосов
/ 25 января 2019

То, что вы описываете (иначе компонентизация), является своего рода лучшей практикой.

Существует так много опций (например, сторонних библиотек JS), что список выходит за рамки Stackoverflow.

Этого можно добиться с помощью веб-компонентов.

Создайте файл Javascript, в котором вы определяете пользовательский элемент для панели навигации.

СЧА 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. Он может быть размещен где угодно в Интернете, например на сайте CDN. 

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

Добавьте пользовательский элемент на веб-странице в нужную позицию: 

<nav-bar></nav-bar>
...