การกําหนดค่าธีม

คุณกำลังดูเอกสารประกอบ Apigee Edge
ไปที่ เอกสารประกอบเกี่ยวกับ Apigee X. ข้อมูล

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

คุณปรับแต่งธีมได้ผ่าน UI ของพอร์ทัลนักพัฒนาซอฟต์แวร์ หรือเขียนโค้ดด้วยคำสั่ง ไฟล์ธีมเพื่อลบล้างไฟล์ธีมเริ่มต้นได้

คุณจะมีตัวเลือกหลายธีมให้เลือก ทั้งนี้ขึ้นอยู่กับเวอร์ชันพอร์ทัลนักพัฒนาซอฟต์แวร์ของคุณ ตั้งแต่:

ธีม	คำอธิบาย
ธีมที่ปรับเปลี่ยนตามอุปกรณ์ของ Apigee	ธีมเริ่มต้นของ Bootstrap 3 มีดังนี้ รุ่นต่อๆ ไปของพอร์ทัล ธีมนี้รองรับอุปกรณ์ที่มีความกว้างตั้งแต่ 768 พิกเซลถึง 1400 พิกเซล ฟีเจอร์ทั้งหมดของ Bootstrap 3 พร้อมใช้งานในธีมนี้ หมายเหตุ: หากต้องการใช้ธีมที่ปรับเปลี่ยนตามอุปกรณ์ของ Apigee โปรดตรวจสอบว่าได้เปิดใช้ Bootstrap เปิดใช้งานธีม 7.x-3.0 แล้ว
ธีม Apigee DevConnect	ธีมพอร์ทัลเริ่มต้นก่อนหน้าธีมที่ปรับเปลี่ยนตามอุปกรณ์ของ Apigee คุณอัปเกรดพอร์ทัลที่มีอยู่ไปใช้ธีมที่ปรับเปลี่ยนตามอุปกรณ์ของ Apigee ใหม่ได้ แต่ต้องก่อน ตรวจสอบว่าบล็อก เทมเพลต และเนื้อหาอื่นๆ ทั้งหมดเข้ากันได้กับ Bootstrap 3 และ มีการเปิดใช้ธีม Bootstrap 7.x-3.0
ธีม Apigee Base	ธีมหลักของธีม Apigee DevConnect และไม่ได้มีไว้เพื่อใช้ในธีม ของตัวเอง

การตั้งค่าธีมเริ่มต้น

คุณอาจเห็นคำเตือนหากพอร์ทัลยังคงใช้ธีม Apigee DevConnect เวอร์ชันเก่า ในแบบฟอร์ม:

"Apigee DevConnect theme" is out of date 

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

วิธีตั้งค่าธีมเริ่มต้น

1. ลงชื่อเข้าสู่ระบบพอร์ทัลในฐานะผู้ใช้ที่มีสิทธิ์ระดับผู้ดูแลระบบหรือการสร้างเนื้อหา
2. เลือกลักษณะที่ปรากฏในเมนูการดูแลระบบของ Drupal รายการที่เปิดใช้ ธีมจะปรากฏขึ้น
3. สำหรับธีมที่คุณต้องการใช้เป็นค่าเริ่มต้น ให้เลือกตั้งเป็นค่าเริ่มต้น
   หากต้องการใช้ธีม Apigee ที่ปรับเปลี่ยนตามพื้นที่โฆษณา ให้ตรวจสอบว่าธีม Bootstrap 7.x-3.0 เปิดใช้ในหน้านั้นด้วย
4. บันทึกการกำหนดค่า

การปรับแต่งธีมที่ปรับเปลี่ยนตามอุปกรณ์ของ Apigee

ส่วนนี้จะอธิบายวิธีกำหนดค่าธีมที่ปรับเปลี่ยนตามอุปกรณ์ของ Apigee รวมถึงสิ่งต่อไปนี้

• การปรับแต่งรูปแบบโมดัล
• การปรับแต่งการตั้งค่าทั่วไป

หากต้องการปรับแต่งการรองรับแบบฟอร์มในโมดัล ให้ทำดังนี้

พอร์ทัลใช้ Drupal Bootstrap รูปแบบ Modal โมดูลแซนด์บ็อกซ์เพื่อแสดงรูปแบบ Drupal เป็นโมดัล โปรดกรอกแบบฟอร์มการเข้าสู่ระบบและลงทะเบียนโดย ฟังก์ชันเริ่มต้นเป็นโมดัล คุณสามารถปิดฟังก์ชันนี้เพื่อให้แบบฟอร์มเหล่านั้นปรากฏเป็น แต่ละหน้าแทน

