Brandificați documentele ONLYOFFICE cu sigla și culorile temei dvs.

Pentru a personaliza un editor ONLYOFFICE Docs încorporat, atribuiți editorului o temă de culoare personalizată și transmiteți adresele URL ale logo-ului în configurația sa de inițializare. Tema este un fișier JSON instalat pe serverul Docs; logo-ul este configurat de aplicația care încorporează editorul. Opțiunea de antet-logo documentat este disponibilă numai în ONLYOFFICE Docs Developer, așadar confirmați ediția înainte de a pregăti resursele.

Aceasta se aplică unei integrări Docs auto-găzduite, nu brandingului DocSpace sau selectorului de teme local al editorilor desktop. Temele personalizate ale documentelor ONLYOFFICE din Docs v7.0. Aceste setări afectează interfața editorului încorporat, nu conținutul documentului sau navigarea pe site-ul web.

Ce ar trebui să pregătești mai întâi?

Adună două fișiere pentru logo: o versiune care se citește clar pe un antet deschis la culoare și o versiune inversă pentru un antet închis sau colorat. API-ul Docs specifică o imagine de 300 × 20 pixeli pentru logo-ul antetului editorului. Folosește un fișier PNG transparent dacă se potrivește cu grafica ta și păstrează un marcaj cu contrast ridicat și puține detalii fine, deoarece imaginea apare într-o bandă îngustă. Găzduiește ambele fișiere la adrese HTTPS stabile pe care browserul utilizatorului editorului le poate încărca.

De asemenea, aveți nevoie de acces de scriere la server, codul care construiește configurația editorului și un document de testare. Pentru Docker, identificați numele sau ID-ul containerului care rulează. Testați mai întâi modificarea într-un mediu non-productiv.

1. Creați un fișier JSON cu tema pentru culorile dvs.

Un fișier JSON pentru temă este un fișier de setări care mapează token-uri de culoare ale interfeței denumite la valori de culoare. idtrebuie să fie unic și să înceapă cu theme-; nameeste ceea ce utilizatorii văd în selectorul de teme. Alegeți o bază deschisă sau închisă care să se potrivească cu interfața generală dorită, apoi înlocuiți culorile antetului și accentele selectate. Exemplul de mai jos păstrează fundalul luminos al editorului, folosește indigo pentru fiecare antet al editorului și folosește coral pentru butonul de accent al editorului de documente.

{
  "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"
  }
}

Salvați-l ca acme-brand-light.json. Indicatorii de culoare ai antetului sunt separate pentru documente, foi de calcul, prezentări și PDF-uri; setați fiecare indicator dacă doriți o marcă consistentă pentru toate tipurile de fișiere. Indicatorul de accent afișat aici afectează butonul de accent al editorului de documente text, nu fiecare element colorat din Docs. ONLYOFFICE documentează indicatori de culoare suplimentari pentru fundaluri, chenare, stări de trecere cu mouse-ul, pictograme, text și pânza de editare, așadar extindeți paleta doar atunci când aveți nevoie de aceste zone. Verificați contrastul textului și pictogramelor cu fundalurile alese înainte de lansare; o culoare a mărcii în sine nu garantează controale lizibile.

Pentru lista completă de token-uri acceptate și câmpurile JSON obligatorii, utilizați referința oficială a temelor personalizate ONLYOFFICE .

2. Instalați tema pe serverul Docs

Copiați fișierul JSON în directorul de teme al serverului. Documentația oficială Linux și Docker oferă această cale:

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

Pentru o implementare Docker, plasați fișierul în directorul din care veți rula comanda, apoi înlocuiți-l CONTAINER_IDcu numele sau ID-ul containerului Docs care rulează:

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

Pe Linux, copiați fișierul în acea cale cu un cont cu drepturi de scriere activate. Pe Windows, utilizați directorul themes de sub %ProgramFiles%\ONLYOFFICE\DocumentServer; consultați ghidul de instalare pentru calea completă. O temă personalizată este un fișier JSON adăugat, nu o modificare a fișierelor aplicației incluse în pachet.

ONLYOFFICE spune că memoria cache a temei se actualizează la fiecare cinci minute. Actualizați editorul după copierea fișierului; dacă acesta lipsește în continuare, urmați instrucțiunile de depanare a memoriei cache Docker sau Linux și reporniți serviciile numai dacă este necesar. Pentru containerele de producție, includeți fișierul în imagine sau în automatizarea implementării, astfel încât înlocuirea unui container să nu îl elimine.

3. Aplicați tema și setați sigla editorului

După ce tema a fost descoperită, utilizatorii o pot selecta din Vizualizare > Temă interfață . Pentru ca editorul încorporat să înceapă cu tema respectivă, adăugați ID-ul acesteia la obiectul de configurare pe care aplicația îl transmite API-ului Docs. Setați sigla în interiorul aceluiași editorConfig.customizationobiect:

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"
    }
  }
}

Înlocuiți adresele URL de exemplu cu resursele publice reale și cu adresele URL de destinație. logo.imageeste calea standard a logo-ului pentru modurile de editare comune; câmpurile separate întunecate și luminoase vă permit să alegeți grafica pentru un antet întunecat sau luminos. Adresa URL este locul unde ar trebui să fie plasată o clic pe logo. API-ul listează această setare antet-logo ca o funcție Docs Developer și specifică dimensiunea de 300 × 20. Nu o confundați cu customer.logo, care este o imagine mai mare utilizată în informațiile Despre ale editorului.

Dacă integrarea semnează configurațiile editorului cu JWT, reconstruiți semnătura după adăugarea sau modificarea acestor câmpuri semnate și păstrați secretul de semnare pe server. Exemplul oficial de integrare ONLYOFFICE explică faptul că token-ul trebuie să corespundă configurației și să fie regenerat atunci când parametrii semnați se modifică. De asemenea, rețineți că tema selectată anterior de un utilizator poate avea prioritate față de uiTheme; testați cu un profil de browser nou sau resetați preferința de temă salvată a utilizatorului respectiv dacă valoarea implicită solicitată nu se afișează.

Pentru dimensiunile proprietăților logo-ului și disponibilitatea edițiilor, consultați referința oficială de configurare a brandingului standard .

Verificați rezultatul înainte de lansare

Deschideți tipurile de fișiere de care au nevoie utilizatorii. Confirmați culorile antetului, textul și pictogramele lizibile, sigla corectă în anteturile luminoase și întunecate și destinația clicului pe siglă. Verificați modurile de editare și vizualizare în aspectul încorporat real.

Dacă tema lipsește, validați JSON-ul și ID-ul, verificați directorul de teme al serverului activ și așteptați reîmprospătarea memoriei cache. Dacă sigla lipsește, verificați cerința ediției pentru dezvoltatori, accesul browserului la adresa URL a imaginii și dacă configurația de inițializare include [numele opțiunii] logo. Regenerați JWT-ul pe backend dacă ați modificat câmpurile semnate.