Кастомизация Quartz

Перед этим выполните:

Пример стиля для сайта на Quartz: be-far’s Digital Garden

Смена цвета фона

В файле quartz/styles/custom.scss добавим другой фон в ночном режиме:

@use "./base.scss";
 
[saved-theme=dark] code[data-theme*=\ ] {
    color: var(--shiki-dark);
    background-color: #3B4252;
}

Layout

Смена основных цветов

В файле quartz.config.ts сменис цветовую тему для блоков кода в дневном и ночном режимах:

const config: QuartzConfig = {
  configuration: {
	  colors: {
        lightMode: {
		  ...
        },
        darkMode: {
          light: "#2e3440",
          lightgray: "#70778f",
          gray: "#646464",
          darkgray: "#cdd6f4",
          dark: "#ebebec",
          secondary: "#a6e3a1",
          tertiary: "#89dceb",
          highlight: "rgba(143, 159, 169, 0.15)",
          textHighlight: "#b3aa0288",
        },
      },
      ...
  },
  ...
}

SyntaxHighlighting

Themes | Shiki - темы для блоков кода в Quartz

Смена отображения блоков кода

В файле quartz.config.ts давайте сменим цвета в ночном режиме:

const config: QuartzConfig = {
  plugins: {
    transformers: [
	  ...
	  Plugin.SyntaxHighlighting({
        theme: {
          light: "light-plus",
          dark: "dark-plus",
        },
        keepBackground: false,
      }),
	  ...
    ],
  },
}

Смена основных данных сайта

В файле quartz.config.ts сменим язык и доменное имя:

const config: QuartzConfig = {
  configuration: {
    locale: "ru-RU",
    baseUrl: "quartz.argiago.ru",
    ...
  },
  ...
}

Configuration

Internationalization

В файле quartz.layout.ts заменим ссылки на наши страницы:

import { PageLayout, SharedLayout } from "./quartz/cfg"
import * as Component from "./quartz/components"
 
export const sharedPageComponents: SharedLayout = {
  head: Component.Head(),
  header: [],
  afterBody: [],
  footer: Component.Footer({
    links: {
      GitHub: "https://github.com/erritis/quartz"
    },
  }),
}
...

Замена заголовка на логотип

Создание логотипа

Создаем файл quartz/components/Logo.tsx и подставляем содержимое своих svg файлов с сохранением id:

import { pathToRoot } from "../util/path"
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
import { classNames } from "../util/lang"
 
const light = (
  <svg
    id="logo-light"
  ></svg>
)
 
const dark = (
  <svg
    id="logo-dark"
  ></svg>
)
 
const Logo: QuartzComponent = ({ fileData, displayClass }: QuartzComponentProps) => {
  const baseDir = pathToRoot(fileData.slug!)
  return (
    <a class={classNames(displayClass, "page-logo")} href={baseDir}>
      {light}
      {dark}
    </a>
  )
}
 
Logo.css = `
:root[saved-theme="dark"] .page-logo {
  & > #logo-light {
    display: none;
  }
  & > #logo-dark {
    display: inline;
  }
}
:root .page-logo {
  & > #logo-light  {
    display: inline;
  }
  & > #logo-dark  {
    display: none;
  }
}
`
 
export default (() => Logo) satisfies QuartzComponentConstructor

Добавляем в список компонентов в файле quartz/components/index.ts:

import Logo from "./Logo"
 
export {
  Logo,
  ...
}

Регистрация компонента

В файле quartz.layout.ts заменяем отображение заголовка на логотип:

Component.PageTitle() -> Component.Logo()

import { PageLayout, SharedLayout } from "./quartz/cfg"
import * as Component from "./quartz/components"
 
export const defaultContentPageLayout: PageLayout = {
  left: [
    Component.Logo()
  ]
}
 
export const defaultListPageLayout: PageLayout = {
  left: [
    Component.Logo()
  ]
}
...

Creating your own Quartz components

Явная публикация

В файле quartz.config.ts добавим явную публикацию:

const config: QuartzConfig = {
  configuration: {
    ignorePatterns: [".obsidian", "!(Media)**/!(*.md)", "!(*.md)"],
    ...
  },
  plugins: {
    filters: [Plugin.ExplicitPublish()],
    ...
  },
  ...
}

Теперь только заметки со свойством publish: true - будут отображаться в итоговом варианте.

"!(Media)**/!(*.md)", "!(*.md)" - Для копирования медиа файлов только из одной конкретной папки. В моем случае это излишне.

ExplicitPublish

Private Pages

Настройка корректого отображения заметок

В файле quartz.config.ts включаем вставки html:

const config: QuartzConfig = {
  plugins: {
    transformers: [
	  ...
      Plugin.ObsidianFlavoredMarkdown({ enableInHtmlEmbed: true }),
	  ...
    ],
  },
  ...
}

Настройка корневого отображения пути на сайте

В файле quartz.layout.ts добавим имя корневого элемента (по умолчанию: D2B3FFA6;">Home):

import { PageLayout, SharedLayout } from "./quartz/cfg"
import * as Component from "./quartz/components"
 
// components for pages that display a single page (e.g. a single note)
export const defaultContentPageLayout: PageLayout = {
  beforeBody: [
    Component.Breadcrumbs({
      rootName: "Главная"
    }),
    ...
  ],
  ...
}
 
// components for pages that display lists of pages  (e.g. tags or folders)
export const defaultListPageLayout: PageLayout = {
  beforeBody: [
	  Component.Breadcrumbs({ rootName: "Главная" }),
	  ...
  ],
  ...
}

Breadcrumbs

Оптимизация загрузки

В файле quartz.config.ts настроим ленивую загрузку:

const config: QuartzConfig = {
  plugins: {
    transformers: [
	  ...
      Plugin.CrawlLinks({ markdownLinkResolution: "shortest", lazyLoad: true }),
	...
    ],
  },
  ...
}

lazyLoad: Если FFB8EBA6;">true, добавляет ленивую загрузку к элементам ресурсов (img, video и т. д.) для повышения производительности загрузки страницы. По умолчанию FFB8EBA6;">false.

CrawlLinks

Далее можно приступить к настройке развертывания Quartz.

Проводник