יצירת דף ידידותי להדפסה עם Gutenberg.css

מעצבי אתרים שוכחים לעתים קרובות הדפס כי זה נראה הרבה פחות נחוץ בימינו. וזה אולי נכון לגבי אתרים דיגיטליים כמו BuzzFeed.

עם זאת, ב אתרי מידע זה עדיין נוהג טוב להציע גיליון הדפסה מותאם אישית. למרבה המזל, אתה לא צריך לעצב את עצמך כי גוטנברג הוא כאן כדי לעזור.

שמו של הממציא של הדפוס יוהנס גוטנברג, זה ספריית CSS הוא משאב עצמאי עבור עיצובים של דפי הדפסה.

אתה פשוט תוסיף את ה gutenberg.css קובץ לתוך ראש המסמך שלך, ואתה מוכן.

בכל פעם שאורח הולך להדפיס את הדף שלך זה צריך באופן אוטומטי בהתבסס על הגדרת ההדפסה. זה יכול להיות מוגדר באמצעות מדיה = "הדפס" מאפיין HTML.

בדוק את המדריך הזה אם אתה רוצה ללמוד קצת יותר על גליונות סגנונות ואיך הם עובדים.

הדבר הנחמד בגוטנברג הוא זה מגיע עם שיעורים וסגנונות נוספים מדי.

לחפור לתוך תיקיית נושאים ותמצא שלוש ערכות נושא חלופיותYou הספר, מודרני, ו סגנון ישן. אתה יכול לעשות כל אלה ברירת המחדל על ידי הוספת אותם מעל ברירת המחדל gutenberg.css קובץ.

כמו כן, אתה יכול סגנון הדף בצורה שונה להדפסה על ידי הוספת שיעורים ספציפיים CSS. לדוגמה .ללא הדפסה בכיתה יהיה לחלוטין להסתיר רכיב בסגנון ההדפסה.

דוגמה נוספת היא הוספת כתובות אתרים של קישורים ליד הטקסט. Gutenberg מוסיף תכונה זו כדי להקל על אנשים למצוא את כתובות האתרים מהדף שלך. אבל אתה יכול להוסיף את .ללא רפורמה בכיתה על אלמנט העוגן ל להסתיר את כתובת האתר.

כל הדברים האלה מכוסים על ריפו GitHub וזה מאוד פשוט. אתה יכול לקבל את גוטנברג מותקן בתוך פחות מ 5 דקות ואת כל האתר שלך יהיה ידידותי להדפיס.

זה ללא ספק אחת מהספריות הפשוטות והמגניבות ביותר ליישם לשיפור ביצועי האתר. זה יכול להוסיף עוד כמה KBs אבל את החוויה הכוללת יהיה שיפור דרסטי.

אם התוכן של האתר שלך עשוי להיות אי פעם מודפס מכל סיבה שהיא ואז Gutenberg.css הוא משאב חיוני.