scrollProgressBar: # 페이지에 수평 스크롤 바를 표시합니다.
show: true
color: "#ac600d"
fonts: # 페이지의 글꼴 설정
headerFont: "Gmarket Sans"
defaultFont: "Gmarket Sans"
showPageview: true # 페이지 방문 횟수를 표시합니다.
hideCollectionSearch: true # 데이터베이스의 검색 바를 숨 깁니다.
pageMaxWidth: 1100 # 페이지의 최대 너비를 설정합니다(기본 Notion 값은 900입니다.).
imageBorderRadius: 12 # 이미지를 둥글게 만듭니다.
calloutBorderRadius: 16 # 콜아웃을 둥글게 만듭니다.
galleryBorderRadius: 16 # 갤러리를 둥글게 만듭니다.
gotoTop: # 페이지 맨 위로 이동하는 버튼을 추가합니다.
align: "left"
alignPixel: 12
bottom: 40
fitToScreen: false
show: true
YAML
복사
페이지 상단에 위치하면 무엇 보다 먼저 적용 된다.
붙여 넣기만 하고, 동기화는 하지 않는다.
페이지 상단에 위치
다음 두 코드 모두 페이지 상단에 붙여넣으세요. 보내는 지역에 따라 내용을 수정하세요.
<head>
<title> 몰디브 지역설명 | 트래브릭스 </title>
<meta name="robots" content="index, follow">
<meta name="title" content="몰디 | 가장 저렴하게 발권하기" />
<meta name="description" content="트래브릭스에서 항공권 가장 저렴하게 발권하세요.가장 저렴하고, 안전하게 발권하는법" />
<meta name="keywords" content="Koh Samui Ritz-Carlton, Ritz-Carlton Honeymoon, Koh Samui Honeymoon, Koh Samui Honeymoon, Honeymoon, Travelbics" />
<meta property="og:image" content="<https://i.postimg.cc/26BCsN1C/4.png>" />
</head>
HTML
복사
title: 페이지의 제목, 검색 결과에 표시되는 이름입니다.
content: 페이지의 요약입니다.
keywords: 검색어를 지정합니다. 그러나 더 이상 필요하지 않습니다.
og:image: 페이지가 소셜 미디어에서 공유될 때 표시되는 이미지입니다.
깔끔한 URL
Cleanurl : /local/usm/
YAML
복사
첫 번째 분류
지역: local
견적: travel
두 번째 분류
3개의 코드 또는 지역의 영문 이름을 적었지만 통일해야 합니다. 하지만 지금은 불가능합니다. 검색 결과에 이미 반영되었으므로 필요하지 않습니다.
3 코드: dps, eur, usm, bali
코드편집 정리
rel="noopener noreferrer"는 HTML 링크에서 사용되는 보안 속성입니다. target="_blank" 속성을 사용할 때 rel="noopener noreferrer"을 추가하면 새로 열린 페이지가 원래 페이지의 window.opener 속성에 악용되는 것을 방지하여 피싱 공격을 방지합니다.
<nav class="NavBar_navWrapper__23bE7"><a id="aboutLink" class="NavBar_navLink__1c-8Z" href="https://indifyco.notion.site/Hello-dzie-dobry-kumusta-d7f7ee03396845c9bba36a02f1a07e90" target="_blank" rel="noopener noreferrer">About</a><a class="NavBar_navLink__1c-8Z" href="#">Login</a><a class="TwitterFollow_buttonStyle__2U2om" href="https://twitter.com/indifyco" target="_blank" rel="noopener noreferrer"><img src="/siteIcons/twitter.png" alt="Twitter Icon"><span style="white-space:nowrap">Get Updates</span></a></nav>
이 명령어는 네비게이션 바입니다. "About", "Login", "Get Updates" 세 가지 링크가 있습니다. "About" 링크는 https://indifyco.notion.site/Hello-dzie-dobry-kumusta-d7f7ee03396845c9bba36a02f1a07e90 주소로 이동합니다. 이 링크를 클릭하면 새 탭에서 페이지를 엽니다(target="_blank") 그리고 열린 페이지가 원래 페이지의 window.opener 속성을 악용하지 못하도록 방지합니다(rel="noopener noreferrer"). "Login" 링크는 URL이 연결되어 있지 않습니다. "Get Updates" 링크는 https://twitter.com/indifyco 페이지로 이동합니다. 이 링크를 클릭하면 새 탭에서 페이지를 엽니다(target="_blank") 그리고 열린 페이지가 원래 페이지의 window.opener 속성을 악용하지 못하도록 방지합니다(rel="noopener noreferrer").
<button class="GoogleLogin_googleLoginButton__M1zKk"><img src="/loading/loader.gif" alt="loading spinner" class="GoogleLogin_loader__6OLTb" width="50"></button>
이것은 구글 로그인 버튼입니다. 버튼 안에 로딩 스피너 이미지가 있습니다. 이 버튼은 아마도 사용자 인증을 위해 구글 서비스를 사용하고 있을 것입니다.
페이지별 CODE 편집 모음
rel="noopener noreferrer"는 HTML 링크에서 사용되는 보안 속성입니다. target="_blank" 속성을 사용할 때 rel="noopener noreferrer"을 추가하면 새로 열린 페이지가 원래 페이지의 window.opener 속성에 악용되는 것을 방지하여 피싱 공격을 방지합니다.
<nav class="NavBar_navWrapper__23bE7"><a id="aboutLink" class="NavBar_navLink__1c-8Z" href="https://indifyco.notion.site/Hello-dzie-dobry-kumusta-d7f7ee03396845c9bba36a02f1a07e90" target="_blank" rel="noopener noreferrer">About</a><a class="NavBar_navLink__1c-8Z" href="#">Login</a><a class="TwitterFollow_buttonStyle__2U2om" href="https://twitter.com/indifyco" target="_blank" rel="noopener noreferrer"><img src="/siteIcons/twitter.png" alt="Twitter Icon"><span style="white-space:nowrap">Get Updates</span></a></nav>
이 명령어는 네비게이션 바입니다. "About", "Login", "Get Updates" 세 가지 링크가 있습니다. "About" 링크는 https://indifyco.notion.site/Hello-dzie-dobry-kumusta-d7f7ee03396845c9bba36a02f1a07e90 주소로 이동합니다. 이 링크를 클릭하면 새 탭에서 페이지를 엽니다(target="_blank") 그리고 열린 페이지가 원래 페이지의 window.opener 속성을 악용하지 못하도록 방지합니다(rel="noopener noreferrer"). "Login" 링크는 URL이 연결되어 있지 않습니다. "Get Updates" 링크는 https://twitter.com/indifyco 페이지로 이동합니다. 이 링크를 클릭하면 새 탭에서 페이지를 엽니다(target="_blank") 그리고 열린 페이지가 원래 페이지의 window.opener 속성을 악용하지 못하도록 방지합니다(rel="noopener noreferrer").
<button class="GoogleLogin_googleLoginButton__M1zKk"><img src="/loading/loader.gif" alt="loading spinner" class="GoogleLogin_loader__6OLTb" width="50"></button>
이것은 구글 로그인 버튼입니다. 버튼 안에 로딩 스피너 이미지가 있습니다. 이 버튼은 아마도 사용자 인증을 위해 구글 서비스를 사용하고 있을 것입니다.
::: danger
Preliminary Information
다음 텍스트는 예비 정보입니다.
:::
scrollProgressBar: # 페이지에 수평 스크롤 바를 표시합니다.
show: true
color: "#ac600d"
fonts: # 페이지의 글꼴 설정
headerFont: "Gmarket Sans"
defaultFont: "Gmarket Sans"
showPageview: true # 페이지 방문 횟수를 표시합니다.
hideCollectionSearch: true # 데이터베이스의 검색 바를 숨 깁니다.
pageMaxWidth: 1100 # 페이지의 최대 너비를 설정합니다(기본 Notion 값은 900입니다.).
imageBorderRadius: 12 # 이미지를 둥글게 만듭니다.
calloutBorderRadius: 16 # 콜아웃을 둥글게 만듭니다.
galleryBorderRadius: 16 # 갤러리를 둥글게 만듭니다.
gotoTop: # 페이지 맨 위로 이동하는 버튼을 추가합니다.
align: "left"
alignPixel: 12
bottom: 40
fitToScreen: false
show: true
YAML
복사
슬라이드 기능 추가
콜아웃을 만들고 첫 번째 줄에 oopy:slide를 입력하세요. 그러면 슬라이드를 꾸밀 수 있는 다음 YAML 명령어 코드를 붙여넣으세요.
type: "crossfade" # (Pro plan only) The animation effect
YAML
복사
슬라이드 기능 관련 명령어
type: "crossfade" # Pro 플랜 전용) 애니메이션 효과가 크로스페이드로 적용됩니다.
speed: 1000 # 슬라이드가 넘어가는데 걸리는 시간입니다. 기본값: 1000 (ms, 밀리세컨드)
ratio: 5.53 # 슬라이드 너비 : 슬라이드 높이 비율을 지정합니다. 기본값: 2.76 (708px : 256px)
full: false # 슬라이드를 화면에 꽉 차도록 합니다. full 옵션이 true 일때도 ratio는 유지됩니다. 슬라이드가 컬럼이나 토글에 들어가는 경우 해당 옵션은 동작하지 않습니다. 기본값: false
autoplay:
period: 6000 # 슬라이드가 자동으로 넘어가기까지 걸리는 시간입니다. 자동 재생을 원하지 않는다면 값을 0으로 주세요!
indicator: # 슬라이드 아래에 나타나는 이동을 위한 점들을 의미합니다.
show: true # 점들을 숨기려면 값을 false로 변경하세요
color: "#6196FF" # 현재 보이는 슬라이드에 대응되는 점의 색깔입니다. 기본값: #6196FF
borderRadius: 16 # 슬라이드의 모서리를 둥글게 하는 값입니다. 기본값: 16
backgroundColor: "transparent" # 슬라이드의 배경화면 색상을 지정합니다. *) 배경을 투명색으로 사용하려면 "transparent" 를 입력하세요.
YAML
복사
<head>
<style>
.page_cover, .width.paddig:first-of-type {
display: none !important;
.header_logo, .width.padding:first-of-type {
display: none !important;
.header_menu, .width.padding:first-of-type {
display: none !important;
.notion-video-block, .palytype: autoplay .loop .muted {
}}}}
</style>
</div></div>
<body>
<div data-block-id="2f17c7b5-6dc2-454c-b6b3-9e7d7d1ff37d" class="notion-video-block css-1aih653">
<notion-video-block muted autoplay loop>
</notion-video-block>
</div>
</body>
Dart
복사
코드연습
<head>
<meta charset="UTF-8">
<title>트래브릭스 여행사</title>
<meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="og:image" content="/oopy_logo_horizontal.png"/>
</head>
<body>
<div style="position: relative; overflow: hidden;">
<div style="
max-width: 100%;
width: 82vw;
height: 27vw;
margin: 0 auto;
position: absolute;
left: 50%;
top: 10px;
transform: translateX(-50%);
">
</body>
CSS
복사
video: {
type: external,
external: {
url: "https://player.vimeo.com/video/839092866?badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture"
width: 100%;
text-align: absolute;
margin: 0px auto;
.video {
}
}
}
JavaScript
복사
아래문구는 개별 상품 페이지를 노션 페이지에 embed 시키는 . 화면입니다.
개별 화면 소스
<head>
<style>
.page_cover, .width.padding:first-of-type {
display: none !important;
}
</style>
<section class="">
<header class="">
<div class="header_logo"></div>
<div class="header_menu"></div>
<header>
<video></video>
<div class="wrap"></div>
<div class="info"></div>
<div class="sns"></div>
</section>
<video url="https://player.vimeo.com/video/839092866" muted autoplay loop></video>
<video {
...
width : 100%;
height : 100vh;
object-fit: cover;
}>
<header>
<h2 class="logo"><i class="fas fa-gamepad"></i> Game</h2>
<div class="header_menu">
<header> {
z-index: 1000;
}
HTML
복사
아래는 동영상이 있을때로.. 유튜브 동영상은 이렇 게 하면 안된다.
(주) 트래브릭스
<div data-block-id="2f17c7b5-6dc2-454c-b6b3-9e7d7d1ff37d" class="notion-video-block css-1aih653">
<div class="notion-video-block css-1aih653">
</div></div>
아래 명령어는 비디오가 상단에 들어가긴하나 전체화면이 아닌 일반 사이즈, 자동 플레이는 안됨
<body>
<div style="display:flex"><div class="notion-cursor-default" style="position:relative;overflow:hidden;flex-grow:1"><div style="position:relative;cursor:pointer"><div style="position:relative"><video playsinline="" controls="" controlslist="" preload="metadata" src="https://oopy.lazyrockets.com/api/v2/notion/fileUrl?src=https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F894cd231-a030-4df1-ae83-a8a079c43b9e%2F0621_%25E1%2584%2587%25E1%2585%25A1%25E1%2586%25AF%25E1%2584%2585%25E1%2585%25B5%25E1%2584%258C%25E1%2585%25B2%25E1%2584%2586%25E1%2585%25A6%25E1%2584%258B%25E1%2585%25B5%25E1%2584%2585%25E1%2585%25A1%25E1%2584%2589%25E1%2585%25B5%25E1%2586%25AF.mov&blockId=2f17c7b5-6dc2-454c-b6b3-9e7d7d1ff37d#t=0.0001" class="css-1i5vnki"></video><div class="css-cth5lx"><div style="position:relative;height:70px;width:70px;border-width:3px;border-style:solid;border-color:rgb(51, 51, 51);border-radius:70px"><div style="position:absolute;left:50%;top:50%;transform:translate(-30%, -50%);height:0px;width:0px;border-style:solid;border-color:transparent rgb(51, 51, 51);border-width:16.1px 0px 16.1px 24.5px"></div></div></div></div></div></div></div></div>
<div data-block-id="2f17c7b5-6dc2-454c-b6b3-9e7d7d1ff37d" class="notion-video-block css-1aih653">
<div class="css-cth5lx">
<notion-video-block muted autoplay loop>
</notion-video-block>
</div></div>
</body>
HTML
복사
<head>
<meta charset="UTF-8">
<title>트래브릭스 여행사</title>
<meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="og:image" content="/oopy_logo_horizontal.png"/>
</head>
<style>
.page_cover, .width.padding:first-of-type {
display: none !important;
}
.header_logo, .width.padding:first-of-type {
display: none !important;
}
.header_menu, .width.padding:first-of-type {
display: none !important;
}
HTMLMediaElement.autoplay
</style>
</head>
<body>
<div data-block-id="2f17c7b5-6dc2-454c-b6b3-9e7d7d1ff37d" class="notion-video-block css-1aih653">
<video src="data-block-id="2f17c7b5-6dc2-454c-b6b3-9e7d7d1ff37d"" autoplay muted loop></video>
<div style="position: relative; overflow: hidden;">
<div style="
max-width: 100%;
width: 82vw;
height: 27vw;
margin: 0 auto;
position: absolute;
left: 50%;
top: 10px;
transform: translateX(-50%);
">
</body>
HTML
복사
실시간 견적 신청