আমি আমার কাস্টম থিমটিতে বুটস্ট্র্যাপ 4 যুক্ত করেছি ।
আমি রেফারেন্সটি ব্যবহার করে বুটস্ট্র্যাপ 3 যুক্ত করব:
আমার কাস্টম থিমটিতে কীভাবে বুটস্ট্র্যাপ ব্যবহার করবেন
তবে, বুটস্ট্র্যাপ 4 কাজ করছে না।
উত্তর:
আপনার কাস্টম থিমের বুথস্ট্র্যাপ 4 ম্যাজেন্টো ২.২.৩ এ (পরীক্ষিত) এবং উপরে যুক্ত করার জন্য নীচের পদক্ষেপগুলি অনুসরণ করুন
1) বুটস্ট্র্যাপ সিএসএস ফাইল ওয়েব ফোল্ডারের ভিতরে
দ্রষ্টব্য :
THEME_LOCATION=>app\design\frontend\vendor-name\theme-name\
THEME_LOCATION\web\css\bootstrap.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) ব্যান্ডেল আকারে জেএস ফাইলগুলি যুক্ত করার পরিবর্তে স্বতন্ত্র কারণ ব্যক্তিগতভাবে কাজ করে না
প্লেস বুটস্ট্র্যাপ.বান্ডেল.জেএস ফাইলগুলি এখান থেকে ডাউনলোড করতে পারে
THEME_LOCATION\Magento_Theme\web\js\bootstrap.bundle.jsবুটস্ট্র্যাপ জেএস-এ কল করুনjj-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 এবং তার উপরের সাথে কাজ করে না
1) নীচে অবস্থানে আপনার জেএস এবং সিএসএস রাখুন
/ অ্যাপ্লিকেশন / ডিজাইন / ফ্রন্টএন্ড / বিক্রেতা নাম / থিম-নাম / ওয়েব / CSS
/ অ্যাপ্লিকেশন / ডিজাইন / ফ্রন্টএন্ড / বিক্রেতা নাম / থিম-নাম / ওয়েব / JS
2) আপনার ডিফল্ট_হেড_ব্লক.এক্সএমএলগুলিতে কল করুন
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 আপডেট কমান্ডটি আপডেট হয়েছে।
এছাড়াও: আমরা বুটস্ট্র্যাপ ৪ এর সাথে কম বা এসসিএসএস ব্যবহার করতে পছন্দ করি rob এটির দৃust় এবং সহজেই চুল্লি কার্যকর।
বোরও ইনস্টল করার জন্য নীচের পদক্ষেপগুলি অনুসরণ করুন:
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
৫) এর পরে Magento_Themeআপনার কাস্টম থিমের প্রতিটি পৃষ্ঠায় মডিউলে বুস্ট্র্যাপের কাজ করতে আপনার ডিফল্ট লেআউট নোডে ফন্ট, বুটস্ট্র্যাপ সিএসএস এবং বুটস্ট্র্যাপ জেএস যুক্ত করতে হবে ।
এসএসএসএসকে সিএসএসে সংকলন করতে আমরা গল্প ব্যবহার করি।
sudo npm install -g bower। আপনার থিম ডিরেক্টরিতে বওয়ার ইনস্টল জেএস / সিএসএস প্যাকেজ ইনস্টল করার পরে:app/design/frontend/My/Theme/
bower_componentsকরতে হবে। web
package.jsonবুটস্ট্র্যাপ 4-এর প্রথম উন্মুক্ত ফাইল, আপনি যদি filesঅ্যারে কী দেখেন তবে এটি কেবল দেখায় যে ফাইল প্রকারের মিলটি আপনার প্রকল্প ডিরেক্টরিতে যুক্ত হবে। filesকীটি কেবল বোভার কমান্ড দ্বারা ব্যবহৃত হয়। আপনি যদি বুটস্ট্র্যাপে অবদান রাখতে বা পুনরায় সংকলন করতে চান তবে আপনার সুতোর চেষ্টা করা উচিত। কারণ এটি প্রকল্পে অপ্রয়োজনীয় ফাইল / ডিরেক্টরি যুক্ত করবে। ওয়েবপ্যাক এবং পার্সেল নোড প্রকল্পের জন্য যা তারা জাভাস্ক্রিপ্ট ব্যবহারের সাথে সম্মুখভাগের জন্য সংকলন করে।
উপরের উত্তরগুলি পড়ার পরে, আমার আরেকটি পরামর্শ রয়েছে: বুটস্ট্র্যাপ 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কমান্ড চালান , এটাই!
উপকারিতা:
ম্যাজেন্টো ২.২.৪ এ পরীক্ষিত, তবে সমস্ত ম্যাজেন্টো ২ এক্স এক্স সংস্করণে কাজ করা উচিত। সম্পাদনা * লিংক ট্যাগগুলি href কে src এ পরিবর্তন করে ডেভডোকগুলির সাথে ইনলাইন হতে পারে। রেফারেন্স:
The attribute 'integrity' is not allowed.