วิธีเพิ่มคลาส CSS ในบล็อกที่สร้างมุมมองได้อย่างไร (ไม่ใช่เนื้อหาที่สร้างขึ้นบล็อกเอง!)


8

ฉันไม่รู้ว่าทำไม แต่ Views ไม่ได้เพิ่มชื่อคลาส CSS "ที่มนุษย์อ่านได้" (เช่นชื่อเครื่องของมุมมอง) ไปยังบล็อกที่สร้างขึ้น ( เพิ่มเฉพาะคลาสไปยังส่วน"เนื้อหา" ที่สร้างขึ้นเมื่อ เพิ่มคลาสในส่วน " CSS class " ในเครื่องมือแก้ไขมุมมอง (ดูภาพหน้าจอด้านล่าง!)
มันเพิ่มคลาส CSS ปกติblock block-viewsและอาจเป็นcontextual-links-regionไปได้เฉพาะบล็อกและสร้าง id ที่ไม่ซ้ำกัน (ไม่ใช่คลาส) เช่นนี้: block-views-3d8f7966168beeec655c8ead69336789(เนื่องจากเดลต้าคือโค้ดแฮชที่สร้างขึ้นนี้)
ไม่เหมาะสมที่จะเขียนกฎ CSS สำหรับคลาสและรหัสเหล่านี้ (เช่น.block-views-3d8f7966168beeec655c8ead69336789 { /* ... */ }) เนื่องจากคลาส / รหัสเหล่านี้อาจเปลี่ยนไปเมื่อทำการแก้ไขบล็อก Views

ฉันจะเพิ่มคลาส CSS ที่กำหนดเองในการใช้งานได้hook_block_view_alter()อย่างไรหากฉันไม่สามารถระบุบล็อกเหล่านี้ได้เนื่องจากการแฮชเดลตาที่สร้างขึ้น


ฉันไม่ต้องการใช้Block Classเพราะฉันรู้สึกว่ามันเกินความจริงเพียงแค่เพิ่มบางคลาสในหนึ่งหรือสองบล็อกที่สร้างด้วย Views (BTW ฉันตรวจสอบโมดูลและฉันรู้สึกว่าเป็นSELECT css_class, module, delta FROM {block_class}แบบสอบถามblock_class_preprocess_block()มากเกินไปเพราะตรวจสอบทั้งหมด เพิ่มคลาสแม้ว่าบล็อกจะถูกซ่อนอยู่ ... )

ดังนั้นฉันต้องการแก้ไขจากโมดูลของฉันเอง


แก้ไข

ตัวอย่าง:

มุมมองของฉันด้วยชื่อเครื่องและคลาส CSS ที่เพิ่ม: ดู - ชื่อเครื่องและคลาส

รหัส HTML ของบล็อกที่สร้างในตัวตรวจสอบ: ดู - โค้ด HTML ของบล็อกที่สร้างขึ้นในตัวตรวจสอบ

คำตอบ:


7

เป็นครั้งแรก คุณมี "แฮช" - เนื่องจากคุณดูชื่อเครื่องยาวเกินไป

ประการที่สอง - คุณสามารถเพิ่มชั้นเรียนของคุณเองเพื่อดู

ป้อนคำอธิบายรูปภาพที่นี่


ภาพหน้าจอนั้นคุณมีความนับถือดูบล็อกใช่มั้ย
cherouvim

ไม่ - มันอยู่ในหน้าแก้ไขการดู - ผู้ดูแลระบบ / โครงสร้าง / มุมมอง / ดู / [youviewname]
Gaydabura

1
"คุณมี" แฮช "- เนื่องจากคุณดูชื่อเครื่องยาวเกินไป" - และทำไมมันถึงสำคัญ? ฉันสามารถเพิ่มกฎในสไตล์ชีท CSS ให้กับชื่อคลาสแบบยาวจริงๆได้โดยไม่มีปัญหาใด ๆ ... ส่วน"คลาส CSS" ที่คุณทำเครื่องหมายไม่ถูกต้องเนื่องจากคลาสเหล่านี้สร้างขึ้นในส่วน "เนื้อหา" เท่านั้น - นี่คือสิ่งที่ฉันเริ่ม ถามด้วย! ดังนั้นฉันต้องเพิ่มคลาสลงในwrapperของเนื้อหา ดูภาพหน้าจอที่ฉันเพิ่งวางในคำถามเดิม
Sk8erPeter

ตกลง. ในกรณีนี้วิธีที่ง่ายที่สุดคือการสร้างแม่แบบกำหนดเองสำหรับบล็อก - คุณต้องการเปลี่ยนแปลง ลิงก์นี้มีประโยชน์drupal.org/node/1089656 - อธิบายคำแนะนำชื่อเทมเพลต
Gaydabura

แต่วิธีนี้ผมต้องใช้block--views--3d8f7966168beeec655c8ead69336789.tpl.phpไฟล์และในกรณีนี้ผมที่จุดเช่นเดียวกับถ้าผมใช้สภาพif($variables['block']->delta == '3d8f7966168beeec655c8ead69336789') hook_preprocess_block()นี่คือสิ่งที่ฉันต้องการหลีกเลี่ยงเพราะฉันคิดว่าฉันสามารถใช้ชื่อมนุษย์อ่านได้มากขึ้นในเบ็ดของฉัน ตัวอย่างเช่นถ้าฉันต้องการย้ายมุมมองไปยังอีกมุมมองหนึ่งด้วยพารามิเตอร์เดียวกันฉันจะลบมุมมองก่อนหน้า แต่ใช้ชื่อเครื่องและคลาส CSS เดียวกัน แต่แฮชที่ไม่ซ้ำกันจะถูกสร้างขึ้น? ในกรณีนี้ฉันแก้ไขของฉันให้หาย
Sk8erPeter

2

นั่นเป็นคำถามเก่า แต่ไม่มีคำตอบที่เหมาะสม ฉันเจอปัญหาเดียวกัน วิธีแก้ปัญหาที่ฉันคิดว่าเป็นตัวเลือกหลักของ CSS (ซึ่งยังไม่มี) หรือการจัดการ Drupal บางอย่าง

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

ตัวอย่าง: ดูด้วย CSS คลาส "ทดสอบ" จะถูกเก็บไว้ในบล็อกที่มีคลาส CSS "test-wrapper"

function <MY_THEME>_preprocess_block(&$variables) {
    $default_display_id = 'default';
    // Trying to access the field:
    //     $display_id =      $variables['elements']['#views_contextual_links_info']['views_ui']['view_display_id']
    //     $default_display = $variables['elements']['#views_contextual_links_info']['views_ui']['view']->display['default']->display_options['css_class']
    //     $display =         $variables['elements']['#views_contextual_links_info']['views_ui']['view']->display[$display_id]->display_options['css_class']
    if (isset($variables['elements']['#views_contextual_links_info']['views_ui'])) {
        $view_ui = $variables['elements']['#views_contextual_links_info']['views_ui'];
        if (isset($view_ui['view_display_id'])) {
            $display_id = $view_ui['view_display_id'];
            if (isset($view_ui['view']) && property_exists($view_ui['view'], 'display') && isset($view_ui['view']->display[$display_id])) {

                $default_css_class = NULL;
                if (isset($view_ui['view']->display[$default_display_id])) {
                    $default_display = $view_ui['view']->display[$default_display_id];
                    if (property_exists($default_display, 'display_options') && isset($default_display->display_options['css_class'])) {
                        $default_css_class = $default_display->display_options['css_class'];
                    }
                }

                $view_css_class = NULL;
                $display = $view_ui['view']->display[$display_id];
                if (property_exists($display, 'display_options') && isset($display->display_options['css_class'])) {
                    $view_css_class = $display->display_options['css_class'];
                }

                $css_class = $view_css_class ? $view_css_class : $default_css_class;
                if ($css_class) {
                    $variables['classes_array'][] = "$css_class-wrapper";
                }
            }
        }
    }
}


1

สำหรับฉันhook_preprocess_block()ไม่ได้ทำงาน (อาจเป็นเพราะฉันต้องเพิ่มบล็อกโดยตรงจากไฟล์เทมเพลตผ่านviews_embed_view())

อย่างไรก็ตามhook_preprocess_views_view()ด้วยการตรวจสอบง่าย ๆ$vars['view']->current_displayก็ใช้งานได้:

function MYMODULE_preprocess_views_view(&$vars) {
  // 'MYBLOCK' usually comes as 'block' if this view only has one
  if ($vars['view']->name == 'MYVIEW' && $vars['view']->current_display == 'MYBLOCK') {
    // here I add a class that contains the current theme's name
    global $theme;
    $theme_name = array_pop(explode('/', (drupal_get_path('theme', $theme))));
    $vars['classes_array'][] = $theme_name.'-theme';
    // but you can simply do the following as well
    $vars['classes_array'][] = 'MYSTRING';
  }
}

0

วิธีที่ง่ายที่สุดสำหรับฉันคือการทำซ้ำไฟล์ block.tpl.php เปลี่ยนชื่อเป็นblock--myregion.tpl.phpแล้วเพิ่มคลาสของฉันภายใน

ดู: ชุดรูปแบบบล็อกหน้า

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.