ฉันจะอัพโหลดไฟล์ JavaScript และ CSS กำหนดเองไปยังบัญชีผู้ใช้ได้อย่างไร
ใน Canvas คุณสามารถใช้ Theme Editor เพื่อนำเสนอแบรนด์ผ่านบัญชีผู้ใช้ของคุณ อย่างไรก็ตาม หากคุณต้องการนำเสนอแบรนด์อื่นเพิ่มเติมที่ไม่ได้รับการรองรับใน Theme Editor ในปัจจุบัน คุณสามารถอัพโหลดไฟล์ CSS (Cascading Style Sheets) และ JS (JavaScript) กำหนดเองไปยังบัญชีของคุณได้ สามารถโฮสต์ไฟล์ได้โดยตรงใน Canvas ธีมที่ใช้กับบัญชีผู้ใช้จะมีผลกับบัญชีย่อยทั้งหมดด้วย นอกจากนี้คุณยังสามารถอัพโหลดไฟล์ CSS/JS สำหรับบัญชีย่อยแต่ละบัญชีได้
Theme Editor รองรับไฟล์ที่อัพโหลดบนเดสก์ทอปและอุปกรณ์พกพา ไฟล์ CSS/JS มาตรฐาน จะใช้กับหน้า HTML ในแอพพลิเคชั่นบนเดสก์ทอปของ Canvas ซึ่งอาจรวมถึงหน้าล็อกอินสำหรับอุปกรณ์พกพา ไฟล์ CSS/JS สำหรับอุปกรณ์พกพาจะใช้เฉพาะกับเนื้อหาของผู้ใช้ที่แสดงภายในแอพ Canvas iOS หรือ Android เท่านั้น รวมถึงในแอพจากภายนอกที่ใช้ Canvas API แต่ไฟล์สำหรับอุปกรณ์พกพาจะไม่มีผลกับเนื้อหาของผู้ใช้ที่แสดงในเบราเซอร์ของอุปกรณ์พกพา
ไฟล์ JavaScript และ CSS กำหนดเองจะอยู่ภายใต้ กฎการสืบทอดแบรนด์ ของบัญชีผู้ใช้และบัญชีย่อยเดียวกันกับเมื่อตอนจัดทำธีมใน Theme Editor
ก่อนเพิ่มไฟล์ JavaScript และ CSS กำหนดเอง คุณต้องติดต่อผู้ดูแลความสำเร็จของลูกค้าของคุณเพื่อเปิดใช้งานการนำเสนอแบรนด์กำหนดเองให้กับบัญชีผู้ใช้และบัญชีย่อยของคุณ หลังจากเปิดใช้งานแบรนด์กำหนดเองแล้ว ตัวเลือกในการอัพโหลดไฟล์ CSS และ JS กำหนดเองจะมีอยู่ในบัญชีผู้ใช้และบัญชีย่อยทั้งหมด
ความเสี่ยงของไฟล์กำหนดเอง
หากคุณไม่สามารถใช้ตัวเลือกของ Theme Editor ที่มีให้ดั้งเดิมในการนำเสนอแบรนด์ คุณจะต้องทราบถึงความเสี่ยงที่เกี่ยวข้องของการใช้ไฟล์กำหนดเอง ซึ่งอาจทำให้เกิดปัญหาในการใช้งานหรือข้อขัดแย้งกับชุดข้อมูลอัพเดต Canvas ในอนาคตได้:
- คุณควรมีความเข้าใจเป็นอย่างดีเกี่ยวกับ JavaScript และ CSS และจะต้องคอยปรับรหัสข้อมูลของคุณเอง
- ไฟล์กำหนดเองอาจขัดแย้งกับการเปลี่ยนแปลง Canvas DOM ในอนาคต (เช่น ชื่อ class ของ element หรือโครงสร้าง HTML) จึงไม่รองรับการใช้งาน Instructure ขอปฏิเสธความรับผิดใด ๆ สำหรับการเปลี่ยนแปลงใด ๆ ที่เกิดขึ้นกับไฟล์แทนที่แบบกำหนดเองของคุณ
- คุณมีหน้าที่รับผิดชอบในการตรวจสอบแนวทางการสืบค้นเนื้อหาทางเว็บ เพื่อให้แน่ใจว่าไฟล์ของคุณตรงตามมาตรฐานการทดสอบการสืบค้นทางเว็บหรือหลักเกณฑ์อื่น ๆ ที่กำหนดที่มีกำหนดไว้ในพื้นที่ของคุณ คุณมีหน้าที่รับผิดชอบในการทำให้ส่วนการแก้ไขของคุณสามารถสืบค้นได้โดยโปรแกรมอ่านหน้าจอ รวมทั้งสำหรับผู้ใช้ที่มีการกำหนดค่าความคมชัดของข้อความ และ ความคมชัดของสี และผู้ใช้ที่เลือกใช้รูปแบบความคมชัดสูงเป็นค่าปรับตั้งคุณสมบัติการใช้งานของของผู้ใช้
- ขณะทดลองนำเสนอแบรนด์แบบกำหนดเอง ให้ทำการยืนยันการเปลี่ยนแปลงการนำเสนอแบรนด์ของคุณในเวอร์ชั่นเบต้าของสถาบันหรือเวอร์ชั่นทดสอบสำหรับสถาบันของคุณด้วย
หมายเหตุ:
- Theme Editor ไม่พร้อมใช้งานสำหรับบัญชีฟรีสำหรับผู้สอน
- หากคุณเป็นผู้ดูแลระบบบัญชีย่อยและลิงค์ธีมไม่ปรากฏในการสืบค้นบัญชี แสดงว่าไม่ได้เปิดใช้ธีมไว้สำหรับบัญชีย่อย หากแท็บการอัพโหลด CSS/JS (CSS/JS Upload) ไม่แสดงผล แสดงว่าไม่ได้เปิดใช้งานการอัพโหลดไฟล์สำหรับบัญชีย่อย
เปิดบัญชีผู้ใช้

