Imaš dosta rešenja u JS na linku koji je postavio @B3R1, ali mislim da većina neće da radi ako nemaš instaliran HTTP server, razlog je što Browseri blokiraju zahteve koji nisu HTTP ili HTTPS:
https://developer.mozilla.org/...CORS/Errors/CORSRequestNotHttp.
Dakle, prvo instaliraj neki jednostavan HTTP server, npr:
https://www.npmjs.com/package/http-server. Ili, pošto koristiš Linux i već imaš instaliran Python, u direktorijumu gde ti se nalazi sajt pokreni:
python -m http.server komandu.
Zatim u index.html fajlu pre </body> taga dodaj sledeći JavaScript kod:
Code (javascript):
<script>
function includeFile(include) {
fetch(include.attributes.src.value)
.then(response => response.ok ? response.text() : '404 - Fajl nije pronadjen')
.then(fileContent => include.outerHTML = fileContent)
.catch(error => console.log(error))
}
const includes = document.getElementsByTagName('include');
for (i=0; i < includes.length; i++) {
includeFile(includes[i])
}
</script>
Zatim u istom index.html fajlu, na mestu gde želiš da ubaciš neki drugi fajl unesi sledeću liniju
<include src="ime_fajla.html"></include>, na primer:
Code (html):<include src="header.html"></include>
<include src="main.txt"></include>
<include src="footer.html"></include>
Ukoliko se fajl ne nalazi u istom direktorijumu kao index.html, navedi putanju do istog.
Code (html):<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<include src="header.html"></include>
<include src="content/main.txt"></include>
<include src="footer.html"></include>
<script>
function includeFile(include) {
fetch(include.attributes.src.value)
.then(response => response.ok ? response.text() : '404 - File Not Found')
.then(fileContent => include.outerHTML = fileContent)
.catch(error => console.log(error))
}
const includes = document.getElementsByTagName('include');
for (i=0; i
< includes.length; i++) {
includeFile(includes[i])
}
</script>
</body>
</html>