Grav - การปรับแต่งธีม

ในบทนี้ให้เราศึกษาเกี่ยวกับ Theme Customization. มีหลายวิธีในการปรับแต่งธีมของคุณ Grav มีคุณสมบัติมากมายและฟังก์ชันบางอย่างเพื่อปรับแต่งธีมของคุณได้อย่างง่ายดาย

CSS ที่กำหนดเอง

คุณสามารถจัดหาของคุณเอง custom.cssไฟล์เพื่อปรับแต่งธีมของคุณ ธีมปฏิสสารหมายถึงcss/custom.css ไฟล์ผ่านการใช้ Asset Manager. หากไม่พบการอ้างอิงถึงไฟล์ CSS แสดงว่าไฟล์Asset Managerจะไม่เพิ่มการอ้างอิงลงใน HTML การสร้างไฟล์ CSS ใน Antimatter'scss/โฟลเดอร์จะแทนที่ CSS เริ่มต้น ตัวอย่างเช่น -

custom.css

body a {
   color: #FFFF00;
}

สีของลิงก์เริ่มต้นจะถูกลบล้างและตั้งค่าเป็นสีเหลือง

SCSS ที่กำหนดเอง / LESS

อีกวิธีหนึ่งในการจัดเตรียมไฟล์ CSS ที่กำหนดเองคือการใช้ไฟล์ custom.scssไฟล์. SCSS (สร้างประโยคผ้าสไตล์น่ากลัว)เป็น preprocessor CSS ซึ่งช่วยให้คุณสร้าง CSS ได้อย่างมีประสิทธิภาพผ่านการใช้งานของผู้ประกอบการตัวแปรโครงสร้างที่ซ้อนกันนำเข้า partials และผสมอิน Antimatter เขียนโดยใช้ SCSS

ในการใช้ SCSS คุณต้องมีคอมไพเลอร์ SCSS คุณสามารถใช้เครื่องมือบรรทัดคำสั่งและแอปพลิเคชัน GUI เพื่อติดตั้งคอมไพเลอร์ SCSS บนแพลตฟอร์มใดก็ได้ ปฏิสสารใช้scss/ โฟลเดอร์ที่จะวางไฟล์ .scssไฟล์. ไฟล์ที่คอมไพล์จะถูกเก็บไว้ในcss-compiled/ โฟลเดอร์

SCSS ควรเฝ้าดูไฟล์สำหรับการอัปเดตใด ๆ ซึ่งสามารถทำได้โดยใช้คำสั่งต่อไปนี้ -

scss --watch scss:css-compiled

คำสั่งดังกล่าวบอกให้คอมไพเลอร์ SCSS เฝ้าดูไดเร็กทอรีที่เรียกว่า scss และเมื่อใดก็ตามที่ css-compiled โฟลเดอร์ได้รับการอัพเดตคอมไพเลอร์ SCSS ควรคอมไพล์

คุณสามารถเก็บรหัส SCSS ที่กำหนดเองไว้ได้ scss/template/_custom.scssไฟล์. มีข้อดีหลายประการในการเก็บรหัสของคุณไว้ในไฟล์นี้

• การอัปเดตใด ๆ จากไฟล์ SCSS และไฟล์ CSS อื่น ๆ จะถูกคอมไพล์เป็นไฟล์ css-compiled/template.css ไฟล์

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

• เพื่อการพัฒนาที่ง่ายขึ้นคุณจะได้รับการเข้าถึงคุณสมบัติและฟังก์ชันทั้งหมดของ SCSS มาตรฐาน

ตัวอย่างของ _custom.scss ไฟล์แสดงด้านล่าง -

body {
   a {
      color: darken($core-accent, 20%);
   }
}

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

การสืบทอดธีม

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

• ในการจัดเก็บธีมใหม่ของคุณให้สร้างโฟลเดอร์ใหม่ชื่อ mytheme/ ข้างใน /user/themes/ โฟลเดอร์

• ถัดไปคุณต้องสร้างไฟล์ YAML ธีมใหม่ที่เรียกว่า mytheme.yaml ภายใต้ไฟล์ /user/themes/mytheme/ โฟลเดอร์ที่มีเนื้อหาต่อไปนี้

streams:
   schemes:
      theme:
         type: ReadOnlyStream
         prefixes:
            '':
               - user/themes/mytheme
               - user/themes/antimatter

• สร้างไฟล์ YAML ชื่อ blueprints.yaml ภายใต้ /user/themes/mytheme/ โฟลเดอร์ที่มีเนื้อหาต่อไปนี้

name: MyTheme
version: 1.0.0
description: "Extending Antimatter"
icon: crosshairs
author:
   name: Team Grav
   email: [email protected]
   url: http://getgrav.org

ตอนนี้เราจะเข้าใจวิธีกำหนดธีม blueprints.yamlที่ประกอบด้วยองค์ประกอบพื้นฐาน สามารถให้รายละเอียดเพิ่มเติมสำหรับคำจำกัดความของฟอร์มเพื่อควบคุมฟังก์ชันของฟอร์มของคุณ blueprints.yaml สามารถตรวจสอบไฟล์สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับเรื่องนี้

• ในไฟล์ user/config/system.yaml แก้ไขไฟล์ pages: theme: ตัวเลือกในการเปลี่ยนธีมเริ่มต้นของคุณเป็นธีมใหม่ดังที่แสดงด้านล่าง

pages:
   theme: mytheme

ตอนนี้ชุดรูปแบบใหม่ถูกสร้างขึ้นและ Antimatter จะเป็นธีมพื้นฐานสำหรับใหม่นี้ mythemeธีม หากคุณต้องการแก้ไข SCSS เฉพาะเราจำเป็นต้องกำหนดค่าคอมไพเลอร์ SCSS เพื่อให้มันดูเป็นไฟล์mytheme ธีมก่อนและรองจากธีมปฏิสสาร

ใช้การตั้งค่าต่อไปนี้ -

• ก่อนอื่นให้คัดลอกไฟล์ template.scss ซึ่งวางอยู่ในไฟล์ antimatter/scss/ แล้ววางลงในไฟล์ mytheme/scss/โฟลเดอร์ ไฟล์นี้จะมีไฟล์@import เรียกไฟล์ต่างๆเช่น template/_custom.scss และไฟล์ย่อย

• load-path ชี้ไปที่ antimatter/scss/โฟลเดอร์ที่มีไฟล์ SCSS จำนวนมาก ในการรันคอมไพเลอร์ SCSS คุณต้องระบุload-path to it as shown below.

scss --load-path ../antimatter/scss --watch scss:css-compiled

• ตอนนี้สร้างไฟล์ชื่อ _custom.scss ภายใต้ mytheme/scss/template/. ไฟล์นี้จะมีการปรับเปลี่ยนทั้งหมดของคุณ

เมื่อไฟล์ SCSS ที่กำหนดเองมีการเปลี่ยนแปลงไฟล์ SCSS ทั้งหมดจะถูกคอมไพล์อีกครั้งโดยอัตโนมัติ template.css ซึ่งตั้งอยู่ภายใต้ mytheme/css-compiled/ โฟลเดอร์แล้ว Grav อ้างอิงสิ่งนี้อย่างถูกต้อง