как подключать многоразовые html компоненты?

Question

Допустим, что у нас есть 5 страниц и на каждой из них одинаковые header, footer и карточки. Как лучше всего подключать отдельные html файлы в 2024году?

Answer 1

Можно использовать SSI.

Для поддержки работы именно в html (не в shtml) нужно немного изменить конфигурацию сервера.

Но лучше начать изучать хотя бы php.

Answer 2

Есть две группы инструментов которые реализуют использование отдельных компонентов - это шаблонизаторов и фреймворки с поддержкой такой функциональности.

Шаблонизаторы:

Фреймворки:

Если вы говорите про нативную поддержку прямо в html, то её нет.

Так-же существует множество фрйемворков для генерации страниц из модулей на бэкенде, например:

Blazor (C#)
Django (Python)
Ruby on Rails (Ruby)
Laravel (PHP)
Express.js (node.js)

Answer 3

Для JS я использую плагин Gulp Rigger:

.pipe(rigger())

"use" (документация: https://www.npmjs.com/package/gulp-rigger)
//= components/footerSpoiler.js

Для HTML я использую плагин gulp Panini:

.pipe(panini({
   root: srcPath,
   layouts: srcPath + "template/layouts/",
   partials: srcPath + "template/partials/",
   data: srcPath + "template/data/"
}))

"use" (документация: https://www.npmjs.com/package/panini)
---
layout: default
title: Catalog
icon: assets/images/heart-like.svg
style: assets/css/catalog-style.min.css
js: assets/js/indexJS.min.js
---
<div class="wrapper">
   {{> header }}
   
   {{> footer }}
</div>

БЛОГ НА HUSL

как подключать многоразовые html компоненты?

Ответы (3 шт):