สร้างหน้าที่พิมพ์ได้ง่ายด้วย Gutenberg.css

นักออกแบบเว็บไซต์มักจะลืม พิมพ์ เพราะดูเหมือนว่าจำเป็นน้อยกว่าในปัจจุบัน และนี่อาจเป็นจริงสำหรับเว็บไซต์ดิจิทัลเช่น BuzzFeed.

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

ตั้งชื่อตามนักประดิษฐ์สำนักพิมพ์โยฮันเนสกูเทนแบร์ห้องสมุด CSS นี้เป็นทรัพยากรแบบสแตนด์อโลนสำหรับ การออกแบบหน้าพิมพ์.

คุณเพียงแค่ เพิ่ม gutenberg.css ไฟล์ ในหัวเอกสารของคุณและคุณพร้อมแล้ว.

เมื่อใดก็ตามที่ผู้เข้าชมไปพิมพ์หน้าของคุณควร restyle อัตโนมัติ ขึ้นอยู่กับการตั้งค่าการพิมพ์ สามารถตั้งค่าได้โดยใช้ สื่อ = "พิมพ์" คุณลักษณะ HTML.

ลองอ่านคู่มือนี้หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ สไตล์การพิมพ์ และวิธีการทำงาน.

สิ่งที่ดีเกี่ยวกับกูเทนแบร์กก็คือ มาพร้อมกับคลาสและสไตล์ที่พิเศษ เกินไป.

ขุดลงในโฟลเดอร์ธีมและคุณจะพบ ธีมการพิมพ์สำรองสามแบบ: หนังสือ, ทันสมัย, และ แบบเก่า. คุณสามารถทำสิ่งเหล่านี้ได้ ค่าเริ่มต้น โดยการเพิ่มพวกเขาที่ด้านบนของค่าเริ่มต้น gutenberg.css ไฟล์.

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

อีกตัวอย่างหนึ่งคือ เพิ่มลิงค์ URL ถัดจากข้อความ Gutenberg เพิ่มคุณลักษณะนี้เพื่อให้ผู้คนสามารถค้นหา URL จากหน้าของคุณได้ง่ายขึ้น แต่คุณสามารถเพิ่ม .ไม่มีฟอร์แมต ชั้นบนองค์ประกอบของสมอ ซ่อน URL.

ทุกสิ่งนี้อยู่ใน GitHub repo และมันตรงไปตรงมามาก คุณสามารถมีกูเทนเบิร์ก ติดตั้งในเวลาน้อยกว่า 5 นาที และทั้งเว็บไซต์ของคุณจะพิมพ์ง่าย.

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

หากเนื้อหาของเว็บไซต์ของคุณอาจจะเคย พิมพ์ด้วยเหตุผลใดก็ตาม Gutenberg.css จึงเป็นทรัพยากรที่ขาดไม่ได้.