मुझे अपने कस्टम थीम में बूटस्ट्रैप 4 जोड़ना है ।
मैं संदर्भ का उपयोग करके बूटस्ट्रैप 3 जोड़ता हूं:
मेरे कस्टम थीम में बूटस्ट्रैप का उपयोग कैसे करें
लेकिन, बूटस्ट्रैप 4 काम नहीं कर रहा है।
जवाबों:
बूटस्ट्रैप 4 को Magento में जोड़ने के लिए 2.2.3 (परीक्षण) और ऊपर अपने कस्टम विषय में नीचे दिए गए चरणों का पालन करें
1) वेब फ़ोल्डर के अंदर बूटस्ट्रैप css फाइलें
नोट :
THEME_LOCATION=>app\design\frontend\vendor-name\theme-name\
THEME_LOCATION\web\css\bootstrap.css Default_head_blocks में बूटस्ट्रैप css फाइलें कॉल करें
THEME_LOCATION\Magento_Theme\layout\default_head_blocks.xmlसीएसएस जोड़ना
<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 फ़ाइलों को बंडल रूप में जोड़ना तब व्यक्तिगत होता है क्योंकि व्यक्ति काम नहीं करता है
Place bootstrap.bundle.js फाइलें यहां से डाउनलोड कर सकते हैं
THEME_LOCATION\Magento_Theme\web\js\bootstrap.bundle.jsआवश्यकता के अनुसार बूटस्ट्रैप Js को कॉल करें-config.js
THEME_LOCATION\Magento_Theme\requirejs-config.jsके लिए कोड
var config = {
paths: {
'bootstrap':'Magento_Theme/js/bootstrap.bundle',
} ,
shim: {
'bootstrap': {
'deps': ['jquery']
}
}
};
अपने पहले से मौजूद स्क्रिप्ट टैग के बाद शीर्ष लेख में कोड जोड़ें
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 पर भी परीक्षण किया गया
अपडेट किया गया : यहां से संकलित बूटस्ट्रैप डाउनलोड करें और बंडल जेएस का उपयोग करें
आप इस तरह से बूटस्ट्रैप जोड़ सकते हैं, नीचे दिए गए चरणों का पालन करें: नोट: यह समाधान Magento 2.2.3 और इसके बाद के संस्करण के साथ काम नहीं करता है
1) नीचे स्थान पर अपने जेएस और सीएसएस रखें
/ ऐप्स / डिजाइन / दृश्यपटल / विक्रेता-नाम / विषय-नाम / वेब / सीएसएस
/ ऐप्स / डिजाइन / दृश्यपटल / विक्रेता-नाम / विषय-नाम / वेब / 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
आपको अपने थीम वेब फोल्डर में बूटस्ट्रैप 4 जोड़ने के लिए बोवर पैकेज मैनेजर का उपयोग करना चाहिए।
क्यों? क्योंकि निरंतर अद्यतन और प्रबंधन करना आसान है। अद्यतन कमांड चलाएँ बूटस्ट्रैप 4 अद्यतन किया गया है।
ALSO: हम बूटस्ट्रैप के साथ LESS या SCSS का उपयोग करना पसंद करते हैं। इसकी मजबूती और रिफ्लेक्टर के लिए आसान।
बोवर लगाने के लिए नीचे दिए गए चरणों का पालन करें:
1) एलटीएस नोडज अपने संबंधित ओएस से स्थापित करें: https://nodejs.org/en/
2) विश्व स्तर पर बोवर पैकेज मैनेजर स्थापित करें: npm install -g bower
3) से स्थापित करें git: https://git-scm.com/
4) बूटस्ट्रैप स्थापित करें 4:
में webआप Magento कस्टम थीम की निर्देशिका
उदाहरण के लिए: टर्मिनल खोलें <Magento root>/app/design/frontend/MyCustom/theme/web/
बूटस्ट्रैप 4 स्थापित करने के लिए यह कमांड चलाएँ:
bower install bootstrap4
5) इसके बाद आपको Magento_Themeअपने कस्टम थीम में मॉड्यूल में प्रत्येक पेज पर बूस्टैप को काम करने के लिए डिफ़ॉल्ट लेआउट नोड में फोंट, बूटस्ट्रैप सीएसएस और बूटस्ट्रैप जेएस को जोड़ने की आवश्यकता है ।
हम CSS के लिए SCSS संकलित करने के लिए gulp का उपयोग करते हैं।
sudo npm install -g bower:। अपने थीम डायरेक्टरी में bower install js / css पैकेज इंस्टॉल करने के बाद:app/design/frontend/My/Theme/
bower_componentsके लिए webका उपयोग कर .bowerrc कॉन्फ़िग फ़ाइल।
package.jsonबूटस्ट्रैप 4 की पहली ओपन फाइल, अगर आपको filesएरे की की दिखाई देती है तो यह केवल यह दर्शाती है कि फाइल टाइप मिलान आपके प्रोजेक्ट डायरेक्टरी में जोड़ा जाएगा। filesकुंजी का उपयोग केवल Bower कमांड द्वारा किया जाता है। अगर आप बूटस्ट्रैप में योगदान देना चाहते हैं या फिर से खेलना चाहते हैं तो आपको यार्न आज़माना चाहिए। क्योंकि यह प्रोजेक्ट में अनावश्यक फ़ाइल / निर्देशिका जोड़ देगा। वेबपैक और पार्सल नोड प्रोजेक्ट के लिए हैं जो वे फ्रंटएंड के लिए जावास्क्रिप्ट उपयोग के लिए संकलित करते हैं।
उपरोक्त उत्तरों को पढ़ने के बाद, मेरे पास एक और सुझाव है: बूटस्ट्रैप 4 को एक मॉड्यूल में डालें, और बूटस्ट्रैप फ़ाइलों को लिंक करने के लिए सीडीएन का उपयोग करें।
मुझे लगता है कि आप जानते हैं कि एक बुनियादी मॉड्यूल कैसे बनाया जाए। यदि नहीं, तो आप यहाँ देख सकते हैं । तो यहाँ कदम है:
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 को इनडायड के साथ इनक्रेड किया। संदर्भ:
The attribute 'integrity' is not allowed.