1. ลงชื่อเข้าสู่ระบบพอร์ทัลนักพัฒนาซอฟต์แวร์ในฐานะผู้ใช้ที่มีสิทธิ์ของผู้ดูแลระบบ
2. เลือกการกำหนดค่า > อินเทอร์เฟซผู้ใช้ > รูปแบบ Bootstrap Modal ใน เมนูการดูแลระบบของ Drupal
3. เปิดหรือปิดใช้การสนับสนุนแบบโมดัลสำหรับแบบฟอร์ม
4. เลือกบันทึกการกำหนดค่า

วิธีปรับแต่งการตั้งค่าทั่วไปของธีมที่ปรับเปลี่ยนตามอุปกรณ์ของ Apigee

1. ลงชื่อเข้าสู่ระบบพอร์ทัลในฐานะผู้ใช้ที่มีสิทธิ์ระดับผู้ดูแลระบบหรือการสร้างเนื้อหา
2. เลือกลักษณะที่ปรากฏในเมนูการดูแลระบบของ Drupal รายการธีมที่เปิดใช้งาน จะปรากฏขึ้น
3. ในส่วนปรับเปลี่ยนตามพื้นที่โฆษณาของ Apigee (ธีมเริ่มต้น) ของหน้า ให้เลือก การตั้งค่า (อย่าเลือกปุ่ม "การตั้งค่า" ที่ด้านบนของหน้า)
4. หน้าการตั้งค่าสำหรับธีมที่ปรับเปลี่ยนตามอุปกรณ์ของ Apigee จะปรากฏขึ้น
5. ตารางต่อไปนี้อธิบายพื้นที่ในหน้านั้นที่คุณสามารถใช้เพื่อกำหนดค่า หากคุณเปลี่ยนแปลงการตั้งค่าเหล่านี้ ให้เลือก "บันทึกการกำหนดค่า"
   
   

   พื้นที่	ส่วน	คำอธิบาย
   การตั้งค่ารองเท้าบูท
   	ส่วนประกอบ	ควบคุมการแสดงเบรดครัมบ์ ตำแหน่งของเมนูหลัก (เรียกว่า Navbar ในการตั้งค่า) และการแสดงผลบ่อน้ำของพื้นที่: เบรดครัมบ์: ซ่อน/แสดงเบรดครัมบ์ เปิด/ปิดลิงก์หน้าแรก ภายในเบรดครัมบ์ Navbar: เปลี่ยนตำแหน่งของ Navbar (เมนูหลัก) เป็น ตำแหน่งคงที่/คงที่/ปกติ ทำให้เลย์เอาต์มีความไดนามิกมากขึ้น บ่อน้ำภูมิภาค: เพิ่มคลาสได้ดีลงในภูมิภาคใดก็ได้ในเว็บไซต์เพื่อ เพิ่มพื้นหลังสีเข้มลงในพื้นที่นั้น
   	JavaScript	ควบคุมการแสดงแท็ก Anchor, ป๊อปอัป และเคล็ดลับเครื่องมือ จุดยึด: แก้ไขตำแหน่งจุดยึดเพื่อให้ใช้งานได้อย่างราบรื่น ขณะเลื่อน ป๊อปโอเวอร์: ป๊อปอัปจะเพิ่มการวางซ้อนเล็กๆ ของเนื้อหาลงใน เปิด/ปิดใช้งานป๊อปอัปและกำหนดค่าวิธีใช้ป๊อปอัป เคล็ดลับเครื่องมือ: กำหนดค่าวิธีใช้เคล็ดลับเครื่องมือ คุณสามารถบังคับ เคล็ดลับเครื่องมือที่จะแสดงทางด้านขวา ซ้าย บน หรือด้านล่างขององค์ประกอบแบบฟอร์มแต่ละรายการ แล้วตั้งค่า ตัวเลือกการแสดงผลอื่นๆ
   	ขั้นสูง	ควบคุมวิธีที่พอร์ทัลใช้ BootstrapCDN เพื่ออัปเดตไฟล์ธีม Bootstrap คุณปิดใช้การอ้างอิงของพอร์ทัลได้ใน BootstrapCDN แต่คุณต้องแสดงการใช้งาน Bootstrap ของตนเอง
   	การตั้งค่า DevConnect	กำหนดข้อความต้อนรับ สีเริ่มต้น และขนาดของโลโก้ที่ปรากฏ ในเมนูหลัก
   ลบล้างการตั้งค่าโดยรวม
   	สลับการแสดงผล	เปิดและปิดใช้การแสดงพื้นที่ต่างๆ ของพอร์ทัล
   	การตั้งค่ารูปภาพโลโก้	ระบุรูปภาพที่แสดงในเมนูหลัก
   	การตั้งค่าไอคอนทางลัด	ระบุรูปภาพที่แสดงในแถบที่อยู่ของเบราว์เซอร์ หรือสำหรับบุ๊กมาร์กเพื่อ พอร์ทัล

การปรับแต่งธีม Apigee DevConnect

