Muszę dodać Bootstrap 4 do mojego niestandardowego motywu.
Dodam Bootstrap 3 za pomocą odwołania:
Jak korzystać z bootstrap w moim niestandardowym motywie
Ale bootstrap 4 nie działa.
Odpowiedzi:
Aby dodać Bootstrap 4 In Magento 2.2.3 (testowany) i wyżej w niestandardowym motywie, wykonaj poniższe kroki
1) Pliki css Bootstrap w folderze internetowym
Uwaga :
THEME_LOCATION=>app\design\frontend\vendor-name\theme-name\
THEME_LOCATION\web\css\bootstrap.css Wywołaj pliki CSS bootstrap w default_head_blocks
THEME_LOCATION\Magento_Theme\layout\default_head_blocks.xmlDodawanie 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) Dodawanie plików Js w formie pakietu, a nie pojedynczo, ponieważ jednostka nie działa
Umieść pliki bootstrap.bundle.js, które można pobrać stąd
THEME_LOCATION\Magento_Theme\web\js\bootstrap.bundle.jsZadzwoń do Bootstrap Js Into wymaga jj-config.js
THEME_LOCATION\Magento_Theme\requirejs-config.jskod dla
var config = {
paths: {
'bootstrap':'Magento_Theme/js/bootstrap.bundle',
} ,
shim: {
'bootstrap': {
'deps': ['jquery']
}
}
};
Dodaj poniższy kod w header.phtml po już istniejącym tagu skryptu
THEME_LOCATION\Magento_Theme\templates\html\header.phtmlKod:
<script type="text/javascript">require(['bootstrap']);</script>Uruchom poniżej poleceń:
php bin/magento setup:static-content:deploy (Append -f if you are using Magento 2.2.x >= version)
php bin/magento cache:flush
Uwaga: Testowane na Magento 2.2.3 i najnowszej wersji 2.2.6. Testowany także w 2.3.3
Zaktualizowano : Pobierz skompilowany Bootstrap stąd i użyj pakietu js
Możesz dodać Bootstrap w ten sposób, wykonaj następujące kroki: Uwaga: To rozwiązanie nie działa z Magento 2.2.3 i nowszymi
1) Umieść JS i CSS w poniższej lokalizacji
/ app / design / frontend / vendor-name / theme-name / web / css
/ app / design / frontend / vendor-name / theme-name / web / js
2) Wywołaj pliki w pliku default_head_blocks.xml
app/design/frontend/vendor-name/theme-name/Magento_Theme/layout/default_head_blocks.xmldodaj ten wiersz kodu
<css src="css/bootstrap.css" />
<script src="js/bootstrap.min.js"/>
3) Uruchom poniższe polecenia
php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy
Powinieneś użyć menedżera pakietów bower, aby dodać bootstrap 4 w folderze internetowym motywu.
DLACZEGO? Ponieważ istnieją ciągłe aktualizacje i łatwe w zarządzaniu. Uruchom polecenie aktualizacji, Bootstrap 4 zostanie zaktualizowany.
RÓWNIEŻ: Wolimy używać LESS lub SCSS z bootstrap 4. Jest solidny i łatwy do refaktoryzacji.
Wykonaj poniższe kroki, aby zainstalować altanę:
1) Zainstaluj LTS nodeJS w swoim systemie operacyjnym z: https://nodejs.org/en/
2) Zainstaluj menedżera pakietów Bower globalnie: npm install -g bower
3) Zainstaluj gitz: https://git-scm.com/
4) Zainstaluj bootstrap 4:
W webtwoim katalogu niestandardowym motywem Magento
Na przykład: Otwórz terminal o <Magento root>/app/design/frontend/MyCustom/theme/web/
Uruchom to polecenie, aby zainstalować bootstrap 4:
bower install bootstrap4
5) Następnie musisz dodać czcionki, bootstrap CSS i bootstrap JS w domyślnym węźle układu, aby pracować na każdej stronie w Magento_Thememodule niestandardowego motywu.
Używamy gulp do kompilacji SCSS do CSS.
bower_componentsdo webkorzystania .bowerrc plik konfiguracyjny.
package.jsonplik Bootstrap 4, jeśli zobaczysz filesklucz tablicy, pokazuje tylko, że dopasowanie typu pliku zostanie dodane do katalogu projektu. filesKlawisz jest używany tylko przez polecenie Bower. Jeśli chcesz przyczynić się lub ponownie skompilować Bootstrap, powinieneś spróbować Yarn. Ponieważ doda niepotrzebny plik / katalog do projektu. Webpack i Parcel są przeznaczone dla projektu węzła, który kompilują do JavaScript w frontendzie.
Po przeczytaniu powyższych odpowiedzi, mam inną sugestię: włóż Bootstrap 4 do modułu i użyj CDN, aby zamiast tego połączyć pliki Bootstrap.
Zakładam, że wiesz, jak stworzyć podstawowy moduł. Jeśli nie, możesz odwołać się tutaj . Oto kroki:
Utwórz plik app/code/Vendor/Module/view/frontend/layout/default_head_blocks.xmlz następującymi kodami:
<?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>
Aktywuj moduł i uruchom setup:upgradepolecenie, to wszystko!
Korzyści:
Testowany na Magento 2.2.4, ale powinien działać we wszystkich wersjach Magento 2.X. EDYCJA * zmieniła znaczniki link href na src, aby były zgodne z devdocs. Odniesienie:
The attribute 'integrity' is not allowed.