Skip to main content

Cấu hình

Quartz được thiết kế để có thể cấu hình cực kỳ dễ dàng, ngay cả khi bạn không biết bất kỳ mã hóa nào. Hầu hết các cấu hình bạn cần có thể được thực hiện chỉ bằng cách chỉnh sửa quartz.config.tshoặc thay đổi bố cục trong quartz.layout.ts.

Nếu bạn chỉnh sửa cấu hình Quartz bằng trình soạn thảo văn bản có hỗ trợ ngôn ngữ TypeScript như VSCode, nó sẽ cảnh báo bạn khi bạn mắc lỗi trong cấu hình, giúp bạn tránh các lỗi cấu hình!

Cấu hình của Quartz có thể được chia thành hai phần chính:

quartz.config.ts

const config: QuartzConfig = {
configuration: { ... },
plugins: { ... },
}

Cấu hình chung

Phần cấu hình này liên quan đến bất kỳ thứ gì có thể ảnh hưởng đến toàn bộ trang web. Sau đây là danh sách phân tích tất cả những thứ bạn có thể cấu hình:

  • pageTitle: tiêu đề của trang web. Điều này cũng được sử dụng khi tạo Nguồn cấp RSS cho trang web của bạn.
  • enableSPA: có nên bật Định tuyến SPA trên trang web của bạn hay không.
  • enablePopovers: có nên bật chế độ xem trước cửa sổ bật lên trên trang web của bạn hay không.
  • analytics: những gì cần sử dụng để phân tích trên trang web của bạn. Các giá trị có thể là
    • null: không sử dụng phân tích;
    • { provider: 'google', tagId: '<your-google-tag>' }: sử dụng Google Analytics;
    • { provider: 'plausible' }(được quản lý) hoặc { provider: 'plausible', host: '<your-plausible-host>' }(tự lưu trữ): sử dụng Plausible ;
    • { provider: 'umami', host: '<your-umami-host>', websiteId: '<your-umami-website-id>' }: sử dụng Umami ;
    • { provider: 'goatcounter', websiteId: 'my-goatcounter-id' }(được quản lý) hoặc { provider: 'goatcounter', websiteId: 'my-goatcounter-id', host: 'my-goatcounter-domain.com', scriptSrc: 'https://my-url.to/counter.js' }(tự lưu trữ) sử dụng GoatCounter ;
    • { provider: 'posthog', apiKey: '<your-posthog-project-apiKey>', host: '<your-posthog-host>' }: sử dụng Posthog ;
    • { provider: 'tinylytics', siteId: '<your-site-id>' }: sử dụng Tinylytics ;
    • { provider: 'cabin' }hoặc { provider: 'cabin', host: 'https://cabin.example.com' }(tên miền tùy chỉnh): sử dụng Cabin ;
  • locale: được sử dụng cho định dạng i18n và ngày tháng
  • baseUrl: điều này được sử dụng cho sơ đồ trang web và nguồn cấp RSS yêu cầu URL tuyệt đối để biết 'trang chủ' chính thức của trang web của bạn nằm ở đâu. Đây thường là URL được triển khai của trang web của bạn (ví dụ: quartz.jzhao.xyzđối với trang web này). Không bao gồm giao thức (tức là https://) hoặc bất kỳ dấu gạch chéo nào ở đầu hoặc cuối.
    • Điều này cũng nên bao gồm đường dẫn phụ nếu bạn đang lưu trữ trên các trang GitHub mà không có tên miền tùy chỉnh. Ví dụ: nếu kho lưu trữ của tôi là jackyzha0/quartz, các trang GitHub sẽ triển khai đến https://jackyzha0.github.io/quartzbaseUrlsẽ là jackyzha0.github.io/quartz.
    • Xin lưu ý rằng Quartz 4 sẽ tránh sử dụng tính năng này càng nhiều càng tốt và sử dụng URL tương đối bất cứ khi nào có thể để đảm bảo trang web của bạn hoạt động bất kể bạn triển khai nó ở đâu .
  • ignorePatterns: danh sách các mẫu glob mà Quartz nên bỏ qua và không tìm kiếm khi tìm kiếm các tệp bên trong thư contentmục. Xem các trang riêng tư để biết thêm chi tiết.
  • defaultDateType: có nên sử dụng ngày tạo, ngày sửa đổi hay ngày xuất bản làm ngày mặc định để hiển thị trên các trang và danh sách trang hay không.
  • theme: cấu hình giao diện của trang web.
    • cdnCaching: Nếu true(mặc định), hãy sử dụng Google CDN để lưu trữ phông chữ. Điều này thường sẽ nhanh hơn. Tắt ( false) nếu bạn muốn Quartz tải xuống phông chữ để chúng trở nên độc lập.
    • typography: nên sử dụng phông chữ nào. Bất kỳ phông chữ nào có sẵn trên Google Fonts đều có thể sử dụng ở đây.
      • header: Phông chữ sử dụng cho tiêu đề
      • code: Phông chữ cho trích dẫn nội tuyến và trích dẫn khối.
      • body: Phông chữ cho mọi thứ
    • colors: kiểm soát chủ đề của trang web.
      • light: nền trang
      • lightgray: biên giới
      • gray: liên kết đồ thị, đường viền nặng hơn
      • darkgray: văn bản chính
      • dark: văn bản tiêu đề và biểu tượng
      • secondary: màu liên kết, nút đồ thị hiện tại
      • tertiary: trạng thái di chuột và các nút đồ thị đã truy cập
      • highlight: nền liên kết nội bộ, văn bản được tô sáng, các dòng mã được tô sáng
      • textHighlight: markdown đánh dấu nền văn bản được tô sáng

Các plugin

Bạn có thể coi plugin Quartz như một loạt các chuyển đổi trên nội dung.

quartz.config.ts

plugins: {
transformers: [...],
filters: [...],
emitters: [...],
}
  • Bản đồ biến đổi trên nội dung (ví dụ phân tích frontmatter, tạo mô tả)
  • Bộ lọc lọc nội dung (ví dụ lọc bản nháp)
  • Bộ phát giảm nội dung thừa (ví dụ: tạo nguồn cấp RSS hoặc các trang liệt kê tất cả các tệp có thẻ cụ thể)

Bạn có thể tùy chỉnh hành vi của Quartz bằng cách thêm, xóa và sắp xếp lại các plugin trong các trường transformers, filtersemitters.

Mỗi nút được sửa đổi bởi mọi bộ biến đổi theo thứ tự . Một số bộ biến đổi có vị trí nhạy cảm, vì vậy bạn có thể cần đặc biệt chú ý xem chúng có cần phải đến trước hay sau một số plugin khác không.

Bạn nên cẩn thận thêm plugin vào đúng mục tương ứng với loại plugin của nó. Ví dụ, để thêm plugin ExplicitPublish (một Filter ), bạn sẽ thêm dòng sau:

quartz.config.ts

filters: [ ... Plugin.ExplicitPublish(), ... ],

Để xóa một plugin, bạn phải xóa tất cả các lần xuất hiện của plugin đó trong quartz.config.ts.

Để tùy chỉnh plugin hơn nữa, một số plugin cũng có thể có cài đặt cấu hình riêng mà bạn có thể truyền vào. Nếu bạn không truyền vào cấu hình, plugin sẽ sử dụng cài đặt mặc định của nó.

Ví dụ, plugin Latex cho phép bạn truyền vào một trường chỉ định để renderEnginechọn giữa Katex và MathJax.

quartz.config.ts

transformers: [
Plugin.FrontMatter(), // use default options
Plugin.Latex({ renderEngine: "katex" }), // set some custom options
]

Một số plugin được tích hợp sẵn theo mặc định , nhưng vẫn còn nhiều plugin khác khả dụng. quartz.config.ts

Bạn có thể xem danh sách tất cả các plugin và tùy chọn cấu hình của chúng tại đây .

Nếu bạn muốn tạo plugin của riêng mình, hãy xem hướng dẫn tạo plugin tùy chỉnh .