Cum să personalizezi brandingul interfeței web și culorile temei ownCloud

Cea mai fiabilă metodă de a personaliza interfața web ownCloud curentă este de a crea un fișier JSON cu temă acceptată și de a direcționa ownCloud Infinite Scale către acea temă. Nu este nevoie să reconstruiți frontend-ul web doar pentru a schimba numele mărcii, logo-urile, favicon-ul, fundalul de conectare sau culorile comune ale interfeței. În modelul actual de tematizare Infinite Scale, aceste elemente sunt furnizate printr-o definiție a temei, în timp ce token-urile de design controlează culorile și alte valori vizuale.

Acest ghid este scris pentru ownCloud Infinite Scale (oCIS) și frontend-ul său web modern ownCloud. Nu este un ghid pentru sistemul de teme PHP mai vechi ownCloud Server 10/11, care folosește o structură de teme bazată pe aplicații și o configurație diferită. Documentația stabilă Infinite Scale 8.2 a ownCloud și documentația de dezvoltare 9.0 descriu ambele aceeași abordare în timpul rulării: furnizați un director de teme personalizate cu WEB_ASSET_THEMES_PATH, apoi selectați un fișier JSON pentru teme cu WEB_UI_THEME_PATH. Consultați documentația oficială de teme personalizate ownCloud Web .

Ce poți personaliza fără a reconstrui ownCloud Web

O temă normală pentru organizație poate acoperi schimbările vizuale de care au nevoie majoritatea administratorilor. Tema JSON poate defini numele produsului și sloganul, căile către logo-uri și un favicon, fundalul paginii de conectare și token-uri de design web, cum ar fi culorile mărcii, principale, de fundal, textului, chenarului și tipului de fișier. Acest lucru este preferabil editării fișierelor frontend compilate, deoarece tema rămâne un element separat de implementare și poate fi gestionată împreună cu configurația serverului.

Pasul 1: Creați un director separat pentru teme și un folder separat pentru resurse

Începeți prin a păstra tema personalizată separată de resursele ownCloud încorporate. Un layout simplu este un director de temă care conține themes.jsonplus un assetsfolder pentru logo-urile, favicon-ul și imaginea de conectare. Calea exactă către gazdă este alegerea dvs.; ceea ce contează este ca directorul să fie montat sau expus în alt mod serviciului web oCIS prin WEB_ASSET_THEMES_PATH.

Exemplu de aspect de fișier pentru o temă web personalizată ownCloud. Definiția temei și resursele de imagine sunt păstrate împreună într-un director dedicat.

De exemplu, o structură pe partea gazdă ar putea arăta astfel:

/srv/owncloud/themes/
└── acme/
    ├── themes.json
    └── assets/
        ├── logo.svg
        ├── logo-white.svg
        ├── favicon.png
        └── login-background.jpg

Folosește imagini care rămân lizibile în contextul în care apar. Un logo întunecat care funcționează pe o pagină albă poate dispărea pe o bară superioară întunecată, așa că este adesea util să oferi variante separate de logo, deschise și închise. De asemenea, păstrează fundalul de conectare relativ simplu în spatele controalelor de conectare. Brandingul ar trebui să îmbunătățească recunoașterea fără a reduce lizibilitatea.

Pasul 2: Definiți numele mărcii, căile pentru logo, favicon-ul și fundalul de conectare

Tema JSON este centrul personalizării. commonSecțiunea conține text partajat al mărcii, cum ar fi numele și sloganul. Sub clients.web.defaults, puteți defini logo-urile web implicite și fundalul de conectare. Schema documentată a ownCloud folosește chei de logo separate pentru topbar, favicon, și login.

Ilustrație în stil editor a porțiunii de branding a unui fișier temă. Folosiți structura obiectului documentată din exemplul de mai jos, în loc să tratați ilustrația ca cod de tip copiere-lipire.

Un punct de plecare minim se poate baza pe structura acceptată de mai jos. Păstrați căile în concordanță cu calea URL prin care serviciul web expune resursele temei dvs.:

{
  "common": {
    "name": "Acme Cloud",
    "slogan": "Your files. Your workspace.",
    "logo": "themes/acme/assets/logo.svg",
    "urls": {
      "accessDeniedHelp": "",
      "imprint": "",
      "privacy": "",
      "accessibilityStatement": "",
      "universalAccessEasyLanguage": "",
      "universalAccessSignLanguage": ""
    }
  },
  "clients": {
    "android": {},
    "desktop": {},
    "ios": {},
    "web": {
      "defaults": {
        "appBanner": {},
        "logo": {
          "topbar": "themes/acme/assets/logo-white.svg",
          "favicon": "themes/acme/assets/favicon.png",
          "login": "themes/acme/assets/logo-white.svg"
        },
        "loginPage": {
          "backgroundImg": "themes/acme/assets/login-background.jpg"
        },
        "icons": {
          "universalAccess": "",
          "universalAccessEasyLanguage": "",
          "universalAccessSignLanguage": ""
        }
      },
      "themes": []
    }
  }
}

