Можно ли вставлять свёрстанные блоки на другие страницы HTML?
Доброго времени суток. первый раз верстаю много страничный сайт, и столкнулся с таким что большинство секций совпадает на разных страницах, но немного по другому расположены. Нужно верстать их снова и дублировать стили, или же я могу просто копировать уже свёрстанные блоки, но тогда будут разные названия классов и уже получиться не по БЭМ.
Секция с Главной страницы.
<section class="cup"> <div class="container"> <div class="cup__block"> <div class="cup__left"> <h2 class="cup__left-title">Наши достижения от кубка россии до чемпионатов мира</h2> <div class="cup__left-decor"> <span></span> <span></span> <span></span> <span></span> </div> <p class="cup__left-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Habitant tincidunl.</p> </div> <div class="cup__right"> <div class="cup__right-column"> <div class="cup__right-box cup__right-border-one"> <p class="cup__right-number">#<em>1</em></p> <p class="cup__right-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dui</p> </div> <div class="cup__right-box cup__right-border-one"> <p class="cup__right-number">#<em>6</em></p> <p class="cup__right-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dui</p> </div> <div class="cup__right-box cup__right-border-one"> <p class="cup__right-number">#<em>2</em></p> <p class="cup__right-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dui</p> </div> <div class="cup__right-box cup__right-border-one"> <p class="cup__right-number">#<em>1</em></p> <p class="cup__right-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dui</p> </div> </div> <div class="cup__right-column"> <div class="cup__right-box cup__right-border-two"> <p class="cup__right-number">#<em>4</em></p> <p class="cup__right-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dui</p> </div> <div class="cup__right-box cup__right-border-two"> <p class="cup__right-number">#<em>3</em></p> <p class="cup__right-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dui</p> </div> <div class="cup__right-box cup__right-border-two"> <p class="cup__right-number">#<em>1</em></p> <p class="cup__right-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dui</p> </div> <div class="cup__right-box cup__right-border-two"> <img class="cup__right-icon" src="../images/icon-cup.svg" alt="Cup"> <p class="cup__right-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dui</p> </div> </div> </div> </div> </div> </section> |
<section class="cup"> <div class="container"> <div class="cup__block"> <div class="cup__left"> <h2 class="cup__left-title">Наши достижения от кубка россии до чемпионатов мира</h2> <div class="cup__left-decor"> <span></span> <span></span> <span></span> <span></span> </div> <p class="cup__left-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Habitant tincidunl.</p> </div> <div class="cup__right"> <div class="cup__right-column"> <div class="cup__right-box cup__right-border-one"> <p class="cup__right-number">#<em>1</em></p> <p class="cup__right-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dui</p> </div> <div class="cup__right-box cup__right-border-one"> <p class="cup__right-number">#<em>6</em></p> <p class="cup__right-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dui</p> </div> <div class="cup__right-box cup__right-border-one"> <p class="cup__right-number">#<em>2</em></p> <p class="cup__right-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dui</p> </div> <div class="cup__right-box cup__right-border-one"> <p class="cup__right-number">#<em>1</em></p> <p class="cup__right-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dui</p> </div> </div> <div class="cup__right-column"> <div class="cup__right-box cup__right-border-two"> <p class="cup__right-number">#<em>4</em></p> <p class="cup__right-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dui</p> </div> <div class="cup__right-box cup__right-border-two"> <p class="cup__right-number">#<em>3</em></p> <p class="cup__right-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dui</p> </div> <div class="cup__right-box cup__right-border-two"> <p class="cup__right-number">#<em>1</em></p> <p class="cup__right-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dui</p> </div> <div class="cup__right-box cup__right-border-two"> <img class="cup__right-icon" src="../images/icon-cup.svg" alt="Cup"> <p class="cup__right-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dui</p> </div> </div> </div> </div> </div> </section>
И секция с разных сочетаний.
<section class="present"> <div class="container"> <div class="present__block"> <div class="present__block-left"> <h2 class="cup__left-title">Наши достижения от кубка россии до чемпионатов мира</h2> <div class="cup__left-decor"> <span></span> <span></span> <span></span> <span></span> </div> <p class="cup__left-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Habitant tincidunt aliquam tincidunt pretium sodales. Tristique odio pellentesque et tincidunt posuere arcu purus lobortis risus. Urna, ut amet odio orci magnis praesent ultrices. Praesent malesuada lacus tellus tristique sit at. Sed viverra nulla nam arcu, non iaculis pretium, volutpat.</p> </div> <div class="present__block-right"> <div class="present__slider swiper"> <div class="swiper-wrapper"> <div class="present__slider-item swiper-slide"> <img class="present__slider-img" src="../images/img-1.webp" alt="ImgOne"> <p class="present__slider-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque auctor nibh feugiat est. Consectetur lectus.</p> </div> <div class="present__slider-item swiper-slide"> <img class="present__slider-img" src="../images/img-2.webp" alt="ImgTwo"> <p class="present__slider-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque auctor nibh feugiat est. Consectetur lectus.</p> </div> </div> </div> <div class="present__slider-pagination swiper-pagination"></div> <div class="present__slider-next swiper-button-next"><img src="../images/arrow-next.svg" alt="Arrow"></div> <div class="present__slider-prev swiper-button-prev"><img src="../images/arrow-prev.svg" alt="Arrow"></div> </div> </div> </div> </section> |
<section class="present"> <div class="container"> <div class="present__block"> <div class="present__block-left"> <h2 class="cup__left-title">Наши достижения от кубка россии до чемпионатов мира</h2> <div class="cup__left-decor"> <span></span> <span></span> <span></span> <span></span> </div> <p class="cup__left-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Habitant tincidunt aliquam tincidunt pretium sodales. Tristique odio pellentesque et tincidunt posuere arcu purus lobortis risus. Urna, ut amet odio orci magnis praesent ultrices. Praesent malesuada lacus tellus tristique sit at. Sed viverra nulla nam arcu, non iaculis pretium, volutpat.</p> </div> <div class="present__block-right"> <div class="present__slider swiper"> <div class="swiper-wrapper"> <div class="present__slider-item swiper-slide"> <img class="present__slider-img" src="../images/img-1.webp" alt="ImgOne"> <p class="present__slider-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque auctor nibh feugiat est. Consectetur lectus.</p> </div> <div class="present__slider-item swiper-slide"> <img class="present__slider-img" src="../images/img-2.webp" alt="ImgTwo"> <p class="present__slider-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque auctor nibh feugiat est. Consectetur lectus.</p> </div> </div> </div> <div class="present__slider-pagination swiper-pagination"></div> <div class="present__slider-next swiper-button-next"><img src="../images/arrow-next.svg" alt="Arrow"></div> <div class="present__slider-prev swiper-button-prev"><img src="../images/arrow-prev.svg" alt="Arrow"></div> </div> </div> </div> </section>
Дополнительно:
Нужно верстать их снова и дублировать стили, или же я могу просто копировать уже свёрстанные блоки
но тогда будут разные названия классов и уже получиться не по БЭМ
При это БЭМ наоборот намекает - использовать повторно повторяющиеся блоки...
но тогда будут разные названия классов
Можно сделать так:
.price.price--one .price-card .price-card__name .price.price--two .price-card .price-card__name |
.price.price--one .price-card .price-card__name .price.price--two .price-card .price-card__name
Повторяющийся блок:
.price-card .price-card__name
Дополнительная стилизация "повторяющегося блока".
.price.price--one .price-card .price-card__name
UPD:
Обратите внимание на ответ zkrvndm
Ты можешь использовать iframe для отображения одного и того же блока на множестве страниц.
Для конкретно Вашей задачи я таким бы не занимался (БЭМ это итак решает), а вот для SEO (органического продвижения) фреймы будут очень кстати, они позволят избежать склейки страниц в выдаче.
- понял спасибо
Ответы:
Ты можешь использовать iframe для отображения одного и того же блока на множестве страниц.
- Нет, ты наверно не понял, мне не нужно вставлять страницы в страницы, мне нужно понять стоит ли писать новые классы и новые стили, или же просто вставить тот-же самый код, но тогда некрасиво будет выглядеть верста на других страницах.
- Богдан, чтобы один и тот же контент с некой условно полезной информацией не дублирован по миллион раз, имеет этот блок отдавать отдельным html файликом и выводить на нужных страницах через iframe. Либо грузи блок этот через AJAX, что по факту тоже самое, но чуть лучше в плане индексации.
- zkrvndm, у меня так сделано с хедером и футером, они сверстаны отдельно и подключаться к страницам, я вас понял!
- рукалицо...
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Да, можно вставлять свёрстанные блоки на другие страницы HTML. Для этого можно использовать тег .
Пример использования тега :
Преимущества использования :
1. Простота внедрения: просто укажите путь к странице с блоком, который вы хотите вставить.
2. Разделение содержимого: благодаря вы можете легко разделять содержимое разных страниц, что упрощает управление контентом.
3. Гибкость: позволяет встраивать любой контент, включая видео, карты, формы и другие элементы.
Однако, есть и недостатки использования :
1. Проблемы с SEO: содержимое внутри может быть не проиндексировано поисковыми системами.
2. Проблемы с доступностью: некоторые пользователи могут испытывать проблемы с доступностью при использовании .
3. Безопасность: внедрение внешних ресурсов через может представлять угрозу безопасности.
Таким образом, использование для вставки свёрстанных блоков на другие страницы HTML может быть удобным способом добавления контента, но необходимо учитывать вышеперечисленные недостатки и осуществлять контроль за безопасностью и доступностью контента.