ฉันจะเพิ่มBootstrap 4ในธีมที่กำหนดเองของฉัน
ฉันเพิ่ม Bootstrap 3 โดยใช้การอ้างอิง:
วิธีใช้ bootstrap ในธีมที่กำหนดเองของฉัน
แต่ bootstrap 4 ไม่ทำงาน
คำตอบ:
สำหรับการเพิ่ม Bootstrap 4 ใน Magento 2.2.3 (ทดสอบแล้ว) และสูงกว่าในธีมที่คุณกำหนดเองทำตามขั้นตอนด้านล่าง
1) Bootstrap ไฟล์ css ภายในเว็บโฟลเดอร์
หมายเหตุ :
THEME_LOCATION=>app\design\frontend\vendor-name\theme-name\
THEME_LOCATION\web\css\bootstrap.css เรียก bootstrap ไฟล์ 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 requirejs-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 และล่าสุดเช่นกัน 2.2.6 ทดสอบบน 2.3.3 แล้วเช่นกัน
อัปเดต : ดาวน์โหลด Bootstrap รวบรวมจากที่นี่และใช้ชุด js
คุณสามารถเพิ่ม Bootstrap ด้วยวิธีนี้โดยทำตามขั้นตอนด้านล่าง: หมายเหตุ:โซลูชันนี้ใช้ไม่ได้กับ Magento 2.2.3 ขึ้นไป
1) วาง JS และ CSS ของคุณที่ตำแหน่งด้านล่าง
/ app / ออกแบบ / ส่วนหน้า / ผู้ขายชื่อ / ธีมชื่อ / เว็บ css /
/ app / ออกแบบ / ส่วนหน้า / ผู้ขายชื่อ / ธีมชื่อ / เว็บ / 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 package manager เพื่อเพิ่ม bootstrap 4 ในเว็บโฟลเดอร์ของธีม
ทำไม? เพราะมีการอัพเดทอย่างต่อเนื่อง & จัดการได้ง่าย เรียกใช้คำสั่ง update ที่ Bootstrap 4 ได้รับการปรับปรุง
นอกจากนี้: เราต้องการใช้น้อยกว่าหรือ SCSS กับ bootstrap 4 มันแข็งแกร่งและง่ายต่อการ refactor
ทำตามขั้นตอนด้านล่างเพื่อติดตั้ง bower:
1) ติดตั้ง LTS nodeJS บนระบบปฏิบัติการของคุณจาก: https://nodejs.org/en/
2) ติดตั้งแพคเกจจัดการ bower ทั่วโลก: npm install -g bower
3) ติดตั้งgitจาก: https://git-scm.com/
4) ติดตั้ง bootstrap 4:
ในwebไดเรกทอรีของคุณชุดรูปแบบที่กำหนดเองวีโอไอพี
ตัวอย่างเช่น: เปิดเทอร์มินัลที่ <Magento root>/app/design/frontend/MyCustom/theme/web/
รันคำสั่งนี้เพื่อติดตั้ง bootstrap 4:
bower install bootstrap4
5) หลังจากนี้คุณต้องเพิ่มแบบอักษร bootstrap CSS และ bootstrap JS ในโหนดโครงร่างเริ่มต้นเพื่อเพิ่มประสิทธิภาพการทำงานให้กับทุกหน้าในMagento_Themeโมดูลในธีมที่คุณกำหนดเอง
เราใช้อึกในการรวบรวม SCSS เพื่อ CSS
sudo npm install -g bower. หลังจากติดตั้ง bower ติดตั้งแพ็กเกจ js / css ในไดเร็กทอรี Theme ของคุณ:app/design/frontend/My/Theme/
bower_componentsเป็นwebใช้ไฟล์. bowerrc config
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.