차크라 산문이 마침내 여기에 있습니다

저는 Chakra UI의 열렬한 팬입니다. 몇 년 동안 사용해 왔으며, 모든 것을 시작하고 진행하는 것이 매우 빠르기 때문에 기본 웹 사이트를 구축할 때 사용합니다.

문제는 TinaCMS과 같은 것을 사용하거나 Markdown은 콘텐츠가 표준 요소로 구문 분석되는 것입니다(예: <h1>) Chakra는 모든 스타일을 재정의하고 <Heading as="h1">를 사용할 것으로 예상합니다. 모든 스타일을 수동으로 재정의하거나 html을 전달하고 Chakra 특정 구성 요소를 다시 보내는 두 가지 옵션이 있습니다.

차크라 산문 소개

내 사이트가 읽을 때 약간 변경되었고, 사이트의 간격이 적당하고, 크기가 변경되었으며, 읽기 경험이 훨씬 더 좋아졌다는 것을 눈치채셨을 것입니다. 이는 핵심 유지 관리자 중 하나( https://github.com/nikolovlazar/chakra-ui-prose )의 새 패키지 때문이며, 이를 통해 <Prose> 구성 요소를 사용하여 사이트에서 Prose를 구현할 수 있습니다.

차크라 산문을 구현하는 방법

Chakra Prose를 추가하려면 먼저 패키지를 설치해야 합니다.

yarn add @nikolovlazar/chakra-ui-prose
# or
npm i @nikolovlazar/chakra-ui-prose

패키지를 설치하면 Chakra UI 애플리케이션 구성을 시작할 준비가 된 것입니다. 사용자 지정 테마가 없는 경우 Chakra documentation에서 자세히 읽을 수 있는 테마를 만들어야 하지만 기본 테마의 예는 다음과 같습니다.

/ theme.js
// 1. Import extend theme
import { extendTheme } from '@chakra-ui/react';
// 2. extend the theme
const theme = extendTheme({})
export default theme;

그런 다음 이것을 가져와서 Next.js의 ChakraProvider에 전달할 수 있습니다. 이것은 _app.js에 있으며 다음과 같이 표시됩니다.

import { ChakraProvider } from '@chakra-ui/react';
import theme from './theme';
<ChakraProvider theme={theme}>
  <Component {...pageProps} />
</ChakraProvider>

Chakra Prose를 추가하려면 사용자 지정 테마에 추가해야 합니다. 먼저 withProse를 가져온 다음 다음과 같이 extendTheme에 추가해야 합니다.

import { extendTheme } from '@chakra-ui/react';
import { withProse } from '@nikolovlazar/chakra-ui-prose';
const theme = extendTheme(
    { config },
    withProse())

export default theme;

이제 응용 프로그램을 사용할 준비가 되었으며 이를 사용하기 위해 웹 사이트 또는 응용 프로그램의 일부를 <Prose> 구성 요소로 래핑할 수 있습니다. 물론 이것 외에도 Chakra가 제공하는 것과 동일한 확장을 사용하여 산문 테마를 사용자 정의하도록 확장할 수 있습니다. 예를 들면 다음과 같습니다.

withProse({
        baseStyle: {
            pre: {
                fontFamily: 'monospace',
                fontSize: '1rem',
                lineHeight: '1.5',
                whiteSpace: 'pre-wrap',
                wordBreak: 'break-word',
                wordWrap: 'break-word',
                overflowWrap: 'break-word',
                overflow: 'auto',
                padding: '0.2rem 0.4rem',
                margin: '0.2rem 0.4rem',
                borderRadius: '0.5rem',
                border: '1px solid #ddd',
                backgroundColor: '#000000',
                border: '1px solid #ccc',
                transition: 'all 0.2s ease-in-out',
                color: '#fff'
            }
        }
    })

이렇게 하면 원본 블로그 게시물 전체에서 본 사용자 지정 코드 블록이 생성됩니다. 좋은 표준화된 경험을 얻기 위해 작성해야 하는 코드의 양을 실제로 줄여주기 때문에 그들이 마침내 이것에 대한 레시피를 만들어서 너무 기쁩니다.