Cách trình bày

Một số trình phát cũng có thể xuất ra các tệp HTML . Để cho phép tùy chỉnh dễ dàng, các trình phát này cho phép bạn sắp xếp lại hoàn toàn bố cục của trang. Bố cục trang mặc định có thể được tìm thấy trong quartz.layout.ts.

Mỗi trang bao gồm nhiều phần khác nhau chứa QuartzComponents. Đoạn mã sau đây liệt kê tất cả các phần hợp lệ mà bạn có thể thêm thành phần vào:

thạch anh/cfg.ts

<span data-line=""><span>export</span><span> interface</span><span> FullPageLayout</span><span> {</span></span>
<span data-line=""><span>  head</span><span>:</span><span> QuartzComponent</span><span> // single component</span></span>
<span data-line=""><span>  header</span><span>:</span><span> QuartzComponent</span><span>[] </span><span>// laid out horizontally</span></span>
<span data-line=""><span>  beforeBody</span><span>:</span><span> QuartzComponent</span><span>[] </span><span>// laid out vertically</span></span>
<span data-line=""><span>  pageBody</span><span>:</span><span> QuartzComponent</span><span> // single component</span></span>
<span data-line=""><span>  afterBody</span><span>:</span><span> QuartzComponent</span><span>[] </span><span>// laid out vertically</span></span>
<span data-line=""><span>  left</span><span>:</span><span> QuartzComponent</span><span>[] </span><span>// vertical on desktop, horizontal on mobile</span></span>
<span data-line=""><span>  right</span><span>:</span><span> QuartzComponent</span><span>[] </span><span>// vertical on desktop, horizontal on mobile</span></span>
<span data-line=""><span>  footer</span><span>:</span><span> QuartzComponent</span><span> // single component</span></span>
<span data-line=""><span>}</span></span>

Những phần này tương ứng với các phần sau của trang:

Có hai trường bố cục bổ sung không được hiển thị trong sơ đồ trên.

headlà một thành phần duy nhất hiển thị <head> thẻ trong HTML. Thành phần này không hiển thị trực quan trên trang và chỉ chịu trách nhiệm về siêu dữ liệu về tài liệu như tiêu đề tab, tập lệnh và kiểu.

headerlà một tập hợp các thành phần được bố trí theo chiều ngang và xuất hiện trước phần beforeBody. Điều này cho phép bạn sao chép thanh tiêu đề Quartz 3 cũ, nơi tiêu đề, thanh tìm kiếm và chế độ tối chuyển đổi. Theo mặc định, Quartz 4 không đặt bất kỳ thành phần nào trong header.

Các thành phần Quartz , giống như các plugin, có thể tiếp nhận các thuộc tính bổ sung dưới dạng tùy chọn cấu hình. Nếu bạn quen thuộc với thuật ngữ React, bạn có thể coi chúng là các thành phần bậc cao hơn.

Xem danh sách tất cả các thành phần cho tất cả các thành phần có sẵn cùng với các tùy chọn cấu hình của chúng. Bạn cũng có thể xem hướng dẫn về cách tạo thành phần nếu bạn muốn tùy chỉnh thêm hành vi của Quartz.

Phong cách

Hầu hết các thay đổi về phong cách có ý nghĩa như phối màu và phông chữ có thể được thực hiện đơn giản thông qua các tùy chọn cấu hình chung . Tuy nhiên, nếu bạn muốn thực hiện các thay đổi về phong cách phức tạp hơn, bạn có thể thực hiện bằng cách viết phong cách của riêng mình. Quartz 4, giống như Quartz 3, sử dụng Sass để tạo kiểu.

Bạn có thể xem bảng định dạng cơ bản trong quartz/styles/base.scssvà tự viết bảng định dạng của riêng bạn trong quartz/styles/custom.scss.

Một số thành phần cũng có thể cung cấp kiểu dáng riêng của chúng! Ví dụ, quartz/components/Darkmode.tsxnhập kiểu dáng từ quartz/components/styles/darkmode.scss. Nếu bạn muốn tùy chỉnh kiểu dáng cho một thành phần cụ thể, hãy kiểm tra lại định nghĩa thành phần để xem kiểu dáng của thành phần đó được định nghĩa như thế nào.

Phong cách​

Phong cách