หน้าแรก » กระดานสนทนา » Development » พัฒนาธีม

เอา CSS ของ Drupal Modules ออกให้หมด แต่...

By gibbo March 04, 2009

อาจฟังดูแปลกๆ ที่ต้องการโละ CSS ของ Drupal Core ออกให้หมด แต่ผมกำลังทำธีมใหม่ และไม่ชอบสไตล์ดั้งเดิมที่ติดมา (โดยเฉพาะในส่วน system/admin) ถึง CSS จะ override ได้ไม่ยาก แต่มันก็เสียเวลาโหลดไฟล์โดยใช่เหตุ ตอนนี้ผมใช้วิธีประมาณนี้ ใส่ในไฟล์ template.php

function phptemplate_preprocess(&$vars, $hook) {
  global $theme;
  // Remove All Modules Stylesheets
  if (is_array($vars['css']['all']['module'])) {
    $vars['css']['all']['module'] = array(); // empty core css array
  }
  $vars['styles'] = drupal_get_css($vars['css']); // add only theme css styles
}

มันจะโละ CSS ของโมดูลทุกตัวออกหมด เหลือไว้เฉพาะ CSS ของธีม แต่ผมไม่อยากเอา CSS ของ Contributed modules ออกไปด้วย เช่น โมดูลที่อยู่ใน /sites/all/modules/ หรือ /sites/default/modules/ หรือ /sites/multi.sites/modules/

ไม่ทราบว่า ผมต้องเขียนฟังชั่นยังไงครับ?

‹ เรื่องลิขสิทธิ์ กับการ port ธีม ต้องการฟีดแบ็คจากผู้ใช้ธีมดรูปัลจากขวาไปซ้าย ›

12 comments

รูปภาพของ ball.in.th
By ball.in.th
2 years 48 weeks ago

ผมว่าน่าจะ override ใน

ผมว่าน่าจะ override ใน theme.info มากกว่าป่าว?

; To prevent stylesheets of a base theme or of a module from being included in
; our sub-theme, we specify it in our .info file (and we don't need to have a
; stylesheet in our sub-theme with that name.) For example, we prevent the
; zen.css file in the base theme from being included by specifying it here.
stylesheets[all][] = zen.css
stylesheets[all][] = image_attach.css

ลองหาแล้ว core modules น่าจะมี css ไฟล์ตามนี้ :)
admin.css
admin-rtl.css
aggregator.css
aggregator-rtl.css
block.css
book.css
book-rtl.css
color.css
color-rtl.css
comment.css
comment-rtl.css
dblog.css
dblog-rtl.css
defaults.css
defaults-rtl.css
forum.css
forum-rtl.css
help.css
help-rtl.css
locale.css
maintenance.css
node.css
node-rtl.css
openid.css
poll.css
poll-rtl.css
profile.css
search.css
search-rtl.css
system.css
system-menus.css
system-menus-rtl.css
system-rtl.css
taxonomy.css
tracker.css
update.css
update-rtl.css
user.css
user-rtl.css

รูปภาพของ gibbo
By gibbo
2 years 48 weeks ago

โอ้...

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

1. ลด HTTP Requests เพราะไฟล์เล็กๆหลายไฟล์นั้น ใช้เวลาโหลดนานกว่าไฟล์ใหญ่ๆไฟล์เดียว อย่างมีนัยสำคัญ ถึง Drupal จะบีบมันเป็น cache ไฟล์เดียวได้ แต่ถ้าเข้าใจไม่ผิด มันเก็บ $styles เป็น array แล้วเรียกใช้ไฟล์ CSS แบบ dynamic เมื่อมีโมดูลมาเกี่ยวข้องกับหน้านั้นๆเท่านั้น แปลว่ามันมีหลาย cached files ที่ถูกเรียกใช้แล้วแต่กรณี ซึ่งไม่ได้ช่วยให้โหลดเร็วขึ้น สำหรับผู้ใช้ที่เข้ามาหน้าเว็บเราครั้งแรกๆหรือไม่ได้ล็อคอิน

ลิ้งค์ที่อาจจะเกี่ยวข้อง
- http://developer.yahoo.com/performance/rules.html#num_http
- ไอเดียผมจะคล้ายกับเรื่องเก่าอันนี้ http://drupal.org/node/81835

2. IE6/7 โหลด external CSS เกิน 32 ไฟล์ไม่ได้ (อันนี้เจอมากับตัวเอง ส่วน IE8 ไม่แน่ใจว่าแก้ได้รึยัง) ในกรณีที่เราเปิดใช้ cache อันนี้ไม่เป็นปัญหา แต่ในขั้นตอนการทำธีมจะมีปัญหามากเวลาเช็คบั๊กในบราวเซอร์ 2 ตัวนี้ โดยเฉพาะถ้าต้องการทำธีมให้รองรับภาษาที่เขียนจากขวาไปซ้าย (RTL) Drupal มันจะเรียกใช้ไฟล์ *-rtl.css ให้อัตโนมัติ นั้นแปลว่ามันอาจจะเรียกไฟล์ CSS เพิ่มขึ้นมาเป็นเท่าตัว (ไฟล์ *-rtl.css ไม่ต้องใส่เพิ่มใน theme.info ครับ ขอแค่ให้มีชื่อข้างหน้าเหมือนกัน เวลาใช้ภาษา RTL Drupal ก็จะโหลดมันอัตโนมัติ)

