ตกแต่ง ONLYOFFICE Docs ด้วยโลโก้และสีธีมของคุณ

ในการปรับแต่งตัวแก้ไข ONLYOFFICE Docs ที่ฝังอยู่ ให้กำหนดธีมสีแบรนด์ให้กับตัวแก้ไข และส่ง URL ของโลโก้ของคุณในการกำหนดค่าเริ่มต้น ธีมเป็นไฟล์ JSON ที่ติดตั้งบนเซิร์ฟเวอร์ Docs ส่วนโลโก้จะถูกกำหนดค่าโดยแอปพลิเคชันที่ฝังตัวแก้ไข ตัวเลือกส่วนหัวที่มีโลโก้ตามเอกสารนี้มีให้ใช้งานเฉพาะใน ONLYOFFICE Docs Developer เท่านั้น ดังนั้นโปรดตรวจสอบเวอร์ชันของคุณก่อนเตรียมไฟล์ต่างๆ

ข้อความนี้ใช้กับการผสานรวม Docs ที่ติดตั้งเอง ไม่ใช่การสร้างแบรนด์ DocSpace หรือตัวเลือกธีมในเครื่องของ Desktop Editor ONLYOFFICE ใช้ธีมที่กำหนดเองจาก Docs เวอร์ชัน 7.0 การตั้งค่าเหล่านี้มีผลต่ออินเทอร์เฟซตัวแก้ไขที่ฝังอยู่ ไม่ใช่เนื้อหาเอกสารหรือการนำทางเว็บไซต์ของคุณ

คุณควรเตรียมอะไรก่อนเป็นอันดับแรก?

รวบรวมไฟล์โลโก้สองไฟล์: เวอร์ชันที่อ่านได้ชัดเจนบนพื้นหลังสีอ่อน และเวอร์ชันกลับสีสำหรับพื้นหลังสีเข้มหรือสีอื่นๆ API ของเอกสารระบุขนาดภาพ 300 × 20 พิกเซลสำหรับโลโก้ในส่วนหัวของตัวแก้ไข ใช้ไฟล์ PNG แบบโปร่งใสหากเหมาะสมกับงานศิลปะของคุณ และรักษาสัญลักษณ์ที่มีความคมชัดสูงโดยมีรายละเอียดปลีกย่อยน้อย เนื่องจากภาพจะปรากฏในแถบแคบๆ อัปโหลดไฟล์ทั้งสองไฟล์ไปยังที่อยู่ HTTPS ที่เสถียรซึ่งเบราว์เซอร์ของผู้ใช้ตัวแก้ไขสามารถโหลดได้

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

1. สร้างไฟล์ JSON สำหรับกำหนดธีมสีของคุณ

ไฟล์ JSON ของธีมคือไฟล์การตั้งค่าที่แมปโทเค็นสีอินเทอร์เฟซที่มีชื่อกับค่าสี โทเค็นเหล่านี้idต้องไม่ซ้ำกันและขึ้นต้นด้วย `@ theme-`; นี่nameคือสิ่งที่ผู้ใช้เห็นในตัวเลือกธีม เลือกสีพื้นฐานแบบสว่างหรือมืดที่เข้ากับอินเทอร์เฟซโดยรวมที่คุณต้องการ จากนั้นแทนที่สีส่วนหัวและสีเน้นที่เลือก ตัวอย่างด้านล่างนี้ใช้สีพื้นหลังของตัวแก้ไขเป็นสีอ่อน ใช้สีครามสำหรับส่วนหัวของตัวแก้ไขแต่ละส่วน และใช้สีปะการังสำหรับปุ่มเน้นของตัวแก้ไขเอกสาร

{
  "name": "Acme Brand Light",
  "id": "theme-acme-brand-light",
  "type": "light",
  "colors": {
    "toolbar-header-document": "#263B67",
    "toolbar-header-spreadsheet": "#263B67",
    "toolbar-header-presentation": "#263B67",
    "toolbar-header-pdf": "#263B67",
    "text-toolbar-header": "#fff",
    "background-accent-button": "#D8613C"
  }
}

