כתיבת התוכן

עיצוב ב-Markdown וב-HTML

רוב התוכן שלנו ב-DevSite כתוב בפורמט Markdown, שהוא פורמט כתיבה שנועד להיות פשוט וקל לקריאה בטקסט פשוט. DevSite ממיר אוטומטית Markdown ל-HTML לתצוגה באינטרנט.

כדי ללמוד מהו המקבילה של רכיבי HTML נפוצים ב-Markdown ספציפי ל-Google, אפשר להשתמש בדף ההסבר המהיר בכתובת go/g3mark-cheat. כאן אפשר לקרוא את התיעוד המלא של Markdown של Google, שנקרא גם CommonMark.

הנה כמה דוגמאות:

HTML	Markdown
`<b>bold text</b> <strong>bold text</strong>`	`bold text`
`<i>italic text</i> <em>italic text</em>`	`italic text`
`<h2>Heading 2</h2> <h3>Heading 3</h3>`	`## Heading 2 ### Heading 3`
`<a href="url.com">Link</a>`	`[Link](url.com)`
`<p>paragraph</p>`	`Paragraph`
`<ol> <li>Ordered list first item</li> <li>Second item</li> </ol>`	`1. Ordered list first item 1. Second item 1. Third item`
`<ul> <li>Unordered list first item</li> <ul> <li>Nested list item</li> </ul> <li>Second item</li> </ul>`	`* Unordered list first item * Nested item (indent 4-spaces) * Second item`

מתי כדאי להשתמש ב-HTML במקום ב-Markdown

יש פריטים מסוימים שאנחנו לא משתמשים ב-Markdown כדי לכתוב, כולל:

קבצים מצורפים: כל הקבצים המצורפים צריכים להיות קובצי HTML, ולכן לא צריכים לכלול רכיבים שנכתבו ב-Markdown. הנחיות ליצירת קובצי include זמינות במאמר שימוש חוזר בתוכן בדפים שונים.
טבלאות: יכול להיות שיהיה קשה לעצב ולתחזק טבלאות ב-Markdown, ולכן אנחנו משתמשים ב-HTML לטבלאות, גם בקובצי Markdown.
תמונות: שימוש ב-HTML לתמונות מאפשר גמישות רבה יותר בפורמט ובמיקום של התמונה. מידע נוסף זמין במדריך לפרסום באתר למפתחים בנושא תמונות.
‫Zippies: ‏Zippies, שנקראים גם ווידג'טים שניתן להרחיב ב-Devsite, צריכים להיות בפורמט HTML ועטופים בתג <div>.

פורמטים נפוצים של תוכן

קישורים שנפתחים בכרטיסייה חדשה

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

Markdown

[Accessible content](/style/accessibility){:target="_blank"}

HTML

<a href="/style/accessibility" target="_blank">Accessible content</a>

טבלאות

במדריך DevSite Publishing, בקטע Tables, מפורטים סוגי הטבלאות שזמינים ב-DevSite וקוד ה-HTML המתאים לכל סוג.

כדאי לדעת:

אם אתם רוצים שהטבלה לא תכלול גבולות, השתמשו ב-class="columns"
אם אתם רוצים להוסיף לטבלה ריווח וקווי חלוקה (כמו בדף הזה), אתם צריכים להשתמש בתג class="columns extra-padding" ובתגים <hr> בשורה נפרדת בין שורות התוכן.

רוכסנים מתרחבים

ב-Workspace, אנחנו משתמשים במחלקה arrow-icon כדי לעצב את ה-zippy. הדוגמה הבאה ממחישה איך נראה ווידג'ט שאפשר להרחיב ב-Workspace:

<div>
  <devsite-expandable class="arrow-icon" id="UNIQUE_ZIPPY_ID">
    <h4 class="showalways">ZIPPY_HEADING</h4>
    <div>
      YOUR_CONTENT
    </div>
  </devsite-expandable>
</div>

כדי להשתמש בדוגמה הזו, מחליפים את המשתנים הבאים:

‫UNIQUE_ZIPPY_ID: מזינים מזהה ייחודי ותיאורי כדי שתוכלו להפנות ישירות לקובץ ה-ZIP, לדוגמה, direct-admin-access.
‫ZIPPY_HEADING: מזינים את הטקסט שהמשתמש צריך לראות לפני שהוא מרחיב את הרכיב המתקפל.
‫YOUR_CONTENT: מזינים את התוכן שהמשתמש יראה כשהרכיב יורחב.

מידע נוסף על הווידג'ט הניתן להרחבה ב-DevSite זמין במדריך לפרסום ב-DevSite, ווידג'טים: ניתן להרחבה.

הכללת תוכן משותף

כדי לעשות שימוש חוזר בתוכן בכמה דפים, אפשר להשתמש ב-includes, שהם הגרסה של DevSite לשימוש בקטעי קוד בכמה מאמרים ב-Composer.

הוראות ליצירת קובצי include ולשימוש בהם בתוכן זמינות במאמר שימוש חוזר בתוכן בדפים שונים.

הוספת עוגנים מותאמים אישית לכותרות

ב-DevSite נוצר מאפיין מזהה HTML לכל כותרת. כדי לשמור על עקביות במקרה שהכותרת משתנה, אפשר להוסיף מזהה עוגן מותאם אישית לכותרת על ידי הוספת {:#your-id} לצד טקסט הכותרת, למשל:

## Apply filters to your search results {:#apply-filters}

טיפ: כדי ליצור באופן אוטומטי מזהי עוגן מותאמים אישית לכל הכותרות בקובץ, לוחצים על Command (‎\⌘) + H (או על Ctrl + H ב-Windows). מזהי עוגן מותאמים אישית קיימים לא ישתנו.

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

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