[hELLO 스킨] 이전/다음 글 팝업 안 뜨게 하기

글을 내리다보면 이전글/다음글로 이동시켜주는 팝업이 뜬다.

현재 보고있는 글과 이어지는 글이라면 끊김없이 보아 편하지만, 대부분은 이어지지 않기도 하고 시선도 빼앗긴다고 생각해서 안 보이게 하는걸로 결정했다.

이전/다음 글 팝업 안 뜨게 하기

늘 그렇듯 HTML 편집을 통해 수정해야한다.

티스토리 블로그 설정 > 꾸미기 탭 > 스킨 편집 > (우측 상단) HTML 편집

HTML에서 '이전'을 검색하면 아래 코드가 보인다.

<aside id="popup">
  <s_article_prev>
    <div class="popup fixed bottom-3 flex z-[100] h-[calc(theme(spacing.24))] max-lg:hidden ml-4" x-data="{ open: true }" x-transition:enter="transition ease-linear duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-linear duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" x-show="open && $store.indicator.scrolled > 50" id="prev"><a class="link absolute top-0 left-0 w-full h-full z-10" href=""></a>
      <s_article_prev_thumbnail>
        <div class="img"><img class="thumb w-24 h-24 object-cover" src="" alt="" width="96" height="96"></div>
      </s_article_prev_thumbnail>
      <div class="content relative w-64 p-4 border-box flex flex-col gap-y-2 bg-h-200 dark:text-h-200 dark:bg-h-700"><button class="close absolute text-base top-3 right-4 text-h-400 dark:hover:text-h-200 z-20" @click="open = ! open"><span class="txt text-hidden">닫기</span><i class="ico fa-solid fa-xmark"></i></button>
        <div class="tit text-xs text-h-400">이전 글</div>
        <div class="info text-h-500 dark:text-h-200">
          <div class="tit text-sm font-semibold text-overflow-hidden max-w-[calc(theme(spacing.56))]"></div>
          <div class="desc text-2xs"><time class="date"></time></div>
        </div>
      </div>
    </div>
  </s_article_prev>
  <s_article_next>
    <div class="popup fixed bottom-3 flex z-[100] h-[calc(theme(spacing.24))] max-lg:hidden right-0 mr-4" x-data="{ open: true }" x-transition:enter="transition ease-linear duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-linear duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" x-show="open && $store.indicator.scrolled > 50" id="next"><a class="link absolute top-0 left-0 w-full h-full z-10" href=""></a>
      <s_article_next_thumbnail>
        <div class="img"><img class="thumb w-24 h-24 object-cover" src="" alt="" width="96" height="96"></div>
      </s_article_next_thumbnail>
      <div class="content relative w-64 p-4 border-box flex flex-col gap-y-2 bg-h-200 dark:text-h-200 dark:bg-h-700"><button class="close absolute text-base top-3 right-4 text-h-400 dark:hover:text-h-200 z-20" @click="open = ! open"><span class="txt text-hidden">닫기</span><i class="ico fa-solid fa-xmark"></i></button>
        <div class="tit text-xs text-h-400">다음 글</div>
        <div class="info text-h-500 dark:text-h-200">
          <div class="tit text-sm font-semibold text-overflow-hidden max-w-[calc(theme(spacing.56))]"></div>
          <div class="desc text-2xs"><time class="date"></time></div>
        </div>
      </div>
    </div>
  </s_article_next>
</aside>

이 부분을 전체 주석하거나 지워버린다! (나는 주석처리함)

<!-- 이전/다음 팝업 나타나지 않도록 함 -->
<!--
<aside id="popup">
  <s_article_prev>
    ~~생략~~
  </s_article_prev>
  <s_article_next>
    ~~생략~~
  </s_article_next>
</aside>
-->

이제 적용하고 다시 해보면 팝업이 안 뜨는걸 확인할 수 있다!