ธีม Apigee DevConnect เป็นธีมพอร์ทัลเริ่มต้นสำหรับพอร์ทัลรุ่นก่อนหน้า และ สามารถอัปเกรดเป็นธีม Apigee ใหม่ที่ปรับเปลี่ยนตามพื้นที่โฆษณาได้ แต่ก่อนอื่นคุณต้องตรวจสอบว่า บล็อก เทมเพลต และเนื้อหาอื่นๆ สามารถใช้งานร่วมกับ Bootstrap 3 ก่อนที่จะใช้

วิธีปรับแต่งการตั้งค่าทั่วไปของ Apigee DevConnect ธีม:

1. ลงชื่อเข้าสู่ระบบพอร์ทัลในฐานะผู้ใช้ที่มีสิทธิ์ระดับผู้ดูแลระบบหรือการสร้างเนื้อหา
2. เลือกลักษณะที่ปรากฏ > ธีม Apigee DevConnect > การตั้งค่าใน Drupal เมนูการดูแลระบบ คอลัมน์นี้จะแสดงการตั้งค่าเริ่มต้นของธีม การตั้งค่าสีคือ ระบุเป็นค่าฐานสิบหก

   

3. เปลี่ยนการตั้งค่าให้เหมาะกับความต้องการของคุณ
   เช่น เพิ่มหรือเปลี่ยนข้อความต้อนรับ หรือเปลี่ยนสีพื้นหลังของส่วนหัว สีพื้นหลังของส่วนหัวจะกำหนดเป็นสีส้ม (#FF4300) คุณสามารถเปลี่ยน เปลี่ยนเป็นสีอื่น เช่น น้ำเงิน (#0000FF)
4. เมื่อเปลี่ยนการตั้งค่าเสร็จแล้ว ให้คลิกบันทึก

การปรับแต่งธีมด้วยการสร้างธีมย่อย

ไฟล์และเนื้อหาทั้งหมดที่กำหนดธีมเริ่มต้นที่มาพร้อมกับพอร์ทัลจะอยู่ใน ไดเรกทอรีโปรไฟล์/apigee/themes ภายใต้ไดเรกทอรีการติดตั้งพอร์ทัล ไดเรกทอรีนี้อยู่ที่ /var/www/html/profiles/apigee/themes หากคุณ ติดตั้งพอร์ทัลในตำแหน่งเริ่มต้นแล้ว

หากต้องการแก้ไขธีมเพื่อแก้ไขรูปลักษณ์ของไซต์ อย่าแก้ไขไฟล์ธีมที่อยู่ใน profile/apigee/themes ได้โดยตรง หากอัปเกรด ระบบจะเขียนทับการเปลี่ยนแปลงในครั้งถัดไปที่คุณอัปเกรดพอร์ทัล

ให้สร้างธีมย่อยของธีมที่คุณต้องการแก้ไขโดยคัดลอกธีมเริ่มต้นแทน ไฟล์ไปยัง /sites/all/themes ไดเรกทอรี สำหรับคำแนะนำเกี่ยวกับธีมย่อย โปรดดู Drupal ดูเอกสารได้ที่ https://www.drupal.org/node/225125

1. คัดลอกโฟลเดอร์ profiles/apigee/themes/apigee_responsive/apigee_responsive_starterkit ไปที่ /sites/all/themes โฟลเดอร์
2. เปลี่ยนชื่อโฟลเดอร์ apigee_responsive_starterkit กับ YOUR_THEME_NAME
3. เปลี่ยนชื่อไฟล์ apigee_responsive_starterkit.info เป็น YOUR_THEME_NAME.info
4. เปลี่ยนชื่อ css/apigee_responsive_starterkit.css เป็น css/YOUR_THEME_NAME.css
5. เปลี่ยนชื่อ js/apigee_responsive_starterkit.js เป็น YOUR_THEME_NAME.js
6. แก้ไขไฟล์ YOUR_THEME_NAME.info และแทนที่บรรทัดต่อไปนี้
   
   stylesheets[ทั้งหมด][] = css/apigee_responsive_starterkit.css
   สคริปต์[] = js/apigee_responsive_starterkit.js
   
   กับ:
   
   stylesheets[ทั้งหมด][] = css/YOUR_THEME_NAME.css
   สคริปต์[] = js/YOUR_THEME_NAME.js
7. เปลี่ยนชื่อธีมในไฟล์ YOUR_THEME_NAME.info จาก Apigee Personalized Starter Kit เป็น YOUR THEME NAME
8. หากคุณต้องการเพิ่มภาพหน้าจอใหม่สำหรับธีม ให้แทนที่ไฟล์ screenshot.png ที่มีอยู่
9. หากต้องการเพิ่มโลโก้ใหม่ลงในธีม ให้แทนที่ไฟล์ logo.png ที่กำลังจะออก
10. หากต้องการเพิ่มไอคอน Fav ใหม่ในธีม ให้แทนที่ไฟล์ favicon.ico ที่มีอยู่