Nodejs. Як зібрати шаблон з декількох частин.

Всім привіт! У цій статті ми розглянемо, як створювати шаблон з декількох частин і навіщо все це потрібно в NodeJS.

Уявімо, що у нас є купа різних файлів шаблонів. У кожному з них є панель навігації. Уявімо тепер, що ми вирішили змінити цю панель навігації, отже, нам потрібно поміняти її в кожному файлі. У великому проекті цих файлів може бути кілька сотень. Ясна річ, що це буде, м`яко кажучи, утомливо і неефективно міняти панель навігації в кожному з них. Набагато зручніше буде винести її в окремий файл, а потім підключати в інших потрібних файлах шаблонів. Тоді нам треба буде поміняти тільки один файл з панелькой, і вона відразу ж зміниться у всіх інших автоматично. Давайте розглянемо, як ми можемо це зробити.

Для початку створимо папку з назвою partials в папці views. У ній буду зберігатися всі окремі частини нашого шаблону. В папці partials створимо файл з назвою nav.ejs. У ньому створимо досить просту структуру нашої навігації:

 
 
href="/"gt;Home 
href="/ Contact"gt;Contact

Тепер підключимо нашу навігацію до файлу profile.ejs. Відразу після тега body напишемо наступне:

lt;% include partials/nav.ejs% gt;

Тепер, якщо ви перезавантажте сервер і обновіть сторінку, то побачите нашу навігацію, підключену до файлу profile.ejs.

Давайте так само зробимо і з іншими нашими файлами. Створіть в папці views файли index.ejs і contact.ejs, куди необхідно скопіювати весь код з файлів index.html і contact.html відповідно. Також подклчючіте в цих файлах шаблонів нашу навігацію після тега body, зробивши все те ж саме, що і з файлом profile.ejs.

Оскільки тепер ми не просто відправляємо HTML сторінки, а шаблони, не забудьте в головному файлі app.js поміняти метод sendFile () на render () ось таким чином:

Відео: Пишемо сайт на Node JS, Express | Як створити сайт # 1

app.get(`/`,function(req, res){ 
 res.render(`Index`) - 
}) - 
 
app.get(`/ Contact`,function(req, res){ 
 res.render(`Contact`) - 
}) -

Тепер, якщо ви будете переходити по сторінках на нашому сайті, то всюди побачите нашу навігацію. І, якщо вам потрібно буде внести зміни, то це треба буде зробити лише в одному файлі.

Відео: Node JS Tutorial for Beginners # 25 - Template Engines

А нам це сьогодні все. Дякую за увагу!

Поділися в соціальних мережах:

Схожі