ลิ้งค์ที่อาจจะเกี่ยวข้อง
- http://acidmartin.wordpress.com/2008/11/25/the-32-external-css-files-lim...
- http://joshua.perina.com/africa/gambia/fajara/post/2008/1/25/internet-ex...

3. ผมต้องการทำธีมโดยรื้อสไตล์ที่ติดมากับ Drupal core แต่ไม่อยากยุ่งกับ contrib modules คือ ตั้งใจจะเขียนสไตล์ใหม่ แต่รวบเป็นไฟล์เดียว ส่วน CSS ของ contrib modules ก็ปล่อยมันไว้ตามเดิม เพราะเราคาดการณ์ไม่ได้เหมือน core modules

เลยอยากรู้ว่า ผมต้องเขียนฟังชั่นในไฟล์ template.php ยังไง เพื่อกีดกันไฟล์ CSS จากไดเร็กทรอรี่ /modules/*/*.css เท่านั้น

รูปภาพของ ball.in.th
By ball.in.th
2 years 48 weeks ago

เพิ่งเห็นว่าอัพโหลดรูปตัวจริง

เพิ่งเห็นว่าอัพโหลดรูปตัวจริงแล้ว ติสมากๆ

รูปภาพของ sugree
By sugree
2 years 48 weeks ago

function

function phptemplate_preprocess(&$vars, $hook) {
  foreach($vars['css']['all']['module'] as $k => $v) {
    if (substr($v, 0, 6) != 'sites/') {
      unset($vars['css']['all']['module'][$k]);
    }
  }
  $vars['styles'] = drupal_get_css($vars['css']); // add only theme css styles
}

แบบนี้รึเปล่า regexp อาจจะดีเกินไป ลองใช้แค่ substr

รูปภาพของ gibbo
By gibbo
2 years 48 weeks ago

ขอบคุณครับ แต่ยังไม่ได้

ขอบคุณครับ แต่ยังไม่ได้ เพราะมันก็ยังเอา CSS ของ contrib modules ออกหมดอยู่ดี แต่จากโค้ดตัวอย่างด้านบน ก็พอจะได้ไอเดียแล้วครับ แยก ประเภท/ที่อยู่ ของมัน แล้วรวบรวมด้วย foreach อันที่จริงผมเอาออกทีละตัวได้ เช่น

unset($css['all']['module']['modules/system/system.css']);

แต่ผมไล่ทีละอัน มันดูไม่เท่เท่าไหร่ สงสัยต้องเรียน php เพิ่ม ;)

รูปภาพของ sugree
By sugree
2 years 48 weeks ago

contrib ไม่ได้อยู่ใน sites?

contrib ไม่ได้อยู่ใน sites?

รูปภาพของ gibbo
By gibbo
2 years 48 weeks ago

contrib อยู่ใน sites

contrib อยู่ใน sites ทั้งหมดครับ แต่ผมลองหลายรอบแล้วก็ไม่ได้ผล

รูปภาพของ sugree
By sugree
2 years 48 weeks ago

ประหลาดแท้ ลอง dump

ประหลาดแท้ ลอง dump ออกมาดูหน่อยครับ

รูปภาพของ gibbo
By gibbo
2 years 48 weeks ago

งงเหมือนกันครับ ถึงผมจะรู้

งงเหมือนกันครับ ถึงผมจะรู้ php แค่งูๆปลาๆ แต่ดูแล้วใช้ substr ดึงคำว่า sites/ ออกมา มันก็น่าจะได้แน่ๆ ตอนนี้ผมลองใช้ฟังชั่นเท่าที่คุณสุกรีให้มา ในไฟล์ template.php ก็ไม่ได้เหมือนเดิม

<?php
// $Id$
 
function phptemplate_preprocess(&$vars, $hook) {
  foreach($vars['css']['all']['module'] as $k => $v) {
    if (substr($v, 0, 6) != 'sites/') {
      unset($vars['css']['all']['module'][$k]);
    }
  }
  $vars['styles'] = drupal_get_css($vars['css']); // add only theme css styles
}

ส่วนธีมที่กำลังทำอยู่ และมีไฟล์ template.php อื่นๆที่ผมแบ็คอัพไว้ ลองดูที่ http://webzer.net/sites/default/files/wsl.zip
ขอบคุณครับ

รูปภาพของ sugree
By sugree
2 years 47 weeks ago

ต้องลองใช้

ต้องลองใช้ drupal_set_message() แอบดูความจริงข้างใน

รูปภาพของ gibbo
By gibbo
2 years 48 weeks ago

เพิ่มเติมนิดหน่อย

เพิ่มเติมนิดหน่อย เรื่องรีเซ็ต core css ผมเพิ่งจะเห็นในธีม zen ว่า มีคนรวบรวมไว้ให้แล้ว อย่างนี้ก็ไม่ต้องรื้อเองหมด ใครสนใจก็ลองดูที่ Zen drupal6-reference.css

รูปภาพของ ball.in.th
By ball.in.th
2 years 47 weeks ago

zen สุดยอดมากๆ

zen สุดยอดมากๆ อะไรก็ไม่รู้เต็มไปหมด 55

หน้าแรก » กระดานสนทนา » Development » พัฒนาธีม