Это текущая структура моего проекта:
app/
-- dist/
-- src/
---- components/
------ headers/
-------- header.pug
-------- header.scss
------ menus/
-------- mega-menu.pug
-------- mega-menu.scss
---- websection-navcustom.pug
-- package.json
-- webpack.config.js
В настоящее время я пытаюсь ускорить разработку некоторых различных HTML-шаблонов, которые сторонняя платформа электронной коммерции позволяет мне вставлять в определенный раздел их веб-сайта (представьте, что это похоже на страницу / пост WordPress, позволяющую изменить структура их сайтов.)
Идея этого проекта состоит в том, чтобы прийти с некоторыми готовыми компонентами для этой платформы, которые мы можем легко смешать и сопоставить, чтобы быстро изменить дизайн нового веб-сайта и сделать так, чтобы веб-пакет компилировал нужные нам CSS и HTML в различные корни файлы шаблонов уровней.
Так, например, мы бы добавили / расширили эти два готовых компонента
------ headers/
-------- three-column-header.pug
-------- three-column-header.scss
------ menus/
-------- centered-horizontal-menu.pug
-------- centered-horizontal-menu.scss
в файле мопса уровня src:
---- websection-navcustom.pug
Что может привести к чему-то похожему на следующее (я все еще читаю PUG, поэтому синтаксис может быть отключен):
extend three-column-header.pug
extend centered-horizontal-menu.pug
style(type="text/css").
//three-column-header.scss content
//centered-horizontal-menu.scss content
block social
//code for social media icons
block logo
//logo code/url
block contact
//code for phone, cta button, etc.
block menu-items
//pug code for bootstrap nav_items
После сборки проект должен сгенерировать следующий код в файле dist / websection-navcustom.html
<!--
section: navcustom
-->
<style>
//three-column-header.scss content
//centered-horizontal-menu.scss content
</style>
<script>
//any JS a component requires
</script>
<header class="header">
<div class="col-md-4">
//code for social media icons
</div>
<div class="col-md-4">
//logo code/url
</div>
<div class="col-md-4">
//code for phone, cta button, etc.
</div>
</header>
<nav class="navbar navbar-default">
<ul class="nav nav-*">
//menu-items
</ul>
</nav>
При просмотре учебных пособий казалось, что веб-пакет не позволяет вам создавать несколько файлов шаблонов из коробки, и я не мог найти способ добавить стили непосредственно в шаблоны HTML.
Прежде чем я продолжу изучать этот вопрос, мне было интересно, может ли кто-нибудь сообщить мне, является ли веб-пакет лучшим способом достижения того, что мы пытаемся сделать, и есть ли какие-нибудь учебники / плагины, которые вы бы порекомендовали, которые могли бы помочь?
Редактировать: Кроме того, есть все виды пользовательских файлов шаблонов, которые мы можем создать с помощью этой платформы электронной коммерции, в качестве упрощенного примера был использован websection-navcustom.pug. В действительности будет гораздо больше, чем просто этот шаблонный файл «высокого уровня».