Score:-2

ไลบรารี, CSS และการโหลดแบบมีเงื่อนไข

ธง bn

เมื่อดูภาพหน้าจอที่แนบมาจาก mytheme.libraries.yml ฉันเห็น 'ฐาน:', 'ส่วนประกอบ', 'เลย์เอาต์', 'ธีม' และอื่นๆ

การกำหนดเหล่านี้เป็นตัวแทน / ทำอะไรในทางปฏิบัติหรือไม่? หรือนี่เป็นเพียงการจัดระเบียบไฟล์ libraries.yml หรือหมายความว่าไฟล์ CSS เหล่านี้โหลดที่ไหน / เมื่อใด ตัวอย่างเช่น form.css จะโหลดเมื่อมีแบบฟอร์มเท่านั้น

ฉันเห็นสิ่งนี้เกิดขึ้นในโมดูล แต่ในไฟล์ theme.libraries

นอกจากนี้ เหตุใดจึงไม่มีแท็ก 'yml' หรือ 'yaml' ที่นี่ ย

จับภาพหน้าจอของไฟล์ไลบรารีของธีม

leymannx avatar
ne flag
โปรดอย่าเพิ่มภาพหน้าจอของโค้ด โปรดวางโค้ดและใช้ฟังก์ชันไฮไลต์โค้ด ขอขอบคุณ
Kevin avatar
in flag
ฉันไม่เข้าใจคำถาม ไฟล์ libraries.twig คืออะไร ไลบรารีถูกประกาศในไฟล์ libraries.yml ในโมดูลหรือธีม
blur avatar
bn flag
ขออภัย ฉันจะโพสต์โค้ดต่อจากนี้ไป และฉันจะตรวจสอบให้แน่ใจว่านามสกุลไฟล์ของฉันตรง อ๊ะ. ขอบคุณสำหรับหัวขึ้น.
Score:2
ธง ru

ฐาน, ส่วนประกอบ ฯลฯ เป็น SMACSS หมวดหมู่ที่ได้รับแรงบันดาลใจ ซึ่งเป็นวิธีการจัดระเบียบ CSS ในโครงการขนาดใหญ่ (ใน Drupal นี่หมายถึงลำดับการโหลดด้วย) และ YAML ที่นี่ก็ไม่สมเหตุสมผล คุณไม่สามารถเพิ่ม YAML ลงในเอกสาร HTML

Score:1
ธง in

คุณควรตรวจสอบการเพิ่มสไตล์ชีต (CSS) และ Javascript (JS) ใน โมดูล Drupal และ ธีม Drupal เอกสาร น่าเสียดาย มีข้อมูลในอันหนึ่งซึ่งไม่ได้อยู่ในอีกอันหนึ่ง แต่ ฉันเชื่อ ข้อมูลทั้งหมดที่เกี่ยวข้องกับการกำหนดไลบรารี เช่น การสร้างไฟล์ libraries.yml ใช้กับทั้งโมดูลและธีม

เมื่อดูที่ mytheme.libraries.yml ฉันเห็น 'ฐาน', 'ส่วนประกอบ', 'เค้าโครง' 'ธีม' และอื่นๆ การกำหนดเหล่านี้เป็นตัวแทน / ทำอะไรใน ฝึกฝน?

ใช่ พวกเขาทำสิ่งต่างๆ โดยพื้นฐานแล้วพวกเขาจะเปลี่ยนลำดับการโหลดไฟล์ (โหลดน้ำหนักที่ต่ำกว่าก่อน) นอกจากนี้ยังเป็นวิธีที่ดีในการจัดระเบียบ CSS ของคุณ (คีย์เหล่านี้ใช้กับ CSS เท่านั้น ไม่ใช่ JS) ตามแนวคิด เพื่อให้ง่ายต่อการค้นหา แก้ไขจุดบกพร่อง และแก้ไขปัญหาหรือทำการเปลี่ยนแปลงใดๆ

จากเอกสาร:

[ฐาน เลย์เอาต์ คอมโพเนนต์ สถานะ คีย์ธีม] ระบุประเภทสไตล์ของไฟล์ CSS

คุณสามารถตั้งค่าน้ำหนัก CSS ด้วยสไตล์ที่แตกต่างกัน 5 ระดับ:

  • ฐาน: CSS รีเซ็ต / ทำให้เป็นมาตรฐานพร้อมสไตล์องค์ประกอบ HTML คีย์กำหนดน้ำหนักของ CSS_BASE = -200
  • เค้าโครง: การจัดเรียงมาโครของหน้าเว็บ รวมถึงระบบกริดใดๆ คีย์กำหนดน้ำหนักของ CSS_LAYOUT = -100
  • ส่วนประกอบ: องค์ประกอบ UI ที่ไม่ต่อเนื่องและใช้ซ้ำได้ คีย์กำหนดน้ำหนักของ CSS_COMPONENT = 0
  • สถานะ: รูปแบบที่จัดการกับการเปลี่ยนแปลงส่วนประกอบฝั่งไคลเอ็นต์ คีย์กำหนดน้ำหนักของ CSS_STATE = 100
  • ธีม: การจัดแต่งภาพอย่างหมดจด (âlook-and-feelâ) สำหรับส่วนประกอบ คีย์กำหนดน้ำหนักของ CSS_THEME = 200

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

คีย์เหล่านี้ไม่มีการโหลดไฟล์แบบมีเงื่อนไขใดๆพวกมันจะถูกโหลดเสมอเมื่อรวมไลบรารี คีย์จะเปลี่ยนลำดับในการโหลดแต่ละไฟล์เท่านั้น (หากคุณใช้การรวมรวม ไฟล์ทั้งหมดจะอยู่ในไฟล์เดียว แต่ลำดับจะถูกรักษาไว้) หากต้องการโหลดไฟล์แบบมีเงื่อนไข คุณจะต้องสร้างไลบรารีแยกต่างหาก (คุณสามารถกำหนดหลายไลบรารีใน libraries.yml เดียวกันได้) ไฟล์) จากนั้นแนบแต่ละไลบรารีเมื่อคุณต้องการเท่านั้น

มีหลายวิธีในการแนบไลบรารีเข้ากับเพจ โปรดดูที่ การแนบไลบรารีกับเพจ ส่วนของเอกสารโมดูลและธีมที่ระบุไว้ด้านบน

blur avatar
bn flag
ขอขอบคุณสำหรับข้อมูล. ฉันหวังว่าฉันจะพบบทเรียนการสร้างเทมเพลตที่นอกเหนือไปจาก 'ขั้นแรก ติดตั้ง barrio...' ฉันต้องการเข้าสู่การประมวลผลล่วงหน้าและเงื่อนไข ทำได้มากขึ้นด้วยเทมเพลตและน้อยลงด้วยโมดูล

โพสต์คำตอบ

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