티스토리 스킨 제작기 - 본문

개요

이번 포스트에서는 블로그의 접속 시 글의 제목과 본문이 표시되는 영역, 그리고 포스트 및 공지사항을 수정하도록 하겠습니다. 수정 대상 영역은 아래와 같습니다.

Read more 버튼으로 교체하기

기초 템플릿은 메인화면에 글제목과 내용의 앞부분이 표시되며 글의 전체 내용을 보기 위한 주소는 Read more라는 링크로 되어있습니다. 이를 버튼으로 교체하였습니다.

본문 수정 전

본문 수정 결과

스킨편집창에서 Read more 를 검색하여 해당부분을 찾습니다. 앞서 복사한 코드를 붙여 넣으면 링크대신 버튼으로 표시됩니다.

[수정전 - 기본 템플릿]

<p class="my-0">
   개요 이번 포스트에서는 블로그의 접속 시 글의 제목과 본문이 표시되는 영역, 그리고 포스트 및 공지사항을 수정하도록 하겠습니다. 수정 대상 영역은 아래와 같습니다. Read more 버튼으로 교체하기 기초 템플릿은 메인화면에 글제목과 내용의 앞부분이 표시되며 글의 전체 내용을 보기 위한 주소는 Read more라는 링크로 되어있습니다. 이를 버튼으로 교체하였습니다. 스킨편집창에서 Read more 를 검색하여 해당부분을 찾습니다. 앞서 복사한 코드를 붙여 넣으면 링크대신 버튼으로 표시됩니다. [수정전 - 기본 템플릿] Read more [수정후 - 현재 버전] Read more → 댓글 시스템 교체하기 기본 템플릿은 티스토리의 기본 댓글 시스템이 적용되어있지 않았습니다. (덕분에 다양한 댓글 시스템이 있..
   <a href="/entry/%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC-%EC%8A%A4%ED%82%A8-%EC%A0%9C%EC%9E%91%EA%B8%B0-%EB%B3%B8%EB%AC%B8">Read more</a>
</p>

[수정후 - 현재 버전]

<p class="card-text">
   개요 이번 포스트에서는 블로그의 접속 시 글의 제목과 본문이 표시되는 영역, 그리고 포스트 및 공지사항을 수정하도록 하겠습니다. 수정 대상 영역은 아래와 같습니다. Read more 버튼으로 교체하기 기초 템플릿은 메인화면에 글제목과 내용의 앞부분이 표시되며 글의 전체 내용을 보기 위한 주소는 Read more라는 링크로 되어있습니다. 이를 버튼으로 교체하였습니다. 스킨편집창에서 Read more 를 검색하여 해당부분을 찾습니다. 앞서 복사한 코드를 붙여 넣으면 링크대신 버튼으로 표시됩니다. [수정전 - 기본 템플릿] Read more [수정후 - 현재 버전] Read more → 댓글 시스템 교체하기 기본 템플릿은 티스토리의 기본 댓글 시스템이 적용되어있지 않았습니다. (덕분에 다양한 댓글 시스템이 있..
   <a href="/entry/%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC-%EC%8A%A4%ED%82%A8-%EC%A0%9C%EC%9E%91%EA%B8%B0-%EB%B3%B8%EB%AC%B8" class="btn btn-primary btn-sm">Read more →</a>
</p>

댓글 시스템 교체하기

기본 템플릿은 티스토리의 기본 댓글 시스템이 적용되어있지 않았습니다. (덕분에 다양한 댓글 시스템이 있다는 것과 이것만으로도 또 다른 시장이 형성되어 있다는 것을 알게 되었습니다.) 대신 페이스북의 댓글 시스템이 적용되어 있었습니다. 저는 페이스북의 계정을 가지고 있지 않으므로 이를 사용할 수 없기 때문에 disqus로 교체하였습니다. 추후 여력이 되거나 요청이 들어온다면 기초 템플릿에 적용되어있는 페이스북 댓글 시스템을 적용하는 방법도 기술하도록 하겠습니다.

수정전

수정후 - 현재 버전

[^1] : 덕분에 다양한 댓글 시스템이 있다는 것과 이것만으로도 또 다른 시장이 형성되어 있다는 것을 알게 되었습니다.

이 과정은 조금 복잡합니다.

1. 링크로 이동하여 Disqus의 회원가입을 합니다.
2. 회원가입이 완료 된 후, Get Started 버튼을 눌러서 이동한 페이지 에서 I want to install Disqus on my site 를 선택합니다.
3. 웹사이트의 정보를 입력한 후 Create Site 버튼을 누릅니다.
4. 다음 플랫폼 선택 페이지에서 가장 하단에 I don't see my platform listed, install manually with Universal Code 버튼을 누릅니다. js 스크립트가 제공됩니다. 이를 적절한 위치에 붙여 넣습니다.

Facebook 댓글 시스템과 관련된 코드는 아래와 같습니다.

[수정전 - 기본 템플릿]

<script>
   window.fbAsyncInit = function () {
      FB.init({
         appId: '213087339233922',
         xfbml: true,
         version: 'v2.11'
      });
      FB.AppEvents.logPageView();
   };

   (function (d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) { return; }
      js = d.createElement(s); js.id = id;
      js.src = "https://connect.facebook.net/en_US/sdk.js";
      fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

[수정후 - 공지사항 댓글]

<div id="disqus_thread"></div>
<script>
   var disqus_config = function () {
      this.page.url = 'http://rottk.tistroy.com/[##_notice_rep_link'; 
      // this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
   };
   (function() { // DON'T EDIT BELOW THIS LINE
      var d = document, s = d.createElement('script');
      s.src = 'https://http-rottk-tistory-com.disqus.com/embed.js';
      s.setAttribute('data-timestamp', +new Date());
      (d.head || d.body).appendChild(s);
   })();
</script>

[수정후 - 포스트 댓글]

<div id="disqus_thread"></div>
<script>
   var disqus_config = function () {
      this.page.url = 'http://rottk.tistroy.com//entry/%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC-%EC%8A%A4%ED%82%A8-%EC%A0%9C%EC%9E%91%EA%B8%B0-%EB%B3%B8%EB%AC%B8'; 
      this.page.identifier = '44';
   };
   (function() { // DON'T EDIT BELOW THIS LINE
      var d = document, s = d.createElement('script');
      s.src = 'https://http-rottk-tistory-com.disqus.com/embed.js';
      s.setAttribute('data-timestamp', +new Date());
      (d.head || d.body).appendChild(s);
   })();
</script>

페이지 내비게이션(pagination) 사이즈 조정

참고 : Pagination · Bootstrap

제가 가지고 있는 핸드폰으로 블로그를 접속해보니, 글의 하단의 pagination 이 화면의 크기를 초과하여 표시되는 것이 발견되었습니다. 제가 웹 개발자라면 더 좋은 방법을 찾을 수도 있겠지만, 일단 단순히 크기를 줄이고 Previous와 Next를 아이콘으로 교체하여 작은 화면에서도 내용이 1줄에 표시되도록 수정하였습니다.

[수정전]

<s_paging>
    <nav class="mt-3">
        <ul class="pagination justify-content-center">
            <li class="page-item ">
                <a class="page-link"  tabindex="-1">Previous</a>
            </li>
            <s_paging_rep>
                <li class="page-item">
                    <a class="page-link" ></a>
                </li>
            </s_paging_rep>
            <li class="page-item ">
                <a class="page-link" >Next</a>
            </li>
        </ul>
    </nav>
</s_paging>

네비게이션 사이즈 조정전

pagination-sm 를 class 로 추가하여 크기를 줄였습니다. Previous 와 Next 라는 단어 대신 Icon 으로 대체 표시대도록 수정하였습니다. 참고

[수정후]

<s_paging>
   <nav class="mt-3">
      <ul class="pagination pagination-sm justify-content-center">
         <li class="page-item ">
            <a class="page-link"  tabindex="-1">
               <span aria-hidden="true">&laquo;</span>
               <span class="sr-only">Previous</span>
            </a>
         </li>
         <s_paging_rep>
            <li class="page-item">
              <a class="page-link" ></a>
            </li>
         </s_paging_rep>
         <li class="page-item ">
            <a class="page-link" >
               <span aria-hidden="true">&raquo;</span>
               <span class="sr-only">Next</span>
            </a>
         </li>
      </ul>
   </nav>
</s_paging>

네비게이션 사이즈 조정 후

최종 수정 결과는 다음과 같습니다.

본문 수정 결과

댓글 시스템 및 네비게이션 수정 결과