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

В предыдущем уроке вы научились хранить макет сайта в одном файле шаблона. Как вы уже знаете, в этом файле остаются только общие части: хедер, сайдбары, футер. Как правило, это удобно, однако, HTML код этих частей может быть достаточно большим, что мешает восприятию общей структуры сайта.

Было бы удобно вынести эти части в отдельные файлы, так сказать "с глаз долой", чтобы обращаться к ним по мере необходимости, а в остальное время чтобы они не мешали чтению другого кода.

Давайте придумаем для этого специальную команду {% get element '' %}, где в кавычках будет писаться имя элемента. В этом случае наш файл шаблона превратится в нечто такое:

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

Давайте напишем код, реализующий описанное, для краткости опустив работу с тайтлом и контентом, а также ресурсами сайта:

javascripthttp.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);