В предыдущем уроке вы научились хранить макет сайта в одном файле шаблона. Как вы уже знаете, в этом файле остаются только общие части: хедер, сайдбары, футер. Как правило, это удобно, однако, HTML код этих частей может быть достаточно большим, что мешает восприятию общей структуры сайта.
Было бы удобно вынести эти части в отдельные файлы, так сказать "с глаз долой", чтобы обращаться к ним по мере необходимости, а в остальное время чтобы они не мешали чтению другого кода.
Давайте придумаем для этого специальную команду
{% get element '' %}, где в кавычках
будет писаться имя элемента. В этом случае
наш файл шаблона превратится в нечто такое:
<!DOCTYPE html>
<html>
<head>
<title>{% get title %}</title>
</head>
<body>
<div id="wrapper">
<header>
{% get element 'header' %}
</header>
<main>
{% get content %}
</main>
<aside>
{% get element 'aside' %}
</aside>
<footer>
{% get element 'footer' %}
</footer>
</div>
</body>
</html>
Давайте будем хранить элементы макета в папке
elems. По запросу пользователя нам
нужно будет прочитать файл с шаблоном сайта,
затем найти все места-команды на вставку
элементов и заменить их на тексты соответствующих
файлов.
Давайте напишем код, реализующий описанное, для краткости опустив работу с тайтлом и контентом, а также ресурсами сайта:
http.createServer(async (request, response) => {
let lpath = 'layout.html';
let layout = await fs.promises.readFile(lpath, 'utf8');
let reg = /\{% get element '(.+?)' %\}/g;
layout = layout.replace(reg, async (match0, match1) => {
return await fs.promises.readFile('elems/' + match1 + '.html', 'utf8');
});
response.writeHead(200, {'Content-Type': 'text/html'});
response.write(layout);
response.end();
}).listen(3000);
Разберите приведенный мною код. Напишите текст, в котором вы объясните работу этого кода.
Добавьте этот код к коду сервера, созданному вами в предыдущем уроке.
Возьмите созданный вами сайт из 6-ти
страниц и разделите шаблон сайта на элементы.