활용 사례
home
회사 브랜딩
home
🕞

페이지별 YAML 코드 블럭 레퍼런스

들어가면서

페이지별 YAML 코드 블럭(페이지별 YAML 코드 블럭)으로 수정할 수 있는 수많은 옵션들이 있습니다. 이 페이지는 사용 가능한 옵션들을 정리한 페이지입니다.
위 기능으로, 여러분은 페이지별로 커스터마이제이션을 할 수 있습니다. 대부분의 경우, 전체 사이트에 적용하는 것이 자연스럽고, 쉽고, 관리하기 편합니다. 우선 어드민 페이지를 보시고, 필요한 상황인지 확인해주세요
아래 페이지들이 큰 도움이 될거예요~!

가능한 모든 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

값은 쌍따옴표로 감싸야 합니다.
값에 설정된 색으로 해당 페이지의 배경색을 변경합니다.
themecustom 일 때만 동작합니다.

bottomNavigator

값: null
해당 페이지에서 하단 메뉴바 를 숨깁니다.

channeltalkId

값: your-plugin-key 혹은 false.
채널톡 문서를 먼저 확인해주세요.
your-plugin-key 라면 해당 페이지의 채널톡을 활성화하고,
false 라면 해당 페이지의 채널톡을 비활성화합니다.

cleanUrl

값: valid/clean-url
클린 URL 문서를 먼저 확인해주세요.
해당 페이지에 '값'에 해당하는 클린 URL 을 생성합니다.

description

값: SEO를 위해 페이지를 설명하기 위한 50 ~ 160 글자

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

값은 쌍따옴표로 감싸야 합니다.
값에 설정된 색으로 해당 페이지의 배경색을 변경합니다.
themecustom 일 때만 동작합니다.

fonts

defaultFont
해당 페이지의 본문 글꼴을 변경합니다.
headerFont
해당 페이지의 제목 글꼴을 변경합니다.

gotoTop

https://app.oopy.io/styles페이지 맨 위로 버튼 설정과 내용이 같습니다.
해당 페이지의 페이지 맨 위로 버튼 을 변경할 수 있습니다.
align
left 혹은 right
alignPixel
align 쪽의 좌우 여백(마진), 숫자
bottom
아래쪽 여백(마진), 숫자
fitToScreen
true 혹은 false
위치 기준을 보이는 스크린으로 할 지, 아닐 지 입니다.
show
true 혹은 false
보이거나 숨깁니다.

hideBreadcrumbs

값: true 혹은 false
해당 페이지의 네비게이션 바를 보이거나 숨깁니다.
https://app.oopy.io/styles상단 메뉴 숨기기 와 동일한 효과입니다.

hideCollectionProperties

값: true 혹은 false
데이터베이스 상세 페이지에서 속성을 숨기거나 보여줍니다.
https://app.oopy.io/styles/collections페이지 내 데이터베이스 속성 숨기기와 동일한 효과입니다.

hideCollectionSearch

값: true 혹은 false
해당 페이지에 있는 데이터베이스의 검색 부분을 보이거나 숨깁니다.
https://app.oopy.io/styles/collections검색 기능 숨기기와 동일한 효과입니다.

hideCollectionViewList

값: true 혹은 false
해당 페이지에 있는 데이터베이스의 뷰 목록을 숨김 처리 합니다.
https://app.oopy.io/styles/collections데이터베이스 뷰 목록 숨기기 와 동일한 효과입니다.

hideFooter

값: true 혹은 false
해당 페이지 하단의 Made with Oopy 를 보이거나 숨깁니다.
https://app.oopy.io/styles우피 로고 숨기기 와 동일한 효과입니다.

hideNotionTitle

값: true 혹은 false
해당 페이지의 노션 페이지 제목을 숨깁니다.

hidePageLinkIndicator

