วิธีปรับแต่งแบรนด์ ONLYOFFICE Docs ด้วยโลโก้และสีของคุณเอง

คำตอบที่สั้นที่สุดคือ: ใช้ตราสินค้าของ Docs API สำหรับโลโก้ และใช้ธีมอินเทอร์เฟซแบบกำหนดเองสำหรับสีต่างๆ

หากเป้าหมายของคุณคือการทำให้โปรแกรมแก้ไขเอกสาร ONLYOFFICE Docs ดูเหมือนเป็นส่วนหนึ่งของผลิตภัณฑ์ของคุณเอง วิธีการตั้งค่าที่ดูดีที่สุดคือการปรับแต่งสองระดับ: กำหนดค่าeditorConfig.customization.logoในส่วนการผสานรวม Docs API สำหรับโลโก้ส่วนหัว จากนั้นเพิ่มไฟล์ JSON ธีมแบบกำหนดเองบนเซิร์ฟเวอร์เอกสารสำหรับสีของโปรแกรมแก้ไข กลไกทั้งสองนี้แยกจากกัน และมีกฎการใช้งานที่แตกต่างกัน

จากการตรวจสอบกับเอกสารของ ONLYOFFICE เมื่อวันที่ 7 ตุลาคม 2026 พารามิเตอร์ editor-header logoมีให้ใช้งานเฉพาะใน ONLYOFFICE Docs Developer เท่านั้น API อย่างเป็นทางการระบุภาพขนาด 300×20 พิกเซลสำหรับimage<header>, imageDark<header> และimageLight<header> โดยแนะนำความสูงของโลโก้ที่ 20 พิกเซล ในขณะเดียวกัน ธีมส่วนติดต่อผู้ใช้แบบกำหนดเองได้รับการสนับสนุนตั้งแต่ ONLYOFFICE Docs เวอร์ชัน 7.0 และติดตั้งเป็นไฟล์ธีม JSON บนเซิร์ฟเวอร์เอกสาร เอกสารอ้างอิงอย่างเป็นทางการในปัจจุบันคือเอกสารมาตรฐานการสร้างแบรนด์ของ ONLYOFFICE Docsและขั้นตอนการทำงานของไฟล์ธีมมีเอกสารอยู่ในหัวข้อ การเปลี่ยนธีมส่วนติดต่อผู้ใช้ใน ONLYOFFICE Docs

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

ขั้นตอนที่ 1: ยืนยันว่าคุณต้องการสร้างแบรนด์ให้กับอะไรกันแน่

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

• โลโก้ส่วนหัว:ใช้editorConfig.customization.logo. ONLYOFFICE กำหนดพารามิเตอร์นี้เป็นแบบสำหรับนักพัฒนาเท่านั้น
• สีของส่วนติดต่อผู้ใช้:ติดตั้งไฟล์ JSON ของธีมที่กำหนดเองบนเซิร์ฟเวอร์เอกสาร นี่คือกลไกที่เหมาะสมสำหรับการกำหนดสีของแบรนด์
• การควบคุมไวท์เลเบลที่ละเอียดกว่า:โปรดตรวจสอบเอกสารไวท์เลเบลฉบับ เต็ม ONLYOFFICE ระบุว่าพารามิเตอร์เหล่านั้นต้องใช้ใบอนุญาตไวท์เลเบลฉบับขยายสำหรับ Docs Developer

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

ขั้นตอนที่ 2: เตรียมไฟล์โลโก้สำหรับส่วนหัวแบบสว่างและแบบมืด

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

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

ขั้นตอนที่ 3: เพิ่มโลโก้ลงในการตั้งค่า Docs API ของคุณ

const config = {
  editorConfig: {
    customization: {
      logo: {
        image: "https://app.example.com/branding/logo.png",
        imageDark: "https://app.example.com/branding/logo-dark.png",
        imageLight: "https://app.example.com/branding/logo-light.png",
        url: "https://www.example.com",
        visible: true
      }
    }
  }
};

const docEditor = new DocsAPI.DocEditor("placeholder", config);

imageคือโลโก้โหมดการทำงานทั่วไปimageDarkใช้สำหรับส่วนหัวสีเข้มหรือสี และimageLightใช้สำหรับส่วนหัวสีอ่อน เช่น ธีมสีเทาurlควบคุมว่าเมื่อคลิกที่โลโก้แล้วจะไปที่ไหน ตั้งค่าเป็นสตริงว่าง หรือตั้งค่าเป็นnullว่าไม่ควรคลิกโลโก้visibleควบคุมว่าจะแสดงโลโก้หรือไม่

ขั้นตอนที่ 4: ตรวจสอบโลโก้ในสภาพแสงสว่างและสภาพแสงน้อย

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

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

ขั้นตอนที่ 5: สร้างไฟล์ JSON สำหรับธีมสีแบบกำหนดเอง

สำหรับการกำหนดสีของส่วนติดต่อผู้ใช้ ให้สร้างไฟล์ธีมที่มีidชื่อขึ้นต้นด้วยtheme-. เฉพาะเอกสาร OFFICE เท่านั้น lightที่darkเป็นประเภทธีมที่ถูกต้อง และรองรับสีในรูปแบบเลขฐานสิบหกหรือ RGBA อย่าสับสนกับรูปแบบสีของเอกสาร: ไฟล์ JSON นี้จะเปลี่ยนเฉพาะส่วนตกแต่งของตัวแก้ไขเท่านั้น ไม่ใช่สีธีมที่จัดเก็บไว้ในไฟล์ DOCX, XLSX หรือ PPTX

