স্রেফ কোনও সিএসএস ফাইল সংযুক্ত করার জন্য কেন অ্যাডস্টাইলপত্রক বা জেএইচটিএমএল :: স্টাইলশিট ব্যবহার করবেন?


9

উইকি পৃষ্ঠা অনুসারে পৃষ্ঠায় জাভাস্ক্রিপ্ট এবং সিএসএস যুক্ত করে আপনি addStyleSheetএই জাতীয় স্টাইলশিট যুক্ত করতে পারেন :

$document = JFactory::getDocument();
$document->addStyleSheet($url);

বা এর JHtml::stylesheetমতো:

JHtml::stylesheet($url, array(), true);

তবে উইকি পৃষ্ঠাটি একটি বেসিক টেম্পলেট তৈরি করা শিখনকে এই জাতীয় স্টাইলশীট অন্তর্ভুক্ত করার নির্দেশ দেয়:

<head>
    <jdoc:include type="head" />
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css">
</head>

এই বাইপাস addStyleSheetএবং JHtml::stylesheet। এই একটি ভাল ধারণা? আপনি কখন প্রাক্তনটি ব্যবহার করবেন এবং আপনি কখন ব্যবহার করবেন?

দ্রষ্টব্য: JHtml::_("script", …) এবং JHtml::_("stylesheet", …)প্রায় হিসাবে একই JHtml::scriptএবং JHtml::stylesheet। দেখুন কী JHtml::_না


সংশ্লিষ্ট প্রশ্ন জাভাস্ক্রিপ্ট সম্পর্কে জিজ্ঞাসা করা: joomla.stackexchange.com/q/325/5239
Flimm

উত্তর:


7

JHtmlসাধারণত এক্সটেনশনে ব্যবহৃত হয় কারণ এর অর্থ ওভাররাইডগুলি সম্পাদন করা যায় যা আপনি যদি বিকাশকারী হন তবে এটি একটি দুর্দান্ত বৈশিষ্ট্য। এটি $document->...কিছু অতিরিক্ত কার্যকারিতা যুক্ত করে প্রসারিত করে।

এখানে একটি উদাহরণ:

/js
   /script.js
   /script.min.js

যখন ব্যবহার JHtml, minified স্ক্রিপ্ট সংস্করণ পৃষ্ঠা লোড বার কমাতে লোড হবে। আপনি যখন গ্লোবাল কনফিগারেশনে ডিবাগ মোড সক্ষম করবেন, এটি এটি পঠনযোগ্য করার জন্য এটি ফাইলের - সংযুক্ত সংস্করণটি লোড করবে ।

আপনি এক্সটেনশনের জন্য একইভাবে কোনও টেম্পলেটটিকে ওভাররাইড করতে পারবেন না, তাই প্রচুর টেম্পলেট ব্যবহার করা হয় <link>কারণ কোনও custom.cssফাইল যুক্ত করে কোনও ওভাররাইড কেবলই করা যায় , তারপরে এতে আপনার কোড যুক্ত করে। সুতরাং নেটিভ <link>ট্যাগগুলি ব্যবহার করে CSS ফাইল লোড করতে জুমলা এপিআই ব্যবহার করে দ্রুত হয়


সুতরাং JHtmlএকটি টেমপ্লেট ব্যবহার করার একমাত্র সুবিধা হ্রাসকরণ পাওয়া?
ফ্লিম

@ ফ্লিম - এখানে একবার দেখুন, যেখানে এটি আরও কিছুটা বিশদভাবে ব্যাখ্যা করবে: ডকসস.জোমলা.অর্গ
জে.এক্স

এটি আমার প্রশ্নের লিংক :) আমি কেবল স্পষ্টতা চেয়েছিলাম কারণ এটিকে অদ্ভুত বলে মনে হয়েছিল যে আপনি কখনও <link ...>কোড ডিরেক্টল লিখবেন write
ফ্লিম

1
কোনও টেম্পলেটে, এটি করা
ঠিকঠাক