Nu presupuneți că fiecare cheie poate fi omisă în siguranță doar pentru că parserul JSON acceptă fișierul. ownCloud notează că unele chei de temă obligatorii sunt injectate la momentul execuției, dar o temă validă din punct de vedere sintactic poate fi totuși greșită semantic. O bună practică de producție este să porniți de la șablonul de temă livrat în versiunea de Infinite Scale pe care o rulați efectiv, să faceți doar modificările de branding de care aveți nevoie și să păstrați restul structurii aliniat cu versiunea respectivă.

Pasul 3: Schimbați culorile temei cu ajutorul jetoanelor de design

Personalizarea culorilor aparține unei intrări de temă sub clients.web.themes. Fiecare temă poate identifica dacă este întunecată cu isDark, poate oferi un element lizibil de către om nameși poate suprascrie token-urile de design. Aici colorPalettesunt ajustate în mod normal culorile vizibile ale mărcii.

Exemplu de tipuri de token-uri de culoare utilizate de ownCloud Web. Mai întâi schimbați un set focalizat, apoi verificați contrastul și stările de trecere cu mouse-ul înainte de a extinde paleta.

Pentru o temă corporativă ușoară, ați putea începe cu un set mic de jetoane în loc să schimbați fiecare culoare disponibilă:

{
  "isDark": false,
  "name": "Acme Light",
  "logo": {
    "topbar": "themes/acme/assets/logo-white.svg",
    "favicon": "themes/acme/assets/favicon.png",
    "login": "themes/acme/assets/logo-white.svg"
  },
  "designTokens": {
    "colorPalette": {
      "background-default": "#ffffff",
      "background-sidebar": "#f5f7fa",
      "background-hover": "#eef4fb",
      "border": "#d8e0e8",
      "swatch-brand-default": "#176B87",
      "swatch-brand-hover": "#12556C",
      "swatch-brand-contrast": "#ffffff",
      "swatch-primary-default": "#176B87",
      "swatch-primary-hover": "#12556C",
      "swatch-primary-contrast": "#ffffff",
      "text-default": "#102A33",
      "text-inverse": "#ffffff",
      "text-muted": "#526873",
      "icon-folder": "#176B87"
    }
  }
}

Compromisul important este consecvența versus caracterul complet. Doar modificarea swatch-brand-defaultpoate oferi un rezultat vizual rapid, dar simbolurile de trecere cu mouse-ul, contrast, bara laterală, chenar și text pot reflecta în continuare tema implicită. Pe de altă parte, suprascrierea a zeci de simboluri fără testare poate crea combinații ilizibile. Pentru majoritatea implementărilor, începeți cu valorile brandului, principalului, contrastului, fundalului, textului și chenarului, apoi extindeți-le doar acolo unde valorile implicite intră în conflict vizibil cu designul.

Acordați o atenție deosebită contrastului. Dacă alegeți o culoare deschisă pentru brand, asociați-o cu un token de contrast închis, în loc să impuneți text alb pe ea. Testați focalizarea tastaturii, stările de trecere a cursorului, comenzile dezactivate, modul întunecat, dacă oferiți unul, și modurile de contrast ridicat, dacă acestea sunt importante pentru utilizatorii dvs.

Pasul 4: Montați tema personalizată și direcționați ownCloud către themes.json

După ce directorul și fișierul JSON sunt gata, configurați serviciul web astfel încât să le poată citi. Cele două variabile de mediu relevante sunt WEB_ASSET_THEMES_PATH, care indică ownCloud unde se află rădăcina temei personalizate și WEB_UI_THEME_PATH, care selectează fișierul JSON al temei care va fi încărcat.

Ilustrație în stilul Docker Compose a montării unui director de teme personalizate și a configurării celor două variabile de mediu ownCloud Web. Adaptați căile la implementarea reală.

O implementare Docker Compose ar putea utiliza un model ca acesta:

services:
  ocis:
    image: owncloud/ocis:<your-tested-version>
    environment:
      WEB_ASSET_THEMES_PATH: /etc/ocis/themes
      WEB_UI_THEME_PATH: /etc/ocis/themes/acme/themes.json
    volumes:
      - ./themes:/etc/ocis/themes:ro

Eticheta de imagine de mai sus este intenționat un substituent. Pentru producție, utilizați exact versiunea oCIS pe care ați testat-o, în loc să copiați o etichetă flotantă dintr-un exemplu. După modificarea mediului sau a fișierelor montate, reporniți sau recreați serviciul oCIS afectat în funcție de metoda de implementare, astfel încât noua configurație să fie citită.

ownCloud documentează un comportament important de rezervă: dacă nu este furnizată nicio temă personalizată sau încărcarea temei eșuează, se utilizează tema standard Infinite Scale. Această rezervă este utilă deoarece o cale lipsă nu lasă neapărat interfața inutilizabilă. Cu toate acestea, înseamnă și că vizualizarea aspectului implicit ownCloud după o repornire poate fi un indiciu de diagnosticare că tema personalizată nu a fost încărcată.

Cum să verifici dacă branding-ul s-a încărcat efectiv

