노션(Notion)과 우피(Oopy)
노션을 웹페이지로 만들 수 있는 방법은 다양합니다. 그 중에서 Oopy는 비록 속도와 SEO 측면에서는 조금 부족하더라도, 비용과 간편함, 그리고 안정성에서는 가장 뛰어난 서비스 중 하나라고 생각합니다. 그리고 부족한 속도와 SEO도 여러 방법으로 어느 정도 보완이 가능합니다. 이 블로그도 Oopy를 이용해서 서비스하고 있습니다.
그래서 Oopy를 이용해서 홈페이지를 만들고, 필요한 기능을 추가하는 방법에 대해서 공유하고자 합니다. 노션과 Oopy를 이용해서 홈페이지를 만들 때, 사용하는 기능을 분류해보면 다음과 같습니다.
- Notion 기본 편집 기능
- Notion API
- Oopy 자체 기능(html 외)
- Oopy의 html 편집 기능
이전글과 다음글 버튼 추가하기
Oopy에 부족한 기능
블로그는 검색을 통해 사용자가 유입됩니다. 잘 만들어진 블로그는 방문자가 다른 글에 쉽게 접근할 수 있도록 구성되어 있습니다. 하지만, Oopy로 블로그를 만들면 블로그에 당연히 있는 기능(관련글, 이전글과 다음글, 사이드바 등)들이 대부분 없습니다.
이전글과 다음글 버튼 원리
오늘은 그 중에서 이전글과 다음글을 추가하는 방법을 소개하고자 합니다. 이전글과 다음글을 추가하는 원리는 다음과 같습니다.
<aside> 💡 이전글과 다음글 버튼을 Notion API를 이용해서 Post가 있는 데이터베이스 정보를 기반으로 구현하는 방법도 있습니다. 이번에는 좀 더 간단한 방법을 사용하도록 하겠습니다.
</aside>
- 현재 게시글의 URL을 불러온다
- 불러온 URL에서 숫자 부분을 수정한다
- 새로운 URL(이전글 혹은 다음글)의 title을 불러온다
- 이전글과 다음글 버튼에 반영한다
이를 위해서는 포스트의 순서를 URL의 숫자를 기반으로 알 수 있도록 되어있어야 합니다. 포스트의 URL에서 숫자를 분리해서 더하고 빼는 방식으로 이전글과 다음글 URL을 구하기 때문입니다.
이전글과 다음글 버튼 만들기
html로 버튼 만들기
현재 블로그에서 사용하는 이전글과 다음글 <div>는 아래와 같습니다. 아래 <div>를 Oopy의 html 코드 블럭 기능을 활용해서 게시글 아래에 추가합니다.
<aside> 💡 저는 Bootstrap v5.3을 사용하고 있습니다. 아래 <div>에서 클래스는 모두 부트스트랩에서 사용하는 클래스입니다. Bootstrap 사용법은 여기에서 확인해주세요.
</aside>
<div class="d-flex justify-content-between flex-wrap text-dark">
<div style="max-width: 45%;">
<a id="prev-link" href="#" class="text-dark text-decoration-none font-weight-bold p-2 rounded bg-light shadow-sm d-inline-block"></a>
<p id="prev-title" class="text-muted mt-3 mb-0"></p>
</div>
<div class="text-end" style="max-width: 45%;">
<a id="next-link" href="#" class="text-dark text-decoration-none font-weight-bold p-2 rounded bg-light shadow-sm d-inline-block"></a>
<p id="next-title" class="text-muted mt-3 mb-0 text-end"></p>
</div>
</div>
Code language: HTML, XML (xml)해당 버튼은 href와 title이 비어있습니다. href와 title은 <script>를 이용해서 추가합니다.
<script>로 href와 title 추가하기
현재 블로그에서 사용하는 <script>는 아래와 같습니다. 참고로 해당 스크립트를 사용하기 위해서는 <head>에 <script src="<https://code.jquery.com/jquery-3.5.1.min.js>"></script>문장을 추가해주어야 합니다. 해당 기능도 Oopy에서 제공하고 있습니다.
<script>
$(document).ready(function () {
var url = window.location.href;
var lastSlashIndex = url.lastIndexOf('/');
var lastNumber = parseInt(url.substring(lastSlashIndex + 1));
var newUrlNext = url.substring(0, lastSlashIndex + 1) + (lastNumber + 1);
var newUrlPrev = url.substring(0, lastSlashIndex + 1) + (lastNumber - 1);
$.get(newUrlPrev, function(response) {
var titlePrev = $(response).filter('title').text();
$("#prev-link").html("← 이전글");
$("#prev-title").html(titlePrev);
$("#prev-link").attr("href", newUrlPrev);
});
$.get(newUrlNext, function(response) {
var titleNext = $(response).filter('title').text();
$("#next-link").html("다음글 →");
$("#next-title").html(titleNext);
$("#next-link").attr("href", newUrlNext);
});
});
</script>
Code language: HTML, XML (xml)이렇게 스크립트를 추가하면, html로 만든 버튼의 href와 title이 적절히 수정됩니다.
동기화 블록을 이용하기
Notion에서 제공하는 동기화 블록을 이용해서, 향후 코드를 수정할 때 일괄로 수정될 수 있도록 합니다.
지금까지 노션과 Oopy로 만든 블로그에 이전글과 다음글 버튼을 추가하는 방법을 알아보았습니다. 버튼 모양과 URL 형태에 따라 적절히 코드를 수정해서 사용하시면 되겠습니다. 해당 방법이 마음에 들지 않으시면*(URL 형태의 제한이나 이전글과 다음글이 없을 경우 등의 문제 때문에)*, Notion API를 이용해서 조금 더 정교한 이전글과 다음글 버튼을 만들 수도 있습니다.
댓글 남기기