값: true 혹은 false
다음 컴포넌트의 화살표 아이콘을 보이거나 숨깁니다.
페이지로의 링크
링크된 데이터베이스에서, 원본 데이터베이로의 링크
링크된 데이터베이스에서는 원본으로의 링크도 비활성화 됩니다.
https://app.oopy.io/styles/collections링크된 데이터베이스 화살표 아이콘 숨기기와 동일한 효과입니다.

hideSearch

값: true 혹은 false
해당 페이지의 네비게이션 바에서 검색 항목을 보이거나 숨깁니다.
https://app.oopy.io/styles검색 버튼 표시 와 동일한 효과입니다.

kakaoChannel

https://app.oopy.io/plugins카카오 채널 과 동일한 설정입니다.
kakaoChannel: null 로 설정 시 카카오 채널 설정이 없는 것과 동일합니다. 이 경우 href 등의 하위 키가 없어야 함에 유의하세요.
align
left 혹은 right
href
카카오 아이콘 클릭시 연결할 주소
fitToScreen
true 혹은 false
위치 기준을 보이는 스크린으로 할 지, 아닐 지 입니다.

pageMaxWidth

값: 필요한 숫자 (in pixel), 예를 들어 900
페이지의 값의 숫자로 제한합니다.

ogImage

값: 페이지 공유 시 썸네일로 사용될 이미지 주소 (쌍따옴표로 감싸주세요)
해당 페이지의 썸네일 이미지를 변경합니다.

overlay

값: snow, maple, cherry, leaf 혹은 false
해당 페이지에 계절별 특수 효과를 보여줍니다.
https://app.oopy.io/styles계절별 특수 효과 와 동일한 효과입니다.

pagePassword

값: false
코드 블럭을 통한 비밀번호의 설정은 불가능합니다.

pageviewType

값: default, round 혹은 stack
해당 페이지의 페이지뷰 카운트의 종류를 설정합니다.
showPageview 가 활성화 되어 있어야 동작합니다.
https://app.oopy.io/styles페이지뷰 카운트 와 동일한 효과입니다.

scrollProgressBar

show
값: true 혹은 false
color
해당 페이지의 스크롤 프로그레스바를 위의 값으로 설정합니다.
https://app.oopy.io/styles스크롤 프로그레스 와 동일한 효과입니다.

showPageview

값: true 혹은 false
해당 페이지에서 페이지뷰 카운트를 활성화/비활성화 합니다.
https://app.oopy.io/styles페이지뷰 카운트 와 동일한 효과입니다.

showShareButton

값: true 혹은 false
상단 네비게이션 바에서 공유 컴포넌트를 보이거나 숨깁니다.
https://app.oopy.io/styles공유 버튼 표시 와 동일한 효과입니다.

showThemeButton

값: true 혹은 false
상단 네비게이션 바에서 테마 선택 컴포넌트를 보이거나 숨깁니다.
https://app.oopy.io/styles테마 선택 버튼 와 동일한 효과입니다.

title

값: SEO를 위해서 페이지를 설명하기 위한 64 글자 이하의 값
SEO 가이드 를 참고해 주세요.

theme

값: light, dark 혹은 custom
해당 페이지의 테마를 변경합니다.
https://app.oopy.io/styles색상 과 동일한 효과입니다.
custom 일 경우, backgroundColorfontColor 옵션을 이용해 색을 설정할 수 있습니다.

topNavigator

값: null
해당 페이지에서 상단 메뉴바 를 숨깁니다.

imageBorderRadius & calloutBorderRadius & galleryBorderRadius

값: 0 이상 숫자
이미지, 콜아웃, 갤러리 & 보드의 모서리를 둥글게 만듭니다.
https://app.oopy.io/styles모서리 둥글게 효과 를 페이지별로 설정할 수 있습니다.

값 형식

색깔 형식

1.
RGB 형식: rgb(255, 255, 255)
2.
HEX 형식: #123A56

폰트 이름 형식

사용가능한 폰트 리스트 : https://app.oopy.io/styles/fonts
"Gothic A1" 이 폰트의 이름입니다.

이전