NotionNext 문서

Appearance

Hexo/Matery 테마 ​

이전 문서: Hexo/Matery 테마 게시일: 2023-6-27 마지막 편집: 2024-9-12 원래 분류: ⭐ 테마 매개변수

테마 색상 조정 ​

Matery 테마에서 내비게이션 바, 버튼, 태그 등의 색상을 조정하려면 아래처럼 설정할 수 있습니다. 다음 CSS는 Matery 테마의 보라색 계열을 무궁화색에 가까운 색상으로 바꾸는 예시입니다.

CSS
/* Navigation bar color */
#sticky-nav.bg-indigo-700 {
    background-color: #9c26b0;
}

/* Dark-mode navigation bar color */
.dark div#sticky-nav {
 background-color: red;
}

/* Home page start-reading button */
.glassmorphism.w-40.z-40 {
    background-color: #9c26b0;
    border: none;
}

/* Tag color */
a.cursor-pointer.bg-indigo-700 {
    background-color: #9c26b0;
}

/* Mobile sidebar */
#side-bar>.bg-indigo-700 {
    background-color: #9c26b0;
}

/* Mobile sidebar menu */
nav div:hover,li:hover {
    background-color: #9c26b0!important;
}

/* Floating menu */
.right-2 .bg-indigo-700 {
    background-color: #9c26b0;
}

/* Table-of-contents progress bar */
.h-4.bg-indigo-400 {
    background-color: #9c26b0;
}

/* Table-of-contents text highlight */
nav .text-green-500{
    color: #9c26b0;
}

/* Site footer */
footer.bg-indigo-700{
    background-color: #9c26b0;
}

/* Pagination button */
button.bg-indigo-700{
    background-color: #9c26b0;
}

/* Hide the publish time on article pages */
#article-wrapper > div.wow.fadeInUp.px-10 > section > div.flex.flex-wrap.gap-3.mt-5.text-sm > a {
  display: none;
}

/* Hide the publish time on article pages */
#article-wrapper > div.wow.fadeInUp.px-10 > section > div.flex.flex-wrap.gap-3.mt-5.text-sm > a {
  display: none;
}

/* Hide the update time on article pages */
#article-wrapper > div.wow.fadeInUp.px-10 > section > div.flex.flex-wrap.gap-3.mt-5.text-sm > span.whitespace-nowrap {
  display: none;
}

/* Hide the page-view count on article pages */
#article-wrapper .busuanzi_container_page_pv {
  display: none ！important;
}

/* Hide word count on article pages */
#wordCountWrapper > span:nth-child(1){
 display: none !important;
}

/* Hide reading time on article pages */
#wordCountWrapper > span:nth-child(2){
 display: none;
}

미리보기 효과

미리보기 효과

위 내용을 NOTION_CONFIG의 GLOBAL_CSS 항목에 그대로 입력하면 됩니다. 더 많은 설정 방법은 관련 설정 문서를 참고하세요.

홈페이지 환영 문구 ​

Hexo와 Matery 테마의 홈페이지는 동적 타이핑 효과로 환영 문구를 표시할 수 있습니다.

Untitled

Untitled

설정 방법 ​

blog.config.js의 GREETING_WORDS 설정을 수정합니다.

JavaScript
// Since version 3.14.1, greeting text is configured here.
// Separate multiple phrases with English commas to enable the typing effect.
GREETING_WORDS: process.env.NEXT_PUBLIC_GREETING_WORDS || 'Hi, I am a developer,Hi, I am a worker,Hi, I love good food,Welcome to my blog',

예를 들어 아래처럼 바꾸면 사이트 안내 문구가 Hello, welcome to my website, I am Alex, I am a designer 순서로 표시됩니다.

JavaScript
// Since version 3.14.1, greeting text is configured here.
// Separate multiple phrases with English commas to enable the typing effect.
GREETING_WORDS: process.env.NEXT_PUBLIC_GREETING_WORDS || 'Hello, welcome to my website,I am Alex,I am a designer',

주의 사항 ​

  1. 작은따옴표 안의 내용만 수정하세요. 형식을 임의로 바꾸거나 작은따옴표 묶음을 여러 개 추가하면 안 됩니다. 잘못된 예:
JavaScript
// Changed to a bracket array ['xx','xx','xx']
GREETING_WORDS:  ['Hi, I am a developer,','Hi, I am a worker,','Welcome to my blog']

// Changed to multiple quoted groups 'xx','xx','xx'
GREETING_WORDS:  process.env.NEXT_PUBLIC_GREETING_WORDS || 'Hi, I am a developer,','Hi, I am a worker,','Welcome to my blog'
  1. 여러 문장을 출력하려면 영문 쉼표를 구분자로 사용하세요. 한국어 쉼표는 구분자가 아니라 일반 텍스트로 인식됩니다. 올바른 예:
JavaScript
'Phrase one,Phrase two,Phrase three'

잘못된 예: ,와 ，는 서로 다른 문자입니다.

JavaScript
'Phrase one，Phrase two，Phrase three'

원문 링크 ​

https://docs.tangly1024.com/article/notion-next-greetings