Можно ли на js сделать динамическое добавление html?

Question

[Дмитрий Алп]

Добрый день!
Можно ли так сделать? >> Для себя), чтоб можно было создавать скажем html файлы с контентом, а визуализация бы подтягивалась из главного html пусть даже с помощью дополнительных строчек кода...

В xhtml, по-моему, есть такая фича какая include, если не ошибаюсь. Т.е. можно из одного html достать код и вложить в другой, что позволяет менять визуализацию только в одном html файле....(немного иначе, но не суть)

p.s. Как хобби практикую html/css, но чтоб это не было скучно делаю свой сайтик...кол-во страниц растёт, они однотипные, но с разным контентом, а поменять что-то в структуре - приходится делать это в каждом html'е...

p.s. 2. Если нельзя так сделать, то подскажите как спрашивать гугл, чтоб найти скрипт на php тогде уж...хотелось без сервера обойтись, но что делать..

Answer 1

[dev null]

pug конкретно фича которая вам нужна https://pugjs.org/language/includes.html

Answer 2

[Сергей Горячев]

Про pug-include уже ответили, это правильное решение.

Поскольку хочется без сервера, есть парочка мыслей.

В качестве эксперимента и для себя, попробуй "сварить" вот это)
al-scvorets.github.io/wm-html-include.js
Я помню, меня сильно затянуло, когда первый сайт сделал так, для себя)

(выделил, как наиболее интересное решение)

А также есть старенькая технология SSI htmlbook.ru/webserver/ssi
В принципе, тоже само по себе рабочее.

Нагуглил еще одно решение HTML Import, если честно не пробовал.
https://www.html5rocks.com/en/tutorials/webcompone...
Но судя по описанию, с вашей задачей справится.

Comments

[Дмитрий Алп]

Вот ssi я пользовался, но опять таки там нужно localhost устанавливать...в таком случае буду использовать php, а на данный момент изучу всё что мне здесь набросали ) спасибо

Answer 3

[Александр]

Ещё вариант - includeHTML

Comments

[Сергей Горячев]

Ух ты, а я такого решения не видел, надо покурить на досуге)

[Сергей Горячев]

Да ещё и разработка местного жителя, с тостера.

[Александр]

Сергей Горячев, ага)

Answer 4

[rPman]

Если у вас веб-сервер отдает только статику (обычное дело для бесплатных/дешевых хостингов, да и сама статика очень эффективна и не нагружает сервер) то это нормальная практика собирать страницу на стороне клиента.

include это частный случай шаблонизатора. Сами шаблонизаторы очень простые, фактически можно без каких либо библиотек просто использовать $('#replace_element_id').innerHTML='html text string' а саму html брать тут же из документа, разместив его например в скрытых div или как рекомендуют <script type="text/html">....</script> (будьте осторожны со скриптами внутри и валидностью верстки)

Эта стратегия называется single page app когда абсолютно все необходимое размещено в одной странице, статике, которая загружается однократно и кешируется на клиентской стороне. Страницы веб приложения и их параметры разделяются с помощью anchor (index.html#page/arguments/etc), в этом случае будет корректна работать история браузера, разбираются они javascript простым анализом url. Никаких библиотек для этого не требуется, это стандартная фича в любом браузере.

Если же вам нужны нестатичные данные, они загружаются с вашего веб-сервера в виде json файлов (такие файлы легко разобрать в javascript с помощью JSON.parse(text) с помощью ajax (или XMLHttpRequest если вы не хотите подключать библиотеки)

Answer 5

[tyzberd]

возьмите gulp + любой шаблонизатор типа https://www.npmjs.com/package/gulp-handlebars-html
https://github.com/carlosl/gulp-nunjucks-render
https://zellwk.com/blog/nunjucks-with-gulp/
вообще вам сюда Как выглядит современный процесс верстки?

Answer 6

[Froggyweb]

если страницы аидны в сети, то их отдает сервер - без вариантов.

ну для начала есть cms которые отдают контекстную часть. по указанному шаблону. например вордпресс и пр.

В вашем случае можно использовать просто функцию PHP php.net/manual/ru/function.include.php

Есть Jekyll

Есть еще куча решений.

Народ советует какой-то гемморой с сервером на локальной машине в виде node.js и каких-то куча шаблонизаторов с непонятным синтаксисом и другими задачами.