Nu opriți procesul după ce pagina de conectare se modifică. O verificare completă ar trebui să acopere locurile în care utilizatorii vor vedea efectiv marca dvs. Deschideți site-ul într-o sesiune nouă de browser sau într-o fereastră privată pentru a reduce șansa ca un element memorat în cache să ascundă starea curentă.

• Confirmați că pagina de conectare folosește sigla și fundalul așteptate.
• După conectare, confirmați că sigla din bara superioară este corectă și rămâne lizibilă pe fundalul acesteia.
• Verificați fila browserului pentru favicon-ul personalizat.
• Deschideți zona fișierelor și verificați butoanele principale, stările plasării cursorului, culorile barei laterale, pictogramele folderelor și contrastul textului.
• Dacă oferiți teme luminoase și întunecate, comutați între ele și verificați-le pe amândouă independent.
• Verificați cel puțin o lățime îngustă a browserului, astfel încât un logo lat să nu aglomereze bara superioară responsivă.

Când tema personalizată nu apare

Tema implicită ownCloud se încarcă în continuare

Mai întâi verificați căile din interiorul containerului sau serviciului care rulează, nu doar pe gazdă. WEB_ASSET_THEMES_PATHTrebuie să se refere la rădăcina temei așa cum este văzută de serviciul web și WEB_UI_THEME_PATHtrebuie să se refere la fișierul JSON real din acel mediu. O cale gazdă care nu a fost niciodată montată în container nu poate fi citită de ownCloud.

JSON-ul se încarcă, dar lipsește o imagine

Verificați calea elementului din interiorul fișierului themes.json, numele fișierului (cu majuscule sau minuscule) și dacă fișierul există în directorul temelor personalizate. Instrumentele pentru dezvoltatori de browser vă pot ajuta să distingeți o solicitare de element defect de o problemă de tematizare. Dacă culorile temei se încarcă, dar o siglă nu, tema în sine poate fi validă, în timp ce calea respectivă pentru element este greșită.

Pagina este personalizată, dar culorile par inconsistente

De obicei, aceasta înseamnă că doar o parte a paletei a fost suprascrisă. Adăugați token-urile de hover și contrast aferente, apoi testați din nou. Nu rezolvați un singur buton ilizibil modificând în mare măsură textul sau token-urile de fundal fără legătură; faceți cea mai mică modificare coerentă și verificați-o în întreaga interfață.

O temă funcționează într-o versiune, dar arată greșit după o actualizare

Jetoanele temei și comportamentul frontend-ului pot evolua. Înainte de a actualiza un mediu de producție, comparați tema personalizată cu șablonul și documentația pentru versiunea oCIS țintă. Documentația de configurare web personalizată de la ownCloud explică, de asemenea, distincția dintre configurația/resursele personalizate acceptate și furnizarea de resurse web compilate complet personalizate.

Ar trebui să editați în schimb resursele web compilate?

De obicei, nu este cazul pentru branding obișnuit. O temă personalizată este cea mai potrivită atunci când obiectivul tău este să schimbi numele, logo-urile, fundalurile și elementele de design, rămânând în același timp aproape de interfața web acceptată. Resursele compilate complet personalizate au sens doar atunci când dezvolți sau distribui un frontend cu adevărat modificat, care nu poate fi exprimat prin teme sau prin suprascrieri ale resurselor acceptate. Această abordare implică un cost de întreținere mai mare, deoarece ești responsabil pentru menținerea compatibilității versiunii personalizate cu viitoarele modificări ale ownCloud Web.

O listă de verificare practică a producției

• Păstrați fișierele temei personalizate în afara directoarelor aplicației încorporate.
• Începeți de la structura temei documentată pentru versiunea oCIS instalată.
• Folosiți variante separate de logo atunci când suprafețele deschise și cele închise la culoare le necesită.
• Suprascrieți mai întâi un set specific de token-uri de design, inclusiv valorile de trecere cu mouse-ul și contrast.
• Montați directorul temei în modul doar pentru citire atunci când este posibil.
• Setați ambele WEB_ASSET_THEMES_PATHși WEB_UI_THEME_PATHla căile vizibile în interiorul serviciului.
• Reporniți sau recreați serviciul Web/oCIS după modificările implementării.
• Verificați datele de autentificare, bara de sus, favicon-ul, zona fișierelor, aspectul responsiv și orice teme întunecate/cu contrast ridicat pe care le expuneți.
• Testează din nou tema înainte de fiecare actualizare majoră ownCloud Infinite Scale.

Pentru implementările actuale Infinite Scale, această abordare bazată pe fișiere temă oferă administratorilor o separare clară între codul aplicației și identitatea vizuală. Cheia este să tratați tema ca pe un element de implementare versionat: utilizați schema acceptată de versiunea ownCloud, păstrați căile de imagine previzibile, schimbați culorile prin token-uri de design, mai degrabă decât prin editări ad-hoc la frontend, și verificați rezultatul pe întreaga interfață web, în ​​loc să judecați succesul dintr-un singur ecran.