ระบบเทมเพลตใหม่ใน LS3.x
From LimeSurvey Manual
บทนำ
โปรดทราบ: ใน LimeSurvey เวอร์ชันก่อนหน้า ไฟล์ที่กำหนดรูปลักษณ์ของแบบสำรวจ รวมถึงการนำเสนอในด้านสี ฟอนต์ เลย์เอาต์ และพฤติกรรมบางส่วน เรียกว่า "เทมเพลต" แต่จากแนวคิดใหม่ ปัจจุบันเรียกสิ่งนี้ว่า "ธีม" ส่วนเทมเพลตจะใช้เรียกแบบสำรวจตัวอย่างแทน
ในหน้านี้ คุณจะได้เรียนรู้วิธีการ:
- ใช้ระบบธีมใหม่ของ LimeSurvey 3.0
- ใช้การสืบทอดเพื่อจัดการธีมของคุณเอง
- เพิ่มภาพลงในธีมของคุณ
- จัดการตัวเลือกธีมสำหรับแบบสำรวจและกลุ่มสำรวจของคุณ
LimeSurvey 3 นำเสนอระบบเอนจินธีมใหม่ทั้งหมด ซึ่งใช้ Twig 1.29 และ Bootstrap รองรับการสืบทอดธีมและตัวเลือกธีม โดยยกเลิกระบบคีย์เวิร์ดสำหรับแทนที่แบบเดิมโดยสิ้นเชิง ดังนั้นตอนนี้คุณสามารถปรับแต่ง HTML ส่วนหน้าได้ 100% ตัวอย่างเช่น ในระบบธีมแบบเดิมมีคีย์เวิร์ด {ASSESSMENTS} ที่จะถูกแทนที่ด้วย HTML ของการประเมินขณะทำงาน ผู้ออกแบบธีมไม่สามารถปรับแต่ง HTML นี้ได้ (นอกจากใช้ JavaScript) แต่ตอนนี้มีไฟล์ชื่อ assessments.twig ซึ่งมีตรรกะ (เขียนด้วย Twig) สำหรับสร้าง HTML นี้ ในหน้าเหล่านี้ เราจะอธิบายวิธีใช้เอนจินธีมใหม่นี้
เราจะไม่อธิบายรายละเอียดการทำงานของ Twig ในที่นี้ Twig คล้ายกับ PHP แบบง่ายมาก และมีความปลอดภัยสูงด้วยระบบ “sandbox” (เราจะกล่าวถึงในรายละเอียดในส่วนของโค้ดหลักของเอนจินธีม) หากคุณรู้จัก PHP อยู่แล้ว คุณจะเชี่ยวชาญได้ง่ายมาก หากไม่รู้จัก PHP ก็ยังเรียนรู้ได้ไม่ยาก โปรดดูเอกสารของ Twig 1.X:
https://twig.symfony.com/ การแก้ไขผ่านส่วนติดต่อผู้ดูแลระบบ
รายการธีม
บนแผงควบคุมของผู้ดูแลระบบ ขณะนี้มีกล่องสำหรับเข้าถึงรายการธีม:
รายการแบ่งออกเป็น 5 คอลัมน์:
- ภาพตัวอย่างของธีม: เป็นเพียงไฟล์ภาพชื่อ “preview.png” ที่อยู่ในรูทของธีม
- “ชื่อ” ของธีมตามที่ระบุใน manifest (config.xml ในรูทของธีม)
- คำอธิบายของธีม: สตริงที่กำหนดใน manifest
- ประเภทของธีม: ธีมหลัก (มาพร้อมกับ LimeSurvey), ธีมผู้ใช้ (เพิ่มในไดเรกทอรี upload), ธีม XML (ไม่ได้โหลดในฐานข้อมูล)
- ขยาย: หากธีมขยายธีมอื่น ชื่อของธีมนั้นจะแสดงที่นี่
- ปุ่มดำเนินการต่าง ๆ:
- ติดตั้ง: จะโหลด manifest ของธีมเพื่อเพิ่มลงในฐานข้อมูล และทำให้เลือกใช้ได้ในระดับแบบสำรวจ
- ถอนการติดตั้ง: จะลบรายการการตั้งค่าของธีมในฐานข้อมูล
- ตัวแก้ไขธีม: จะพาคุณไปยังตัวแก้ไขธีม
- ตัวเลือกธีม: จะพาคุณไปยังการตั้งค่าตัวเลือกธีมส่วนกลาง
ตัวแก้ไขธีม
เอกสารนี้ถือว่าคุณทราบวิธีใช้ตัวแก้ไขธีมใน LS เวอร์ชันก่อนหน้าอยู่แล้ว
ตัวแก้ไขธีมยังคงคล้ายกับของเดิมให้มากที่สุด ดังนั้นเมื่อคุณเปิดธีมหลัก คุณจะแก้ไขไม่ได้ แต่ตอนนี้แทนที่จะเป็นปุ่ม “คัดลอก” จะเป็นปุ่ม “ขยาย”
ภาพรวมโดยย่อของแนวคิดการสืบทอดธีม
ใน LS3 ธีมสามารถสืบทอดจากธีมอื่นได้ หรือกล่าวได้ว่า “ขยาย” ธีมอื่น ซึ่งหมายความว่าไดเรกทอรีของธีมจะแทบว่างเปล่า โดยจะมีเฉพาะไฟล์ (วิว สไตล์ชีต สคริปต์ ทรัพยากร ฯลฯ) ที่แตกต่างจากต้นฉบับเท่านั้น ด้วยวิธีนี้ คุณจะสร้างธีมจำนวนมากสำหรับผู้ใช้ต่าง ๆ ได้ง่าย โดยไม่ต้องดูแลธีมที่แตกต่างกันมากมาย ตัวอย่างเช่น คุณอาจมีธีมที่สร้างเอง แล้วมีอีกเวอร์ชันสำหรับบริษัทหนึ่ง (พร้อมโลโก้ สไตล์ และอาจมีลิงก์ไปยังเว็บไซต์ของบริษัทที่ส่วนท้าย ฯลฯ) และอีกเวอร์ชันสำหรับอีกบริษัทหนึ่ง เป็นต้น หากคุณอัปเดต CSS หรือเลย์เอาต์โดยรวมของธีมที่กำหนดเอง ธีมทั้งหมดที่สืบทอดจากธีมนั้นจะได้รับการอัปเดตโดยอัตโนมัติ โปรดทราบว่าการสืบทอดเป็นแบบเรียกซ้ำ: ธีมหนึ่งสามารถขยายธีมที่ขยายธีมอื่นอีกทอดหนึ่งได้ เป็นต้น
นั่นหมายความว่าหากคุณขยายธีมหลักของ LimeSurvey ธีมของคุณก็ยังได้รับประโยชน์จากการอัปเดตของธีมนั้นด้วย
สิ่งใหม่ในส่วนติดต่อผู้ใช้
หากต้องการขยายธีม Monochrome ของ LimeSurvey ให้ไปที่รายการธีม คลิกปุ่ม “ตัวแก้ไขธีม” ของธีม Monochrome จากนั้นคลิก “ขยาย” และยืนยันชื่อใหม่ “extends_monochrome”
หากคุณไปที่ไดเรกทอรี upload (ด้วยไคลเอนต์ไฟล์/FTP) คุณจะเห็นว่ามีไดเรกทอรีใหม่ถูกสร้างขึ้น: upload/themes/extends_monochrome ภายในมีไฟล์ XML และไดเรกทอรีต่าง ๆ แต่ส่วนใหญ่ว่างเปล่า ไม่มีทั้งวิว CSS และ JS แต่คุณยังสามารถเลือกธีมนี้จากแบบสำรวจได้เหมือนธีมปกติ และจะมีหน้าตาเหมือนธีม Monochrome ทุกประการ
ทรัพยากร (jpg, png ฯลฯ) จากธีมต้นฉบับจะถูกคัดลอกเมื่อขยายธีม เนื่องจากหากคุณคัดลอกไฟล์ CSS จากธีมต้นฉบับมาไว้ในธีมของคุณ และไฟล์นั้นอ้างอิงถึงไฟล์เหล่านี้ (เช่นในคำสั่ง background-image) ก็จะต้องหาภาพเหล่านั้นพบในพาธของธีมปัจจุบัน ตัวแก้ไขธีมสำหรับธีม extends_monochrome มีลักษณะดังนี้:
ไม่มีความแตกต่างมากนักจากตัวแก้ไขธีมแบบเดิม ขอสรุปสิ่งที่แตกต่างหลัก ๆ ดังนี้:
- คีย์เวิร์ด inherited ในรายการไฟล์ หมายความว่าไฟล์นั้นไม่มีอยู่ในไดเรกทอรีของธีม และจะใช้ไฟล์จากธีมต้นฉบับ
- ตัวแก้ไขหลัก ( ACE editor ) แสดงเนื้อหาของไฟล์ที่เลือก ไฟล์เหล่านี้ไม่ได้มีเพียง HTML, CSS หรือ JS แต่ยังมีคำสั่ง Twig ด้วย คำสั่ง Twig เหล่านี้ทำให้เราสามารถย้ายตรรกะบางส่วนไปไว้ในวิวของธีม ซึ่งเดิมอยู่ลึกในโค้ดหลัก และตอนนี้สามารถปรับแต่งได้
- ด้วยเหตุนี้ ตอนนี้ในตัวเลือกดรอปดาวน์ของเมนูด้านบนจึงมีประเภทหน้าจอให้เลือกมากขึ้น คุณจะเห็นหน้าต่าง ๆ เช่น ‘Survey List’, ‘Load’, ‘Save’, ‘Error’, ‘Registration’, ‘Assessments’, ‘Print Answers’ ซึ่งก่อนหน้านี้ไม่มี หรือไม่สามารถปรับแต่งได้จริง
- ลิงก์ ‘tip’ ที่ด้านล่างของรายการไฟล์จะแสดงวิธีเพิ่มภาพใน HTML ด้วย Twig
- ปุ่ม ‘บันทึกการเปลี่ยนแปลง’ กลายเป็นปุ่ม คัดลอกไปยังเทมเพลตภายในและบันทึกการเปลี่ยนแปลง
ตัวอย่างอย่างย่อ: การเพิ่มภาพ
ปุ่ม คัดลอกไปยังเทมเพลตภายในและบันทึกการเปลี่ยนแปลง ทำงานตามชื่อของมันทุกประการ: หากคุณแก้ไขสิ่งใดในไฟล์แล้วคลิกปุ่มนั้น ไฟล์จะถูกคัดลอกไปยังธีมที่คุณกำลังแก้ไข และบันทึกการเปลี่ยนแปลงของคุณ
ตัวอย่างเช่น คลิกไฟล์ layout_global.twig จากนั้นก่อนบล็อก content ( {% block content %}) ให้เพิ่มข้อความ “TEST” แล้วคลิกปุ่ม คุณจะเห็นว่าป้ายของไฟล์เปลี่ยนจาก “inherited” เป็น “local” และตอนนี้ปุ่มกลายเป็นปุ่มธรรมดา บันทึกการเปลี่ยนแปลง
หากคุณเปิดตัวสำรวจไฟล์และไปที่ไดเรกทอรี upload/themes/extends_monochrome/views/ คุณจะเห็นว่ามีไฟล์เพียงไฟล์เดียว คือ layout_global.twig และมีสตริง “TEST” อยู่ในนั้น
ทีนี้ แทนที่จะเพิ่มข้อความสุ่ม เราจะเพิ่มภาพ หากคุณคลิกลิงก์ tip จะแสดงข้อความว่า:
หากต้องการใช้ภาพในไฟล์ .twig:
{{ image('./files/myfile.png', 'alt-text for my file', {"class": "myclass"}) }}
หากคุณอ่านเอกสารของ Twig แล้ว (และควรอ่านแล้วในขั้นตอนนี้) คุณจะทราบว่า {{ function( ) }} จะแสดงผลลัพธ์ของฟังก์ชันบนหน้าจอ ในที่นี้ ฟังก์ชันคือ image( )
หากคุณอยากรู้ว่ามันทำอะไร คุณสามารถดูได้ในโค้ดที่นี่ (เวอร์ชัน RC3): ฟังก์ชัน image() ใน RC3
หากคุณไม่เข้าใจโค้ด ไม่ต้องกังวล คุณไม่จำเป็นต้องรู้ว่ามันทำงานอย่างไร แต่ควรรู้ว่าทำไมจึงใช้และใช้อย่างไร
คุณควรใช้ฟังก์ชัน image() ด้วยเหตุผลสองข้อ:
- ฟังก์ชัน image จะค้นหาภาพไล่ไปตามธีม หากธีมที่คุณกำลังทำงานขยายจากธีมอื่น และคุณคัดลอกไฟล์ที่แทรกภาพไว้มาไว้ในธีมของคุณ แต่ไม่ได้คัดลอกภาพนั้นมาด้วย ฟังก์ชันจะค้นหาไล่ตามลำดับการสืบทอดของธีมเพื่อหาว่าภาพอยู่ที่ใด
- ฟังก์ชันนี้จะใช้ asset manager จึงช่วยปรับปรุงประสิทธิภาพของธีมของคุณ ดูข้อมูลเพิ่มเติมได้ในเอกสารของ Yii Asset Manager: http://www.yiiframework.com/wiki/148/understanding-assets/
ดังนั้น หากต้องการเพิ่มภาพลงในธีมของคุณ:
- เพียงอัปโหลดตามปกติด้วยตัวอัปโหลดไฟล์ทางด้านขวา แล้วเพิ่มลงในตำแหน่งที่ต้องการในไฟล์ twig ใดก็ได้:
{{ image('./files/myfile.png') }}
- หากต้องการเพิ่มข้อความทางเลือกให้กับภาพ (สำหรับโปรแกรมอ่านหน้าจอและการตรวจสอบ HTML) ให้เพิ่ม:
{{ image('./files/myfile.png'), ‘my alternative text’ }}
- หากต้องการเพิ่มแอตทริบิวต์ class และ id:
{{ image('./files/myfile.png'), ‘my alternative text’, {“class”: “a_nice_css_class”, “id”: “any_id”} }}
สิ่งที่อยู่ในรายการสิ่งที่ต้องทำของเรา
- ให้ผู้ใช้สามารถอัปโหลดไฟล์ตัวอย่างแบบกำหนดเองจากตัวแก้ไขได้โดยตรง
- เพิ่มปุ่มสำหรับลบไฟล์ในธีมและกลับไปใช้ไฟล์ที่สืบทอด
- คัดลอกเฉพาะภาพที่ใช้ในไฟล์ CSS (โดยระบุไว้ใน manifest เป็นไฟล์ที่ต้องคัดลอก)
- แสดงให้ทราบว่าธีมปัจจุบันขยายธีมใด (หากมี)
ตัวเลือกธีม
อีกสิ่งใหม่ของ LS3 คือหน้าตัวเลือกธีม ดังที่เราจะเห็นต่อไป ผู้สร้างธีมสามารถสร้างตัวเลือกของตนเอง และแม้แต่หน้าตัวเลือกสำหรับผู้ดูแลระบบของตนเอง ในที่นี้ เราจะดูอย่างย่อว่าหน้าตัวเลือกของธีมหลักทำงานอย่างไร หากต้องการเข้าถึงตัวเลือกธีมในระดับส่วนกลาง: คลิก “ตัวเลือกธีม” ในรายการธีม
ตัวเลือกขั้นสูง
เมื่อคุณเปิดแท็บ ตัวเลือกธีม คุณสามารถเลือกแก้ไขได้ทั้ง ตัวเลือกอย่างง่าย หรือ ตัวเลือกขั้นสูง โดย “ตัวเลือกขั้นสูง” เป็นเพียงแบบฟอร์มเปล่าที่ให้คุณเข้าถึงช่องการกำหนดค่าหลักของธีมจากฐานข้อมูล เพื่อให้เข้าใจวิธีการทำงาน คุณควรอ่านเกี่ยวกับไฟล์ XML และการสร้างธีมตั้งแต่เริ่มต้นด้วย ดังนั้นส่วนนี้จึงค่อนข้างซับซ้อนและออกแบบมาสำหรับผู้ใช้ขั้นสูง
อย่างไรก็ตาม หากคุณต้องการแก้ไขการตั้งค่าขั้นสูง ให้คลิกที่แท็บ ตัวเลือกขั้นสูง
- ไฟล์ CSS: ไฟล์ CSS ที่ควรเพิ่มลงในเทมเพลต;
- ไฟล์ JS: ไฟล์ JS ที่ควรเพิ่มลงในเทมเพลต;
- ไฟล์ พิมพ์ CSS: ไฟล์ CSS ที่จะโหลดเมื่อพิมพ์เทมเพลต;
- ตัวเลือก: ช่องนี้ประกอบด้วยตัวเลือก (และค่าของตัวเลือก) ที่ควรถูกส่งไปประมวลผลในมุมมองของเทมเพลต;
- CssFramework Name: ชื่อของเฟรมเวิร์ก CSS ที่จะโหลด ขณะนี้รองรับเฉพาะ Bootstrap หรือไม่ใช้เลย;
- Cssframework Css: คุณสามารถแทนที่ไฟล์ bootstrap.css หลักในช่องนี้ด้วยเวอร์ชันที่กำหนดเองได้;
- Cssframework Js: คุณสามารถแทนที่ไฟล์ boostrap.js หลักจากช่องนี้ด้วยเวอร์ชันที่กำหนดเองได้;
- แพ็คเกจที่จะโหลด: คุณสามารถโหลดแพ็คเกจแอสเซ็ตหลักบางส่วนของ LimeSurvey ได้จากการตั้งค่านี้
คุณจะเห็นช่องอัปโหลดอยู่ด้านบน ซึ่งช่วยให้คุณอัปโหลดไฟล์ไปยังไดเรกทอรีไฟล์ของธีมได้ พารามิเตอร์เหล่านี้สามารถใช้เปลี่ยนรูปลักษณ์ทั้งหมดของธีมได้
คำเตือน! : อย่าแก้ไขค่าเหล่านี้ เว้นแต่คุณจะรู้ว่ากำลังทำอะไรอยู่!
ตัวเลือกอย่างง่าย
หน้าตัวเลือกอย่างง่ายมาจากเทมเพลตเอง สร้างขึ้นผ่านไฟล์ twig และ JavaScript บางส่วนภายในไดเรกทอรี /options ของธีม: https://github.com/LimeSurvey/LimeSurvey/tree/develop/templates/default/options (ลิงก์เสีย)
หน้านี้สามารถแตกต่างกันโดยสิ้นเชิงในแต่ละธีม และผู้จัดทำธีมได้รับการสนับสนุนอย่างยิ่งให้สร้างรูปลักษณ์และการใช้งานของตนเอง 
หน้าตัวเลือกอย่างง่ายเพียงแค่กรอกค่าในช่องอินพุตของแบบฟอร์มขั้นสูง คุณสามารถเห็นได้โดยการเปิดหรือปิดการตั้งค่าในหน้าอย่างง่าย แล้วดูว่าอินพุตที่เกี่ยวข้องในแบบฟอร์มขั้นสูงเปลี่ยนแปลงตามไปอย่างไร ตัวอย่างเช่น ในตัวเลือกอย่างง่ายของ Default Template หากคุณเปลี่ยนธีม Bootswatch เป็น “Darkly” แล้วคลิกแท็บตัวเลือกขั้นสูง (แม้ยังไม่ได้บันทึก) คุณจะเห็นว่าช่อง “Cssframework Css” เปลี่ยนจาก
{"replace": [["css/bootstrap.css","css/flatly.css"]]}
เป็น
{"replace": [["css/bootstrap.css","css/darkly.css"]]}
ตัวเลือกอย่างง่ายสำหรับธีมหลักมีดังนี้:
- Ajax mode: ต้องการให้โหลดหน้าถัดไปผ่าน ajax (เร็วกว่า) หรือผ่านการโหลดหน้าใหม่ (เหมาะกับการดีบักมากกว่า)
- ภาพพื้นหลัง: หากตั้งค่าเป็น Yes ระบบจะโหลดภาพชื่อ pattern.png (จะถูกแทนที่ด้วยตัวเลือกไฟล์ใน Master)
- Box container: หากตั้งค่าเป็น ไม่ คำถามจะไม่ถูกแสดงอยู่ในกล่อง (ทำให้คุณใช้อาร์เรย์ขนาดใหญ่ที่กว้างกว่าหน้าจอได้)
- Brandlogo: หากตั้งค่าเป็น ไม่ ชื่อของแบบสำรวจจะแสดงในแถบด้านบน มิฉะนั้นคุณสามารถเลือกภาพหนึ่งภาพในไดเรกทอรีไฟล์เพื่อใช้เป็นภาพโลโก้
- แอนิเมทส่วนร่าง: หากตั้งค่าเป็น yes คุณสามารถเลือกแอนิเมชันที่จะใช้เมื่อโหลดส่วนเนื้อหาของแบบสำรวจ
- คำถามแบบเคลื่อนไหว: เช่นเดียวกันสำหรับคำถาม
- Animate alerts: เช่นเดียวกันสำหรับการแจ้งเตือน
- Bootstrap theme: ที่นี่คุณสามารถเลือกธีม Bootstrap ที่จะโหลด ซึ่งมาจาก Bootswatch https://bootswatch.com/3/
ไลบรารีที่ใช้สำหรับแอนิเมชันคือ animate.css: https://daneden.github.io/animate.css/
แน่นอนว่าผู้พัฒนาธีมสามารถเพิ่มไลบรารีแอนิเมชันของตนเอง หรือไม่ใช้ไลบรารีแอนิเมชันเลยก็ได้
ธีม Monochrome ใช้ชุดสี Bootstrap เดียวกับส่วนติดต่อผู้ใช้ของผู้ดูแลระบบ ธีมเหล่านี้ไม่ได้ใช้ระบบแทนที่ CSS framework แต่เพียงเพิ่มไฟล์ CSS เข้าไป จึงเป็นตัวอย่างอีกแนวทางหนึ่งสำหรับผู้พัฒนาธีมในการจัดการธีมแบบกำหนดเอง
ระบบการสืบทอด
ในส่วนก่อนหน้า เราได้เห็นแล้วว่าธีมหนึ่งสามารถขยายจากอีกธีมหนึ่งได้ การกำหนดค่าของธีมก็สามารถสืบทอดจากการกำหนดค่าของธีมอื่นได้เช่นกัน ซึ่งหมายความว่าสำหรับธีมหนึ่ง คุณสามารถมีการกำหนดค่าได้ที่
- ระดับโดยรวม (ที่เราเพิ่งเห็นซึ่งเข้าถึงได้จากรายการธีม)
- ระดับกลุ่มแบบสำรวจ
- และระดับสุดท้ายคือระดับแบบสำรวจ
พารามิเตอร์แต่ละตัวในแต่ละระดับสามารถสืบทอดจากระดับที่อยู่สูงกว่าได้ ซึ่งก็คือการสืบทอดของกลุ่มแบบสำรวจ เริ่มต้นด้วยการดูระดับกลุ่มแบบสำรวจกัน
ที่ระดับกลุ่มแบบสำรวจ
สิ่งใหม่ที่ยอดเยี่ยมอีกอย่างของ LS3 คือระบบกลุ่มแบบสำรวจ ตอนนี้คุณสามารถสร้างกลุ่มต่าง ๆ เพื่อจัดระเบียบแบบสำรวจของคุณได้ หากต้องการเข้าถึง ให้ไปที่รายการแบบสอบถาม แล้วคลิกแท็บกลุ่มสำรวจ:
ในรายการนี้ คุณมีปุ่มดำเนินการสองปุ่ม หากกลุ่มว่างเปล่า คุณสามารถลบกลุ่มนั้นได้ มิฉะนั้นคุณสามารถแก้ไขได้เสมอ เมื่อคลิกปุ่มแก้ไข คุณจะเข้าสู่หน้าการกำหนดค่ากลุ่มแบบสำรวจ:
แท็บที่สามของหน้านี้มีชื่อว่า “Template options for this survey group” เมื่อคลิก คุณจะเห็นรายการธีมเช่นเดียวกับในรายการธีม ยกเว้นว่าที่นี่จะมองเห็นเฉพาะปุ่มตัวเลือกเท่านั้น (เข้าถึงตัวแก้ไขธีมได้จากรายการหลักเท่านั้น)
ตอนนี้ หากคุณคลิกตัวเลือกของเทมเพลตเริ่มต้น คุณจะเห็นดังนี้:
- รับทุกสิ่ง หมายความว่าการกำหนดค่าทั้งหมดจะถูกสืบทอดมาจากระดับการกำหนดค่าโดยรวม
- หากคุณไปที่ หน้าตัวเลือกขั้นสูง คุณจะเห็นว่าทุกช่องถูกตั้งค่าเป็นสืบทอด
- หากคุณคลิก "ไม่" สำหรับ "รับทุกสิ่ง" ในตัวเลือกอย่างง่าย คุณจะเห็นหน้าที่คล้ายกับหน้าตัวเลือกโดยรวมอีกครั้ง ความแตกต่างเดียวคือแต่ละช่องสามารถตั้งค่าเป็น yes, no หรือสืบทอดได้ และตัวเลือกดรอปดาวน์แต่ละตัวจะมีค่า สืบทอด'
กลุ่มแบบสำรวจสามารถเป็นกลุ่มย่อยของอีกกลุ่มหนึ่งได้ ในกรณีนี้ กลุ่มย่อยจะสืบทอดจากกลุ่มแม่ที่ระดับแบบสำรวจ
เมื่อแก้ไขแบบสำรวจ ในเมนูแถบด้านซ้าย คุณจะเห็นรายการใหม่ “ตัวเลือกธีม” ซึ่งจะนำคุณไปยังหน้าตัวเลือกของธีมที่เลือกไว้สำหรับแบบสำรวจปัจจุบัน คุณจะพบระบบการสืบทอดเดียวกับในกลุ่มแบบสำรวจ แต่คราวนี้ สืบทอด หมายถึงการตั้งค่าจะถูกสืบทอดมาจากกลุ่มแบบสำรวจของแบบสำรวจนั้น
ตัวอย่างกรณีการใช้งาน
สมมติว่าคุณใช้ธีมเดียวสำหรับหลายบริษัท (A และ B) คุณตั้งค่าตัวเลือกที่ชื่นชอบไว้ที่ระดับโดยรวม (เช่น เปิด ajax, แอนิเมทส่วนร่างแบบสไลด์อิน, การแจ้งเตือนแบบเต้นเป็นจังหวะ) จากนั้นคุณสร้างกลุ่มแบบสำรวจสำหรับแต่ละบริษัท: กลุ่มแบบสำรวจสำหรับบริษัท A ที่จะเก็บแบบสำรวจทั้งหมดของบริษัทนี้ และกลุ่มสำหรับบริษัท B ที่จะเก็บแบบสำรวจทั้งหมดของบริษัท B ในระดับนี้ คุณจะตั้งค่าเฉพาะโลโก้และพื้นหลัง และปล่อยให้ตัวเลือกอื่น ๆ สืบทอดต่อไป ดังนั้นแบบสำรวจทั้งหมดในกลุ่ม A จะใช้โลโก้ของบริษัท A และแบบสำรวจทั้งหมดในกลุ่ม B จะใช้โลโก้ของบริษัท B สำหรับแบบสำรวจหนึ่งของบริษัท A คุณอาจใช้พื้นหลังที่ต่างออกไปให้เข้ากับหัวข้อของแบบสำรวจ โดยเพียงเปลี่ยนพื้นหลังในตัวเลือกที่ระดับแบบสำรวจ หากมีผู้ใช้ในบริษัท B แจ้งว่าการแจ้งเตือนแบบเต้นเป็นจังหวะดูแรงเกินไปและต้องการสิ่งที่นุ่มนวลกว่า เช่น เฟดอิน คุณก็เพียงเปลี่ยนแอนิเมชันการแจ้งเตือนที่ระดับกลุ่มแบบสำรวจ B แล้วแบบสำรวจทั้งหมดของกลุ่มนี้จะใช้แอนิเมชันดังกล่าว หากบริษัท A เปลี่ยนโลโก้ คุณสามารถเปลี่ยนที่ระดับกลุ่มแบบสำรวจ A และแบบสำรวจทั้งหมดของกลุ่มนี้จะใช้โลโก้ใหม่
คำถามที่พบบ่อยเกี่ยวกับการปรับแต่งธีม
ที่นี่คุณจะพบคำตอบสำหรับคำถามที่เคยมีผู้ถามในฟอรัม ซึ่งอาจช่วยให้คุณปรับแต่งธีมของคุณได้
การปรับแต่ง CSS/JS: การจัดการกับ asset manager ("ทำไมการเปลี่ยนแปลงของฉันจึงไม่ถูกนำไปใช้?")
หากคุณพยายามอัปเดต CSS/JS ของธีมโดยแก้ไขโค้ดโดยตรงด้วยโปรแกรมแก้ไขที่คุณชื่นชอบ คุณอาจแปลกใจที่การเปลี่ยนแปลงของคุณไม่ถูกนำไปใช้
ตั้งแต่เวอร์ชัน 2.50 LS ใช้ Yii asset manager:
เอกสาร Yii เกี่ยวกับ Assets
ระบบจะย้ายไฟล์ CSS/JS ของธีมไปยังไดเรกทอรีย่อย tmp/ ที่มีสตริงสุ่ม (เช่น "tmp/1ef64ml/") ดังนั้นหากคุณเปลี่ยนแปลงไฟล์ css/js และแจ้งให้ asset manager ทราบ ไฟล์จะถูกคัดลอกไปยังไดเรกทอรีย่อยใหม่ที่มีชื่อใหม่ เพื่อให้แคชของเบราเซอร์ของผู้ใช้ได้รับการอัปเดตและเห็น css/js ใหม่ มิฉะนั้นพวกเขาจะต้องล้างแคชของเบราเซอร์เอง
นี่คือลิงก์ CSS ในส่วนหัวเมื่อเปิดใช้ asset manager:
จะเห็นว่าทั้งหมดอ้างอิงไปยังโฟลเดอร์ย่อยใน tmp/
นี่คือลิงก์ CSS ในส่วนหัวเมื่อปิด asset manager:
จะเห็นว่าลิงก์ชี้ไปยังไฟล์จริงของธีม
แน่นอนว่าหาก Asset Manager ไม่ทราบว่าคุณเปลี่ยนแปลงไฟล์ ไฟล์เก่าในไดเรกทอรี tmp/ เดิมจะยังคงไม่เปลี่ยนแปลง และการเปลี่ยนแปลงของคุณจะไม่ถูกนำไปใช้เลย..ดังนั้น เมื่อคุณแก้ไข CSS/JS ของธีม คุณมีหลายทางเลือก:
- คุณสามารถใช้ตัวแก้ไขธีมของ LS: ซึ่งจัดการกับ asset manager ให้ คุณไม่ต้องกังวลใด ๆ
- คุณสามารถเปิดโหมดดีบัก: ซึ่งจะปิด asset manager ทำให้เรียกใช้ไฟล์ css/js จริงของธีม (แต่คุณต้องรีเฟรชแคชของเบราเซอร์ทุกครั้งที่โหลด)
- คุณสามารถรีเฟรชแคช assets: จาก การตั้งค่าโดยรวม -> General -> Clear asset cache
การใช้ตัวแก้ไขธีมเพื่อแก้ไข CSS ที่กำหนดเองเป็นวิธีแก้ปัญหาที่ดีที่สุดอย่างยิ่ง
การใช้ตัวแก้ไขธีมจะช่วยให้คุณเข้าใจสถาปัตยกรรมของเอนจินธีมใหม่
นอกจากนี้ หากคุณกำลังปรับแต่งธีม fruity โปรดระวังเรื่อง CSS specificity: คำนิยามส่วนใหญ่ใช้ตัวเลือก ".fruity" (หนึ่งในคลาสของแท็ก body)
การเพิ่มฟอนต์ที่กำหนดเองให้กับธีมของฉัน
วิธีง่าย: ใช้ Google Font CDN
Bootswatch Survey Theme ใช้ Google Font CDN ลองดูว่าทำงานอย่างไร: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/bootswatch/css/variations/flatly.min.css
@import url("https://fonts.googleapis.com/css?family=Lato:400,700,400italic");
จากนั้นฟอนต์ Lato จะถูกใช้ผ่านกฎ CSS: https://github.com/thomaspark/bootswatch/blob/master/dist/flatly/bootstrap.css#L72
body {
...
font-family: "Lato";
...
}
คุณสามารถใช้ Google Font ใดก็ได้ด้วยวิธีนี้ในธีมที่กำหนดเองของคุณ แน่นอนว่าคุณควรลบตัวเลือกฟอนต์ออกจากตัวเลือกของธีม โดยลบบรรทัดเหล่านี้ใน options.twig: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/options/options.twig#L209-L230
การใช้ฟอนต์ในเครื่อง
แน่นอนว่าคุณสามารถดาวน์โหลดไฟล์ฟอนต์และใช้จากเซิร์ฟเวอร์ภายในแทนการใช้ Google CDN ได้ (ดีกว่าสำหรับความเป็นส่วนตัว) ตัวอย่างวิธีทำ นี่คือฟอนต์ noto เวอร์ชันภายในของเรา: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/assets/fonts/noto.css
@font-face {
font-family: 'Noto Sans';
font-weight: 300;
font-style: normal;
src: url('./font-src/Noto/NotoSans-Regular.ttf');
}
...
คุณสามารถใช้คำนิยามที่คล้ายกันมากในไฟล์ css ของธีมของคุณ จากนั้นคัดลอกไฟล์ NotoSans-Regular.ttf ไปไว้ในโฟลเดอร์ css/font-src/ ของธีมของคุณ
จากนั้น นำฟอนต์นั้นไปใช้กับ body (หรือองค์ประกอบอื่น ๆ) เหมือนข้างต้น และลบตัวเลือกฟอนต์เริ่มต้นออก
การสร้างตัวเลือกฟอนต์ของคุณเองในตัวเลือก
ขณะนี้ คุณยังไม่สามารถใช้ตัวเลือกฟอนต์หลักเพื่อเพิ่มฟอนต์ของคุณเองในตัวเลือกได้โดยง่าย เราต้องเปิดโอกาสให้ผู้ใช้ปลายทางอัปโหลดแพ็กเกจแบบกำหนดเองได้ก่อน (ดูหัวข้อถัดไป: A look into the Fruity Font Selector)
ขั้นตอนมีดังนี้:
- เพิ่มฟอนต์สองตัว (my_custom_font และ my_custom_other_font) ลงในธีมของคุณ โดยใช้ CDN หรือเซิร์ฟเวอร์ภายใน
- จากนั้นในไฟล์ css ของคุณ ให้เพิ่มคลาสใหม่สองคลาส:
.font-my_custom_font {
font-family: 'my_custom_font ';
}
.font-my_custom_other_font {
font-family: 'my_custom_other_font';
}
- ในไฟล์ XML ของธีมของคุณ ให้เพิ่มตัวเลือกฟอนต์ (ค่าเริ่มต้นคือ my_custom_font) :
<options>
....
<font>my_custom_font</font>
</options>
- ใน option.twig ให้เพิ่มตัวเลือกฟอนต์ของคุณโดยเพิ่มบรรทัดเหล่านี้ (ยังไม่ได้ทดสอบ หากใช้งานไม่ได้ โปรดแจ้งในฟอรัม):
<div class='row ls-space margin top-15 bottom-15 action_hide_on_inherit'>
<hr/>
</div>
<div class='row action_hide_on_inherit'>
<div class='col-sm-12'>
<div class='panel panel-default'>
<div class='panel-heading'>{{ "My custom fonts" | t }}</div>
<div class='panel-body'>
<div class='form-group row'>
<label for='simple_edit_font' class='control-label'>{{ "Select font:" | t }}</label>
<div class='col-sm-12'>
<select class='form-control selector_option_value_field' id='simple_edit_font' name='font'>
{% if templateConfiguration.sid is not empty or templateConfiguration.gsid is not empty %} //Shouldn't this be "theme" in stead of "template"?
{% set fontOptions = fontOptions ~ '<option value = "inherit" > Inherit</option>' %}
{% endif %}
<optgroup label="{{ "My Custom fonts" | t }}">
<option class="font-my_custom_font" value="custom_font" data-font-package="" >Custom</option>
<option class="font-my_custom_other_font" value="my_custom_other_font" data-font-package="" >Other</option>
</optgroup>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
ตอนนี้ผู้ใช้ของคุณควรจะเลือกระหว่างฟอนต์ทั้งสองได้แล้ว
A look into the Fruity Font Selector
ในอนาคต เราจะเปิดโอกาสให้ผู้ใช้ปลายทางอัปโหลดแพ็กเกจแอสเซ็ตของตนเองได้ รวมถึงแพ็กเกจฟอนต์ ซึ่งจะทำให้การปรับแต่งฟอนต์ง่ายขึ้นมาก
เพื่อทำความเข้าใจ Yii Packages:
http://www.yiiframework.com/doc/api/1.1/CClientScript#packages-detail
แพ็กเกจของ LimeSurvey ถูกกำหนดไว้ในไฟล์หลายไฟล์ โดยแพ็กเกจฟอนต์ถูกกำหนดไว้ที่นี่:
https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/application/config/fonts.php
ตัวอย่างเช่น แพ็กเกจฟอนต์ Noto ถูกกำหนดไว้ที่นี่:
https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/application/config/fonts.php#L47-L53
'font-noto' => array(
'devBaseUrl' => 'assets/fonts/',
'basePath' => 'fonts',
'css' => array(
'noto.css',
),
),
ไฟล์ noto.css ที่แพ็กเกจนี้ใช้อยู่ที่นี่:
https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/assets/fonts/noto.css
สังเกตการกำหนดคลาส css ".font-noto" ที่ส่วนท้ายของไฟล์:
@font-face {
font-family: 'Noto Sans';
...
}
...
.font-noto{
font-family: 'Noto Sans';
}
จากนั้นในธีม Vanilla จะใช้ฟอนต์ noto โดยเพิ่มแพ็กเกจ noto และกำหนดตัวเลือกฟอนต์เป็น noto:
https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/config.xml#L79
<packages>
....
<add>font-noto</add>
</packages>
<options>
....
<font>noto</font>
</options>
จากนั้นคลาสฟอนต์ของ body จะถูกกำหนดโดยใช้ค่านี้:
https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/views/layout_global.twig#L76
<body class=" ... font-{{ aSurveyInfo.options.font }} ... " ... >
แน่นอนว่าไฟล์ XML มีเพียงค่าเริ่มต้นสำหรับการกำหนดค่าธีมของคุณเท่านั้น แต่จริง ๆ แล้วค่าเหล่านั้นถูกกำหนดและอ่านจากฐานข้อมูล (ตาราง "template_configuration" (Question: "template_" of "theme_"?) ในรูปแบบสตริง json ไฟล์ option.js เพียงนำค่าของตัวเลือกฟอนต์จากตัวเลือกแบบง่ายไปเปลี่ยนค่าภายในฟอร์มของแท็บขั้นสูง: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/options/options.js#L148-L174
ดังนั้นเมื่อฟังก์ชัน "upload asset package" พร้อมใช้งาน ก็จะเพิ่มสคริปต์ที่สแกนแพ็กเกจฟอนต์ทั้งหมดที่มีอยู่เพื่อเพิ่มลงในตัวเลือกได้อย่างง่ายดาย
การเพิ่มตัวเลือกธีมเพื่อควบคุมตำแหน่งและการแสดงผลขององค์ประกอบของแบบสำรวจ
บทแนะนำนี้จะแสดงวิธีเพิ่มตัวเลือกให้กับธีมที่ขยาย (extend) เพื่อแสดงองค์ประกอบของแบบสำรวจในตำแหน่งต่าง ๆ ในกรณีนี้ เราจะสร้างตัวเลือกธีมเพื่อแสดงชื่อเรื่องแบบสอบถามในสองตำแหน่งที่แตกต่างกัน
เพื่อความง่าย เราจะใช้ส่วนขยายของธีม "bootswatch" ใน LimeSurvey เวอร์ชัน 3.4.3 เป็นพื้นฐานของบทแนะนำนี้สร้างธีมแบบกำหนดเอง
- ขยายธีม "bootswatch" ตามที่อธิบายไว้ข้างต้น
- คัดลอก custom.css ไปยังธีมภายในตามที่อธิบายไว้ข้างต้น
สร้างตัวเลือกธีมใหม่
- คัดลอกเนื้อหาของ /themes/survey/bootswatch/options/ ไปยัง /upload/themes/survey/yourThemeName/options/
- เปิด /upload/themes/survey/yourThemeName/options/options.twig ในโปรแกรมแก้ไข แล้วค้นหา "{# Bootstrap Bootswatch theme #}" ก่อนองค์ประกอบ <div class='row'> ที่เป็นองค์ประกอบแม่ของมันโดยตรง ให้เพิ่มโค้ดนี้:
{# Custom survey name in navbar #} <div class='row'> <div class='col-sm-12 col-md-6'> <div class='form-group row'> <label for='simple_edit_options_surveyname1' class='control-label'>Survey name in navbar</label> <div class='col-sm-12'> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-default"> <input name='surveyname1' type='radio' value='on' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname1'/> Yes </label> <label class="btn btn-default"> <input name='surveyname1' type='radio' value='off' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname1'/> No </label> </div> </div> </div> </div> </div> <div class='row'> <hr/> </div> {# Custom survey name below progress bar #} <div class='row'> <div class='col-sm-12 col-md-6'> <div class='form-group row'> <label for='simple_edit_options_surveyname2' class='control-label'>Survey name below progress bar</label> <div class='col-sm-12'> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-default"> <input name='surveyname2' type='radio' value='on' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname2'/> Yes </label> <label class="btn btn-default"> <input name='surveyname2' type='radio' value='off' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname2'/> No </label> </div> </div> </div> </div> </div> <div class='row'> <hr/> </div> - เปิด /upload/themes/survey/yourThemeName/config.xml แล้วเพิ่มสองรายการลงในบล็อก "options" ให้มีลักษณะดังนี้:
<options> <ajaxmode>on</ajaxmode> ... <surveyname1>on</surveyname1> <surveyname2>on</surveyname2> </options>
- ตอนนี้คุณควรเห็นตัวเลือกใหม่สองรายการในหน้าจอ ตัวเลือกธีม ดังนี้:
- สร้างไดเรกทอรีใหม่ /upload/themes/survey/yourThemeName/views/subviews/header/
- คัดลอก /themes/survey/vanilla/views/subviews/header/nav_bar.twig ไปยังไดเรกทอรีใหม่นั้น
- เปิด /themes/survey/vanilla/views/subviews/header/nav_bar.twig แล้วค้นหา "{# Logo option #}" ด้านล่างของส่วนนั้น ให้แก้ไขคำสั่ง IF สำหรับโลโก้/ชื่อแบบสอบถาม ให้เป็นดังนี้:
{# Logo option #} {% if( aSurveyInfo.options.brandlogo == "on") %} <div class="{{ aSurveyInfo.class.navbarbrand }} logo-container" {{ aSurveyInfo.attr.navbarbrand }} > {{ image(aSurveyInfo.options.brandlogofile, aSurveyInfo.name, {"class": "logo img-responsive"}) }} </div> {% endif %} {% if( aSurveyInfo.options.surveyname1 == "on") %} <div class="{{ aSurveyInfo.class.navbarbrand }}" {{ aSurveyInfo.attr.navbarbrand }} > {{ aSurveyInfo.name }} </div> {% endif %} - เพิ่มโค้ดลักษณะนี้ลงใน /upload/themes/survey/yourThemeName/css/custom.css:
.navbar-brand { line-height: 60px; font-size: 32px; }
- สลับตัวเลือกธีม "Survey name in navbar" เป็น "ใช่"
- คุณควรเห็นดังนี้:
มุมมองที่แก้ไขสำหรับชื่อเรื่องแบบสอบถามใต้แถบความคืบหน้า
- สร้างไดเรกทอรีใหม่ /upload/themes/survey/yourThemeName/views/subviews/survey/group_subviews
- คัดลอก /themes/survey/vanilla/views/subviews/survey/group_subviews/group_container.twig ไปยังไดเรกทอรีใหม่นั้น
- เปิด /themes/survey/vanilla/views/subviews/survey/group_subviews/group_container.twig แล้วเพิ่มองค์ประกอบ <h1> สำหรับชื่อแบบสอบถาม ให้เป็นดังนี้:
<div class="{{ aSurveyInfo.class.groupcontainer }} space-col" {{ aSurveyInfo.attr.groupcontainer }}> {# Custom survey name #} {% if( aSurveyInfo.options.surveyname2 == "on") %} <h1 class="custom-survey-name">{{ aSurveyInfo.name }}</h1> {% endif %} {# Group Name #} {{ include('./subviews/survey/group_subviews/group_name.twig') }} {# Group Description #} {{ include('./subviews/survey/group_subviews/group_desc.twig') }} {# PRESENT THE QUESTIONS This is the main part. It will render each question for this group #} <!-- PRESENT THE QUESTIONS --> {% for aQuestion in aGroup.aQuestions %} {{ include('./subviews/survey/question_container.twig') }} {% endfor %} <!-- Hidden inputs --> {% if aGroup.show_last_group == true %} <input type='hidden' name='lastgroup' value='{{ aGroup.lastgroup }}' id='lastgroup' /> {% endif %} {% if aGroup.show_last_answer == true %} <input type='hidden' name='lastanswer' value='{{ aGroup.lastanswer }}' id='lastanswer' /> {% endif %} </div>
- เพิ่มโค้ดลักษณะนี้ลงใน /upload/themes/survey/yourThemeName/css/custom.css:
.navbar-brand { line-height: 60ph1.custom-survey-name { margin: 0; text-align: center; }
- สลับตัวเลือกธีม "Survey name below progress bar" เป็น "ใช่"
- คุณควรเห็นดังนี้:
ดาวน์โหลด
- ตัวอย่างธีมที่ขยาย: Media:Test_survey_names.zip
การสร้างธีมตั้งแต่เริ่มต้น
เอกสารประกอบจะมาเร็ว ๆ นี้
ในตอนนี้ขอให้เคล็ดลับเล็กน้อย
โครงสร้างของธีม
ไฟล์และไดเรกทอรี
เมื่อคุณสร้างธีมตั้งแต่เริ่มต้น คุณไม่จำเป็นต้องทำตามโครงสร้างไฟล์/ไดเรกทอรี/css/js ของ Vanilla แกนหลักจะเพิ่ม css/js ที่จำเป็นให้ (คุณยังสามารถลบออกได้หากต้องการ)
ไฟล์เดียวที่ธีมของคุณต้องมีคือไฟล์เลย์เอาต์:
- layout_global.twig : แสดงผลหน้าสำหรับการตอบแบบสำรวจ
- layout_survey_list.twig : แสดงผลรายการแบบสอบถาม (หากตั้งธีมนี้เป็นค่าเริ่มต้น)
- layout_errors.twig : ใช้แสดงผลข้อผิดพลาดที่ขัดขวางการแสดงผลแบบสำรวจ (ID แบบสอบถามไม่ถูกต้อง, กลุ่มว่างในการดูตัวอย่างกลุ่ม ฯลฯ)
- layout_user_forms.twig: แสดงผลแบบฟอร์มสำหรับผู้ใช้ เช่น โทเค็น (ผู้เข้าร่วมแบบสำรวจ) และการลงทะเบียน
- layout_print.twig : ใช้พิมพ์แบบสำรวจเป็น PDF
- layout_printanswers.twig: พิมพ์คำตอบ
เนื้อหาของไฟล์เหล่านี้ รวมถึงไฟล์ที่ไฟล์เหล่านี้จะรวมเข้ามาหรือไม่ ขึ้นอยู่กับคุณทั้งหมด ไฟล์และไดเรกทอรีอื่น ๆ ทั้งหมดที่คุณพบใน Vanilla เป็นเพียงตัวเลือก คุณสามารถจัดระเบียบโค้ดของคุณได้ตามต้องการ
หากคุณอ่านโค้ดการแสดงผลฝั่งหน้าบ้าน คุณจะเห็นว่าชื่อไฟล์เหล่านี้ปรากฏอยู่ในโค้ดโดยตรง นั่นคือเหตุผลที่ไฟล์เหล่านี้จำเป็น
เนื้อหา
ใน layout_global.twig ของ Vanilla คุณจะเห็นว่าเราใช้ตัวแปรชื่อ "include_content" เพื่อตัดสินใจว่าจะแสดงอะไร https://github.com/LimeSurvey/LimeSurvey/blob/2398dda3b425da1a37d4611cd7963d39ac739987/themes/survey/vanilla/views/layout_global.twig#L114-L115
{% set sViewContent = './subviews/content/' ~ aSurveyInfo.include_content ~ '.twig' %}
{% include './subviews/content/outerframe.twig' with {'include_content': sViewContent } %}
aSurveyInfo.include_content บอกคุณว่ากำลังดำเนินการใดอยู่ เช่น กำลังแสดงคำถาม? กำลังแสดงผลการส่ง? กำลังแสดงการลบทั้งหมด? ฯลฯ อย่างที่เห็น ใน vanilla เราสร้างไฟล์หนึ่งไฟล์ต่อหนึ่งการดำเนินการเพื่อรวมเข้ามา ดังนั้นหากต้องการทราบรายการการดำเนินการ เพียงตรวจสอบไดเรกทอรี views/subviews/content ของ vanilla แล้วตัดนามสกุล "twig" ออก: https://github.com/LimeSurvey/LimeSurvey/tree/2398dda3b425da1a37d4611cd7963d39ac739987/themes/survey/vanilla/views/subviews/content
- clearall.twig
- firstpage.twig
- load.twig
- mainrow.twig
- main.twig
- optin.twig
- optout.twig
- outerframe.twig
- printanswers.twig
- quotas.twig
- register.twig
- save.twig
- submit_preview.twig
- submit.twig
- userforms.twig
หากคุณเคยสร้างธีมสำหรับ LimeSurvey เวอร์ชัน 2.x คุณจะสังเกตเห็นว่าไฟล์ส่วนใหญ่สอดคล้องกับไฟล์ pstpl เดิมของ LimeSurvey 2.x อีกครั้ง คุณไม่จำเป็นต้องสร้างไฟล์เหล่านี้ด้วยชื่อเหล่านี้ในไดเรกทอรีนี้ในธีมของคุณ ตัวอย่างเช่น คุณอาจเพิ่ม switch ขนาดใหญ่ใน layout_global.twig พร้อม HTML ที่ต้องการสำหรับแต่ละการดำเนินการก็ได้
ไฟล์ manifest config.xml
manifest ของธีมมีข้อมูลหลักเกี่ยวกับธีมของคุณ เมื่อคุณติดตั้งธีม เนื้อหาของ manifest จะถูกโหลดเข้าสู่ฐานข้อมูลในสองตาราง คือ template และ template_configuration ดังนั้นทุกครั้งที่คุณแก้ไข manifest ของธีม คุณต้องถอนการติดตั้งแล้วติดตั้งใหม่ (หรือเพียงรีเซ็ต) เนื่องจากขั้นตอนนี้น่ารำคาญขณะพัฒนาธีม คุณจึงสามารถบังคับให้ใช้ไฟล์ XML โดยตรงแทนข้อมูลในฐานข้อมูลได้ โดยใน config.php ให้เปิดโหมดดีบักและตั้งค่า 'force_xmlsettings_for_survey_rendering' เป็น true
ส่วน metadata
ไม่ซับซ้อน: เป็นเพียงข้อมูลหลักเกี่ยวกับธีมของคุณ ข้อมูลนี้จะถูกบันทึกลงในตาราง templates_configuration
<metadata>
<name>the_name_of_your_theme</name>
<title>The Title of your theme</title>
<creationDate>16/10/2017</creationDate>
<author>Your Name</author>
<authorEmail>your@email.org</authorEmail>
<authorUrl>http://www.yourwebsite.org</authorUrl>
<copyright>Your Copyright </copyright>
<license>Licence of your theme</license>
<version>version of your theme</version>
<apiVersion>3</apiVersion>
<description>Description of your theme</description>
<extends>parent_theme</extends>
</metadata>
ข้อสังเกตเล็กน้อย:
- name: จะถูกใช้เป็นคีย์ในฐานข้อมูล ดังนั้นต้องไม่ซ้ำกัน และไม่ควรมีอักขระพิเศษ (ห้ามมีช่องว่าง) โปรดทราบว่าจะไม่คำนึงถึงตัวพิมพ์เล็กพิมพ์ใหญ่
- Title: จะถูกใช้แสดงชื่อธีมของคุณในรายการต่าง ๆ สามารถมีอักขระพิเศษได้
- description: จะถูกใช้ในรายการหลักของธีมแบบสำรวจ สามารถมีอักขระพิเศษ และแม้แต่โค้ด HTML โดยใช้
- extends: ไม่บังคับ ใช้กำหนดธีมแม่ ดังนั้นหากไม่มีไฟล์ใดในธีมนี้ (twig/js/css/jpg ฯลฯ) ระบบจะค้นหาในธีมแม่
หากคุณขยายหนึ่งในธีมหลักทั้ง 3 ธีม (Vanilla, Bootswatch, Fruity) คุณสามารถเปลี่ยนค่า "extends" จากธีมแม่หนึ่งไปเป็นอีกธีมหนึ่งได้ แน่นอนว่าคุณจะต้องรีเซ็ตธีม
ส่วน files
ส่วนนี้สำคัญมาก ข้อมูลจะถูกบันทึกลงในตาราง template_configuration ในฟิลด์ files_css, files_js, files_print_css ในรูปแบบอาร์เรย์ JSON
เช่น: ส่วน files ของธีม Material Premium:
<files>
<css>
<add>css/bootstrap-material-design.css</add>
<add>css/ripples.min.css</add>
<replace>css/ajaxify.css</replace>
<replace>css/theme.css</replace>
<replace>css/custom.css</replace>
<remove>awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css</remove>
</css>
<js>
<replace>scripts/theme.js</replace>
<replace>scripts/ajaxify.js</replace>
<add>scripts/material.js</add>
<add>scripts/ripples.min.js</add>
<replace>scripts/custom.js</replace>
</js>
<print_css>
<add>css/print_theme.css</add>
</print_css>
</files>
ไฟล์ CSS/JS ทั้งหมดที่อยู่ในส่วนนี้จะถูกโหลดเมื่อเริ่มแบบสำรวจ (ในโหมด ajax หากปิดโหมด ajax ไฟล์ทั้งหมดก็จะถูกโหลดใหม่ในแต่ละหน้าอยู่แล้ว)
ไฟล์เหล่านี้จะถูกเพิ่มเข้าไปใน Yii Asset Packet ตามชื่อของธีม ดังนั้นเมื่อเปิด Asset Manager (โดยปิดโหมดดีบัก) ไฟล์เหล่านี้จะถูกคัดลอกไปยังไดเรกทอรี tmp พร้อมกับส่วนที่เหลือของธีม (คุณจึงสามารถใช้พาธสัมพัทธ์ใน CSS และ JS เพื่อเข้าถึงไฟล์รูปภาพได้)
เกี่ยวกับ Asset manager ใน Yii: https://www.yiiframework.com/wiki/148/understanding-assets
เกี่ยวกับแพ็กเกจใน Yii: http://www.yiiframework.com/doc/api/1.1/CClientScript#packages-detail
ไฟล์เหล่านี้จะใช้ระบบการสืบทอด หมายความว่าหากคุณเพิ่มไฟล์ CSS/JS ให้กับธีม แต่ไฟล์นั้นไม่มีอยู่ในธีม ระบบจะค้นหาในธีมแม่ทั้งหมดของธีมนี้และใช้ไฟล์แรกที่พบ ดังนั้นหากผู้ใช้ขยายธีมของคุณผ่านตัวแก้ไขธีม ไฟล์เหล่านี้ทั้งหมดจะถูกสืบทอดไปยังธีมของเขา คีย์เวิร์ดต่าง ๆ อ้างอิงถึงระบบการสืบทอดนี้
- add : จะเพิ่มไฟล์ให้กับธีม และธีมทั้งหมดที่สืบทอดจากธีมนี้
- replace: จะแทนที่ไฟล์ของธีมแม่
- remove: จะลบไฟล์ออกจากแพ็กเกจใด ๆ แม้แต่แพ็กเกจหลัก (ตั้งแต่ 3.14)
อย่าลืมว่าคุณสามารถตั้งค่า 'force_xmlsettings_for_survey_rendering' ใน config.php เพื่อให้อ่านการกำหนดค่าจาก XML แทนฐานข้อมูล (ไม่ต้องรีเซ็ต) วิธีนี้จะช่วยให้ทดสอบการแก้ไขไฟล์ XML ได้ง่ายขึ้น และไม่ต้องถอนการติดตั้ง/ติดตั้งธีมใหม่ทุกครั้งที่แก้ไข XML
ข้อสังเกตเล็กน้อยเกี่ยวกับคีย์เวิร์ดเหล่านั้น:
เคล็ดลับเกี่ยวกับการสืบทอด
ตามที่อธิบายไว้ก่อนหน้านี้ คีย์เวิร์ด "add" สามารถอ้างถึงไฟล์ที่อยู่ในธีมแม่ธีมใดธีมหนึ่งได้ ดังนั้นคุณสามารถ "เพิ่ม" ไฟล์ในส่วนนี้ได้ แม้ว่าไฟล์นั้นจะไม่ได้อยู่ในธีมของคุณ แต่อยู่ในธีมแม่ธีมใดธีมหนึ่งก็ตาม ระบบจะค้นหาในธีมแม่ทั้งหมดและใช้ไฟล์แรกที่พบ หากไม่พบไฟล์ และเปิดโหมดดีบักใน config รวมทั้งเปิดโหมดดีบัก JS ฝั่งหน้าบ้านในการตั้งค่าส่วนกลางไว้ ระบบจะแสดงข้อความเตือนในคอนโซล เช่น หากเราเพิ่มใน my_theme ว่า <add>css/unexisting.css</add> เราจะเห็นในคอนโซลดังนี้:
(¯`·._.·(¯`·._.· Theme Configuration Error ·._.·´¯)·._.·´¯)
Can't find file 'css/unexisting.css' defined in theme 'my_theme'หากปิดโหมดดีบัก จะไม่มีข้อผิดพลาดใด ๆ แสดงขึ้น ระบบจะข้ามคำสั่ง add ที่ไม่ถูกต้องไปเฉย ๆ
ควรใช้ add เมื่อไร ใช้ replace เมื่อไร และเมื่อไรที่ปล่อยให้ธีมแม่จัดการได้?
ประการแรก add และ replace เป็นคีย์เวิร์ดเดียวกัน คุณจะใช้คำใดก็ได้ ระบบทำงานเหมือนกัน เพียงแต่แยกไว้เพื่อให้ผู้อ่านเข้าใจเจตนาของคุณ
คุณไม่สามารถเพิ่มไฟล์ที่มีชื่อเดียวกับไฟล์ของธีมแม่ได้ เพราะไฟล์นั้นจะแทนที่ไฟล์เดิมเสมอ เช่น หากคุณมีไฟล์ "my_mother_theme/foo.css" และเพิ่มไฟล์ชื่อ "foo.cs" ในธีมลูก จะมีเพียง "daughter_theme/foo.css" เท่านั้นที่ถูกเพิ่มในธีม หากต้องการเก็บ "my_mother_theme/foo.css" ไว้ ให้เลือกชื่ออื่นสำหรับ "daughter_theme/foo.css" เช่น "daughter_theme/bar.css" ดังนั้นคีย์เวิร์ด "add" จึงสามารถใช้เป็นคีย์เวิร์ด "replace" ได้
สาเหตุคือ วิธีนี้ทำให้การสร้างธีมที่สืบทอดโดยอัตโนมัติง่ายขึ้นมาก การคัดลอกส่วนของไฟล์ใช้งานได้ทันที (ไม่ต้องเปลี่ยน "add" เป็น "replace" เมื่อขยายไฟล์)
เพื่อให้เข้าใจชัดเจน ลองดูตัวอย่างธีม Fruity นี่คือส่วนไฟล์ CSS ของธีม:
<css>
<add>css/variations/sea_green.css</add>
<replace>css/animate.css</replace>
<replace>css/theme.css</replace>
<replace>css/custom.css</replace>
</css>
หากคุณดูไฟล์ custom.css ใน fruity จะพบว่าเหมือนกับของ vanilla ทุกประการ เราสามารถลบไฟล์ custom.css ใน fruity ได้ และระบบจะโหลดไฟล์ของ vanilla แทน เราสามารถลบคำสั่ง <replace>custom.css</replace> ออกจากไฟล์ manifest ของ Fruity ได้เช่นกัน ระบบจะใช้คำสั่งจาก vanilla และโหลด custom.css ของ vanilla
แล้วทำไมเราจึงใช้คำสั่ง <replace>custom.css</replace> ใน manifest ของ fruity? คำตอบง่ายมาก เพราะเราต้องการให้ผู้ใช้ปลายทางสามารถขยายธีม fruity แก้ไขไฟล์ในธีมในเครื่องของตน และโหลดไฟล์ที่แก้ไขแล้วจากธีมที่สืบทอดของตนได้ หากต้องการทำความเข้าใจ ให้ลองขยาย fruity แล้วดูธีมที่ขยายนั้น ธีมที่ขยายจะไม่มีไฟล์ custom.css ด้วยซ้ำ ดังนั้นระบบจะใช้ไฟล์ของ fruity แต่ถ้าผู้ใช้สร้างไฟล์นี้ในธีมที่ขยาย (โดยคลิก "ขยาย" ใน ตัวแก้ไขธีม) ไฟล์นี้จะถูกโหลดจากธีมของผู้ใช้
สรุปโดยทั่วไปคือ
หากคุณสร้างธีมใหม่ตั้งแต่ต้นโดยไม่ขยายธีมใด ให้ใช้คำสั่ง add เพื่อเพิ่มไฟล์ CSS/JS ของคุณ ง่ายมาก
หากคุณสร้างธีมที่ขยายจากธีมอื่น และไม่ต้องการให้ผู้ใช้ขยายไฟล์ CSS/JS จากธีมแม่ ก็อย่าใช้คำสั่ง add ใน manifest ไฟล์จะยังคงถูกโหลดจากการตั้งค่าของธีมแม่
หากคุณสร้างธีมที่ขยายจากธีมอื่น และต้องการแทนที่ไฟล์จากธีมแม่ ให้ใช้คีย์เวิร์ด replace (คีย์เวิร์ด add ให้ผลเหมือนกัน)
หากคุณสร้างธีมที่ขยายจากธีมอื่น และไม่ได้แทนที่ไฟล์ CSS/JS ใด แต่ต้องการให้ผู้ใช้สามารถขยายไฟล์นั้นได้ ให้ใช้คำสั่ง "replace" ใน manifest สำหรับไฟล์นั้น แม้คุณจะไม่ได้แทนที่ไฟล์ แต่การใช้คีย์เวิร์ด replace ใน manifest ก็เป็นการอนุญาตให้ผู้ใช้ทำได้หากต้องการ
มีเพียงกรณีสุดท้ายนี้เท่านั้นที่ต้องใช้ความคิดเล็กน้อยจึงจะเข้าใจ กรณีอื่นทั้งหมดเป็นเรื่องง่าย
คุณยังสามารถลงทะเบียนไฟล์ CSS และ JS ได้โดยตรงจากโค้ด twig ไฟล์เหล่านั้นจะถูกโหลดเฉพาะเมื่อมีการเรียกใช้ไฟล์ twig นั้น หากต้องการให้ผู้ใช้สามารถสืบทอดไฟล์ JS/CSS เหล่านี้จากตัวแก้ไขธีมได้ อย่าลืมใช้ฟังก์ชัน Template:RegisterTemplateCssFile('my style.css') และ Template:RegisterTemplateScript('my script.js') หากคุณไม่ใช้ฟังก์ชันเหล่านี้ ธีมของคุณอาจทำงานได้ แต่การสืบทอดจะใช้งานไม่ได้ หลักการเดียวกับฟังก์ชัน Template:Image('my picture.jpg')
&action=edit&redlink=1){kind=link}
คีย์เวิร์ด remove
คีย์เวิร์ด remove ใช้ได้ตั้งแต่เวอร์ชัน 3.14 เท่านั้น คุณสามารถใช้ลบไฟล์ CSS/JS ใด ๆ ออกจากแพ็กเกจใดก็ได้ แม้แต่แพ็กเกจหลัก โดยธีม Material Premium ใช้คีย์เวิร์ดนี้เพื่อลบไฟล์ของ Awseome Bootstrap Checkbox:
<remove>awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css</remove>
ดังนั้นคุณควรใช้รูปแบบเดียวกับไฟล์ของแพ็กเกจทุกประการ (เช่น การใช้ "awesome-bootstrap-checkbox.css" โดยไม่มีพาธโฟลเดอร์จะใช้ไม่ได้) คุณสามารถดูรายการแพ็กเกจหลักและไฟล์ทั้งหมดได้ใน /application/config/packages.php และ config/third_party.php ตัวอย่างเช่น สำหรับ awesome-bootstrap-checkbox.css: https://github.com/LimeSurvey/LimeSurvey/blob/2398dda3b425da1a37d4611cd7963d39ac739987/application/config/packages.php#L54-L56
'css'=> array(
'awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css',
),
อีกวิธีหนึ่งในการหาชื่อที่ถูกต้องเพื่อใช้ในแท็ก remove คือเปิดใช้ asset manager (โดยปิดโหมดดีบัก หรือตั้งค่า 'use_asset_manager'=>true ใน config) จากนั้นพาธที่ต้องใช้คือส่วนที่อยู่ถัดจากไดเรกทอรีสุ่มในไดเรกทอรี tmp ตัวอย่างเช่น สำหรับ awesome-bootstrap-checkbox.css:
<link rel="stylesheet" type="text/css" href="/tmp/assets/cbc4e3cb/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" />
ไฟล์ที่ไม่ควรลบออก:
jquery-3.1.1.min.js : จำเป็น
jquery-migrate-3.0.0.min.js : จำเป็น
survey.js : จำเป็น
moment-with-locales.min.js : จำเป็นสำหรับ ประเภทคำถาม วันที่ (และอาจรวมถึงบางส่วนอื่น ๆ)
em_javascript.js : จำเป็นสำหรับ JavaScript ของ ExpressionScript ทั้งหมด
ส่วนตัวเลือก
ส่วนนี้เกี่ยวข้องกับตัวเลือกของธีมของคุณ ส่วนนี้จะถูกใช้เพื่อเติมข้อมูลลงในฟิลด์ "options" ของตาราง template_configuration ในรูปแบบอาร์เรย์ JSON
ข้อมูลเพิ่มเติม
หมายเหตุบางประการ
หมายเหตุ: หากคุณแก้ไขไฟล์ XML ของธีม คุณต้องถอนการติดตั้งแล้วติดตั้งธีมใหม่ เพื่อให้การเปลี่ยนแปลงมีผล
หมายเหตุ: เพื่อหลีกเลี่ยงปัญหานี้ คุณสามารถบังคับให้ระบบใช้ไฟล์ XML แทนฐานข้อมูลได้ ใน config.php ให้เปิดโหมดดีบักและยกเลิกคอมเมนต์ดังนี้:
'force_xmlsettings_for_survey_rendering' => true, // Uncomment if you want to force the use of the XML file rather than DB (for easy theme development)
โปรดระวัง: ทุกอย่างจะถูกโหลดจาก XML (รวมถึงตัวเลือกต่าง ๆ ฯลฯ)
หมายเหตุ: หากคุณแก้ไขไฟล์ CSS/JS ด้วยตนเอง (โดยไม่ใช้ตัวแก้ไขธีม) และโหมดดีบักปิดอยู่ ตอนนี้คุณสามารถบังคับให้ล้างแอสเซ็ตได้ ใน "ตั้งค่าโดยรวม" แท็บ "General" ให้คลิกปุ่ม "Clear assets cache"
หมายเหตุ: หากคุณลบส่วน