1
@ ফ্লিম জেএইচটিএমএল MD5SUM ফাইলগুলির সাথেও কাজ করে, $ ডকুমেন্ট-> অ্যাডস্টাইলশিট করে না। ম্যাগাজিন.জোমলা.আর.ইউজ.ইউস.আইসু-
নোভ ২০১৪

6

অন্যদের পাশাপাশি, আমি যে একক বৃহত্তম লাভটি পেয়েছি তা হ'ল সমস্ত সিএসএস / জেএসএস ফাইলগুলি একই সময়ে একই সময়ে হয়।

এটি কোনও উপকারের মতো নাও লাগতে পারে, তবে অন্য একটি উদাহরণ থেকে একটি স্নিপেট

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css">

পরে যখন আপনি পরিবর্তন করতে চান system.css, আপনি পরিবর্তন করতে পারবেন এবং তারপরে বুঝতে পারবেন যে আপনার ব্যবহারকারীদের system.cssআপনার নতুন সামগ্রীতে তাদের ক্যাশে পুরানো রয়েছে, এর অর্থ আপনাকে কোডটি কিছুটা আলাদা URL হিসাবে পরিবর্তন করতে হবে (বা আপনার ক্যাশের সময় এবং হ্রাস করতে হবে এবং ব্যবহারকারীকে আরও প্রায়ই ডাউনলোড করুন)

যখন আপনি জেএইচটিএমএল পদ্ধতিটি ব্যবহার করেন যখন টেমপ্লেট উত্পন্ন হয় আপনি তারপরে সিএসএস / জেএস ফাইলের একটি "সংস্করণ" তৈরি করতে পারবেন (ফাইলটাইম ব্যবহার করা ভাল, বা গিট কমিট আইডি ইত্যাদি) তাই কন্টেন্টটি তাত্ক্ষণিকভাবে পরিবর্তন করে নতুন সিএসএসকে দেয় আপনার সাইট দেখার জন্য সমস্ত লোক। দীর্ঘ ক্যাশের সময় + তাত্ক্ষণিক পুনঃ জেনারেশন মানে প্রতি পৃষ্ঠায় কম ডাউনলোড।

কোড নমুনা (কাজ পরীক্ষা করা নয়, যদিও আমি একই কোড ব্যবহার করি)

$styles  = $this['asset']->get('css');
if ($styles) {
  foreach ($styles as $style) {
    if ($url = $style->getUrl()) {
      if ($url[0] == "/") {
      //its local, find it and add the mtime
        if (file_exists(getcwd() . $url)) {
          $url .= "?" .filemtime(getcwd() . $url);
        }
      }
      printf("<link rel=\"stylesheet\" href=\"%s\" type=\"text/css\" />\n", $url);
    } else {
      printf("<style>%s</style>\n", $style->getContent());
    }
  }
}

পাথগুলি সঠিকভাবে পাওয়া গেছে তা নিশ্চিত করার জন্য আপনার কোডটির জন্য এই কোডটির জন্য টুইট করা দরকার


5

জুমলা তাদের ফ্যাক্টরি থেকে নিজস্ব এপিআই সরবরাহ করে আমরা এটিকে জেফ্যাক্টরি হিসাবে বলতে পারি।

ব্যবহারের কোনও ক্ষতি নেই:

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css">

ওপরে

$document = JFactory::getDocument();
$document->addStyleSheet($url);

তবে, আপনি যদি উপরের পদ্ধতির সাথে আপনার স্টাইলশিটগুলি অন্তর্ভুক্ত করছেন তবে তা <head>স্বয়ংক্রিয়ভাবে আপনার টেম্পলেটটির বিভাগে অন্তর্ভুক্ত হবে <jdoc:include type="head" />। আরও এগিয়ে যাওয়া, যদি আমরা আমাদের নিজস্ব এক্সটেনশন বিকাশ করে থাকি এবং যদি আপনি স্পষ্টভাবে নিজের নিজস্ব সিএসএস বা জাভাস্ক্রিপ্ট পেতে চান তবে আপনি উপরের পদ্ধতিতে এটি ঘোষণা করতে পারেন। এটি আবার এটি আপনার <head>বিভাগে যুক্ত করবে এবং আপনাকে আপনার টেমপ্লেট আপডেট করতে এড়াবেindex.php

