Grav - Tùy chỉnh chủ đề

Trong chương này, chúng ta hãy nghiên cứu về Theme Customization. Có một số cách để tùy chỉnh chủ đề của bạn. Grav cung cấp nhiều tính năng và một số chức năng để dễ dàng tùy chỉnh chủ đề của bạn.

CSS tùy chỉnh

Bạn có thể cung cấp của riêng bạn custom.cssđể tùy chỉnh chủ đề của bạn. Chủ đề Phản vật chất đề cập đếncss/custom.css thông qua việc sử dụng Asset Manager. Nếu không tìm thấy tham chiếu đến tệp CSS, thìAsset Managersẽ không thêm tham chiếu vào HTML. Tạo tệp CSS trong Antimatter'scss/thư mục sẽ ghi đè CSS mặc định. Ví dụ -

custom.css

body a {
   color: #FFFF00;
}

Màu liên kết mặc định được ghi đè và đặt thành màu vàng.

SCSS tùy chỉnh / LESS

Một cách khác để cung cấp tệp CSS tùy chỉnh là sử dụng custom.scsstập tin. Các SCSS (Cú pháp tạo ảnh vui nhộn Style Sheets) là một tiền xử lý CSS cho phép bạn xây dựng CSS một cách hiệu quả thông qua việc sử dụng các nhà khai thác, các biến, cấu trúc lồng nhau, nhập khẩu, partials và trộn-ins. Phản vật chất được viết bằng SCSS.

Để sử dụng SCSS, bạn cần trình biên dịch SCSS. Bạn có thể sử dụng các công cụ dòng lệnh và ứng dụng GUI để cài đặt trình biên dịch SCSS trên bất kỳ nền tảng nào. Phản vật chất sử dụngscss/ thư mục để đặt tất cả .scsscác tập tin. Các tệp đã biên dịch được lưu trữ trongcss-compiled/ thư mục.

Các SCSS tệp nên được theo dõi để biết bất kỳ cập nhật nào có thể được thực hiện bằng cách sử dụng lệnh sau:

scss --watch scss:css-compiled

Lệnh trên yêu cầu trình biên dịch SCSS xem thư mục được gọi là scss và bất cứ khi nào css-compiled thư mục được cập nhật trình biên dịch SCSS sẽ biên dịch nó.

Bạn có thể giữ mã SCSS tùy chỉnh của mình trong scss/template/_custom.scsstập tin. Có nhiều lợi ích khi giữ mã của bạn trong tệp này.

Mọi cập nhật từ tệp SCSS và các tệp CSS khác đều được biên dịch thành css-compiled/template.css tập tin
Bạn có thể truy cập bất kỳ SCSS nào được sử dụng trong chủ đề của mình và sử dụng tất cả các biến và kết hợp có sẵn cho chủ đề đó.
Để phát triển dễ dàng hơn, bạn được cung cấp quyền truy cập vào tất cả các tính năng và chức năng của SCSS tiêu chuẩn.

Một ví dụ của _custom.scss tệp được hiển thị bên dưới -

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

Khi bạn nâng cấp chủ đề của mình, tất cả css tùy chỉnh sẽ bị ghi đè. Đây là nhược điểm lớn của việc chọn cách này để tùy chỉnh chủ đề. Điều này có thể được giải quyết bằng cách sử dụng kế thừa chủ đề.

Kế thừa chủ đề

Theme Inheritancelà cách tốt nhất để sửa đổi hoặc tùy chỉnh chủ đề và có thể hoàn thành với một vài thiết lập. Ý tưởng cơ bản là một chủ đề được định nghĩa là chủ đề cơ sở mà bạn đang kế thừa và chỉ có thể sửa đổi một số bit và những thứ còn lại do chủ đề cơ sở xử lý. Ưu điểm của việc sử dụng chủ đề kế thừa là chủ đề kế thừa tùy chỉnh sẽ không bị ảnh hưởng trực tiếp bất cứ khi nào chủ đề cơ sở được cập nhật. Để thực hiện điều này, bạn cần làm theo các bước sau.

Để lưu trữ chủ đề mới của bạn, hãy tạo thư mục mới có tên mytheme/ phía trong /user/themes/ thư mục.
Tiếp theo, bạn cần tạo một tệp YAML chủ đề mới có tên là mytheme.yaml dưới cái mới được tạo /user/themes/mytheme/ thư mục với nội dung sau.

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

Tạo tệp YAML có tên blueprints.yaml phía dưới cái /user/themes/mytheme/ thư mục với nội dung sau.

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

Bây giờ chúng ta sẽ hiểu cách xác định một chủ đề blueprints.yamlbao gồm các yếu tố cơ bản. Có thể cung cấp thêm chi tiết về định nghĩa biểu mẫu để kiểm soát các chức năng biểu mẫu của bạn. Cácblueprints.yaml tệp có thể được kiểm tra để biết thêm chi tiết về điều này.

Trong của bạn user/config/system.yaml Chỉnh sửa tập tin pages: theme: tùy chọn để thay đổi chủ đề mặc định của bạn thành chủ đề mới như được hiển thị bên dưới.

pages:
   theme: mytheme

Bây giờ chủ đề mới đã được tạo và Phản vật chất sẽ là chủ đề cơ bản cho mythemechủ đề. Nếu bạn muốn sửa đổi SCSS cụ thể, chúng tôi cần cấu hình trình biên dịch SCSS để nó trông giống như của bạnmytheme chủ đề đầu tiên và thứ hai là chủ đề Phản vật chất.

Nó sử dụng các cài đặt sau:

Đầu tiên sao chép template.scss tệp được đặt trong antimatter/scss/ và dán nó vào mytheme/scss/thư mục. Tệp này sẽ chứa tất cả@import lệnh gọi cho các tệp khác nhau như template/_custom.scss và các tệp phụ.
Các load-path chỉ tới antimatter/scss/thư mục chứa nhiều tệp SCSS. Để chạy trình biên dịch SCSS, bạn cần cung cấpload-path to it as shown below.

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

Bây giờ, hãy tạo một tệp có tên _custom.scss Dưới mytheme/scss/template/. Tệp này sẽ chứa tất cả các sửa đổi của bạn.

Khi tệp SCSS tùy chỉnh được thay đổi, tự động tất cả các tệp SCSS sẽ được biên dịch lại thành template.css nằm dưới mytheme/css-compiled/ thư mục và sau đó Grav tham chiếu chính xác điều này.