จากส่วนการสืบค้นเนื้อหาส่วนกลางให้คลิกที่ลิงค์ ผู้ดูแลระบบ (Admin) [1] จากนั้นคลิกที่ชื่อบัญชี [2]
เปิดธีม

จากส่วนการสืบค้นเนื้อหาทางบัญชี (Account Navigation) คลิกที่ลิงค์ ธีม (Themes)
หมายเหตุ: หากเปิดใช้ธีมบัญชีย่อยไว้ บัญชีย่อยแต่ละบัญชีจะมีลิงค์ ธีม (Themes) อยู่ด้วย เปิด Theme Editor สำหรับบัญชีย่อยโดยคลิกที่ลิงค์ บัญชีย่อย (Sub-Accounts) เพื่อระบุและเปิดบัญชีย่อย แล้วคลิกที่ลิงค์ ธีม (Themes) ของบัญชีย่อย
เปิดแม่แบบธีม
หากคุณยังไม่มีธีม Canvas สำหรับบัญชีของคุณ ให้ใช้แม่แบบเพื่อจัดทำธีมใหม่ คุณสามารถเลือกจากแม่แบบ Canvas เริ่มต้น (Default Canvas template) แม่แบบแบบมินิมอลและแม่แบบ State U หากผู้ดูแลความสำเร็จของลูกค้าของคุณเปิดใช้งานค่าปรับตั้งคุณสมบัติเฉพาะสำหรับ K12 ธีม K12 จะปรากฏขึ้นเป็นแม่แบบด้วย
จัดทำธีมใหม่โดยเลื่อนเมาส์ไปที่แม่แบบแล้วคลิก เปิดใน Theme Editor (Open in Theme Editor) [1] หรือคลิก เพิ่มธีม (Add Theme) [2] แล้วเลือกแม่แบบจากรายการ
เปิดธีมที่บันทึกไว้

หากคุณจัดทำและบันทึกธีมแล้ว คุณสามารถแก้ไขธีมที่บันทึกไว้ได้ทุกเมื่อ ธีมที่บันทึกไว้จะแสดงในกลุ่มย่อยธีมของฉัน เปิดธีมที่บันทึกไว้โดยเลื่อนเมาส์ไปที่ชื่อของธีมและคลิกที่ปุ่ม เปิดใน Theme Editor (Open in Theme Editor) [1]
จัดทำธีมใหม่ตามธีมที่บันทึกไว้โดยคลิกที่ปุ่ม เพิ่มธีม (Add Theme) [2] แล้วเลือกชื่อของธีมที่บันทึกไว้จากรายการ [3] ตัวเลือกนี้ช่วยคุณในการป้องกันการเขียนทับธีมที่บันทึกไว้ก่อนหน้านี้
เปิดแท็บอัพโหลด (Upload)

