NotionNext 문서

Appearance

사이트 공지 ​

출처: 사이트 공지 발행일: 2023-5-25 최종 편집: 2024-1-31 원래 섹션: 사이트 설정 태그: NotionNext 요약: NotionNext는 3.10 이후 버전부터 사이트에 공지 영역을 붙이는 기능을 지원합니다. 이 기능은 3.14 버전에서 개선되었고, 모든 테마가 공지를 지원합니다.

NotionNext 3.10 이후 버전부터 사이트 공지를 지원합니다. 업데이트해서 사용해 보세요. 공지를 추가하면 사이트의 눈에 띄는 위치에 특정 페이지의 콘텐츠가 고정됩니다. 공지 내용은 텍스트, 비디오, 임베드 웹페이지 등이 될 수 있어 커스터마이즈 여지가 큽니다.

공지 효과 ​

최신 3.14.0 버전은 모든 테마에서 공지 표시를 지원하며, 효과는 다음과 같습니다.

Untitled

추가 방법 ​

전제 조건 ​

NotionNext를 최신 버전으로 업그레이드하세요. 업그레이드 가이드는 다음을 참고합니다.

NotionNext 업그레이드 가이드 | TANGLY's BLOG

NotionNext가 새 버전을 릴리스한 뒤 프로젝트를 업데이트하는 방법을 설명합니다.

권장 버전은 3.14.0보다 높습니다. 이 버전 이후 모든 테마가 공지 기능 표시를 지원합니다.

설정 ​

Type(유형)이 Notice인 페이지를 하나 추가하면 됩니다. 이 페이지는 유일해야 하며, 사이트에는 공지가 하나만 있을 수 있습니다.

Untitled

공지 내용 예시 ​

Untitled

특별 설명 ​

Notion에서 공지 텍스트는 기본적으로 왼쪽 정렬이지만, 공지로 표시될 때는 기본적으로 가운데 정렬됩니다.

Untitled

조정이 필요하면 테마 아래의 해당 Announcement.js에서 공지 스타일을 수정할 수 있습니다.

각 테마 아래에는 공지 컴포넌트가 있습니다

  • 관련 코드
HTML
<div className={className}>
    <section id='announcement-wrapper' className="dark:text-gray-300 border dark:border-black rounded-xl lg:p-6 p-4 bg-white dark:bg-hexo-black-gray">
        <div><i className='mr-2 fas fa-bullhorn' />{locale.COMMON.ANNOUNCEMENT}</div>
        {post && (<div id="announcement-content">
        <NotionPage post={post} className='text-center' />
    </div>)}
    </section>
</div>

원문 링크 ​

https://docs.tangly1024.com/article/notionnext-notice