บันทึกเป็นไฟล์ชื่อacme-brand-light.json. โทเค็นสีส่วนหัวจะแยกกันสำหรับเอกสาร สเปรดชีต งานนำเสนอ และไฟล์ PDF ตั้งค่าแต่ละอันหากคุณต้องการใช้แบรนด์ที่สอดคล้องกันในทุกประเภทไฟล์ โทเค็นสีเน้นที่แสดงอยู่ที่นี่จะมีผลต่อปุ่มเน้นสีของตัวแก้ไขเอกสารข้อความ ไม่ใช่ทุกองค์ประกอบที่มีสีใน Docs เอกสาร ONLYOFFICE มีโทเค็นสีเพิ่มเติมสำหรับพื้นหลัง ขอบ สถานะการวางเมาส์เหนือไอคอน ข้อความ และพื้นที่แก้ไข ดังนั้นให้ขยายจานสีเฉพาะเมื่อคุณต้องการใช้ในส่วนเหล่านั้นเท่านั้น ตรวจสอบความคมชัดของข้อความและไอคอนกับพื้นหลังที่คุณเลือกก่อนเผยแพร่ สีของแบรนด์เพียงอย่างเดียวไม่ได้รับประกันว่าปุ่มควบคุมจะอ่านง่าย

สำหรับรายการโทเค็นที่รองรับทั้งหมดและฟิลด์ JSON ที่จำเป็น โปรดดูเอกสารอ้างอิงธีมแบบกำหนด เองอย่างเป็นทางการของ ONLYOFFICE

2. ติดตั้งธีมบนเซิร์ฟเวอร์เอกสาร

คัดลอกไฟล์ JSON ไปยังไดเร็กทอรี themes ของเซิร์ฟเวอร์ เอกสารอย่างเป็นทางการของ Linux และ Docker ระบุเส้นทางนี้:

/var/www/onlyoffice/documentserver/web-apps/apps/common/main/resources/themes

สำหรับการใช้งาน Docker ให้วางไฟล์ไว้ในไดเร็กทอรีที่คุณจะรันคำสั่ง จากนั้นแทนที่CONTAINER_IDด้วยชื่อหรือ ID ของคอนเทนเนอร์ Docs ที่กำลังทำงานอยู่:

docker cp ./acme-brand-light.json CONTAINER_ID:/var/www/onlyoffice/documentserver/web-apps/apps/common/main/resources/themes/

บนระบบ Linux ให้คัดลอกไฟล์ไปยังพาธนั้นโดยใช้บัญชีผู้ใช้ที่มีสิทธิ์เขียน บนระบบ Windows ให้ใช้ไดเร็กทอรี themes ภายใต้%ProgramFiles%\ONLYOFFICE\DocumentServer; โปรดดูคู่มือการติดตั้งสำหรับพาธแบบเต็ม ธีมที่กำหนดเองคือไฟล์ JSON ที่เพิ่มเข้ามา ไม่ใช่การแก้ไขไฟล์แอปพลิเคชันที่รวมมาด้วย

ONLYOFFICE ระบุว่าแคชธีมจะรีเฟรชทุกๆ ห้านาที หลังจากคัดลอกไฟล์แล้ว ให้รีเฟรชตัวแก้ไข หากไฟล์ยังคงหายไป ให้ทำตามคำแนะนำในการแก้ไขปัญหาแคชของ Docker หรือ Linux และรีสตาร์ทบริการเฉพาะเมื่อจำเป็นเท่านั้น สำหรับคอนเทนเนอร์ที่ใช้งานจริง ให้รวมไฟล์ไว้ในอิมเมจหรือระบบอัตโนมัติในการปรับใช้ เพื่อที่การแทนที่คอนเทนเนอร์จะไม่ลบไฟล์นั้นออก

3. เลือกใช้ธีมและตั้งค่าโลโก้ของโปรแกรมแก้ไข

