เหตุใดจึงใช้ addStyleSheet หรือ JHtml :: stylesheet เหนือการเชื่อมโยงไฟล์ CSS

9

จากหน้า wiki การเพิ่ม Javascript และ CSS ไปยังหน้าคุณสามารถเพิ่มสไตล์ชีทด้วย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::_ทำ

jhtml jfactory

— Flimm
แหล่งที่มา

คำถามที่เกี่ยวข้องถามเกี่ยวกับ Javascript: joomla.stackexchange.com/q/325/5239

— Flimm

7

JHtmlโดยปกติจะใช้ในส่วนขยายเนื่องจากมันหมายถึงการแทนที่สามารถทำได้ซึ่งเป็นคุณสมบัติที่ดีจริงๆหากคุณเป็นนักพัฒนาซอฟต์แวร์ มันยังขยาย$document->...โดยการเพิ่มฟังก์ชั่นเพิ่มเติมบางอย่าง

นี่คือตัวอย่าง:

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

เมื่อใช้JHtmlงานเวอร์ชันย่อของสคริปต์จะถูกโหลดเพื่อลดเวลาในการโหลดหน้าเว็บ เมื่อคุณเปิดใช้งานโหมดการแก้ปัญหาในการกำหนดค่าส่วนกลางก็จะโหลดunminifiedรุ่นของแฟ้มที่จะทำให้มันสามารถอ่านได้

คุณไม่สามารถแทนที่เทมเพลตในแบบเดียวกับที่คุณทำกับส่วนขยายดังนั้นเทมเพลตจำนวนมากใช้<link>เพราะการแทนที่ใด ๆ สามารถทำได้โดยการเพิ่มcustom.cssไฟล์จากนั้นเพิ่มรหัสของคุณลงไป ดังนั้นการใช้<link>แท็กเนทีฟจะเร็วขึ้นจากนั้นใช้ Joomla API เพื่อโหลดไฟล์ CSS

— Lodder
แหล่งที่มา

ดังนั้นข้อดีเพียงอย่างเดียวของการใช้JHtmlเทมเพลตคือการได้รับการลดขนาด?

— Flimm

@Flimm - ดูที่นี่ซึ่งจะอธิบายรายละเอียดเพิ่มเติมเล็กน้อย: docs.joomla.org/J3.x:Adding_JavaScript_and_CSS_to_the_page

— Lodder

นั่นคือลิงก์ในคำถามของฉัน :) ฉันแค่ต้องการความกระจ่างเพราะมันแปลกที่คุณจะเขียน<link ...>โค้ด directyl

— Flimm

1

ในเทมเพลตการทำเช่นนี้ทำได้อย่างสมบูรณ์แบบเนื่องจากคุณไม่สามารถแทนที่เทมเพลตจริงในแบบที่คุณสามารถมีส่วนขยายได้ดังนั้นการนำเข้าเนื้อหาสามารถทำได้โดยไม่ต้องใช้ Joomla API;)

— Lodder

1

@Flimm JHtml ใช้งานกับไฟล์ MD5SUM ได้ $ document-> addStyleSheet ไม่ทำงาน magazine.joomla.org/issues/issue-nov-2014/item/…

— COBIZ webdevelopment

6

นอกเหนือจากรายการอื่น ๆ ประโยชน์ที่ใหญ่ที่สุดเดียวที่ฉันพบคือไฟล์ CSS / JSS ทั้งหมดอยู่ในอาร์เรย์เดียวกันในเวลาเดียวกัน

สิ่งนี้อาจดูไม่เหมือนประโยชน์ แต่เป็นตัวอย่างจากอีกตัวอย่างหนึ่ง

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

ในภายหลังเมื่อคุณต้องการเปลี่ยนแปลงsystem.cssคุณจะทำการเปลี่ยนแปลงแล้วตระหนักว่าผู้ใช้ของคุณมีsystem.cssแคชเก่ากับเนื้อหาใหม่ของคุณซึ่งหมายความว่าคุณจะต้องเปลี่ยนรหัสให้เป็น URL ที่แตกต่างกันเล็กน้อย (หรือลดเวลาแคชและ ทำให้ผู้ใช้ดาวน์โหลดบ่อยขึ้น)

