노션(Notion)과 우피(Oopy)

노션을 웹페이지로 만들 수 있는 방법은 다양합니다. 그 중에서 Oopy는 비록 속도와 SEO 측면에서는 조금 부족하더라도, 비용과 간편함, 그리고 안정성에서는 가장 뛰어난 서비스 중 하나라고 생각합니다. 그리고 부족한 속도와 SEO도 여러 방법으로 어느 정도 보완이 가능합니다. 이 블로그도 Oopy를 이용해서 서비스하고 있습니다.

그래서 Oopy를 이용해서 홈페이지를 만들고, 필요한 기능을 추가하는 방법에 대해서 공유하고자 합니다. 노션과 Oopy를 이용해서 홈페이지를 만들 때, 사용하는 기능을 분류해보면 다음과 같습니다.

  1. Notion 기본 편집 기능
  2. Notion API
  3. Oopy 자체 기능(html 외)
  4. Oopy의 html 편집 기능

이전글과 다음글 버튼 추가하기

Oopy에 부족한 기능

블로그는 검색을 통해 사용자가 유입됩니다. 잘 만들어진 블로그는 방문자가 다른 글에 쉽게 접근할 수 있도록 구성되어 있습니다. 하지만, Oopy로 블로그를 만들면 블로그에 당연히 있는 기능(관련글, 이전글과 다음글, 사이드바 등)들이 대부분 없습니다.

이전글과 다음글 버튼 원리

오늘은 그 중에서 이전글과 다음글을 추가하는 방법을 소개하고자 합니다. 이전글과 다음글을 추가하는 원리는 다음과 같습니다.

  • 현재 게시글의 URL을 불러온다
  • 불러온 URL에서 숫자 부분을 수정한다
  • 새로운 URL(이전글 혹은 다음글)의 title을 불러온다
  • 이전글과 다음글 버튼에 반영한다

이를 위해서는 포스트의 순서를 URL의 숫자를 기반으로 알 수 있도록 되어있어야 합니다. 포스트의 URL에서 숫자를 분리해서 더하고 빼는 방식으로 이전글과 다음글 URL을 구하기 때문입니다.

이전글과 다음글 버튼 만들기

html로 버튼 만들기

현재 블로그에서 사용하는 이전글과 다음글 <div>는 아래와 같습니다. 아래 <div>를 Oopy의 html 코드 블럭 기능을 활용해서 게시글 아래에 추가합니다.

💡 저는 Bootstrap v5.3을 사용하고 있습니다. 아래 `<div>`에서 클래스는 모두 부트스트랩에서 사용하는 클래스입니다. Bootstrap 사용법은 [여기](https://getbootstrap.com/docs/5.3/getting-started/introduction/)에서 확인해주세요.
<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>

해당 버튼은 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("&#8592; 이전글");
        $("#prev-title").html(titlePrev);
        $("#prev-link").attr("href", newUrlPrev);
    });
 
    $.get(newUrlNext, function(response) {
        var titleNext = $(response).filter('title').text();
        $("#next-link").html("다음글 &#8594;");
        $("#next-title").html(titleNext);
        $("#next-link").attr("href", newUrlNext);
    });
});
</script>

이렇게 스크립트를 추가하면, html로 만든 버튼의 href와 title이 적절히 수정됩니다.

동기화 블록을 이용하기

Notion에서 제공하는 동기화 블록을 이용해서, 향후 코드를 수정할 때 일괄로 수정될 수 있도록 합니다.

이전글과 다음글 버튼 코드가 포함된 동기화 블록


지금까지 노션과 Oopy로 만든 블로그에 이전글과 다음글 버튼을 추가하는 방법을 알아보았습니다. 버튼 모양과 URL 형태에 따라 적절히 코드를 수정해서 사용하시면 되겠습니다. 해당 방법이 마음에 들지 않으시면(URL 형태의 제한이나 이전글과 다음글이 없을 경우 등의 문제 때문에), Notion API를 이용해서 조금 더 정교한 이전글과 다음글 버튼을 만들 수도 있습니다.