หลังจากค้นพบธีมแล้ว ผู้ใช้สามารถเลือกได้จากView > Interface Themeหากต้องการให้ตัวแก้ไขแบบฝังตัวเริ่มต้นด้วยธีมนั้น ให้เพิ่ม ID ของธีมลงในออบเจ็กต์การกำหนดค่าที่แอปพลิเคชันของคุณส่งไปยัง Docs API ตั้งค่าโลโก้ภายในeditorConfig.customizationออบเจ็กต์เดียวกันนั้นด้วย

editorConfig: {
  customization: {
    uiTheme: "theme-acme-brand-light",
    logo: {
      image: "https://assets.example.com/logo-light.png",
      imageDark: "https://assets.example.com/logo-dark.png",
      imageLight: "https://assets.example.com/logo-light.png",
      url: "https://www.example.com"
    }
  }
}

แทนที่ URL ตัวอย่างด้วย URL ปลายทางและ URL สาธารณะจริงของคุณlogo.imageคือเส้นทางโลโก้มาตรฐานสำหรับโหมดแก้ไขทั่วไป ช่องสีเข้มและสีอ่อนแยกต่างหากช่วยให้คุณเลือกภาพสำหรับส่วนหัวสีเข้มหรือสีอ่อนได้ URL คือตำแหน่งที่จะไปเมื่อคลิกที่โลโก้ API ระบุการตั้งค่าโลโก้ส่วนหัวนี้เป็นคุณสมบัติสำหรับนักพัฒนาเอกสารและระบุขนาด 300 × 20 อย่าสับสนกับcustomer.logoซึ่งเป็นภาพขนาดใหญ่กว่าที่ใช้ในข้อมูลเกี่ยวกับตัวแก้ไข

หากการผสานรวมของคุณลงนามการกำหนดค่าตัวแก้ไขด้วย JWT ให้สร้างลายเซ็นใหม่หลังจากเพิ่มหรือเปลี่ยนแปลงฟิลด์ที่ลงนามเหล่านี้ และเก็บความลับการลงนามไว้บนเซิร์ฟเวอร์ตัวอย่างการผสานรวม ONLYOFFICE อย่างเป็นทางการ อธิบายว่าโทเค็นต้องตรงกับการกำหนดค่าและต้องสร้างใหม่เมื่อพารามิเตอร์ที่ลงนามเปลี่ยนแปลง โปรดทราบด้วยว่าธีมที่ผู้ใช้เลือกไว้ก่อนหน้านี้อาจมีลำดับความสำคัญเหนือกว่าธีมเริ่มต้นuiThemeทดสอบด้วยโปรไฟล์เบราว์เซอร์ใหม่หรือรีเซ็ตการตั้งค่าธีมที่บันทึกไว้ของผู้ใช้หากธีมเริ่มต้นที่คุณร้องขอไม่แสดงขึ้น

สำหรับขนาดคุณสมบัติของโลโก้และรุ่นที่มีให้เลือก โปรดดูเอกสารอ้างอิงการกำหนดค่าแบรนด์มาตรฐาน อย่างเป็น ทางการ

ตรวจสอบผลลัพธ์ก่อนนำไปใช้งานจริง

เปิดไฟล์ประเภทที่ผู้ใช้ของคุณต้องการ ตรวจสอบสีของส่วนหัว ข้อความที่อ่านได้ และไอคอน โลโก้ที่ถูกต้องในส่วนหัวแบบสว่างและแบบมืด และตำแหน่งที่คลิกได้ของโลโก้ ตรวจสอบโหมดแก้ไขและดูในเค้าโครงที่ฝังอยู่จริง

หากไม่พบธีม ให้ตรวจสอบความถูกต้องของ JSON และ ID ตรวจสอบไดเร็กทอรีธีมของเซิร์ฟเวอร์ที่ใช้งานอยู่ และรอให้แคชรีเฟรช หากไม่พบโลโก้ ให้ตรวจสอบข้อกำหนดของ Developer edition การเข้าถึง URL รูปภาพของเบราว์เซอร์ และตรวจสอบว่าการกำหนดค่าเริ่มต้นมีlogo. สร้าง JWT ใหม่บนแบ็กเอนด์หากคุณเปลี่ยนแปลงฟิลด์ที่ลงนาม