เมื่อคุณใช้วิธี JHTML เมื่อแม่แบบถูกสร้างขึ้นคุณสามารถสร้าง "รุ่น" ของไฟล์ CSS / JS (filemtime เป็นวิธีที่ดีที่จะใช้หรือคอมไพล์ยอมรับ ID ฯลฯ ) ดังนั้นการเปลี่ยนเนื้อหาให้ css ใหม่ทันที ทุกคนเพื่อดูไซต์ของคุณ เวลาแคชยาว + การสร้างใหม่ทันทีหมายถึงการดาวน์โหลดต่อหน้าน้อยลง

ตัวอย่างโค้ด (ไม่ผ่านการทดสอบแม้ว่าฉันจะใช้โค้ดที่คล้ายกัน)

$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());
    }
  }
}

รหัสนี้จะต้องมีการปรับแต่งเพื่อให้ระบบของคุณแน่ใจว่าพบเส้นทางอย่างถูกต้อง

— exussum
แหล่งที่มา

5

Joomla ให้ API ของตัวเองจากโรงงานเราสามารถเรียกมันว่า JFactory

ไม่มีอันตรายจากการใช้งาน:

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

เกิน:

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

แต่ถ้าคุณมีรวมทั้ง stylesheets ของคุณด้วยวิธีการข้างต้นแล้วมันจะรวมอยู่ในส่วนของแม่แบบของคุณโดยอัตโนมัติด้วย<head> <jdoc:include type="head" />หากเราพัฒนาส่วนขยายของเราเองและหากคุณต้องการมี CSS หรือ Javascript ของคุณเองอย่างชัดเจนคุณสามารถประกาศด้วยวิธีการข้างต้น มันจะเพิ่มอีกครั้งใน<head>ส่วนของคุณและหลีกเลี่ยงให้คุณอัปเดตแม่แบบของคุณindex.php

บางครั้งคุณต้องการให้สคริปต์ของคุณปรากฏที่ส่วนท้ายของร่างกายเพื่อรับองค์ประกอบ DOM ทั้งหมด ในสถานการณ์นี้คุณอาจต้องการรวมสคริปต์ของคุณไว้ที่ส่วนท้ายของ<body>องค์ประกอบด้วย:

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

คุณจะได้รับการควบคุมเพิ่มเติมสำหรับการจัดการ CSS และสคริปต์เช่นคุณสามารถยกเลิกการตั้งค่าสคริปต์และสไตล์ชีททางโปรแกรมได้หากไม่ต้องการ

— Sahil Purav
แหล่งที่มา

ฉันเข้าใจว่าJFactoryใส่สไตล์ชีท<jdoc:include type="head" />คำถามของฉันคือทำไมต้องใช้ในเทมเพลตเมื่อคุณสามารถเขียน<link ...>บรรทัดเองได้

— Flimm

มันสมบูรณ์แบบที่จะใช้<link...>ในเทมเพลต แต่ทุกเฟรมเวิร์ค / CMS มีวิธีการใช้งานของตัวเอง Joomla ไม่มีข้อยกเว้น มันเป็นวิธี Joomla ในการแสดงสคริปต์และสไตล์ เท่าที่ไม่มีวิธีการแทนที่เทมเพลตเรายังสามารถพึ่งพา<link...>มาร์กอัปเก่าได้

— Sahil Purav

0

มีประโยชน์เพิ่มเติมสองสามอย่างสำหรับการใช้วิธี "addXxxxx" สำหรับการโหลดสไตล์ชีตและจาวาสคริปต์

มีส่วนขยายที่คุณสามารถติดตั้งซึ่งจะรวมไฟล์เหล่านั้นเข้าด้วยกันแล้ว gzip ลงในไฟล์เดียวซึ่งจะเป็นการปรับปรุงความเร็วของหน้า (โดยลดการร้องขอ http และขนาดไฟล์)

