উন্নত বিষয়গুলি
From Joomla! Documentation
টেমপ্লেট কিভাবে চালানো হয়?
How are templates executed?/bn
সিস্টেম ত্রুটি পৃষ্ঠাগুলি
কাস্টম ত্রুটি পৃষ্ঠাগুলি
জাভাস্ক্রিপ্ট যোগ
Note that a more up-to-date Joomla document covering this topic can be found at Adding JavaScript and CSS to the page, although it currently doesn't cover the more advanced topics at the bottom of this page.
জাভাস্ক্রিপ্ট (ইসিএমাসক্রিপ্ট নামেও পরিচিত) একটি স্ক্রিপ্টিং ভাষা যা প্রাথমিকভাবে ক্লায়েন্ট-সাইড ওয়েব সাইট ডেভেলপমেন্টে ব্যবহৃত হয় যাতে ব্যবহারকারীদের অভিজ্ঞতা বৃদ্ধি ও উন্নত হয়। জুমলা ডেভেলপারদের কাছে বিদ্যমান এক্সিকিউটিভ পদ্ধতি ব্যবহার করে তাদের এক্সটেনশনে জাভাস্ক্রিপ্ট অন্তর্ভুক্ত করার জন্য সহজেই ব্যবহারযোগ্য মেকানিজমগুলি সরবরাহ করে। আপনার জুমলা এক্সটেনশনে জাভাস্ক্রিপ্ট অন্তর্ভুক্ত করার জন্য বেশ কয়েকটি পদ্ধতি রয়েছে; এইগুলির কিছু নিচে বর্ণিত হয়।
ব্যবহার
Joomla API ব্যবহার করে আপনার কোডে জাভাস্ক্রিপ্ট এম্বেড করার জন্য তিনটি পদ্ধতি রয়েছে; JDocument::addScriptDeclaration, JDocument::addScript এবং
script. এই পদ্ধতিগুলিকে আপনার কম্পোনেন্ট ভিউ ক্লাসে বলা হবে <yourcomponent>/views/<yourview>/view.html.php বা টেমপ্লেট স্ক্রিপ্ট <yourcomponent>/views/<yourview>/tmpl/<yourtemplate>.php বা একটি মডিউল ক্ষেত্রে, তার টেমপ্লেট স্ক্রিপ্ট মধ্যে<yourmodule>/tmpl/<yourtemplate>.php.
ইনলাইন জাভাস্ক্রিপ্ট
জাভাস্ক্রিপ্ট কোডের ব্লক সরাসরি একটি উপাদান বা মডিউল এর প্রদর্শন টেমপ্লেট মধ্যে ঘোষণা করা যাবে JDocument class' addScriptDeclaration পদ্ধতি:
<?php
$document = JFactory::getDocument();
$document->addScriptDeclaration('
window.event("domready", function() {
alert("An inline JavaScript Declaration");
});
');
?>বহিরাগত জাভাস্ক্রিপ্ট
বিকল্পভাবে, আপনি আপনার জাভাস্ক্রিপ্ট একটি পৃথক ফাইলের মধ্যে পৃথক করতে পারেন। আপনার জাভাস্ক্রিপ্টকে একটি বাহ্যিক ফাইল থেকে আলাদা করে আপনার টেমপ্লেট কোডটি সহজেই পড়তে পারে, বিশেষ করে যদি জাভাস্ক্রিপ্ট দীর্ঘ বা জটিল হয়।
জুমলা ব্যবহার করে একটি জাভাস্ক্রিপ্ট ফাইল অন্তর্ভুক্ত করার দুটি উপায় আছে! API- টি। প্রথমটি JDocumentশ্রেণীর 'addScriptপদ্ধতি ব্যবহার করে:
<?php
$document = JFactory::getDocument();
$document->addScript('/media/system/js/sample.js');
?>দ্বিতীয় পদ্ধতি ব্যবহার করে: JHTML class' script
<?php
// Add the path parameter if the path is different than 'media/system/js/'
JHTML::script('sample.js', 'templates/custom/js/');
?>API 3.x পরিবর্তিত হয়েছে, তাই দ্বিতীয় পরামিতি একটি স্ট্রিং হতে পারে না। আপনি যদি সত্যিই এই পদ্ধতি ব্যবহার করতে হবে, আপনি আপনার জাভাস্ক্রিপ্ট ফাইল পরম লিঙ্ক অন্তর্ভুক্ত করা আবশ্যক:
<?php
JHtml::script(Juri::base() . 'templates/custom/js/sample.js');
?>You can use options in a third parameter. This example shows the options version and relative . The file example should be saved in the folder media/com_example/js/example.min.js. So you do NOT need to insert the js in the path you insert as second parameter.
<?php
JHtml::_('script', 'com_example/example.min.js', array('version' => 'auto', 'relative' => true));
?>বিবরণ
জুমলা এপিআই এরJDocument::addScriptDeclaration, JDocument::addScript and script পদ্ধতি jdoc head ট্যাগ মাধ্যমে জুমলা এর index.php মধ্যে জাভাস্ক্রিপ্ট এম্বেড:
<jdoc:include type="head"/>JDocument::addScript বা script জাভাস্ক্রিপ্ট এম্বেড করার জন্য পদ্ধতিগুলি নিম্নলিখিত এইচটিএমএল এর রূপরেখা index.php এর ফলে হবে:
<head>
...
<script type="text/javaScript" src="/media/system/js/sample.js"></script>
...
</head>ক্লাস পদ্ধতিতে কল করা JDocument::addScriptDeclaration নিম্নলিখিত HTML রেন্ডার করবে:
<head>
...
<script type="text/javaScript">
window.addEvent("domready", function() {
alert("Embedded block of JS here");
});
</script>
...
</head>এই পদ্ধতিগুলি ব্যবহার করা অত্যন্ত গুরুত্বপূর্ণ কারণ এটি প্রধান পিএইচপি কোড থেকে অন্য স্ক্রিপ্টিং ভাষার (জাভাস্ক্রিপ্ট) পার্থক্য করে, নিশ্চিত করে যে সকল জাভাস্ক্রিপ্টটি <head> </head> ট্যাগের মধ্যে সঠিকভাবে সংযুক্ত করা হয় এবং JDocument::addScript and JHTML::script নিশ্চিত করে যে একটি জাভাস্ক্রিপ্ট ফাইল শুধুমাত্র একবার অন্তর্ভুক্ত করা হয়েছে (Ie নেই .js ফাইল দ্বৈততা)।
একটি জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক ব্যবহার
একটি জাভাস্ক্রিপ্ট কাঠামো একটি পরিচিত, সামঞ্জস্যপূর্ণ এবং প্ল্যাটফর্ম-স্বাধীন ভাবে বিভিন্ন কোডিং কাজগুলি পরিচালনা করার জন্য জেনারিক কার্যকারিতা সহ ডেভেলপারদের সরবরাহ করে। একটি কাঠামো বিকাশকারীকে বিভিন্ন ওয়েব ব্রাউজারে একটি নির্দিষ্ট ফাংশন বাস্তবায়ন এবং সফ্টওয়্যারের প্রয়োজনীয়তার উপর ফোকাস করার জটিলতার কথা ভুলে যেতে সক্ষম করে।
দুটো জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কস জুমলা 3.x এর অংশ হিসাবে প্রদান করা হয়; jQuery এবং Mootools। জুমলা একটি নতুন চালু কাঠামো যা জুমলা এর নতুন বুটস্ট্র্যাপ এইচটিএমএল ফ্রেমওয়ার্কের সাথে সংহত হয়; Mootools হল Joomla এর লেগ্যাসি জাভাস্ক্রিপ্ট লাইব্রেরি যা এখন jQuery দ্বারা স্থানান্তরিত হয় এবং তৃতীয় পক্ষের এক্সটেনশনগুলির সাথে সামঞ্জস্যপূর্ণতা সহ অন্তর্ভুক্ত করা হয়।
আপনার এক্সটেনশান বা টেমপ্লেটগুলিতে জাভাস্ক্রিপ্ট তৈরির সময় এবং জুমলা এর API এর সাথে খুব সহজেই জুড়ে থাকা প্রায় সব ক্ষেত্রে আপনি একটি কাঠামো ব্যবহার করতে হবে।
জুমলা 3.x jQuery
জুমলা 3.x এ একটি ফ্রেমওয়ার্ক সহ তথ্যের জন্য জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কস জুমলা 3.x -এ গাইডটি দেখুন।
জুমলা 1.5 / 2.5 Mootools
যতক্ষণ না আপনি জাভাস্ক্রিপ্ট কোড বজায় রাখেন না যা মুটুলস ব্যবহার করে থাকে বা আপনি জুমলা 2.5 বা তার আগে এর জন্য একটি এক্সটেনশান তৈরি করছেন তবে এটি আপনাকে jQuery এর পরিবর্তে পরিবর্তিত করার সুপারিশ করবে।
প্রথমত, আপনাকে আপনার এক্সটেনশনে Mootools কোড অন্তর্ভুক্ত করতে হবে। আপনার এক্সটেনশনের Mootools ফ্রেমওয়ার্ক অন্তর্ভুক্ত করার জন্য, আপনি আপনার view.html.php বা tmpl ফাইলে নিম্নলিখিত কোডটি যোগ করুন:
জুমলা 1.5 জন্য
JHTML::_('behavior.mootools');জুমলা 2.5 জন্য
JHtml::_('behavior.framework');অনুরূপ jQuery ফ্রেমওয়ার্ক বিবৃতি হিসাবে একই ফলাফল উপরের কোড ফলাফল; যে এটি নিশ্চিত Mootools সঠিকভাবে অন্তর্ভুক্ত করা হয় এবং শুধুমাত্র একবার।
তারপর Mootools ব্যবহার করে jQuery এর প্রায় অভিন্ন:
JFactory::getDocument()->addScriptDeclaration('
window.addEvent("domready", function() {
alert($("list").getElements("li").length);
});
');Mootools সম্পর্কে আরো তথ্য http://mootools.net/ এ উপলব্ধ। API ডকুমেন্টেশনের জন্য, http://mootools.net/docs/core দেখুন।
তৃতীয় পক্ষের ডেভেলপারদের জন্য গুরুত্বপূর্ণ নোট
যদি আপনি একটি কাস্টম টেমপ্লেট ওভাররাইড বা এক্সটেনশান তৈরি করেন যা একটি কাস্টম JS ফাইল যোগ করার প্রয়োজন হয় তবে আপনার কাস্টম জেস ফাইলগুলির আগে জাকির বা মুটুনালগুলির মত গুরুত্বপূর্ণ নির্ভরতাগুলি যোগ করা নিশ্চিত করুন। জেএস কাঠামো ফাইলগুলি অবশ্যই অন্য কোন ফাইলের আগে লোড হবে না তা নিশ্চিত করার জন্য প্রথমেই তা কার্যকর করা উচিত, অন্যথায় অন্য ফাইলগুলি যেগুলি তাদের প্রয়োজনীয় কাঠামোর আগে লোড হতে পারে সেগুলি বিহীন ব্যতিক্রম।
যেমন Protostar বা Beez কিছু টেমপ্লেট আপনি যেমন ফাংশন ব্যবহার করার প্রয়োজন সব নির্ভরশীলতা সন্নিবেশ
JHtml::_('bootstrap.framework');
Jquery + বুটস্ট্র্যাপ লোড করতে, কিন্তু আপনার এক্সটেনশান বা কাস্টম টেমপ্লেটগুলি ওভাররাইডের উপর নির্ভর করে না। সর্বদা আপনার এক্সটেনশন বা কাস্টম টেমপ্লেট আগে এটি প্রয়োজন নির্ভরতা লোড উপর আধার নিশ্চিত করুন, আমি কেন পরে ব্যাখ্যা করবে:
উদাহরণস্বরূপ, যদি আপনি একটি কাস্টম টেমপ্লেট আড়াআড়ি পেয়ে থাকেন যা কিছু জাকির স্ক্রিপ্টের সাহায্যে JS ফাইল সন্নিবেশ করাতে হয় তবে সেই টেমপ্লেট ওভাররাইডের সমস্ত পৃষ্ঠার উপর অভিনব জিনিসগুলি ব্যবহার করা হয়। সেই ক্ষেত্রে আপনাকে এই ওভাররাইড ফাইলে উপরের অংশে ডিক্লেয়ার করা উচিত:
JHtml::_('jquery.framework');
$doc->addScript('templates/'.$this->template.'/js/fancy-script.js');
আপনি যদি 3 য় পক্ষের এক্সটেনশনটি উন্নয়ন করেন যা আপনি জুমলাতে রাখার পরিকল্পনা করছেন! এক্সটেনশন ডিরেক্টরিটি আপনাকে এই রকম কিছু করতে হবে:
if($params->get('add_extension_resources', false))
{
JHtml::_('jquery.framework');
$doc->addScript('media/com_fancy/js/fancy-script.js');
}
এক্সটেনশান রিসোর্সগুলি যোগ করা বা না করা হবে কিনা তা স্থিরীকৃত শর্ত জোরালোভাবে উত্সাহিত এবং ভালো অনুশীলন বলে বিবেচিত হয় কারণ এটি তৃতীয় পক্ষের ডেভেলপারদের নমনীয়তা দেয় যা আপনার এক্সটেনশান ব্যবহার করতে চায় না সম্পদ এবং জুমলা সঙ্গে যুদ্ধ না করে কাস্টম / সংশোধন ফাইল ব্যবহার! সদৃশ এবং হ্যাক ব্যবহার করে আপনার মূল এক্সটেনশানগুলি সরিয়ে ফেলার জন্য ডুপ্লিকেট এবং দ্বন্দ্বগুলি এড়াতে সক্ষম হবেন
ব্যাখ্যা
যদি আপনি প্রোটোস্টার টেমপ্লেট থেকে index.php এর সোর্স কোড চেক করেন, তাহলে আপনি দেখতে পারেন যে বিবৃতিগুলি
JHtml::_('bootstrap.framework');
বিবৃতির আগে উপায় যোগ করা হয়
<jdoc:include type="head" />
এই আপনি মনে করতে পারেন ফ্রেমওয়ার্ক ফাইল এবং আপনার তৃতীয় পক্ষের ফাইল মত পদ্ধতি ব্যবহার করে মত
$doc->addScript('templates/'.$this->template.'/js/fancy-script.js');
$doc->addScript('media/com_fancy/js/fancy-script.js');
ডান প্রান্তে ডান ক্রমে যুক্ত করা হবে, 'কিন্তু এটি' নয়, কারণ এক্সটেনশন ফাইল এবং টেমপ্লেট ওভাররাইড ফাইলগুলি প্রথম এবং আপনার বর্তমানের index.php ফাইল প্রক্রিয়া করা হচ্ছে। টেমপ্লেট 'শেষ' প্রক্রিয়া করা হয়। এটি আপনার কাস্টম জেড ফাইলগুলি প্রথমে ঢোকা এবং টেমপ্লেট থেকে সন্নিবেশকৃত ফ্রেমওয়ার্ক ফাইলগুলি পরে ঢোকা হবে।
এটা জুমলা কারণ! এপিআই (যেমন $doc->addScript) এএস ফাইল পাথ সংরক্ষণ করার জন্য একটি অ্যারের ব্যবহার করে এবং তারা সেই অ্যারে (FIFO stack) এ ঢোকানো একই আদেশে ডকুমেন্টে উপস্থাপিত করে। এছাড়াও, একবার একটি ফাইল পাথ অ্যারে ঢোকানো হয় এবং অন্য API কল একই ফাইল সন্নিবেশ করার চেষ্টা করে, এই ক্রিয়াটি ডুপ্লিকেটগুলি এড়ানোর জন্য উপেক্ষা করা হয়। এটি অর্থাত্ ফাইলগুলির ক্রম পরিবর্তিত হয় না যখন একই ফাইলগুলি বেশ কয়েকবার ঢোকানো হয়।
বলেন যে এই করছেন
JHtml::_('jquery.framework');
$doc->addScript('templates/'.$this->template.'/js/fancy-script.js');
আপনার কাস্টম টেমপ্লেটগুলি ওভাররাইড এবং এক্সটেনশান এ, প্রয়োজনীয়এবং কল দিয়ে ক্ষতি বা সংঘাত সৃষ্টি করে না
JHtml::_('bootstrap.framework');
আপনার টেমপ্লেট index.php ফাইল এ।
বাহ্যিক লিঙ্ক
https://api.joomla.org/cms-2.5/classes/JHtmlBehavior.html#method_framework
https://api.joomla.org/cms-3/classes/JHtmlBehavior.html#method_framework
http://en.wikipedia.org/wiki/JavaScript
http://www.w3schools.com/js/default.asp
কিভাবে ব্রাউজার ক্ষমতা নির্ধারণ করা হয়?
How to determine browser capabilities/bn
অন্যান্য আউটপুট ডিভাইসের জন্য স্টাইলশিট যোগ করা
সিএসএস স্টাইল শীট ব্যবহার করে ওয়েব পেজ ব্রাউজ করতে ব্যবহৃত ডিভাইসের উপর নির্ভর করে নির্দেশাবলী (শৈলী) ব্যবহার করা সম্ভব।
মিডিয়া প্রকার
স্বীকৃত মিডিয়া ধরনের হয়:
- all - সব ডিভাইসের জন্য উপযুক্ত
- aural - স্পিচ সিন্থেসাইজার জন্য.
- braille - ব্রেইল টাচসাইট প্রতিক্রিয়া ডিভাইসগুলির জন্য অভিপ্রায়.
- embossed - মুদ্রিত ব্রেইল প্রিন্টারের জন্য.
- handheld - হ্যান্ডহেল্ড ডিভাইসের জন্য অভিপ্রায়.
- print - মুদ্রিত পৃষ্ঠাগুলির ফর্ম্যাটিংয়ের জন্য ব্যবহৃত.
- projection - প্রজেক্ট উপস্থাপনাগুলির জন্য, উদাহরণস্বরূপ প্রজেক্টর বা স্বচ্ছতাগুলিতে মুদ্রণ.
- screen - মূলত রং কম্পিউটার স্ক্রিনের জন্য.
- tty - একটি নির্দিষ্ট-পিচ চরিত্র গ্রিড ব্যবহার করে মিডিয়া যেমন, টেলিট্যাপ, টার্মিনাল, অথবা সীমিত প্রদর্শন ক্ষমতা সহ পোর্টেবল ডিভাইসগুলির জন্য। লেখকেরা "tty" মিডিয়া প্রকারের সাথে পিক্সেল ইউনিট ব্যবহার করবেন না।
- tv - টেলিভিশন-টাইপ ডিভাইসের জন্য (কম রেজোলিউশন, রঙ, সীমিত স্ক্রলবেরি স্ক্রীন, উপলব্ধ শব্দ) জন্য ইচ্ছুক।
উদাহরণ
আপনি নিম্নলিখিত সিনট্যাক্স দিয়ে একটি CSS ঘোষণায় একটি মিডিয়া প্রকার বরাদ্দ করতে পারেন
@media print {
body {
font-size: 12pt;
font-color: #000000;
}
}একাধিক প্রচারের ধরন একাধিক মিডিয়া প্রকারে প্রদান করতে:
@media print, handheld{
body {
font-size: 12pt;
font-color: #000000;
}
img {
max-width: 100%;
height: auto;
}
}নির্দেশিকা প্রধান CSS ফাইলে বা একটি নির্দিষ্ট স্টাইল শীট একটি নির্দিষ্ট মিডিয়া প্রকারের জন্য ব্যবহার করা যেতে পারে। টেমপ্লেটের মধ্যে CSS ফাইলে অন্তর্ভুক্ত থাকা আবশ্যক <head> বিভাগ (নিম্নলিখিত জুমলা! বিইজ টেমপ্লেট থেকে নেওয়া হয়েছে):
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/beez/css/print.css" type="text/css" media="Print" />একটি স্টাইলশীট অন্তর্ভুক্ত করার প্রস্তাবিত উপায় হল:
<?php
$document = JFactory::getDocument();
$tpath = $this->baseurl . '/templates/' . $this->template;
$document->addStyleSheet( $tpath . '/css/print.css', 'text/css', 'print'); // arguments: $path, $type, $media
?>এই ভাবে, আপনি স্টাইলশীটটি নথিতে যুক্ত হবে এবং প্লাগইনগুলি অ্যাক্সেসযোগ্য (যেমন স্টাইলশীট সংমিশ্রণ এবং কম্প্রেস করার জন্য) তা নিশ্চিত করে।