কখনও কখনও আপনি চান যে সমস্ত স্ক্রিপ্টগুলি আপনার শরীরের শেষের দিকে সমস্ত ডিওএম উপাদান লোড করার জন্য প্রদর্শিত হবে। এই পরিস্থিতিতে আপনি আপনার স্ক্রিপ্টগুলি <body>নীচের সাথে আপনার উপাদানটির শেষে অন্তর্ভুক্ত করতে চাইতে পারেন :

<script type="text/javascript" src="myScript.js"></script>

আপনি সিএসএস এবং স্ক্রিপ্টগুলি পরিচালনা করার জন্য অতিরিক্ত নিয়ন্ত্রণও পাবেন যেমন আপনি প্রয়োজন না হলে প্রোগ্রামালিমে স্ক্রিপ্টস এবং স্টাইলশিটগুলি আনসেট করতে পারেন।


আমি বুঝতে পারি যে JFactoryস্টাইলশিটটি এতে রেখেছিল <jdoc:include type="head" />, আমার প্রশ্নগুলি কেন আপনি যখন নিজেরাই <link ...>লাইনটি লিখতে পারেন তখন কোনও টেম্পলেটটিতে এটি ব্যবহার করা কেন বিরক্ত হয় ?
ফ্লিম

এটি <link...>টেমপ্লেটে ব্যবহার করা পুরোপুরি জরিমানা । তবে প্রতিটি কাঠামো / সিএমএসের নিজস্ব বাস্তবায়নের উপায় রয়েছে। জুমলাও এর ব্যতিক্রম নয়। স্ক্রিপ্ট এবং স্টাইলশিট রেন্ডার করার এটি একটি জুমলা উপায়। টেমপ্লেটটিকে ওভাররাইড করার কোনও উপায় নেই, আমরা এখনও পুরানো <link...>মার্কআপের উপর নির্ভর করতে পারি ।
সাহিল পুর

0

স্টাইলশিট এবং জাভাস্ক্রিপ্ট লোড করার জন্য "অ্যাডএক্সএক্সএক্সএক্সএক্সএক্সএক্স" পদ্ধতি ব্যবহারের জন্য বেশ কয়েকটি অতিরিক্ত সুবিধা রয়েছে।

আপনি ইনস্টল করতে পারেন এমন এক্সটেনশন রয়েছে যা এই ফাইলগুলিকে একসাথে রাখবে এবং এগুলিকে একটি একক ফাইলে গিজপ করবে, এভাবে পৃষ্ঠার গতি উন্নত করবে (HTTP অনুরোধ এবং ফাইলের আকার হ্রাস করে)।

এছাড়াও প্রয়োজনীয় ফাইল লোড হওয়ার জন্য আপনি সেগুলি টেম্পলেট এবং লেআউট ওভাররাইডগুলিতে ব্যবহার করতে পারেন। উদাহরণস্বরূপ, যদি আপনার কয়েকটি সামগ্রীর আইটেমের জন্য নির্দিষ্ট জাভাস্ক্রিপ্ট লাইব্রেরির প্রয়োজন হয় (যেমন ফটোগ্রাফের রাজমিস্ত্রি স্টাইলগুলি পাঠানোর জন্য একটি গ্রন্থাগার) আপনি সেই ধরণের নিবন্ধগুলির জন্য একটি নির্দিষ্ট বিন্যাস তৈরি করতে পারেন যা জেএস লাইব্রেরিটি লোড করতে সেই প্রক্রিয়াটি ব্যবহার করবে এবং স্টাইল শীটগুলি ধরণের প্রদর্শনগুলির জন্য নির্দিষ্ট। এর অর্থ হ'ল অতিরিক্ত ওজন কেবলমাত্র প্রয়োজনীয় পৃষ্ঠাগুলিতে যুক্ত হয় তবে তবুও সংস্করণ তথ্য এক জায়গায় রাখে, সুতরাং একটি সম্পাদনা যখন জিনিসগুলি পরিবর্তিত হয় তখন একাধিক পরিবর্তন করার পরিবর্তে একাধিক পৃষ্ঠা প্রদর্শনগুলি পরিবর্তন করে (এবং আমরা সবাই জানি তারা সেগুলি জানে) পরিবর্তন হবে )।

