Best practices for Publish themes

Obsidian 앱과 Obsidian Publish는 다른 컨텍스트입니다

Obsidian Publish는 Obsidian 앱과 공통 코드 및 UI 원칙을 공유하지만, 테마를 만들 때 고려해야 할 몇 가지 중요한 차이점이 있습니다. 명심해야 할 몇 가지 경험 법칙:

• 복잡한 선택자를 피하고 사용 가능한 CSS variables를 대신 사용하세요.
• Obsidian 앱에 특정한 CSS 선택자 및 규칙을 포함하지 마세요.
• 방문자가 빠르게 로드할 수 있도록 CSS 파일 크기를 작게 유지하세요.
• 브라우저 및 화면 크기 간의 호환성을 고려하세요.

앱별 및 Publish별 CSS 규칙

Obsidian 앱과 Obsidian Publish는 일부 공통 코드를 공유하지만, 대부분의 앱 테마는 Publish 컨텍스트에 없는 CSS 클래스를 대상으로 하도록 설계되었습니다. 이러한 이유로 불필요한 코드를 최소화하기 위해 Publish 테마를 처음부터 구축하는 것이 좋습니다.

파일 크기

Obsidian 앱 테마는 사용자 장치에 로컬로 저장되는 반면, Obsidian Publish 테마는 사용자가 사이트를 방문할 때마다 로드됩니다. 이러한 이유로 Obsidian Publish 테마는 파일 크기에 유의해야 합니다.

테마 파일을 작게 유지하면 스타일이 지정되지 않은 콘텐츠의 깜박임을 피하고 다양한 장치 및 인터넷 연결에서 더 빠르게 로드됩니다. 이상적으로 publish.css 파일은 가능한 한 작아야 합니다.

앱 컨텍스트에서는 base64 인코딩을 사용하여 CSS 파일에 글꼴과 이미지를 포함하는 것이 허용됩니다. Publish 컨텍스트에서는 방문자가 사이트에 액세스할 때 렌더링을 차단할 수 있는 더 큰 파일 크기(수 메가바이트)로 이어지는 경우 이 접근 방식을 피하는 것이 좋습니다.

브라우저 호환성

Publish 사이트 방문자는 새로운 CSS 기능과 호환되지 않는 이전 브라우저를 사용할 수 있습니다. 이러한 이유로 Publish 컨텍스트에서는 고급 CSS 기능을 보수적으로 사용하는 것이 좋습니다. 이는 최신 브라우저 기능을 지원하는 좁은 범위의 렌더링 엔진(최신 버전의 Chromium/Blink)을 대상으로 하는 Obsidian 앱 테마와 대조됩니다. caniuse.com을 검색하여 브라우저 전반에서 널리 사용할 수 있는 CSS 기능을 확인해 보세요.

작은 화면 및 모바일 장치

Obsidian Publish에는 기본적으로 두 개의 중단점이 있습니다:

중단점	장치	효과
1000px	태블릿	오른쪽 사이드바 숨김
750px	모바일	왼쪽 및 오른쪽 사이드바 숨김. 활성화된 경우 왼쪽 상단 모서리의 햄버거 메뉴를 통해 탐색 가능

CSS를 사용하여 이러한 장치를 대상으로 지정할 수 있습니다. @media 쿼리 외부에서 정의된 모든 규칙은 모든 장치에 적용됩니다.

@media screen and (min-width: 1000px) {
  /* ... 태블릿보다 큰 화면에 대한 규칙 및 변수 */
}
@media screen and (max-width: 1000px) {
  /* ... 태블릿 장치 및 더 작은 장치에 대한 규칙 및 변수 */
}
@media screen and (max-width: 750px) {
  /* ... 모바일 장치 및 더 작은 장치에 대한 규칙 및 변수 */
}