Я повинен додати Bootstrap 4 у власну власну тему.
Я додаю Bootstrap 3 за допомогою посилання:
Як використовувати завантажувальну програму в моїй спеціальній темі
Але завантажувальна програма 4 не працює.
Відповіді:
Для додавання завантажувальної програми 4 в Magento 2.2.3 (тестована) та вище у власну власну тему виконайте наступні кроки
1) CSS-файли завантаження у веб-папці
Примітка :
THEME_LOCATION=>app\design\frontend\vendor-name\theme-name\
THEME_LOCATION\web\css\bootstrap.css Виклик файлів CSS для завантаження у default_head_blocks
THEME_LOCATION\Magento_Theme\layout\default_head_blocks.xmlДодавання css
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<!--Bootstrap css-->
<css src="css/bootstrap.css" />
</head>
</page>2) Додавання файлів Js у формі пакету, а не індивідуальної, тому що окремі не працюють
Файли bootstrap.bundle.js можна завантажити тут
THEME_LOCATION\Magento_Theme\web\js\bootstrap.bundle.jsВиклик Bootstrap Js Into Requjs-config.js
THEME_LOCATION\Magento_Theme\requirejs-config.jsкод для
var config = {
paths: {
'bootstrap':'Magento_Theme/js/bootstrap.bundle',
} ,
shim: {
'bootstrap': {
'deps': ['jquery']
}
}
};Додайте нижче код у header.phtml після вже наявного тегу сценарію
THEME_LOCATION\Magento_Theme\templates\html\header.phtmlКод:
<script type="text/javascript">require(['bootstrap']);</script>Виконайте команди нижче:
php bin/magento setup:static-content:deploy (Append -f if you are using Magento 2.2.x >= version)
php bin/magento cache:flush
Примітка: Тестовано на Magento 2.2.3 та Latest, а також 2.2.6. Тестується також на 2.3.3
Оновлено : Завантажте Bootstrap, зібраний звідси, і використовуйте пакет js
Ви можете додати Bootstrap таким чином, виконайте наступні кроки: Примітка. Це рішення не працює з Magento 2.2.3 і вище
1) Розмістіть JS та CSS у нижньому місці
/ app / design / frontend / vendor-name / topic-name / web / css
/ app / design / frontend / vendor-name / topic-name / web / js
2) Зателефонуйте до файлів у вашому default_head_blocks.xml
app/design/frontend/vendor-name/theme-name/Magento_Theme/layout/default_head_blocks.xmlдодати ці рядки коду
<css src="css/bootstrap.css" />
<script src="js/bootstrap.min.js"/>3) Виконайте команди нижче
php bin/magento setup:upgrade
php bin/magento setup:static-content:deployВам слід скористатися менеджером пакетів bower, щоб додати завантажувальний пакет 4 у вашу папку з темою.
ЧОМУ? Тому що є постійні оновлення та просте управління. Запустіть команду оновлення Bootstrap 4 оновлюється.
ТАКОЖ: Ми вважаємо за краще використовувати менше або SCSS з завантажувальним інструментом 4. Її надійний і легкий для рефактори.
Виконайте нижче кроки, щоб встановити бауер:
1) Встановіть LTS nodeJS у відповідну ОС з: https://nodejs.org/uk/
2) Встановіть диспетчер пакетів bower у всьому світі: npm install -g bower
3) Встановити gitз: https://git-scm.com/
4) Встановіть завантажувальну систему 4:
У webкаталозі вас власна тема Magento
Наприклад: Відкрити термінал в <Magento root>/app/design/frontend/MyCustom/theme/web/
Виконайте цю команду, щоб встановити bootstrap 4:
bower install bootstrap4
5) Після цього вам потрібно додати шрифти, завантажувальний CSS і завантажувальний JS у вузол макета за замовчуванням, щоб працювати завантажувач на кожній сторінці в Magento_Themeмодулі у вашій спеціальній темі.
Ми використовуємо gulp для компіляції SCSS до CSS.
sudo npm install -g bower. Після встановлення bower встановіть пакети js / css у своєму каталозі тем:app/design/frontend/My/Theme/
bower_componentsдля webвикористання .bowerrc конфігураційного файлу.
package.jsonфайл Bootstrap 4, якщо ви бачите filesключ масиву, він показує лише, що відповідність типу файлу буде додана до каталогу проекту. filesКлюч використовується лише командою Bower. Якщо ви хочете внести внесок або перекомпілювати Bootstrap, тоді слід спробувати Пряжу. Тому що це додасть непотрібний файл / каталог до проекту. Webpack і Parcel - це проект для вузлів, який вони компілюють для використання в JavaScript для інтерфейсу.
Прочитавши вищевказані відповіді, у мене є ще одна пропозиція: поставте Bootstrap 4 в модуль і використовуйте CDN, щоб замість цього зв'язати файли Bootstrap.
Я припускаю, що ви знаєте, як створити базовий модуль. Якщо ні, ви можете посилатися тут . Отже ось такі кроки:
Створіть файл app/code/Vendor/Module/view/frontend/layout/default_head_blocks.xmlіз такими кодами:
<?xml version="1.0"?>
<!--
/**
* Copyright © 2013-2017 Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<link rel="stylesheet" type="text/css" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous" src_type="url" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous" src_type="url"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous" src_type="url"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous" src_type="url"></script>
</head>
</page>Активуйте модуль і запустіть setup:upgradeкоманду, ось і все!
Переваги:
Тестовано на Magento 2.2.4, але має працювати у всіх версіях Magento 2.X. EDIT * змінив теги посилань href на src, щоб вони були вбудовані з devdocs. Довідка:
The attribute 'integrity' is not allowed.