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

คุณกำลังดูเอกสารประกอบของ 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	ธีมหลักของธีม 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 forms เพื่อแสดงแบบฟอร์ม Drupal ในรูปแบบโมดัล ฟังก์ชันเริ่มต้นในแบบฟอร์มการเข้าสู่ระบบและลงทะเบียนจะเป็นโมดัล คุณสามารถปิดใช้ฟังก์ชันนี้เพื่อให้แบบฟอร์มเหล่านั้นปรากฏเป็นหน้าเว็บแต่ละหน้าแทนได้

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

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

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

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

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

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

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

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

   

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

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

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

หากต้องการแก้ไขธีมเพื่อปรับเปลี่ยนรูปลักษณ์ของเว็บไซต์ อย่าแก้ไขไฟล์ธีมใน profiles/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[all][] = css/apigee_responsive_starterkit.css
   สคริปต์[] = js/apigee_responsive_starterkit.js
   
   ด้วย
   
   stylesheets[all][] = css/YOUR_THEsscript[YOUR_NAME]
   
7. เปลี่ยนชื่อธีมในไฟล์ YOUR_THEME_NAME.info จากชุดเครื่องมือเริ่มต้นที่ปรับเปลี่ยนได้ของ Apigee เป็น YOUR THEME NAME
8. หากต้องการเพิ่มภาพหน้าจอใหม่สำหรับธีม ให้แทนที่ไฟล์ screenshot.png ที่มีอยู่
9. หากต้องการเพิ่มโลโก้ใหม่ลงในธีม ให้แทนที่ไฟล์ logo.png ที่กำลังออก
10. หากต้องการเพิ่มไอคอน Fav ใหม่ลงในธีม ให้แทนที่ไฟล์ favicon.ico ที่มีอยู่