ธีมเว็บไซต์

ERPNext มีความสามารถด้านธีมขั้นสูงเพื่อปรับแต่งรูปลักษณ์และความรู้สึกของเว็บไซต์ของคุณให้ตรงกับแบรนด์ของคุณ

หน้าแรก > เว็บไซต์ > การตั้งค่า > ธีมเว็บไซต์

1. วิธีสร้างธีมเว็บไซต์

1. ไปที่รายการธีมเว็บไซต์และคลิกที่ใหม่
2. ป้อนชื่อธีม
3. ปรับแต่งธีมของคุณ
4. คลิกที่บันทึก

หมายเหตุ: ตรวจสอบให้แน่ใจว่าคุณได้ตั้งค่าธีมเว็บไซต์ในการตั้งค่าเว็บไซต์เพื่อให้ธีมถูกนำไปใช้

2. ฟีเจอร์

2.1 การกำหนดค่าธีม

ส่วน "การกำหนดค่าธีม" มีไว้สำหรับการสร้างธีมพื้นฐาน ที่นี่คุณสามารถเลือกโทนสี ฟอนต์ และสไตล์ปุ่มของคุณ

2.2 สไตล์ชีต

หากคุณรู้ SCSS และ Bootstrap 4 theming คุณสามารถเขียน SCSS ที่กำหนดเองได้ด้วยตนเอง

ในฟิลด์ "การแทนที่ที่กำหนดเอง" คุณสามารถเขียนทับตัวแปรที่กำหนดโดยไฟล์ธีมของแอปใดๆ เนื้อหาของฟิลด์นี้จะถูกรวมไว้ ก่อน การนำเข้า SCSS อื่นๆ ตัวอย่างเช่น ตัวแปร $spacer ถูกตั้งค่าเป็น 1rem โดยค่าเริ่มต้น เพียงแค่กำหนดใหม่เป็น $spacer: 2rem; เพื่อทำให้ช่องว่างทั้งหมดใหญ่ขึ้นสองเท่า

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

.btn-primary {
 background-color: $teal;
 color: $orange;
}

2.3 ไฟล์ธีมที่รวมอยู่

หากคุณดูธีมเริ่มต้นที่สร้างโดยกล่องโต้ตอบการกำหนดค่า มันจะนำเข้า frappe/public/scss/website และ erpnext/public/scss/website ซึ่งเป็นไฟล์ธีมเริ่มต้นสำหรับแอป frappe และ erpnext หากคุณมีแอปอื่นติดตั้งอยู่ พวกมันอาจมีไฟล์ website.scss ของตัวเอง

ส่วน "ไฟล์ธีมที่รวมอยู่" แสดงรายการแอปทั้งหมดที่ติดตั้ง แต่ละแอปสามารถนำไฟล์ธีมของตัวเองมาได้ ([app]/public/scss/website.scss) ธีมอาจสมบูรณ์ โดยให้สไตล์สำหรับเว็บไซต์ทั้งหมด หรือเป็นเพียงส่วนเสริม ตัวอย่างเช่น อาจจัดสไตล์เฉพาะองค์ประกอบที่แนะนำ โดยทำเครื่องหมายในช่องคุณสามารถเลือกธีมที่ควรรวมในเว็บไซต์ของคุณ

2.4 JS ที่กำหนดเอง

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