Элементы в шаблоне сайта на NodeJS

В предыдущем уроке вы научились хранить макет сайта в одном файле шаблона. Как вы уже знаете, в этом файле остаются только общие части: хедер, сайдбары, футер. Как правило, это удобно, однако, 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-ти страниц и разделите шаблон сайта на элементы.