ในแถบรายการด้านข้างของ Theme Editor ให้คลิกที่แท็บ อัพโหลด (Upload)
อัพโหลดไฟล์กำหนดเอง

อัพโหลดไฟล์สำหรับแอพพลิเคชั่นบนเดสก์ทอปของ Canvas โดยไปที่หัวเรื่อง ไฟล์ CSS/ไฟล์ JavaScript (CSS file/JavaScript file) [1] หากต้องการอัพโหลดไฟล์สำหรับเนื้อหาผู้ใช้ในแอพสำหรับอุปกรณ์พกพา Canvas และแอพจากภายนอก ให้ไปที่หัวเรื่อง ไฟล์ CSS แอพสำหรับอุปกรณ์พกพา/ไฟล์ JavaScript (Mobile app CSS file/JavaScript file) [2]
ไปที่ประเภทไฟล์ที่คุณต้องการอัพโหลดแล้วคลิกที่ปุ่ม เลือก (Select) [3] แล้วค้นหาไฟล์บนคอมพิวเตอร์ของคุณ
ค้นหาไฟล์เพิ่มเติมสำหรับการอัพโหลดในกรณีที่ต้องการ
แสดงตัวอย่างธีม

แสดงตัวอย่างธีมของคุณโดยคลิกที่ปุ่ม แสดงตัวอย่างการเปลี่ยนแปลงของคุณ (Preview Your Changes)
Canvas จะจัดทำภาพตัวอย่างของส่วนประกอบตามไฟล์ที่คุณอัพโหลด
จัดการไฟล์

หากต้องการจัดการไฟล์ของคุณ ให้คลิกแท็บ อัพโหลด (Upload) อีกครั้ง [1]
หากต้องการลบและอัพโหลดไฟล์ใหม่ ให้คลิกไอคอน ลบ (Remove) [2] คุณสามารถทำการเปลี่ยนแปลงเพิ่มเติมและอัพโหลดไฟล์ที่แก้ไขแล้วของคุณได้
หากต้องการดูรหัสข้อมูลสำหรับไฟล์ของคุณ ให้คลิกที่ลิงค์ ดูไฟล์ (View File) [3] เนื่องจากไฟล์ถูกจัดเก็บไว้ใน Canvas โดยตรง ให้ใช้ลิงค์นี้หากคุณต้องการดาวน์โหลดไฟล์
บันทึกธีม

เมื่อคุณพอใจกับการเปลี่ยนแปลงแม่แบบแล้ว ให้บันทึกธีมของคุณโดยการคลิกที่ บันทึกธีม (Save Theme)
จัดทำชื่อธีม

หากคุณแก้ไขธีมจากแม่แบบ Theme Editor จะจัดทำสำเนาของธีมไว้ แม่แบบไม่สามารถแก้ไขได้โดยตรง ในฟิลด์ชื่อธีม (Theme Name) [1] ให้กรอกชื่อสำหรับธีมของคุณ คลิกที่ปุ่ม บันทึกธีม (Save Theme) [2]
หมายเหตุ: หากคุณแก้ไขธีมที่บันทึกไว้ก่อนหน้านี้ การบันทึกธีมจะเขียนทับเวอร์ชั่นก่อนหน้าของธีมและใช้ชื่อธีมเดียวกัน
ปรับใช้ธีม

ปรับใช้ธีมไปยังบัญชีของคุณ โดยคลิกที่ปุ่ม ปรับใช้ธีม (Apply theme) [1]
ออกจากธีมและกลับไปที่หน้าธีม (Themes) โดยคลิกที่ปุ่ม ออก (Exit) [2] คุณสามารถเปิดธีมและปรับใช้ไปยังบัญชีของคุณได้ตลอดเวลา
หมายเหตุ: หากบัญชีของคุณอนุญาตให้บัญชีย่อยปรับแต่งธีมของตนเอง การเปลี่ยนแปลงใด ๆ ที่ปรับใช้จะส่งต่อไปยังบัญชีย่อยที่เกี่ยวข้องด้วย Canvas จะแสดงสถานะการอัพเดต Theme Editor ของคุณ เมื่อกระบวนการสำหรับบัญชีย่อยแต่ละบัญชีเสร็จสิ้น บัญชีย่อยนั้นจะหายไปจากหน้าต่างแสดงความคืบหน้า เมื่อบัญชีย่อยทั้งหมดได้รับการอัพเดตแล้ว Theme Editor จะเปลี่ยนเส้นทางกลับไปที่หน้า ธีม (Themes)