Table of contents

    오랜만에 블로그를 정리하려고 보니, 뭔가 사건도 많았고 내 블로그도 이상해진 느낌이었다.

     

    정확히는 티스토리와 애드센스의 조합이 이상한 것이지만..ㅎㅎ

     

    아무튼, 그렇게 나는 블로그랑 애드센스를 최적화해야겠단 생각이 들었고, 이번에 너튜브란 스킨으로 변경했는데 매우 만족하고 있다.

     

    구글 애드센스 로딩 속도를 최적화한 글이 궁금하면 아래 링크를 참조

    티스토리 자체 광고로 시작된 구글 애드센스 로딩 속도 최적화

     

     

    유튜브 스킨 추천 이유

    일단, 디자인이 깔끔하고 데스크톱과 모바일 환경 모두에서 잘 동작한다.

     

    그리고 로딩속도도 빠른 편이다.

     

    기본이 다크모드인데, 색상 변경이 되는 것도 마음에 든다.

     

    마지막으로 자동 글 목록 생성 기능이 포함되어 있다.

     

    더 말해 뭐하나.. 아래 링크가 스킬 개발자 블로그인데 구경해 보자.

     

    https://ushin20-skin.tistory.com/84

     

     

    필수 설정 공유

    원래 스킨 개발자에게 질문을 남기려고 했으나, 왠지 바쁘게 사는 사람일 듯하여 직접 이것저것 분석했다.

     

    무료로 공개해 주었으니, 이 정도는 스스로 하자.. 라는 마음이다.

     

    아무튼 몇 개 필수 설정이 필요해 보이는 것들이 있었는데, 하나씩 확인해 보자.

     

    Poster 스킨 선택

    티스토리 내에서 스킨을 변경하는 모습

    유튜브 스킨의 기반은 Poster라고 한다.

     

    Poster 스킨으로 변경한 후에, 아래 링크에서 skin.html과 skin.css파일을 받은 후 내 스킨을 수정하면 된다.

     

    https://ushin20-skin.tistory.com/84

     

     

    목록 구성 요소

    유투브 스킨에서 목록 구성 요소가 목록+내용으로 설정되어 있을 때, 보여지는 홈 화면

    유투브 스킨에서 목록 구성 요소가 목록 +내용으로 되어 있으면, 홈 화면의 구성이 위 화면처럼 나온다.

     

    여기에 문제가 하나 있는데, 자동으로 TOC를 만드는 기능이, 모든 글에 대한 것을 참조하다 보니 이상하게 동작한다.

     

     

    목록 구성 요소를 변경하는 모습

    이 현상을 목록 구성 요소를 목록만으로 변경하여 해결할 수 있다.

     

     

    jquery.toc 추가

    Table of contents가 비어있는 모습

    이 스킨은 자동으로 toc가 생성되어야 하는데, 이상하게 나는 자동으로 생성되지 않았다.

     

    스킨 내용을 분석해 보니, jquery.toc 파일이 없어서 발생한 현상이다.

     

    일단, 아래 링크에서 jquery.toc을 다운받자.

     

    https://ndabas.github.io/toc/

     

     

    티스토리 스킨 설정에서 파일을 업로드하려는 모습

    위에서 받은 파일을 압축을 해제하고,

    티스토리 스킨 편집에서 파일 업로드를 통해 업로드하면 해결된다.