페이지 제목 바로 아래에 바로 코드상자를 만들게 되면, 우피는 그걸 먼저 읽어 들입니다
그런데 2가지로 쓸수있지요. html 이나 yaml
Yaml 명령어가 직관적이기 때문에 이걸 쓰시기를 추천드립니다.
아래는 쓸수있는 명령어 모음입니다.
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
CSS
복사
사용방법
문법과 의미
adsense
•
값: false
•
해당 페이지에서 adsense 를 끕니다.
•
: :
backgroundColor
•
값: 색깔 형식
•
값은 쌍따옴표로 감싸야 합니다.
•
값에 설정된 색으로 해당 페이지의 배경색을 변경합니다.
•
theme 이 custom 일 때만 동작합니다.
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
•
값: 색깔 형식
•
값은 쌍따옴표로 감싸야 합니다.
•
값에 설정된 색으로 해당 페이지의 배경색을 변경합니다.
•
theme 이 custom 일 때만 동작합니다.
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 의 색상 과 동일한 효과입니다.
•
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" 이 폰트의 이름입니다.