คุณกำลังดูเอกสารประกอบของ Apigee Edge
ไปที่เอกสารประกอบของ Apigee X ข้อมูล
ธีมประกอบด้วยสไตล์ชีตส่วนกลางที่ทำให้ทุกหน้าในพอร์ทัลของคุณมีรูปลักษณ์แบบเดียวกัน เป้าหมายของธีมคือเพื่อให้คุณเปลี่ยนรูปลักษณ์ของหน้าพอร์ทัลทุกหน้าได้พร้อมกัน
คุณสามารถปรับแต่ง ดูตัวอย่าง และเผยแพร่ธีมของคุณ ดังที่อธิบายไว้ในส่วนต่อไปนี้
สำรวจตัวแก้ไขธีม
ปรับแต่ง ดูตัวอย่าง และเผยแพร่ธีมสำหรับพอร์ทัลของคุณในตัวแก้ไขธีม
วิธีเข้าถึงตัวแก้ไขธีม
- เลือกเผยแพร่ > พอร์ทัลในแถบเครื่องมือการนำทางด้านข้าง เลือกพอร์ทัลและคลิกธีมในหน้า Landing Page
- เมื่อแก้ไขพอร์ทัล ให้คลิกธีมในเมนูแบบเลื่อนลงในแถบเครื่องมือการนําทางด้านบน
ตามที่ได้ไฮไลต์ไว้ในรูปก่อนหน้านี้ ตัวแก้ไขธีมจะช่วยให้คุณทำสิ่งต่อไปนี้ได้
- ปรับแต่งสไตล์พื้นฐานได้อย่างรวดเร็วโดยใช้เครื่องมือแก้ไขธีมรูปแบบพื้นฐาน ซึ่งรวมถึงองค์ประกอบต่อไปนี้
- ลบล้างตัวแปรธีมหรือปรับแต่งองค์ประกอบรูปแบบธีมในเครื่องมือแก้ไขธีมขั้นสูง ซึ่งรวมถึง (แต่ไม่จำกัดเพียง) องค์ประกอบต่อไปนี้
- ดูตัวอย่างการเปลี่ยนแปลงธีม
- แสดงตัวอย่างพอร์ทัลในเบราว์เซอร์
- เผยแพร่ธีมในพอร์ทัลแบบสด
เกี่ยวกับธีมพื้นฐาน
กฎพื้นฐานสำหรับรูปแบบธีมที่กำหนดรูปลักษณ์ของเว็บไซต์จะอิงจากดีไซน์ Material แบบเหลี่ยมมุม ดีไซน์ Material ทรงเหลี่ยมใช้เลย์เอาต์แบบตารางกริด รวมถึงองค์ประกอบและการจัดรูปแบบที่สอดคล้องกันเพื่อมอบประสบการณ์การใช้งานอินเทอร์แอกทีฟที่เป็นหนึ่งเดียว
กฎสไตล์จะกำหนดโดยใช้ Sassy Cascading Style Sheet (SCSS) SCSS คือชุดย่อยของ Cascading Style Sheets (CSS) ซึ่งมีข้อดีดังนี้
- ตัวแปรร่วมที่ใช้ซ้ำได้ทั่วทั้งสไตล์ชีต
- กฎที่ฝังไว้เพื่อประหยัดเวลาในการพัฒนาสไตล์ชีต
- ความสามารถในการสร้างมิกซ์และฟังก์ชัน
เช่น
// Variable declaration
$my-variable: 12px;
// Nested selectors
.container-selector {
.element-selector {
padding: $my-variable;
}
}
// The SCSS compiler will compile the above code to:
.container-selector .element-selector {
padding: 12px;
}
// Function declaration
@function double($x) { return $x * 2; }
// Call function
.my-selector { height: double(12px); }
// The SCSS compiler will compile the above code to:
.my-selector { height: 24px; }
ระบบจะคอมไพล์และแปลงเป็น CSS แบบเก่าธรรมดาก่อนที่เนื้อหาจะแสดงผลในหน้าเว็บ
ไฟล์สไตล์ Material เชิงมุม
การกำหนดธีมวัตถุ SCSS (material-theming.scss) ใช้งานโดยธีมพื้นฐาน สไตล์ชีตนี้จะประกาศตัวแปร ฟังก์ชัน และมิกซ์ที่ลบล้างได้โดยใช้ตัวแปรที่กำหนดเองและส่วน SCSS ตามที่อธิบายไว้ในปรับแต่งธีมโดยใช้เครื่องมือแก้ไขธีมขั้นสูง
จากการเลือกธีม UI ของคุณ จะมีการประกาศตัวแปร SCSS จำนวนหนึ่ง ซึ่งเป็นตัวแปรที่กำหนดการพิมพ์ สี และรูปแบบการจัดวาง และมีการใช้งานโดยสไตล์ชีตพื้นฐาน คุณสามารถลบล้างตัวแปรที่แสดงในการอ้างอิงตัวแปรธีมได้
ปรับแต่งชุดสี
ปรับแต่งชุดสีโดยใช้ตัวแก้ไขรูปแบบพื้นฐานหรือลบล้างตัวแปรของธีม
เกี่ยวกับหมวดหมู่ชุดสี
คำจำกัดความของชุดสีสำหรับพอร์ทัลผสานรวมจะจัดกลุ่มเป็นหมวดหมู่ต่อไปนี้ ซึ่งกำหนดโดยใช้การจัดรูปแบบสีของดีไซน์ Material ในธีมพื้นฐาน
| หมวดหมู่ | รูปแบบ |
| หลัก | แถบเครื่องมือ ส่วนหัว ส่วนหัวของการ์ด และปุ่มต่างๆ การนำทาง |
| เสียงรอง | <pre> และ <code> ข้อความ
|
| สำเนียง | การไปยังส่วนต่างๆ ลิงก์ และปุ่มที่เน้นเสียง |
| แจ้งเตือน | คำเตือนและข้อผิดพลาด |
ปรับแต่งชุดสีโดยใช้ตัวแก้ไขรูปแบบพื้นฐาน
ปรับแต่งชุดสีหลักและเน้นสีอย่างรวดเร็วโดยใช้ตัวแก้ไขรูปแบบพื้นฐาน
หากต้องการปรับแต่งชุดสีโดยใช้ตัวแก้ไขรูปแบบพื้นฐาน ให้ทำดังนี้
- เข้าถึงเครื่องมือแก้ไขธีม
- หากต้องการปรับแต่งสีหลัก ในเมนูแบบเลื่อนลงสีหลัก ให้เลือกสีหรือคลิกกำหนดเอง แล้วป้อนค่าสีเลขฐาน 16 ที่กำหนดเองในกล่องข้อความ
- หากต้องการปรับแต่งสีเฉพาะจุด ในเมนูแบบเลื่อนลงสีเฉพาะจุด ให้เลือกสีหรือคลิกกำหนดเองและป้อนค่าสีแบบเลขฐาน 16 ที่กำหนดเองในกล่องข้อความ
- คลิกบันทึกเพื่อบันทึกการเปลี่ยนแปลง
- ดูการเปลี่ยนแปลงในแผงแสดงตัวอย่าง หรือคลิกแสดงตัวอย่างเพื่อดูตัวอย่างการเปลี่ยนแปลงพอร์ทัลในเบราว์เซอร์
หมายเหตุ: คุณคลิกผ่านการนำทางของพอร์ทัลได้ในแผงแสดงตัวอย่างเพื่อดูการเปลี่ยนแปลงในทุกหน้า - คลิกเผยแพร่เพื่อเผยแพร่ธีม ระบบจะขอให้คุณยืนยันการอัปเดต
ปรับแต่งชุดสีโดยการลบล้างตัวแปรของธีม
หากต้องการปรับแต่งชุดสีโดยการลบล้างตัวแปรของธีม ให้เข้าถึงเครื่องมือแก้ไขธีมขั้นสูง และใส่ตัวแปรอย่างน้อย 1 รายการต่อไปนี้พร้อมค่าที่ปรับแล้วในส่วนตัวแปรเพื่อเปลี่ยนสีหลัก รอง เน้นเสียง หรือข้อความเตือน ตามลำดับ โปรดดูเกี่ยวกับหมวดหมู่ชุดสี
$primary: mat-palette($mat-grey, 800, 100, 900);
$secondary: mat-palette($mat-green, 700, 100, 900);
$accent: mat-palette($mat-blue, 600, 700, 900);
$warn: mat-palette($mat-red);
ดูเนื้อหาของไฟล์ SCSS ธีมวัสดุที่นำเข้า (material-theming.scss) เพื่อระบุตัวแปรของสีที่กำหนดไว้ล่วงหน้า (เช่น $mat-grey) ค่าตัวเลขจะระบุการแรเงาสำหรับองค์ประกอบเริ่มต้น สีอ่อน และสีเข้มตามลำดับ
หรือคุณจะสร้างตัวแปรสีของคุณเองก็ได้ เช่น
$my-color-variable: (
50 : #f9f0e7,
100 : #f0d8c2,
200 : #e6bf9a,
300 : #dba572,
400 : #d49153,
500 : #cc7e35,
600 : #c77630,
700 : #c06b28,
800 : #b96122,
900 : #ad4e16,
A100 : #ffebe0,
A200 : #ffc9ad,
A400 : #ffa77a,
A700 : #ff9661,
// Color to render text presented on a background of the same level
contrast: (
50 : #000000,
100 : #000000,
200 : #000000,
300 : #000000,
400 : #000000,
500 : #000000,
600 : #000000,
700 : #ffffff,
800 : #ffffff,
900 : #ffffff,
A100 : #000000,
A200 : #000000,
A400 : #000000,
A700 : #000000,
)
);
จากนั้น ให้ใช้เพื่อเปลี่ยนชุดสี ดังที่ปรากฏในตัวอย่างต่อไปนี้:
$primary: mat-palette($my-color-variable, 900, 200, 400);
ปรับแต่งชุดแบบอักษรและรูปแบบ
ปรับแต่งชุดแบบอักษรและสไตล์โดยใช้ตัวแก้ไขรูปแบบพื้นฐานหรือการลบล้างตัวแปรของธีม นอกจากนี้คุณยังนำเข้าแบบอักษรที่กำหนดเองได้
ปรับแต่งชุดแบบอักษรและสไตล์โดยใช้เครื่องมือแก้ไขรูปแบบพื้นฐาน
กำหนดค่าแบบอักษรและสไตล์ได้อย่างรวดเร็วโดยใช้เครื่องมือแก้ไขรูปแบบพื้นฐาน ดังที่แสดงในรูปต่อไปนี้
หากต้องการปรับแต่งแบบอักษรและสไตล์โดยใช้เครื่องมือแก้ไขรูปแบบพื้นฐาน ให้ทำดังนี้
- เข้าถึงเครื่องมือแก้ไขธีม
- หากต้องการเปลี่ยนชุดแบบอักษร ให้เลือกค่าในรายการแบบเลื่อนลงแบบอักษร
- หากต้องการเปลี่ยนรูปแบบตัวอักษร ให้ขยายส่วนรูปแบบตัวอักษร และแก้ไขรูปแบบตามต้องการ ซึ่งรวมถึงขนาดแบบอักษร ความสูงของบรรทัด และน้ำหนักแบบอักษรสำหรับองค์ประกอบ HTML ที่ต้องการ
- คลิกบันทึกเพื่อบันทึกการเปลี่ยนแปลง
- ดูการเปลี่ยนแปลงในแผงแสดงตัวอย่าง หรือคลิกแสดงตัวอย่างเพื่อดูตัวอย่างการเปลี่ยนแปลงพอร์ทัลในเบราว์เซอร์
หมายเหตุ: คุณคลิกผ่านการนำทางของพอร์ทัลได้ในแผงแสดงตัวอย่างเพื่อดูการเปลี่ยนแปลงในทุกหน้า - คลิกเผยแพร่เพื่อเผยแพร่ธีม ระบบจะขอให้คุณยืนยันการอัปเดต
ปรับแต่งชุดแบบอักษรและรูปแบบโดยลบล้างตัวแปรของธีม
หากต้องการปรับแต่งชุดแบบอักษรและสไตล์ด้วยการลบล้างตัวแปรของธีม ให้เข้าถึงเครื่องมือแก้ไขธีมขั้นสูง และใส่ตัวแปรชุดแบบอักษรและสไตล์อย่างน้อย 1 รายการที่มีค่าที่ปรับแล้วในส่วนตัวแปร
ตัวอย่างเช่น หากต้องการเปลี่ยนแบบอักษรเริ่มต้นเป็น Arial ให้กำหนดตัวแปรต่อไปนี้
$typography-main-font-family: 'Arial';
นำเข้าแบบอักษรที่กำหนดเอง
นำเข้าแบบอักษรของ Google (ที่ไม่รวมอยู่ในชุดแบบอักษรเริ่มต้น) หรือแบบอักษรที่คุณกำหนดเอง จากนั้นอ้างอิงแบบอักษรที่กำหนดเองในสไตล์ชีตดังที่อธิบายด้านล่าง
นำเข้าแบบอักษรของ Google
หากต้องการนำเข้าแบบอักษรของ Google ให้เข้าถึงเครื่องมือแก้ไขธีมขั้นสูง และนำเข้าแบบอักษรในส่วนรูปแบบที่กำหนดเอง ดังที่แสดงด้านล่าง
@import url(https://fonts.googleapis.com/css?family=Indie+Flower);
นำเข้าแบบอักษรที่กำหนดเอง
นำเข้าแบบอักษรที่คุณกำหนดเองโดยใช้กฎ CSS @font-face กฎ @font-face รองรับรูปแบบไฟล์หลายประเภท เช่น TrueType (TTF), รูปแบบแบบอักษร Web Open Open (WOFF) และอื่นๆ
หากต้องการนำเข้าแบบอักษรที่กำหนดเอง ให้ทำดังนี้
- (ไม่บังคับ) อัปโหลดไฟล์แบบอักษรไปยังเครื่องมือจัดการเนื้อหาตามที่อธิบายไว้ในอัปโหลดไฟล์
เข้าถึงเครื่องมือแก้ไขธีมขั้นสูง และเพิ่มกฎ
@font-faceในส่วนสไตล์ที่กำหนดเองโดยที่font-familyระบุชื่อแบบอักษรurlจะระบุตำแหน่งของไฟล์แบบอักษร (ในกรณีนี้คือเครื่องมือจัดการเนื้อหา)MyCustomFont.tffคือชื่อไฟล์แบบอักษรที่กำหนดเอง และformatจะระบุรูปแบบแบบอักษร@font-face { font-family: 'MyCustomFont'; src: url('files/MyCustomFont.tff') format('truetype') }
อ้างอิงแบบอักษรที่กำหนดเองในสไตล์ชีตของคุณ
อ้างอิงแบบอักษรที่กำหนดเองในตัวแปรชุดแบบอักษรและสไตล์ในส่วนตัวแปร เช่น
$typography-main: mat-typography-config(
$font-family: '"Indie Flower", "Oxygen", sans-serif',
$display-4: mat-typography-level(112px, 112px, 300), // One-off huge headers
$display-3: mat-typography-level(56px, 56px, 400), // One-off large headers
$display-2: mat-typography-level(45px, 48px, 400), // One-off medium headers
$display-1: mat-typography-level(34px, 40px, 400), // One-off small headers
$headline: mat-typography-level(24px, 32px, 400), // <h1> tags
$title: mat-typography-level(20px, 32px, 500), // <h2> tags
$subheading-2: mat-typography-level(16px, 28px, 400), // <h3> tags
$subheading-1: mat-typography-level(15px, 24px, 400), // <h4> tags
$body-2: mat-typography-level(14px, 24px, 500), // Bolder body text
$body-1: mat-typography-level(16px, 22px, 400), // Base body text
$caption: mat-typography-level(12px, 20px, 400), // Smaller body and hint text
$button: mat-typography-level(14px, 14px, 500), // Buttons
$input: mat-typography-level(16px, 1.125, 400) // Input form fields
);
ปรับแต่งโลโก้
คุณปรับแต่งโลโก้ที่ใช้ในพอร์ทัลได้ในตำแหน่งต่อไปนี้
| ตำแหน่งโลโก้ | ขนาดไฟล์เริ่มต้น |
|---|---|
| แถบเครื่องมือการไปยังส่วนต่างๆ ในเดสก์ท็อป | 196 x 32 พิกเซล |
| แถบเครื่องมือการนำทางบนอุปกรณ์เคลื่อนที่ | 156 x 32 พิกเซล |
| ไอคอน Fav ในแถบที่อยู่ของเบราว์เซอร์ (และตำแหน่งอื่นๆ) | 32 x 32 พิกเซล |
| หน้าลงชื่อเข้าใช้ | 392 x 64 พิกเซล |
ปรับแต่งโลโก้ในแถบเครื่องมือการนำทางสำหรับการแสดงผลบนเดสก์ท็อปและอุปกรณ์เคลื่อนที่
ปรับแต่งโลโก้ในแถบเครื่องมือการนำทางสำหรับการแสดงผลบนเดสก์ท็อปและอุปกรณ์เคลื่อนที่ คุณอาจเห็นโลโก้เวอร์ชันเดสก์ท็อปหรืออุปกรณ์เคลื่อนที่ ทั้งนี้ขึ้นอยู่กับความกว้างของเบราว์เซอร์
คุณลบโลโก้หลักไม่ได้ ทำได้เพียงแทนที่เท่านั้น หากคุณไม่ระบุโลโก้สำหรับจอแสดงผลบนอุปกรณ์เคลื่อนที่ ระบบจะใช้โลโก้หลักโดยค่าเริ่มต้น
วิธีปรับแต่งโลโก้ที่ใช้ในแถบเครื่องมือการนำทางสำหรับการแสดงผลในเดสก์ท็อปและอุปกรณ์เคลื่อนที่
- รับสำเนาโลโก้บริษัทของคุณอย่างน้อยหนึ่งสำเนาที่เหมาะสำหรับการใช้งาน
โปรดดูขนาดที่แนะนำในตารางก่อนหน้า - เข้าถึงเครื่องมือแก้ไขธีม
- หากต้องการแทนที่โลโก้ในแถบเครื่องมือการนำทางด้านบนในเดสก์ท็อป ให้ทำดังนี้
ก. ภายใต้ลักษณะพื้นฐานในแผงด้านขวา ให้คลิก
ใต้ช่องโลโก้หลัก
ข. เรียกดูโลโก้ของคุณในเวอร์ชันเดสก์ท็อปในไดเรกทอรีในเครื่อง
ค. คลิกเปิดเพื่ออัปโหลดไฟล์ - หากต้องการแทนที่โลโก้ในแถบเครื่องมือการนำทางด้านบนในจอแสดงผลอุปกรณ์เคลื่อนที่ ให้ทำดังนี้
ก. ภายใต้รูปแบบพื้นฐานในแผงด้านขวา ให้ขยายตัวเลือกโลโก้ แล้วคลิก ใต้ช่องโลโก้อุปกรณ์เคลื่อนที่
ข. เรียกดูโลโก้เวอร์ชันอุปกรณ์เคลื่อนที่ในไดเรกทอรีในเครื่อง
ค. คลิกเปิดเพื่ออัปโหลดไฟล์ - คลิกบันทึกเพื่อดูตัวอย่างการเปลี่ยนแปลงในแผงด้านซ้าย
- คลิกเผยแพร่เพื่อเผยแพร่การเปลี่ยนแปลงในพอร์ทัล ยืนยันการดำเนินการเมื่อได้รับข้อความแจ้ง
ปรับแต่งไอคอน Fav
หากต้องการปรับแต่งไอคอน Fav ที่ใช้ในแถบที่อยู่ของเว็บเบราว์เซอร์ (และตำแหน่งอื่นๆ ให้ทำดังนี้
- รับสำเนาโลโก้บริษัทที่เหมาะสำหรับใช้เป็นไอคอน Fav
โปรดดูขนาดที่แนะนำในตารางก่อนหน้า - เข้าถึงเครื่องมือแก้ไขธีม
- ภายใต้ลักษณะพื้นฐานในแผงด้านขวา ให้ขยายตัวเลือกโลโก้ และคลิก ใต้ช่อง ไอคอน Fav
- เรียกดูโลโก้เวอร์ชันไอคอน Fav ในไดเรกทอรีในเครื่อง
- คลิกเปิดเพื่ออัปโหลดไฟล์
- คลิกบันทึกเพื่อดูตัวอย่างการเปลี่ยนแปลงในแผงด้านซ้าย
- คลิกเผยแพร่เพื่อเผยแพร่การเปลี่ยนแปลงในพอร์ทัล ยืนยันการดำเนินการเมื่อได้รับข้อความแจ้ง
ปรับแต่งโลโก้ในหน้าลงชื่อเข้าใช้
ปรับแต่งโลโก้ในหน้าลงชื่อเข้าใช้เมื่อกำหนดค่าการลงทะเบียนและการลงชื่อเข้าใช้สำหรับโปรแกรมนักพัฒนาซอฟต์แวร์ ตามที่อธิบายไว้ในจัดการข้อมูลบริษัท
ปรับแต่งแถบเครื่องมือการนำทาง
ต่อไปนี้เป็นเคล็ดลับง่ายๆ สำหรับการปรับแต่งแถบเครื่องมือการนำทาง
- ปรับแต่งสีของแถบเครื่องมือการนำทางในส่วนหัวและส่วนท้ายด้วยการเปลี่ยนสีหลัก ตามที่อธิบายไว้ในหัวข้อปรับแต่งชุดสี
- ปรับแต่งขนาดแบบอักษรและรูปแบบของรายการเมนูในแถบเครื่องมือการนำทางในส่วนหัวและส่วนท้ายโดยเปลี่ยนรูปแบบแบบอักษรและปุ่มตามที่อธิบายไว้ในปรับแต่งชุดแบบอักษรและรูปแบบ
- ปรับแต่งความสูงของแถบเครื่องมือการนำทางส่วนหัวโดยเข้าถึงเครื่องมือแก้ไขธีมขั้นสูง และใส่ตัวแปรต่อไปนี้พร้อมค่าที่ปรับแล้วในส่วนตัวแปร
$layout-header-height: 64px; - ปรับแต่งความสูงของแถบเครื่องมือการนำทางที่ส่วนท้ายด้วยเข้าถึงเครื่องมือแก้ไขธีมขั้นสูง และใส่ตัวแปรต่อไปนี้พร้อมค่าที่ปรับแล้วในส่วนตัวแปร
$layout-footer-height: 44px; - ปรับแต่งโลโก้ในแถบเครื่องมือการนำทางสำหรับการแสดงผลบนเดสก์ท็อปและอุปกรณ์เคลื่อนที่
ปรับแต่งภาพพื้นหลัง
ปรับแต่งภาพพื้นหลังในหน้าแรกโดยดำเนินการอย่างใดอย่างหนึ่งต่อไปนี้
อัปโหลดรูปภาพ home-background.jpg ของคุณเองไปยังเครื่องมือจัดการเนื้อหาโดยใช้ชื่อเดียวกัน รวมถึงขนาดไฟล์เดียวกัน (3000 พิกเซล x 1996 พิกเซล) ดูข้อมูลเพิ่มเติมได้ที่จัดการเนื้อหา
แก้ไขชื่อไฟล์ภาพพื้นหลังและระยะห่างจากขอบโดยเข้าถึงเครื่องมือแก้ไขธีมขั้นสูง และรวม SCSS ต่อไปนี้ที่มีค่าที่ปรับแล้วในส่วนรูปแบบที่กำหนดเอง ดังนี้
#index { &.main { .main-content { padding: 0; background-image: url('/files/home-background.jpg'); background-size: cover; } } }เพิ่มภาพพื้นหลังให้กับทุกหน้าในพอร์ทัลโดยเข้าถึงเครื่องมือแก้ไขธีมขั้นสูง และรวม SCSS ต่อไปนี้พร้อมค่าที่ปรับแล้วในส่วนรูปแบบที่กำหนดเอง ดังนี้
body { background-image: url('/files/background-image.jpg'); }
ปรับแต่งการพิมพ์
ปรับแต่งแบบอักษรโดยเข้าถึงการเข้าถึงเครื่องมือแก้ไขธีมขั้นสูง และปรับค่าสำหรับตัวแปรแบบอักษรต่อไปนี้อย่างน้อย 1 รายการในส่วนตัวแปร
$typography-main$typography-header$typography-footer$typography-context-bar
เช่น
// Main content typography (includes dialog and notification popups)
$typography-main: mat-typography-config(
$font-family: 'Roboto, "Oxygen", sans-serif',
$display-4: mat-typography-level(112px, 112px, 300), // One-off huge headers
$display-3: mat-typography-level(56px, 56px, 400), // One-off large headers
$display-2: mat-typography-level(45px, 48px, 400), // One-off medium headers
$display-1: mat-typography-level(34px, 40px, 400), // One-off small headers
$headline: mat-typography-level(24px, 32px, 400), // <h1> tags
$title: mat-typography-level(20px, 32px, 500), // <h2> tags
$subheading-2: mat-typography-level(16px, 28px, 400), // <h3> tags
$subheading-1: mat-typography-level(15px, 24px, 400), // <h4> tags
$body-2: mat-typography-level(14px, 24px, 500), // Bolder body text
$body-1: mat-typography-level(16px, 22px, 400), // Base body text
$caption: mat-typography-level(12px, 20px, 400), // Smaller body and hint text
$button: mat-typography-level(14px, 14px, 500), // Buttons
$input: mat-typography-level(16px, 1.125, 400) // Input form fields
);
จากนั้นคุณจะใช้การพิมพ์กับตัวเลือก CSS ที่เจาะจงได้ ดังที่แสดงในตัวอย่างต่อไปนี้
@include mat-base-typography($custom-typography-config, '.css-selector');
หรือคุณสามารถใช้ระดับการพิมพ์เฉพาะที่กําหนดไว้ในการพิมพ์ที่กําหนดเองกับตัวเลือก CSS ตามที่แสดงในตัวอย่างต่อไปนี้
.css-selector {
@include mat-typography-level-to-styles($custom-typography-config, display-3);
}
ปรับแต่งธีมด้วยเครื่องมือแก้ไขธีมขั้นสูง
ปรับแต่งธีมโดยลบล้างตัวแปรธีมหรือการปรับแต่งองค์ประกอบของรูปแบบธีมโดยตรงในเครื่องมือแก้ไขธีมขั้นสูง
ลบล้างตัวแปรธีม
ลบล้างตัวแปรธีมในส่วนตัวแปรของเครื่องมือแก้ไขธีมขั้นสูง ดูรายการตัวแปรของธีมได้ที่การอ้างอิงตัวแปรธีม
ตัวอย่างเช่น หากต้องการปรับแต่งความสูงของแถบเครื่องมือการนำทางส่วนหัวและส่วนท้าย ให้ใส่ตัวแปรต่อไปนี้ตามลำดับ พร้อมค่าที่ปรับแล้วในส่วนตัวแปรของเครื่องมือแก้ไขธีมขั้นสูง ดังนี้
ดูตัวอย่างเพิ่มเติมได้ที่
วิธีลบล้างตัวแปรของธีม
- เข้าถึงเครื่องมือแก้ไขธีม
- คลิกขั้นสูงในแผงด้านขวา
- คลิกตัวแปร
- เพิ่มการลบล้างตัวแปร
ดูรายการตัวแปรที่ลบล้างได้ที่หัวข้อการอ้างอิงตัวแปรธีม - คลิกบันทึกเพื่อบันทึกการเปลี่ยนแปลง
- คลิก x เพื่อปิดเครื่องมือแก้ไขธีมขั้นสูง
- ดูการเปลี่ยนแปลงในแผงแสดงตัวอย่าง หรือคลิกแสดงตัวอย่างเพื่อดูตัวอย่างการเปลี่ยนแปลงพอร์ทัลในเบราว์เซอร์ หมายเหตุ: คุณคลิกผ่านการนำทางของพอร์ทัลได้ในแผงแสดงตัวอย่างเพื่อดูการเปลี่ยนแปลงในทุกหน้า
- คลิกเผยแพร่เพื่อเผยแพร่ธีม ระบบจะขอให้คุณยืนยันการอัปเดต
ปรับแต่งองค์ประกอบรูปแบบธีม
ปรับแต่งองค์ประกอบของรูปแบบธีมได้โดยตรงในส่วนรูปแบบที่กำหนดเองของตัวแก้ไขธีมขั้นสูง
เช่น หากต้องการเปลี่ยนสีปุ่มสร้างในหน้าแอปใหม่ที่ปรากฏขึ้นเมื่อลงทะเบียนแอปในพอร์ทัล ให้ใส่องค์ประกอบสไตล์ธีมต่อไปนี้พร้อมค่าที่ปรับแล้ว
.main .main-content button.app-save {
color: blue;
}
ดูเพิ่มเติมที่ปรับแต่งภาพพื้นหลัง
วิธีปรับแต่งองค์ประกอบของรูปแบบธีม
- เข้าถึงเครื่องมือแก้ไขธีม
- คลิกขั้นสูงในแผงด้านขวา
- คลิกสไตล์ที่กำหนดเอง
- เพิ่มองค์ประกอบรูปแบบธีม
- คลิกบันทึกเพื่อบันทึกการเปลี่ยนแปลง
- ปิด x เพื่อปิดเครื่องมือแก้ไขธีมขั้นสูง
- ดูการเปลี่ยนแปลงในแผงแสดงตัวอย่าง หรือคลิกแสดงตัวอย่างเพื่อดูตัวอย่างการเปลี่ยนแปลงพอร์ทัลในเบราว์เซอร์
หมายเหตุ: คุณคลิกผ่านการนำทางของพอร์ทัลได้ในแผงแสดงตัวอย่างเพื่อดูการเปลี่ยนแปลงในทุกหน้า - คลิกเผยแพร่เพื่อเผยแพร่ธีม ระบบจะขอให้คุณยืนยันการอัปเดต
สร้างแผงความกว้างเต็มในหน้าพอร์ทัล
วิธีสร้างแผงความกว้างเต็มในหน้าพอร์ทัล
- เพิ่มองค์ประกอบรูปแบบธีมต่อไปนี้ในเครื่องมือแก้ไขธีมขั้นสูง ตามที่อธิบายไว้ในปรับแต่งองค์ประกอบของสไตล์
.full-width__container { position: relative; left: 50%; right: 50%; max-width: 100vw; margin-left: -50vw; margin-right: -50vw; background-image: url("/files/your-image.jpg"); background-size: cover; background-position: 50% 50%; padding: 0; } .full-width__centered { @include centered-content(); } .full-width__content { // Add any 'additional' padding here and NOT in .full-width__centered. Adding padding to // .full-width__centered will result in a horizontal scroll bar. You can exclude this class // and corresponding <div> container if no additional padding control other than the // min page padding is needed. } - แก้ไขเนื้อหาของหน้าพอร์ทัลให้รวมองค์ประกอบ
<div>ต่อไปนี้ตามที่อธิบายไว้ในพัฒนาเนื้อหาพอร์ทัลโดยใช้เครื่องมือแก้ไขหน้า<div class="full-width__container"> <div class="full-width__centered"> <div class="full-width__content"> <!-- Include this div if you need additional padding --> <h2>Full Width Container</h2> <p> This content will align with the page header and other content outside of this full width container </p> </div> </div> </div>
เผยแพร่ธีม
หากต้องการเผยแพร่ไปยังพอร์ทัลออนไลน์ ให้ใช้การปรับแต่งธีมและสไตล์ที่คุณเพิ่ม
- เข้าถึงเครื่องมือแก้ไขธีม
- คลิกเผยแพร่
หากต้องการดูเนื้อหาที่เผยแพร่ในพอร์ทัลที่เผยแพร่อยู่ ให้คลิกดูพอร์ทัลในแถบเครื่องมือการนำทางด้านบน
ทำความเข้าใจกฎข้อมูลเฉพาะ CSS
ความจำเพาะของ CSS จะอธิบายวิธีที่เบราว์เซอร์ใช้เพื่อกำหนดลำดับความสำคัญสำหรับการประกาศองค์ประกอบรูปแบบ CSS เมื่อเกิดความขัดแย้ง ความจำเพาะของ CSS คำนวณโดยใช้น้ำหนักกับการประกาศองค์ประกอบสไตล์ CSS ที่เฉพาะเจาะจงตามประเภทตัวเลือก ยิ่งตัวเลือก CSS มีความเฉพาะเจาะจงมากเท่าใด น้ำหนักจะยิ่งสูง ตัวอย่างเช่น แอตทริบิวต์รหัสจะมีน้ำหนักในการคำนวณสูงกว่าตัวเลือกประเภท
ตัวอย่างเช่น หากคุณกำหนดองค์ประกอบรูปแบบต่อไปนี้ในโค้ด CSS องค์ประกอบย่อหน้าจะเป็นสีแดง เนื่องจากการประกาศองค์ประกอบรูปแบบ p ภายในองค์ประกอบ div มีความเฉพาะเจาะจงมากกว่าการประกาศองค์ประกอบรูปแบบ p
div p { color: red } ← More specific
p { color: blue }
ในทำนองเดียวกัน หากคุณกำหนดการประกาศองค์ประกอบรูปแบบต่อไปนี้ในโค้ด CSS ข้อความใดๆ ที่อยู่ในแท็ก <div class="test"></div> จะเป็นสีน้ำเงิน เนื่องจากการประกาศรูปแบบแอตทริบิวต์รหัสภายในองค์ประกอบ div มีความเฉพาะเจาะจงมากกว่าการประกาศองค์ประกอบรูปแบบ div
div#test { background-color: blue; } ← More specific
div { background-color: red; }
สำหรับการประกาศองค์ประกอบรูปแบบที่มีความจำเพาะเท่ากัน การประกาศองค์ประกอบรูปแบบสุดท้ายที่กำหนดไว้จะมีสิทธิ์เหนือกว่า ตัวอย่างเช่น องค์ประกอบย่อหน้าจะเป็นสีน้ำเงินตามลำดับของการประกาศองค์ประกอบรูปแบบต่อไปนี้
p { color: red }
p { color: blue } ← Last specified
การอ้างอิงตัวแปรของธีม
ส่วนต่อไปนี้จะสรุปตัวแปรที่ลบล้างได้ในส่วนตัวแปรของเครื่องมือแก้ไขธีมขั้นสูง ตามที่อธิบายไว้ในลบล้างตัวแปรธีม
ตัวแปรธีมฐาน
ปรับแต่งสีพื้นหน้าของธีมพื้นฐานที่ใช้ทั่วทั้งเว็บไซต์ ค่าที่ถูกต้องคือ light และ dark
$base-theme: light;
ตัวแปรชุดสี
ปรับแต่งชุดสีโดยแก้ไขตัวแปรต่อไปนี้เพื่อเปลี่ยนสีหลัก สีรอง สีเฉพาะจุด และสีของข้อความเตือนตามลำดับ โปรดดูเกี่ยวกับหมวดหมู่ชุดสี
$primary: mat-palette($mat-grey, 800, 100, 900);
$secondary: mat-palette($mat-green);
$accent: mat-palette($mat-blue);
$warn: mat-palette($mat-red);
ค่าตัวเลขจะระบุค่าแรเงาสำหรับองค์ประกอบเริ่มต้น สีอ่อน และสีเข้มตามลำดับ ดูเนื้อหาของไฟล์ materialing SCSS (material-theming.scss) เพื่อระบุตัวแปรสีที่กำหนดไว้ล่วงหน้า
ตัวอย่างเช่น คุณสามารถเปลี่ยนชุดสีหลักให้เป็นสีเขียวได้โดยทำดังนี้
$primary: mat-palette($mat-green, 800, 100, 900);
หากต้องการปรับแต่งเฉพาะค่าการแรเงาสำหรับชุดสีเริ่มต้นที่กำหนดไว้ในธีมพื้นฐาน ให้ใส่โค้ดต่อไปนี้พร้อมค่าแรเงาที่ปรับแล้ว
$primary: mat-palette($custom-hex-primary, 800, 100, 900);
$secondary: mat-palette($custom-hex-secondary, 800, 100, 900);
$accent: mat-palette($custom-hex-accent, 800, 100, 900);
$warn: mat-palette($custom-hex-warn, 800, 100, 900);
ตระกูลแบบอักษรและตัวแปรของรูปแบบ
ปรับแต่งชุดแบบอักษรและรูปแบบ
// If using a custom font, import it by URL.
$typography-main-font-family: 'Roboto, sans-serif';
// Must resolve to a pixel value
$layout-responsive-breakpoint: 900px;
$layout-header-height: 64px;
$layout-header-menu-item-height: 36px;
$layout-header-menu-item-horiz-padding: 16px;
$layout-header-nested-menu-item-vert-padding: 5px;
$layout-header-menu-resp-item-height: 64px;
$layout-footer-height: 44px;
$layout-footer-menu-item-height: 36px;
$layout-footer-menu-item-horiz-padding: 16px;
$layout-footer-nested-menu-item-vert-padding: 5px;
$layout-context-bar-height: 60px;
$layout-context-bar-button-height: 36px;
$layout-context-bar-button-horiz-padding: 16px;
$layout-main-content-max-width: 1400px;
$layout-main-content-vert-padding: 38px;
$layout-horizontal-min-padding: 24px;
// Uses variables declared above
$typography-header: $typography-main;
$typography-footer: $typography-main;
$typography-context-bar: $typography-main;
ระบุการพิมพ์แบบกำหนดเองเพื่อการควบคุมที่ละเอียดยิ่งขึ้น ดังที่ปรากฏในตัวอย่างต่อไปนี้:
$typography-context-bar: mat-typography-config(
$font-family: 'Ubuntu, sans-serif',
$headline: mat-typography-level(30px, 30px, 500), // Title
$button: mat-typography-level(19px, 19px, 200) // Action buttons
);
ตัวแปรการพิมพ์
ปรับแต่งการพิมพ์ด้วยวัสดุเชิงมุม ระดับตัวอักษรแต่ละระดับจะกำหนดขนาดแบบอักษร ความสูงของบรรทัด และน้ำหนักของแบบอักษร
$typography-main-display-4: mat-typography-level(112px, 112px, 300);
$typography-main-display-3: mat-typography-level(56px, 56px, 400);
$typography-main-display-2: mat-typography-level(45px, 48px, 400);
$typography-main-display-1: mat-typography-level(34px, 40px, 400);
$typography-main-headline: mat-typography-level(24px, 32px, 400);
$typography-main-title: mat-typography-level(20px, 32px, 400);
$typography-main-subheading-2: mat-typography-level(16px, 28px, 400);
$typography-main-subheading-1: mat-typography-level(15px, 24px, 400);
$typography-main-body-2: mat-typography-level(14px, 24px, 400);
$typography-main-body-1: mat-typography-level(16px, 22px, 400);
$typography-main-caption: mat-typography-level(12px, 20px, 400);
$typography-main-button: mat-typography-level(14px, 14px, 700);
$typography-main-input: mat-typography-level(16px, 1.125, 400);
// Copies properties declared above into a cohesive object
$typography-main: mat-typography-config(
$font-family: $typography-main-font-family,
$display-4: $typography-main-display-4,
$display-3: $typography-main-display-3,
$display-2: $typography-main-display-2,
$display-1: $typography-main-display-1,
$headline: $typography-main-headline,
$title: $typography-main-title,
$subheading-2: $typography-main-subheading-2,
$subheading-1: $typography-main-subheading-1,
$body-2: $typography-main-body-2,
$body-1: $typography-main-body-1,
$caption: $typography-main-caption,
$button: $typography-main-button,
$input: $typography-main-input);