นอกจากนี้คุณสามารถใช้พวกเขาในการแทนที่แม่แบบและเค้าโครงเพื่อให้แน่ใจว่าไฟล์ที่ต้องการได้รับการโหลด ตัวอย่างเช่นหากไอเท็มเนื้อหาของคุณจำเป็นต้องมีไลบรารีจาวาสคริปต์ที่เฉพาะเจาะจง (เช่นไลบรารีเพื่อทำรูปแบบการถ่ายภาพแบบ Masonary) คุณสามารถสร้างเลย์เอาต์เฉพาะสำหรับประเภทของบทความที่จะใช้กลไกนั้นในการโหลดไลบรารี js และสไตล์ชีทเฉพาะสำหรับจอแสดงผลชนิดนั้น ซึ่งหมายความว่าการเพิ่มน้ำหนักพิเศษจะถูกเพิ่มไปยังหน้าเว็บที่ต้องการ แต่ยังคงเก็บข้อมูลเวอร์ชันไว้ในที่เดียวดังนั้นการแก้ไขหนึ่งรายการจะเปลี่ยนการแสดงผลหลายหน้าแทนที่จะต้องทำการเปลี่ยนแปลงหลายครั้งเมื่อมีการเปลี่ยนแปลง (และเราทุกคนรู้จะเปลี่ยน)

โดยส่วนตัวแล้วฉันพิจารณาถึงข้อดีเหล่านั้นรวมถึงความสามารถในการแทนที่ไฟล์เหล่านั้นด้วยสำเนาที่แตกต่างกันเมื่อจำเป็นเพื่อให้เพียงพอที่จะทำให้วิธีที่ฉันต้องการเพิ่มเข้าไป

— อาร์เลน
แหล่งที่มา

-1

หากคุณใช้<link >หัวจูมล่าของคุณจะไม่เป็นระเบียบเพราะ<link >จะแสดงภายใต้บล็อกจาวาสคริปต์นอกไซต์<jdoc:include type="head" />และ joomla จะกลับไปที่โฟลเดอร์ css อีกครั้ง สิ่งนี้จะส่งผลต่อประสิทธิภาพของ joomla ที่ควรจะเป็น และถ้าคุณใช้<link >คุณจะได้เสียงสะท้อนที่หลากหลายใน index.php :(

ผมใช้$doc->addStyleSheetเพราะ.cssจะแสดง CSS <jdoc:include type="head" />บล็อกภายใน $doc->addScriptที่เหมือนกันสำหรับการใช้งานจาวาสคริปต์ หลังจาก<jdoc:include type="head" />joomla จะเสร็จสิ้นทั้งหมดและจะทำงานที่สำคัญกว่า :)

บางคนใช้<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" />มันจะแสดงที่ด้านล่างของ

— Evelyn Raditya
แหล่งที่มา

นี่ไม่ได้ตอบคำถามที่ถูกถาม หากคุณเชื่อว่ารหัสที่คุณให้ไว้เป็นวิธีที่ดีที่สุดให้อธิบายเหตุผล

— Lodder

คุณบอกว่า<link>แท็กจะปรากฏขึ้นหลังจาก<jdoc:include type="head" />นั้น แต่จะเกิดขึ้นได้ก็ต่อเมื่อคุณเพิ่มรหัสหลังจากนั้น หากคุณเพิ่มไว้ก่อนหน้านี้มันจะปรากฏขึ้นก่อน ในส่วนที่เกี่ยวกับการสะท้อนตัวแปร PHP ใน index.php ฉันไม่รู้ว่าคุณหมายถึงอะไรเมื่อคุณพูดสิ่งนี้ การใช้<link>แท็กเป็น HTML พื้นฐานและ Joomla จะไม่เปลี่ยนวิธีการทำงาน

— Lodder

และคุณจะเพิ่มก่อน <jdoc: include type = "head" /> @Lodder

— Evelyn Raditya