Facebook
Twitter
RSSמדריך CSHTML – עיצוב האתר: שימוש בדפי תבנית (Layout Pages)
עד כה ראינו שקל לכלול את אותו התוכן במספר דפים ע”י שימוש בפונקציה RenderPage. גישה מובנית יותר ליצירת מראה עקבי באתר היא להשתמש בדפי עיצוב – Layout Pages . דפים אלו מגדירים את המבנה של דף האינטרנט, אך אינם מכילים כל תוכן ממשי.
לאחר שיצרת Layout Page, באפשרותך ליצור דפי אינטרנט המכילים את התוכן ולקשר אותם ל- Layout Page. כאשר הדפים האלה מוצגים, הם יעוצבו על פי ה- Layout Page. ה- Layout Page מתנהג למעשה כסוג של תבנית עבור תוכן שמוגדר בדפים אחרים.
Layout Page הוא בדיוק כמו כל דף HTML, למעט העובדה שהוא מכיל קריאה לפונקציה RenderBody. המיקום של RenderBody ב- Layout Page קובע היכן המידע מדף התוכן ייכלל.
התרשים הבא מראה כיצד דפי תוכן ו- Layout Pages משולבים בזמן ריצה על-מנת לייצר את דף האינטרנט המוגמר:
- הדפדפן מבקש דף תוכן.
- דף התוכן מכיל קוד המציין את Layout Page שבו יש להשתמש למבנה הדף.
- ב- Layout Page, התוכן יתווסף בנקודה שבה מתבצעת הקריאה לפונקציה RenderBody.
- בלוקים של תוכן יכולים גם להיות מוכנסים לתוך Layout Page על ידי קריאה לפונקציה RenderPage, כפי שעשית בפרק הקודם.
- כאשר דף האינטרנט הושלם, הוא נשלח לדפדפן.
ההליך הבא מדגים כיצד ליצור Layout Page ולקשר דפי תוכן אליו.
1. בתיקיה Shared של האתר שלך, צור קובץ בשם layout.cshtml_.
2. החלף את כל התוכן הקיים בקובץ עם הקוד הבא:
<!DOCTYPE html>
<html>
<head>
<title>Structured Content </title>
<link href="@Href("/styles/site.css")"
rel="stylesheet" type="text/css" />
</head>
<body>
@RenderPage("/shared/_header.cshtml")
<div id="main">
@RenderBody()
</div>
<div id="footer">
© 2010 Contoso Pharmaceuticals.
All rights reserved.
</div>
</body>
</html>
שים לב לשימוש בפונקציה RenderPage ב- Layout Page כדי להוסיף בלוקים של תוכן. Layout Page יכול להכיל רק קריאה אחת לפונקציה RenderBody.
הערה: שרתי אינטרנט לא מטפלים בכל הפניות קישור (התכונה href של קישורים) באותה הדרך. לכן, CSHTML מספק את ה- Helper ששמו Href@, שמקבל נתיב כלשהו ומספק את הנתיב אל שרת האינטרנט בצורה ששרת האינטרנט מצפה.
3. בתיקיה Shared , צור קובץ בשם header.cshtml_ והחלף את התוכן הקיים עם הקוד הבא:
<div id="header">
Using Layout Pages
</div>
4. בתיקיית הראשית של האתר, צור תיקיה חדשה בשם Styles.
5. בתיקייה Styles, צור קובץ בשם Site.css והוסף את הגדרות הסגנון הבאות:
h1 {
border-bottom: 3px solid #cc9900;
font: 2.75em/1.75em Georgia, serif;
color: #996600;
}
ul {
list-style-type: none;
}
body {
margin: 0;
padding: 1em;
background-color: #ffffff;
font: 75%/1.75em "Trebuchet MS" , Verdana, sans-serif;
color: #006600;
}
#list {
margin: 1em 0 7em -3em;
padding: 1em 0 0 0;
background-color: #ffffff;
color: #996600;
width: 25%;
float: left;
}
#header, #footer {
margin: 0;
padding: 0;
color: #996600;
}
הגדרות סגנון אלו נמצאות כאן רק כדי להראות שניתן להשתמש בגיליונות סגנון (CSS) ב- Layout Pages. אם אתה רוצה, אתה יכול להגדיר סגנונות משלך עבור רכיבים אלה.
אם אינך מתמצא עדיין במשמעות הגדרות העיצוב האלה, מומלץ לבקר במדריך CSS באתר זה.
עד לשלב זה, אמור עץ הקבצים של האתר שלך להיראות כך:
6. בתיקיית השורש, צור קובץ בשם content.cshtml והחלף את התוכן הקיים עם הקוד הבא:
@{
Layout = "/shared/_layout.cshtml";
}
<h1> Structured Content </h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco labor
nisi ut aliquip ex ea commodo consequat. Duis aute irure in
reprehenderit in voluptate velit esse cillum dolore eu fugiat
pariatur. Excepteur sint occaecat cupidatat non proident, in
culpa qui officia deserunt mollit anim id est laborum.</p>
זהו הדף שעשה שימוש ב- Layout Page. בלוק הקוד בחלק העליון של הדף מציין באיזה Layout Page להשתמש כדי לעצב את התוכן.
7. הפעל את content.cshtml בדפדפן. הדף שמופיע משתמש בעיצוב שהוגדר בקובץ layout.cshtml_ והטקסט (תוכן) שהוגדר בקובץ content.cshtml.
אם נסתכל על ה- Source של העמוד הזה, נראה כמובן עמוד HTML מלא המכיל את השילוב בין דף העיצוב לעמוד התוכן.
ניתן לחזור על שלב 6 כדי ליצור דפי תוכן נוספים שיכולים לחלוק את אותו Layout Page.
תגובות בפייסבוק