들어가면서
위 기능으로, 여러분은 페이지별로 커스터마이제이션을 할 수 있습니다. 대부분의 경우, 전체 사이트에 적용하는 것이 자연스럽고, 쉽고, 관리하기 편합니다. 우선 어드민 페이지를 보시고, 필요한 상황인지 확인해주세요 
아래 페이지들이 큰 도움이 될거예요~!
가능한 모든 key 가 나열된 예시
adsense: false
backgroundColor: "#123456"
bottomNavigator: null
channeltalkId: false
cleanUrl: "/your/clean-url"
description: "이 페이지의 description 태그값"
disqus: false
facebookCustomerChatId: false
fontColor: "rgb(255,255,255)"
fonts:
defaultFont: "Roboto"
headerFont: "Gothic A1"
gotoTop:
show: true
fitToScreen: false
align: "left"
alignPixel: 0
bottom: 16
hideBreadcrumbs: false
hideCollectionProperties: true
hideCollectionSearch: true
hideFooter: false
hidePageLinkIndicator: true
hideSearch: false
hideNotionTitle: true
kakaoChannel:
href: "카카오 채널 주소"
bottom: 20
fitToScreen: false
overlay: false
pageMaxWidth: 900
pagePassword: false
pageviewType: "default"
scrollProgressBar:
show: true
color: "#123A45"
showPageview: true
showShareButton: false
showThemeButton: true
theme: "custom"
title: "이 페이지의 title 태그값"
topNavigator: null
imageBorderRadius: 16
calloutBorderRadius: 16
galleryBorderRadius: 16
YAML
복사
필요한 key 만 선언하는것도 물론 가능합니다(추천합니다)
코드 블럭은 페이지가 그려질 때, 동작합니다. 그러니, 코드 블럭이 동작하도록하기 위해서는 페이지에 방문하는 것이 필요합니다.
사용방법
문법과 의미
adsense
•
값: false
•
해당 페이지에서 adsense 를 끕니다.
•
Google Adsense(구글 광고) 를 활성화하지 않았다면, 의미 없는 옵션입니다.backgroundColor
•
값: 색깔 형식
•
값은 쌍따옴표로 감싸야 합니다.
•
값에 설정된 색으로 해당 페이지의 배경색을 변경합니다.
•
bottomNavigator
•
값: null
•
해당 페이지에서 하단 메뉴바 를 숨깁니다.
channeltalkId
•
값: your-plugin-key 혹은 false.
•
채널톡 문서를 먼저 확인해주세요. •
your-plugin-key 라면 해당 페이지의 채널톡을 활성화하고,
•
false 라면 해당 페이지의 채널톡을 비활성화합니다.
cleanUrl
•
값: valid/clean-url
•
클린 URL 문서를 먼저 확인해주세요.•
해당 페이지에 '값'에 해당하는 클린 URL 을 생성합니다.
description
•
값: SEO를 위해 페이지를 설명하기 위한 50 ~ 160 글자
•
SEO 가이드 를 참고해 주세요.disqus
•
값: your-short-name 혹은 false
•
Disqus(디스커스) 문서를 먼저 확인해주세요.•
your-short-name 라면 해당 페이지의 disqus 를 활성화하고,
•
false 라면 해당 페이지의 disqus 를 비활성화합니다.
facebookCustomerChatId
•
값: your-facebook-chat-id 혹은 false
•
을 먼저 확인해주세요.
•
your-facebook-chat-id 라면 해당 페이지의 페북 채팅 플러그인을 활성화하고,
•
false 라면 해당 페이지의 페북 채팅 플러그인를 비활성화합니다.
floatFirstTOC
•
값: left 혹은 right
•
값에 따라 페이지의 첫번째 TOC 블럭을 좌측, 혹은 우측에 고정합니다.
•
fontColor
•
값: 색깔 형식
•
값은 쌍따옴표로 감싸야 합니다.
•
값에 설정된 색으로 해당 페이지의 배경색을 변경합니다.
•
fonts
•
•
gotoTop
•
•
해당 페이지의 페이지 맨 위로 버튼 을 변경할 수 있습니다.
•
align
◦
left 혹은 right
•
alignPixel
◦
align 쪽의 좌우 여백(마진), 숫자
•
bottom
◦
아래쪽 여백(마진), 숫자
•
fitToScreen
◦
true 혹은 false
◦
위치 기준을 보이는 스크린으로 할 지, 아닐 지 입니다.
•
show
◦
true 혹은 false
◦
보이거나 숨깁니다.
hideBreadcrumbs
•
값: true 혹은 false
•
해당 페이지의 네비게이션 바를 보이거나 숨깁니다.
•
hideCollectionProperties
•
값: true 혹은 false
•
데이터베이스 상세 페이지에서 속성을 숨기거나 보여줍니다.
•
hideCollectionSearch
•
값: true 혹은 false
•
해당 페이지에 있는 데이터베이스의 검색 부분을 보이거나 숨깁니다.
•
hideCollectionViewList
•
값: true 혹은 false
•
해당 페이지에 있는 데이터베이스의 뷰 목록을 숨김 처리 합니다.
•
hideFooter
•
값: true 혹은 false
•
해당 페이지 하단의 Made with Oopy 를 보이거나 숨깁니다.
•
hideNotionTitle
•
값: true 혹은 false
•
해당 페이지의 노션 페이지 제목을 숨깁니다.
hidePageLinkIndicator
•
값: true 혹은 false
•
다음 컴포넌트의 화살표 아이콘을 보이거나 숨깁니다.
◦
페이지로의 링크
◦
링크된 데이터베이스에서, 원본 데이터베이로의 링크
•
링크된 데이터베이스에서는 원본으로의 링크도 비활성화 됩니다.
•
hideSearch
•
값: true 혹은 false
•
해당 페이지의 네비게이션 바에서 검색 항목을 보이거나 숨깁니다.
•
ignoreMainOgImage
•
값: true 혹은 false
•
•
때로, app.oopy.io/home 에 공유 이미지를 설정했지만, 해당 노션 페이지에 있는 첫번째 이미지 등으로 ogImage 가 알아서 선언되길 원할 때 사용합니다. 기본 값은 false 이니, 필요한 페이지에만 true 로 사용하세요.
kakaoChannel
•
•
kakaoChannel: null 로 설정 시 카카오 채널 설정이 없는 것과 동일합니다. 이 경우 href 등의 하위 키가 없어야 함에 유의하세요.
•
align
◦
left 혹은 right
•
href
◦
카카오 아이콘 클릭시 연결할 주소
•
fitToScreen
◦
true 혹은 false
◦
위치 기준을 보이는 스크린으로 할 지, 아닐 지 입니다.
pageMaxWidth
•
값: 필요한 숫자 (in pixel), 예를 들어 900
•
페이지의 값의 숫자로 제한합니다.
ogImage
•
값: 페이지 공유 시 썸네일로 사용될 이미지 주소 (쌍따옴표로 감싸주세요)
•
해당 페이지의 썸네일 이미지를 변경합니다.
overlay
•
값: snow, maple, cherry, leaf 혹은 false
•
해당 페이지에 계절별 특수 효과를 보여줍니다.
•
pagePassword
•
값: false
•
•
코드 블럭을 통한 비밀번호의 설정은 불가능합니다.
pageviewType
•
값: default, round 혹은 stack
•
해당 페이지의 페이지뷰 카운트의 종류를 설정합니다.
•
showPageview 가 활성화 되어 있어야 동작합니다.
•
scrollProgressBar
•
show
◦
값: true 혹은 false
•
color
◦
값: 색깔 형식
•
해당 페이지의 스크롤 프로그레스바를 위의 값으로 설정합니다.
•
showPageview
•
값: true 혹은 false
•
해당 페이지에서 페이지뷰 카운트를 활성화/비활성화 합니다.
•
showShareButton
•
값: true 혹은 false
•
상단 네비게이션 바에서 공유 컴포넌트를 보이거나 숨깁니다.
•
showThemeButton
•
값: true 혹은 false
•
상단 네비게이션 바에서 테마 선택 컴포넌트를 보이거나 숨깁니다.
•
title
•
값: SEO를 위해서 페이지를 설명하기 위한 64 글자 이하의 값
•
SEO 가이드 를 참고해 주세요.theme
•
값: light, dark 혹은 custom
•
해당 페이지의 테마를 변경합니다.
•
•
topNavigator
•
값: null
•
해당 페이지에서 상단 메뉴바 를 숨깁니다.
imageBorderRadius & calloutBorderRadius & galleryBorderRadius
•
값: 0 이상 숫자
•
이미지, 콜아웃, 갤러리 & 보드의 모서리를 둥글게 만듭니다.
•
값 형식
색깔 형식
1.
RGB 형식: rgb(255, 255, 255)
2.
HEX 형식: #123A56
폰트 이름 형식
•
사용가능한 폰트 리스트 : https://app.oopy.io/styles/fonts
"Gothic A1" 이 폰트의 이름입니다.