วิธีปรับแต่งสีแบรนด์และธีมของ UI เว็บ ownCloud

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

คู่มือนี้เขียนขึ้นสำหรับ ownCloud Infinite Scale (oCIS) และส่วนหน้าเว็บ ownCloud รุ่นใหม่ ไม่ใช่คู่มือสำหรับระบบธีม PHP รุ่นเก่าของ ownCloud Server 10/11 ซึ่งใช้โครงสร้างธีมแบบแอปและมีการกำหนดค่าที่แตกต่างกัน เอกสารประกอบการใช้งาน ownCloud Infinite Scale 8.2 เวอร์ชันเสถียรและเอกสารประกอบการพัฒนาเวอร์ชัน 9.0 ต่างก็อธิบายวิธีการรันไทม์แบบเดียวกัน คือ จัดเตรียมไดเร็กทอรีธีมแบบกำหนดเองด้วยWEB_ASSET_THEMES_PATHจากนั้นเลือกไฟล์ JSON ของธีมด้วยWEB_UI_THEME_PATHดูเอกสารประกอบการใช้งานธีมแบบกำหนดเองของ ownCloud Web อย่างเป็นทางการได้ที่ นี่

สิ่งที่คุณสามารถปรับแต่งได้โดยไม่ต้องสร้าง ownCloud Web ใหม่

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

ขั้นตอนที่ 1: สร้างไดเร็กทอรีธีมและโฟลเดอร์สินทรัพย์แยกต่างหาก

เริ่มต้นด้วยการแยกธีมที่คุณกำหนดเองออกจากไฟล์พื้นฐานของ ownCloud รูปแบบง่ายๆ คือ โฟลเดอร์ธีมที่มีไฟล์ต่างๆ อยู่ภายในthemes.jsonพร้อมด้วยassetsโฟลเดอร์สำหรับโลโก้ ไอคอนเว็บไซต์ และรูปภาพสำหรับเข้าสู่ระบบ เส้นทางโฮสต์ที่แน่นอนนั้นขึ้นอยู่กับคุณ สิ่งสำคัญคือโฟลเดอร์นั้นต้องถูกเมานต์หรือเปิดเผยให้กับบริการเว็บ oCIS ผ่านทางWEB_ASSET_THEMES_PATH.

ตัวอย่างโครงสร้างไฟล์สำหรับธีมเว็บ ownCloud แบบกำหนดเอง ไฟล์กำหนดธีมและไฟล์รูปภาพจะถูกเก็บไว้ด้วยกันในไดเร็กทอรีเฉพาะ

ตัวอย่างเช่น โครงสร้างฝั่งโฮสต์อาจมีลักษณะดังนี้:

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

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

ขั้นตอนที่ 2: กำหนดชื่อแบรนด์ เส้นทางของโลโก้ ไอคอนเว็บไซต์ และพื้นหลังหน้าจอเข้าสู่ระบบ

ไฟล์ JSON ของธีมเป็นศูนย์กลางของการปรับแต่งcommonส่วนนี้ประกอบด้วยข้อความแบรนด์ที่ใช้ร่วมกัน เช่น ชื่อและสโลแกน ภายใต้ <head> clients.web.defaultsคุณสามารถกำหนดโลโก้เว็บเริ่มต้นและพื้นหลังการเข้าสู่ระบบได้ โครงสร้างข้อมูลที่บันทึกไว้ของ ownCloud ใช้คีย์โลโก้แยกต่างหากสำหรับ <head> topbar, favicon<head> และlogin<head>

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

จุดเริ่มต้นขั้นต่ำสามารถอิงตามโครงสร้างที่รองรับด้านล่างนี้ได้ โปรดรักษาเส้นทางให้สอดคล้องกับเส้นทาง URL ที่เว็บเซอร์วิสใช้ในการแสดงไฟล์ธีมของคุณ:

{
  "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": []
    }
  }
}

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

ขั้นตอนที่ 3: เปลี่ยนสีธีมด้วยโทเค็นการออกแบบ

การปรับแต่งสีจะอยู่ในรายการธีมภายใต้clients.web.themesแต่ละธีมสามารถระบุได้ว่าธีมนั้นเป็นสีเข้มหรือไม่ด้วยisDarkระบุคำอธิบายสีที่อ่านง่ายnameและแทนที่โทเค็นการออกแบบได้ ส่วนนี้คือcolorPaletteที่ที่ปกติแล้วจะใช้ปรับแต่งสีแบรนด์ที่มองเห็นได้

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

สำหรับธีมองค์กรที่ไม่ซับซ้อน คุณอาจเริ่มต้นด้วยชุดสัญลักษณ์จำนวนน้อยแทนที่จะเปลี่ยนสีทั้งหมดที่มีอยู่:

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

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

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

ขั้นตอนที่ 4: ติดตั้งธีมที่กำหนดเองและกำหนดให้ ownCloud ชี้ไปยังไฟล์ themes.json