{
  "name": "Northstar Light",
  "id": "theme-northstar-light",
  "type": "light",
  "colors": {
    "toolbar-header-document": "#1E3A8A",
    "toolbar-header-spreadsheet": "#166534",
    "toolbar-header-presentation": "#B45309",
    "background-normal": "#FFFFFF",
    "background-accent-button": "#1E3A8A",
    "text-normal": "#1F2937",
    "icon-normal": "#374151"
  }
}

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

ขั้นตอนที่ 6: วางไฟล์ธีมไว้ในไดเร็กทอรีธีมของเซิร์ฟเวอร์เอกสาร

ONLYOFFICE ได้บันทึกตำแหน่งที่ตั้งของไฟล์ธีมที่กำหนดเองไว้ดังนี้:

• ลินุกซ์: /var/www/onlyoffice/documentserver/web-apps/apps/common/main/resources/themes
• ระบบปฏิบัติการ Windows: %ProgramFiles%\ONLYOFFICE\DocumentServer\web-apps\apps\common\main\resources\themes
• Docker:คัดลอกไฟล์ JSON ไปยังพาธเดียวกันภายในคอนเทนเนอร์ Docs

sudo docker cp northstar-theme.json onlyoffice:/var/www/onlyoffice/documentserver/web-apps/apps/common/main/resources/themes/

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

ขั้นตอนที่ 7: รีเฟรชหน้าเว็บ รอให้แคชโหลดเสร็จ แล้วเลือกธีมที่กำหนดเอง

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

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

ขั้นตอนที่ 8: ตรวจสอบความถูกต้องของแบรนด์ที่เสร็จสมบูรณ์ในฐานะระบบ ไม่ใช่แค่ภาพหน้าจอ

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

วิธีตรวจสอบว่าการปรับแต่งทำงานได้หรือไม่

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

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

ขอบเขตทั่วไปและข้อผิดพลาด

การสร้างแบรนด์ให้กับโปรแกรมแก้ไขข้อความนั้นไม่เหมือนกับการสร้างแบรนด์ให้กับ DocSpace หรือ Workspace

ONLYOFFICE มีส่วนการปรับแต่งที่แยกต่างหาก คู่มือนี้เน้นเฉพาะการสร้างแบรนด์ให้กับโปรแกรมแก้ไขเอกสาร ONLYOFFICE เท่านั้น ส่วนควบคุมการสร้างแบรนด์พอร์ทัล ชื่อผู้เช่า ไอคอนเว็บไซต์พอร์ทัล และการนำทางโดยรอบนั้น เป็นส่วนหนึ่งของการตั้งค่า DocSpace หรือ Workspace ไม่ใช่ส่วนหนึ่งของโลโก้ในส่วนหัวของ Docs API

โทนสีของเอกสารไม่ใช่ธีมของส่วนติดต่อผู้ใช้

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

อย่าคิดว่าทุกตัวควบคุมแบบไวท์เลเบลจะรวมอยู่ในแบรนด์มาตรฐานเสมอไป

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

รายการตรวจสอบการนำไปใช้งานจริง

• โปรดติดต่อ ONLYOFFICE Docs Developer หากคุณต้องการปรับแต่งโลโก้ส่วนหัวตามที่อธิบายไว้ในที่นี้
• สร้างไฟล์โลโก้ขนาด 300x20 พิกเซล รวมถึงเวอร์ชันสว่างและมืดสำหรับกรณีที่ต้องการความแตกต่างของสี
• กำหนดค่าeditorConfig.customization.logoในเลเยอร์การผสานรวม
• สร้างไฟล์ JSON ธีมแบบกำหนดเองที่ถูกต้อง โดยมี ID ขึ้นต้นด้วยtheme-.
• วางไฟล์ธีมไว้ในไดเร็กทอรีธีมของ Document Server ที่ระบุไว้ในเอกสาร
• สำหรับ Docker หรือการใช้งานแบบเปลี่ยนแปลงไม่ได้ ให้ทำให้การติดตั้งธีมสามารถทำซ้ำได้และคงอยู่ถาวร
• โปรดรอจนกว่าแคชจะโหลดเสร็จตามระยะเวลาที่กำหนด จากนั้นรีเฟรชหน้าเว็บและเลือกธีม
• ทดสอบความแตกต่างของสี สถานะ ประเภทของโปรแกรมแก้ไข และทั้งสภาพแสงและความมืด ก่อนที่จะนำไปใช้งานในวงกว้าง

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

เอกสารอ้างอิงอย่างเป็นทางการ

• ONLYOFFICE Docs API: การปรับแต่ง – การสร้างแบรนด์มาตรฐาน
• ศูนย์ช่วยเหลือ ONLYOFFICE: การเปลี่ยนธีมส่วนติดต่อผู้ใช้ใน ONLYOFFICE Docs
• ONLYOFFICE Docs API: การปรับแต่ง – ไวท์เลเบล