การเปลี่ยน HTML ที่สร้างโดย Panels: เป็นไปได้หรือไม่


15

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

เพื่อแสดงผลลัพธ์ที่พวกเขาสร้าง:

เอาต์พุตโดยพาเนล

ปัญหาคือฉันใช้ 960.gs และแผงเพิ่มชั้นเรียนของตนเองและโครงสร้าง div ใหญ่ทำให้ฉันต้องแทนที่ชั้นเรียนของพวกเขา นี่คือสิ่งที่ฉันไม่ต้องการทำฉันต้องการล้าง div มีวิธีการทำเช่นนี้?

แก้ไข:

สิ่งที่ฉันทำเพื่อล้าง div ของบางอย่างที่ฉันถือว่าไร้ประโยชน์:

เริ่มต้นจากบรรทัด # 388 ใน elastic.inc (พาเนล / ปลั๊กอิน / โครงร่าง / ยืดหยุ่น)

$output = '';     
//$output = "<div class=\"panel-flexible " . $renderer->base['canvas'] . " clearfix\" $renderer->id_str>\n";
    //  $output .= "<div class=\"panel-flexible-inside " . $renderer->base['canvas'] . "-inside\">\n";

      $output .= panels_flexible_render_items($renderer, $settings['items']['canvas']['children'], $renderer->base['canvas']);

      // Wrap the whole thing up nice and snug
      //$output .= "</div>\n</div>\n";

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

หมายเหตุ:นี่ไม่ใช่ทางออกที่ดีที่สุดนี่เป็นเส้นทางที่เร็วที่สุดเพื่อให้บรรลุเป้าหมายของฉัน การสร้างปลั๊กอินขนาดเล็กของคุณเป็นวิธีที่ดีที่สุดคุณสามารถใช้ปลั๊กอินตัวใดตัวหนึ่งที่มีอยู่เป็นฐานได้ตลอดเวลา

คำตอบ:


19

ฉันเคยตรวจสอบปัญหานี้มาก่อน นี่คือปัญหาที่คุณต้องการที่จะอ่าน ดูเหมือนว่าจะเป็นถั่วในตอนแรก แต่จริงๆแล้วมีเหตุผลที่ดีสำหรับการเป็นเช่นนี้

บรรทัดด้านล่าง: คิดว่าแผ่นมีความยืดหยุ่นเค้าโครงเป็นเครื่องมือในการสร้างต้นแบบ ใช้มันเพื่อลองและความคิดในการพัฒนาร่าง, การแสดงละครการใช้งานทดสอบ ฯลฯ จากนั้นเมื่อคุณได้มีรูปแบบที่สมบูรณ์แบบลงนามปิดใช้มันสำหรับการผลิตด้วยการทำความสะอาด, กรอบ, HTML มือที่ดีที่สุดเป็นรูปแบบการติดตั้งที่กำหนดเอง (เพิ่มเติม ด้านล่าง)

ต่อไปนี้เป็นบทสรุปโดยย่อเกี่ยวกับสาเหตุที่เป็นไปตามที่ฉันเชื่อมโยงกับ:

  • เอาต์พุต HTML ของพาเนลต้องการทุกสิ่งที่มาร์กอัปที่บ้าคลั่งเพื่อให้สามารถรองรับเลย์เอาต์ที่ยืดหยุ่นที่สุดที่ใคร ๆ ก็อยากสร้าง - คิดว่าของเหลวที่ซ้อนกันและพื้นที่คงที่อยู่เคียงข้างกัน
  • ไม่มีอะไรที่สร้างขึ้นโดยอัตโนมัติจะดีพอสำหรับครูสอน HTML เพื่อให้แผงผู้ชายที่ไม่ได้พยายามที่จะให้พวกเขามีความสุขในรูปแบบคุณลักษณะที่มีความยืดหยุ่น ดังนั้นจึงไม่มีอัลกอริธึมเครื่องมือเพิ่มประสิทธิภาพ HTML ที่พยายามตัด HTML ที่สร้างโดยเลย์เอาต์ของคุณให้น้อยที่สุดเพราะไม่ว่ามันจะดีแค่ไหนมันก็ยังคงไม่ได้มาตรฐาน HTML ที่ดีที่สุด
  • สิ่งที่พวกเขาไม่ได้กล่าวถึง: หากมีเครื่องมือเพิ่มประสิทธิภาพเช่นนี้การเปลี่ยนแปลงเค้าโครงบางอย่างจะทำให้ div และคลาสที่ซ้ำซ้อนตอนนี้หายไป หากคุณแขวน CSS ลงไปคุณจะต้องเขียน CSS ใหม่เกือบทุกครั้งที่คุณทำการเปลี่ยนแปลงเล็กน้อยกับเค้าโครงที่มีความยืดหยุ่นของพาเนล ซึ่งหมายความว่าหากพวกเขาพยายาม (และล้มเหลว) เพื่อทำให้แผงแบบยืดหยุ่นได้กลายเป็นเครื่องมือการผลิตที่ได้มาตรฐานที่ดีที่สุดพวกเขาก็จะทำให้มันอ่อนแอลงในฐานะเครื่องมือสร้างต้นแบบ
  • คุณจะได้รับการทำความสะอาดแผงยันผล HTML เวิร์กโฟลว์ที่คาดหวังซึ่งอ่านระหว่างบรรทัดฉันเชื่อว่าสิ่งนี้:
    • คุณใช้เลย์เอาต์แบบยืดหยุ่น Panels ในระหว่างการพัฒนา แต่เนิ่นๆ
    • เมื่อคุณชำระในเลย์เอาต์เฉพาะถ้าคุณต้องการล้าง HTML คุณจะใช้มันโดยใช้เลย์เอาต์ที่กำหนดเองโดยใช้เฉพาะมาร์กอัพ HTML ที่แม่นยำซึ่งเลย์เอาต์นั้นต้องการเพียงแค่คลาสที่ถูกต้องซีแมนทิกส์ ฯลฯ สำหรับเว็บไซต์ของคุณ )

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

