บางทีเพื่อนบางคนอาจไม่ค่อยชัดเจนเกี่ยวกับธีมและสกิน เรามาแนะนำธีมและสกินกันก่อน
1. บทนำ:
แค่ดูชื่อ Themes และ Skins แล้วคุณจะรู้ว่ามันใช้ทำอะไร ตอนนี้เรามาพูดถึงพวกมันกันดีกว่า (คุณจะยังพูดได้อย่างไร~_~) เมื่อคุณรู้จักพวกมันทั้งหมดแล้ว เราสามารถเปลี่ยนมันได้อย่างง่ายดาย ธีม การควบคุมและสไตล์ของหน้าโดยไม่ต้องแก้ไขโค้ดและไฟล์เพจของเรา
ไฟล์ Themes จะถูกวางไว้แยกกันภายใต้โฟลเดอร์ App_Themes และแยกจากโปรแกรมของคุณโดยสิ้นเชิง
2. วิธีใช้ธีมและสกิน:
มาดูตัวอย่างง่ายๆ ก่อน:
รหัสไฟล์ App_Themesdefault1.skin:
<asp:Label Font-Bold="true" ForeColor="Red" runat="server" />
default.aspx: รหัสไฟล์:
<%@ Page Language="C#" Theme="default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<head id="Head1" runat="เซิร์ฟเวอร์">
<title>หน้าที่มีธีมตัวอย่างถูกนำไปใช้</title>
</หัว>
<ร่างกาย>
<form id="form1" runat="server">
<asp:Label ID="Label1" runat="server" Text="สวัสดี 1" /><br />
<asp:Label ID="Label2" runat="server" Text="สวัสดี 2" /><br />
</แบบฟอร์ม>
</ร่างกาย>
</html>
คุณจะเห็นว่าเราไม่ได้เขียนโค้ดใดๆ เพื่อควบคุมสไตล์ใน default.aspx แต่เมื่อเราเรียกใช้ เราพบว่าคำบนฉลากกลายเป็นสีแดงเข้ม นี่คือตัวอย่างธีมพื้นฐานที่สุด
โฟลเดอร์ App_Themes:
โฟลเดอร์ App_Themes อยู่ในไดเร็กทอรีรากของโปรแกรม App_Themes จะต้องเป็นโฟลเดอร์ย่อยของชื่อธีม ในรูปด้านล่าง มีการสร้างธีมขึ้นมาสองธีม โดยมีชื่อว่า default และ default2:
ใช้ธีม
1. ใช้ธีมกับเพจ:
หากคุณต้องการใช้ธีมกับเพจใดเพจหนึ่ง ให้แก้ไข <%@ Page Theme="..." %> โดยตรงในไฟล์ aspx ตัวอย่างเช่น หากคุณต้องการใช้ธีม default2 กับเพจนี้ ให้ตั้งค่า <% @ Page Theme="default2" %> OK
2. ใช้ Theme เดียวกันกับทุกหน้า:
หากคุณต้องการใช้ Theme เดียวกันในทุกหน้า ให้เพิ่มประโยค <pages theme="..."/> ใต้โหนด <system.web> ใน web.config
3. ปล่อยให้ตัวควบคุมไม่ใช้ Theme:
ในตัวอย่างแรก เราเห็นว่ารูปแบบของป้ายกำกับทั้งสองมีการเปลี่ยนแปลง ซึ่งหมายความว่าสไตล์ในไฟล์ .skin มีผลกับป้ายกำกับทั้งหมดในเพจ แต่บางครั้งเราต้องการให้ Label บางตัวไม่ใช้สไตล์ใน .skin ในกรณีนี้ คุณเพียงแค่ต้องตั้งค่าคุณสมบัติ EnableTheming ของ Label ให้เป็น false
บางทีคุณอาจต้องการให้ป้ายกำกับที่แตกต่างกันแสดงสไตล์ที่แตกต่างกัน คุณจะต้องตั้งค่าแอตทริบิวต์ SkinID ของป้ายกำกับเท่านั้น
App_Themesdefault1.skin
<asp:label runat="server" font-bold="true" forecolor="Red" />
<asp:label runat="server" SkinID="Blue" font-bold="true" forecolor="blue" />
deafult.aspx
<%@ ภาษาเพจ = "C #" Theme = "ค่าเริ่มต้น" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<head id="Head1" runat="เซิร์ฟเวอร์">
<title>หน้าที่มีธีมตัวอย่างถูกนำไปใช้</title>
</หัว>
<ร่างกาย>
<form id="form1" runat="server">
<asp:Label ID = "Label2" runat = "เซิร์ฟเวอร์" Text = "สวัสดี 2" SkinID = "สีน้ำเงิน" /><br />
<asp:Label ID="Label3" runat="server" Text="สวัสดี 3" /><br />
</แบบฟอร์ม>
</ร่างกาย>
</html>
หลังจากรันแล้ว คุณจะพบว่ารูปแบบการแสดงผลของป้ายกำกับทั้งสองแตกต่างกัน
4. วิธีการอื่นๆ:
ตามที่กล่าวไว้ก่อนหน้านี้ การใช้ <%@ Page Theme="..." %> ในส่วนหัวของไฟล์ aspx เพื่อใช้ธีม และการใช้วิธีการนี้เพื่อใช้สไตล์ในธีมจะเขียนทับสไตล์แอตทริบิวต์การควบคุมที่คุณเขียนใน aspx ตัวอย่างเช่น:
App_Themesdefault1.skin
<asp:Label Font-Bold="true" ForeColor="Red" runat="server" />
default.aspx
<%@ ภาษาเพจ = "C #" Theme = "ค่าเริ่มต้น" %>
<!DOCTYPE html สาธารณะ "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http //www.w3.org/1999/xhtml ">
<head id="Head1" runat="เซิร์ฟเวอร์">
</หัว>
<ร่างกาย>
<form id="form1" runat="server">
<asp:Label ID="Label1" runat="server" Text="สวัสดี 1" /><br />
<asp:Label ID="Label2" runat="server" Text="สวัสดี 2" ForeColor="สีน้ำเงิน" />
</แบบฟอร์ม>
</ร่างกาย>
</html>
จากการดำเนินการ สีหน้าของฉลากทั้งหมดจะเป็นสีแดง
การใช้ <%@ Page StyleSheetTheme="..." %> เพื่อใช้ธีมจะไม่เขียนทับแอตทริบิวต์ style ที่คุณเขียนในไฟล์ aspx:
ลำดับที่ตัวควบคุมใช้แอตทริบิวต์ style จะเป็นดังนี้:
ก. สไตล์อ้างอิงโดย StyleSheetTheme
ข คุณสมบัติการควบคุมที่กำหนดโดยรหัส (แทนที่ StyleSheetTheme)
c. สไตล์ที่อ้างอิงโดย Theme (ครอบคลุม 2
ธีมแรก) ประกอบด้วย CSS:
ไฟล์ .css สามารถใช้ในธีมได้ เมื่อคุณใส่ไฟล์ .css ลงในไดเร็กทอรีธีม .css ของคุณจะถูกนำไปใช้กับเพจที่ใช้ธีมนี้โดยอัตโนมัติ
3. โค้ดพื้นหลังสามารถเปลี่ยนสกินของเว็บไซต์ได้อย่างง่ายดาย .
สิ่งที่ฉันกล่าวข้างต้นคือการใช้ธีมในไฟล์ aspx หรือ web.config อย่างไรก็ตาม การใช้วิธีข้างต้นในการเปลี่ยนสกินในเว็บไซต์ เช่น บล็อก ที่ผู้ใช้แต่ละคนมีสกินที่แตกต่างกันนั้นไม่สะดวกอย่างเห็นได้ชัด
ต่อไปนี้จะแนะนำวิธีอ้างอิงธีมในโค้ดพื้นหลังแบบไดนามิกเพื่อแก้ไขสถานการณ์ข้างต้น ต้องใช้ธีมโดยเร็วที่สุดเมื่อมีการร้องขอเพจ ดังนั้นเราต้องเขียนโค้ดในเหตุการณ์ Page_PreInit โค้ดนั้นง่ายมาก เพียงหนึ่งประโยค:
หน้า.ธีม = "...";
ที่นี่เราเพียงแต่ต้องอ่านชื่อธีมต่างๆ ที่ผู้ใช้แต่ละคนตั้งไว้จากฐานข้อมูล เพื่อให้เข้าใจได้ง่ายว่าผู้ใช้แต่ละคนมีสกินที่แตกต่างกัน
-
ข้างต้นเป็นความคิดเห็นและประสบการณ์ส่วนตัว หากมีอะไรผิดพลาดโปรดให้คำแนะนำด้วย ขอบคุณครับ!