HTML5-Import mit Sidebar-Menü

Question

Ich arbeite an einem Projekt, und ich habe ziemlich große Sidebar-Menü mit vielen Seiten, ich will es nicht wirklich ständig auf allen Seiten ändern, aber ich auch nicht wirklich möchte die php include() -Funktion verwenden.

Nun, ich ging und verwendete HTML5-Import. Es funktioniert tatsächlich, aber ich habe ein Problem. Meine index.html befindet sich im Stammordner, aber die user.html im Ordner root/pages. Also .. Wenn es dort geht importiert es das gleiche Menü wie in index.html, aber das ist falsch. Weil die Verbindung unterbrochen ist. Zum Beispiel kann ich nicht index.html danach zugreifen, weil ich ../index.html brauchen, sondern es index.html geschrieben Dies ist js verwende ich Datei

var doc= document.querySelector('link[rel="import"]').import; 
var text = doc.querySelector('template'); 
var clone = document.importNode(text.content, true); 
var loc = window.location.pathname; 
var dir = loc.substring(0, loc.lastIndexOf('/')); 
console.log(dir); 
document.querySelector('.sidebar-menu').appendChild(clone); 

Answer 1

Es sollte importieren arbeiten Sie von einer beliebigen Seite, wenn Sie die Links in Ihrer Seitenleiste auf absolute Pfade und nicht auf relative Pfade ändern. Statt:

<a href="index.html">Home</a> 

Verwendung dieses:

<a href="/index.html">Home</a> 

Der genaue absolute Pfad kann variieren, je nachdem, ob Sie einen /public Ordner verwenden, etc, aber wenn man sie einmal bekommen arbeiten, werden sie arbeiten aus jede Seite in Ihrer App