ব্যক্তিগতভাবে, আমি সেই সুবিধাগুলি বিবেচনা করি এবং প্লাস্টিকের যখন প্রয়োজন হয় তখন বিভিন্ন অনুলিপি সহ সেই ফাইলগুলিকে ওভাররাইড করার ক্ষমতা বিবেচনা করি, যাতে সেগুলি যুক্ত করার আমার পছন্দের উপায়টি যথেষ্ট হয়।


-1

আপনি যদি <link >আপনার জুমলা মাথাটি ব্যবহার করেন তবে পরিপাটি হবে না কারণ <link >জাভাস্ক্রিপ্ট ব্লকের আওতায় প্রদর্শিত হবে, আউটসাইট <jdoc:include type="head" />এবং জুমলা আবার ফোল্ডার সিএসএসে ফিরে আসবে। এটি জুমলার পারফরম্যান্সকে প্রভাবিত করবে বলে মনে করা হচ্ছে। এবং আপনি যদি ব্যবহার করেন তবে আপনি <link >প্লেইন ইনডেক্সে অনেক পরিবর্তনশীল প্রতিধ্বনি পাবেন।

আমি ব্যবহার করি $doc->addStyleSheetকারণ .cssভিতরে সিএসএস ব্লকটি প্রদর্শিত হবে <jdoc:include type="head" />। জাভাস্ক্রিপ্ট ব্যবহারের জন্য একই $doc->addScript<jdoc:include type="head" />জুমলার পরে সমস্ত শেষ হয়ে যাবে এবং আরও গুরুত্বপূর্ণ কাজ করবে। :)

কিছু লোক <link >যেমন অসমর্থিত ব্রাউজারের জন্য ব্যবহার করে

<!--[if IE 8]>
<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/ie8only.css" rel="stylesheet" type="text/css" />
<![endif]-->

<!--[if lt IE 9]>
    <script src="<?php echo $this->baseurl ?>/media/jui/js/html5.js"></script>
<![endif]-->

এটি নীচে প্রদর্শিত হবে <jdoc:include type="head" />


এটি আসলে জিজ্ঞাসা করা প্রশ্নের উত্তর দেয় না। যদি আপনি বিশ্বাস করেন যে আপনার দেওয়া কোডটি সর্বোত্তম পদ্ধতি, তবে কেন তা ব্যাখ্যা করুন।
লোডার

আপনি বলছেন যে <link>ট্যাগটি পরে উপস্থিত হবে <jdoc:include type="head" />, তবে আপনি কেবল কোডটি যুক্ত করলেই এটি ঘটে happens আপনি যদি এটি আগে যুক্ত করেন তবে এটি উপস্থিত হবে। Index.php- এ পিএইচপি ভেরিয়েবল প্রতিধ্বনি করার ক্ষেত্রে, আপনি যখন এই কথাটি বলছেন তখন আপনার অর্থ কী তা আমার কোনও ধারণা নেই। <link>ট্যাগ ব্যবহার করা বেসিক এইচটিএমএল এবং জুমলা এই কাজ করার
পদ্ধতিটি

এবং আপনি <jdoc এর আগে যুক্ত করবেন: টাইপ = "হেড" /> অন্তর্ভুক্ত করবেন? @ লড্ডার
এভলিন রাদিত্য
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.