Итак, я довольно новичок в программировании stati c HTML, поскольку я использовал Angular в течение почти года в качестве основы веб-интерфейса.
Что я хочу:
- Я хочу иметь домашнюю страницу stati c без использования огромного фреймворка или NodeJS -сервер в фоновом режиме.
- Домашняя страница должна иметь более одной страницы (очевидно)
- Я также хочу избежать дублирования кода
Моя идея:
Из программирования в Java Я знаю концепцию наследования (а также композиции ...) и, следовательно, я Я подумал, что было бы неплохо иметь одну стартовую страницу, которая включает подстраницы в качестве контейнеров. Это также можно сравнить с использованием Latex-Documents: создайте один Main-File с настройками и сделайте так, чтобы главы содержали только текст.
Мой подход:
В качестве отправной точки я получил индекс. html -файл. В этом файле определен элемент -Element (который использует функцию jquery $().load("url") для включения заголовка из внешнего файла). У меня также есть строка меню с левой стороны с одним списком <ul> и многими <li> -элементы. Эти li-Elements ссылаются на возможные подстраницы, добавляя их префикс к текущему URL в качестве параметров, например:
https://<my-homepage>.com/index.html?my-subpage
На любом перенаправлении будет присутствовать jquery -скрипт запускается, который пытается загрузить подстраницы в div-контейнер. Когда параметр не подходит под текущую подстраницу, будет загружена страница по умолчанию.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="./resources/bootstrap-4.3.1-dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="index.css">
<link rel="shortcut icon" type="image/x-icon" href="resources/logo.ico">
<script src="resources/jquery.min.js" type="application/javascript"></script>
</head>
<body style="overflow-x: hidden; overflow-y:hidden">
<header id="header" class="header">
<script>
$("header").load("./header/header.html");
</script>
</header>
<hr>
<div class="d-flex">
<div class="sidebar">
<ul>
<li>
<a href="?subpage">Subpage</a>
</li>
<li>
<a href="?subpage2">Subpage Two</a>
</li>
</ul>
</div>
<div id="container" class="main">
<script>
var param = window.location.search.substr(1);
var url = './' + param + '/' + param + '.html';
var http = new XMLHttpRequest();
http.open('HEAD', url, false);
http.send();
if(http.status==200){
$("#container").load(url);
}else{
$("#container").load("./default/default.html");
}
</script>
</div>
</div>
</body>
</html>
Мой вопрос (подробно):
Прежде всего, я хочу собрать опыт по этому предмету:
- Это хороший подход или есть лучшие альтернативы?
- Возможно ли это даже с помощью stati c HTML и немного JavaScript для загрузки динамического c сайта, подобного этому?