ซึ่งหมายความว่าคุณจะได้รับสิ่งที่ดีที่สุดทั้งสองอย่างโดยมีค่าใช้จ่ายเพิ่มเติมเล็กน้อยในการจัดวางรูปแบบสุดท้ายของคุณในรูปแบบเทมเพลตโดยใช้มาตรฐาน HTML ที่ดีที่สุด - แต่ผู้พิถีพิถัน HTML จะต้องการทำงานพิเศษเพิ่มเติมเล็กน้อย ผลลัพธ์ของพวกเขาสมบูรณ์แบบ


จะสร้างเค้าโครงพาเนลที่กำหนดเองได้อย่างไร มีคำแนะนำโดยละเอียดในเอกสารประกอบเกี่ยวกับวิธีการทำเช่นนั้น นี่เป็นบทสรุปพื้นฐานอย่างรวดเร็ว:

  1. คัดลอกเค้าโครงที่มีอยู่จาก/sites/all/modules/panels/plugins/layoutsเป็น/sites/all/themes/[your_theme_name]/layouts/[new_unique_layout_machine_name]
  2. เปลี่ยนชื่อไฟล์ในสำเนาใหม่เพื่อให้ตรงกับชื่อโฟลเดอร์ใหม่ โปรดทราบว่า.tpl.phpไฟล์ควรมีเครื่องหมายขีดคั่นแทนเครื่องหมายขีดล่าง
  3. เพิ่มบรรทัดลงในไฟล์ข้อมูลชุดรูปแบบ: plugins[panels][layouts] = layoutsสิ่งนี้จะบอกแผงที่คุณมีรูปแบบที่กำหนดเองในชุดรูปแบบนี้และที่พวกเขาอยู่ (แทนที่สตริงlayoutsถ้ามันไม่ใช่เส้นทางจากชุดรูปแบบของคุณไปยังโฟลเดอร์รูปแบบที่กำหนดเองของคุณ)
  4. แก้ไขไฟล์ด้วย HTML และ CSS ที่ได้มาตรฐานที่ดีที่สุดสมบูรณ์แบบเพรียวบางทันสมัย

    • อย่าลืมอัปเดต.incไฟล์ด้วยข้อมูลเกี่ยวกับเลย์เอาต์ของคุณเช่นชื่อหมวดหมู่ชื่อไฟล์ ฯลฯ
    • themeในไฟล์. inc ควรตรงกับ.tpl.phpชื่อไฟล์ของไฟล์โดยไม่มีนามสกุล ขีดล่างใด ๆ ที่คุณป้อนที่นี่ในthemeค่าจะถูกแปลงเป็นเครื่องหมายขีดคั่น
    • ลองพิจารณาแก้ไข.pngไอคอนเพื่อให้สะท้อนถึงการจัดวางที่แท้จริงของคุณ
  5. ล้างแคช เลย์เอาต์ใหม่ของคุณจะปรากฏเป็นตัวเลือกในพาเนลที่มีชื่อหมวดหมู่ ฯลฯ ที่คุณระบุใน.incไฟล์ ใช้มัน.

1
ขอบคุณมาก! นี่จะใช้เวลาที่เหลือของฉันในตอนบ่าย ... แต่มันสามารถทำได้โดยไม่ต้อง "แฮ็ค" เพื่อให้ใจของฉันสงบลงเล็กน้อย Btw: ฉันหวังว่าโพสต์นี้จะเปิดขึ้นใน Google อย่างใดเพราะฉันไม่สามารถหาโพสต์ที่เกี่ยวข้องกับปัญหา: S
thecodeassassin

@ สตีเฟ่นฉันประหลาดใจที่บ่อยครั้งที่ฉันค้นหาบางสิ่งบางอย่าง 6 เดือนหลังจากที่ฉันถามคำถามและจบลงด้วยคำถามของฉันเอง หรือคำถาม SE เดียวกัน ...
WernerCD

ฉันคิดว่าคำถามและคำตอบนี้มีประโยชน์มากดังนั้นฉันจึงแนะนำให้แก้ไขชื่อที่ได้รับการยอมรับ ฉันถามคำถามเดียวกันกับตัวเองที่นั่น: drupal.stackexchange.com/questions/69807/theming-panels-htmlซึ่งซ้ำซ้อน
George Katsanos

5

คุณอาจพิจารณาโมดูลClean Markup Drupal 7 สำหรับควบคุมเอาต์พุตมาร์กอัพสำหรับพาเนล

ฉันค้นหาหน้านี้ในเบราว์เซอร์และไม่ได้พูดถึงมันแล้วรวมถึงคำตอบที่ครอบคลุมที่ดีจริง ๆ ที่ได้รับจาก user568458

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