เมื่อเตรียมไดเร็กทอรีและไฟล์ JSON เสร็จแล้ว ให้กำหนดค่าเว็บเซอร์วิสเพื่อให้สามารถอ่านไฟล์เหล่านั้นได้ ตัวแปรสภาพแวดล้อมที่เกี่ยวข้องสองตัวคือ `<root>` WEB_ASSET_THEMES_PATHซึ่งจะบอก ownCloud ว่าตำแหน่งของธีมที่กำหนดเองอยู่ที่ใด และ ` WEB_UI_THEME_PATH<chart_file>` ซึ่งเลือกไฟล์ JSON ของธีมที่จะโหลด

ภาพประกอบสไตล์ Docker Compose แสดงวิธีการติดตั้งไดเร็กทอรีธีมแบบกำหนดเองและกำหนดค่าตัวแปรสภาพแวดล้อมการกำหนดธีม ownCloud Web สองตัว ปรับเส้นทางให้เข้ากับการใช้งานจริงของคุณ

การใช้งาน Docker Compose อาจใช้รูปแบบดังนี้:

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

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

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

วิธีตรวจสอบว่าโลโก้แบรนด์โหลดเสร็จสมบูรณ์แล้วหรือไม่

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

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

เมื่อธีมที่กำหนดเองไม่ปรากฏขึ้น

ธีม ownCloud เริ่มต้นยังคงโหลดอยู่

ขั้นแรก ตรวจสอบเส้นทางภายในคอนเทนเนอร์หรือบริการที่กำลังทำงานอยู่ ไม่ใช่แค่บนโฮสต์WEB_ASSET_THEMES_PATHต้องอ้างอิงถึงรูทของธีมตามที่เว็บเซอร์วิสเห็น และWEB_UI_THEME_PATHต้องอ้างอิงถึงไฟล์ JSON จริงในสภาพแวดล้อมนั้น ownCloud จะไม่สามารถอ่านเส้นทางโฮสต์ที่ไม่เคยถูกเมานต์เข้าไปในคอนเทนเนอร์ได้

ไฟล์ JSON โหลดได้ แต่รูปภาพหายไป

ตรวจสอบเส้นทางของไฟล์ภายในthemes.jsonโฟลเดอร์ ชื่อไฟล์ (ตัวพิมพ์ใหญ่-เล็ก) และตรวจสอบว่าไฟล์นั้นมีอยู่ในไดเร็กทอรีธีมที่กำหนดเองหรือไม่ เครื่องมือสำหรับนักพัฒนาเบราว์เซอร์สามารถช่วยแยกแยะความแตกต่างระหว่างคำขอไฟล์ที่เสียกับปัญหาของธีมได้ หากสีของธีมโหลดได้ แต่โลโก้หนึ่งไม่แสดง ธีมอาจถูกต้อง แต่เส้นทางของไฟล์นั้นผิด

หน้าเว็บมีโลโก้แบรนด์ แต่สีดูไม่สม่ำเสมอ

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

ธีมหนึ่งใช้งานได้ดีในเวอร์ชันหนึ่ง แต่ดูผิดเพี้ยนหลังจากอัปเกรดเป็นเวอร์ชันใหม่

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

คุณควรแก้ไขไฟล์เว็บที่รวบรวมไว้แทนหรือไม่?

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

รายการตรวจสอบการผลิตที่ใช้งานได้จริง

• ควรเก็บไฟล์ธีมที่กำหนดเองไว้ภายนอกไดเร็กทอรีของแอปพลิเคชันที่ติดตั้งมากับระบบ
• เริ่มต้นจากโครงสร้างธีมที่ระบุไว้ในเอกสารสำหรับเวอร์ชัน oCIS ที่คุณติดตั้งไว้
• ใช้โลโก้ที่มีรูปแบบแตกต่างกันเมื่อพื้นผิวสีอ่อนและสีเข้มต้องการความแตกต่างกัน
• ก่อนอื่นให้แทนที่ชุดโทเค็นการออกแบบที่เน้นเฉพาะเจาะจง รวมถึงค่าการวางเมาส์เหนือวัตถุและค่าความคมชัด
• หากเป็นไปได้ ให้ตั้งค่าไดเร็กทอรีธีมเป็นแบบอ่านอย่างเดียว
• ตั้งค่าทั้งสองWEB_ASSET_THEMES_PATHค่าWEB_UI_THEME_PATHให้เป็นเส้นทางที่มองเห็นได้ภายในบริการ
• หลังจากทำการเปลี่ยนแปลงการปรับใช้แล้ว ให้รีสตาร์ทหรือสร้างบริการ Web/oCIS ขึ้นใหม่
• ตรวจสอบการเข้าสู่ระบบ แถบด้านบน ไอคอนเว็บไซต์ พื้นที่เก็บไฟล์ รูปแบบการแสดงผลแบบตอบสนอง และธีมสีเข้ม/ความคมชัดสูงใดๆ ที่คุณเปิดใช้งาน
• ทดสอบธีมอีกครั้งก่อนการอัปเกรด ownCloud Infinite Scale ครั้งใหญ่ทุกครั้ง

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