[Tistory] 기본 스킨 커스터마이징

티스토리 뷰

Programming/IDE, Tools, etc.

[Tistory] 기본 스킨 커스터마이징

progrunman 2022. 6. 22. 02:57

블로에 글을 적다보니 기본 스킨이 너무 허접하다 싶어서 이것저것 다른 사용자스킨들을 적용했다가 소소한 버그들 때문에 다시 기본스킨으로 돌아왔지만, TOC(Table of contents)가 없는것과 코드블록이 어설픈게 가장 불편해서 tocbot 및 CSS 수정을 통해 커스터마이징해 보았다. 웹서핑으로는 ctrl+c,v를 통한 잘못된 정보들이 넘쳐나는듯해서 직접 찾아봐서 필요한 부분만 건드렸다.

참고로 아래 내용은 반응형#1 스킨을 대상으로 하며, 스킨에 따라 일부 변수명은 수정이 필요한 부분이 있을 수 있다.

js 업로드는 하지않고 CDN을 통해 js를 적용하며, 티스토리 기본편집을 통해 소스만 살짝 수정하는 방식을 사용한다.

TOC 적용 (tocbot)

HTML 수정

먼저 관리 페이지에서 "꾸미기" > "스킨 편집" > "html편집" 을 들어간다

tocbot 스크립트 추가

<head> 내부에 아래와 같이 tocbot 스크립트를 추가한다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/tocbot.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/tocbot.css">

DOM 엘리먼트 추가

tocbot이 적용될 div태그를 적절한 위치에 추가한다.

반응형#1 스킨의 경우 <div id="cMain"> 내부에 <s_notice_rep>, <s_page_rep>, <s_article_protected>, <s_article_rep> 등이 위치해있다. 뭔지 모르겠지만 대충 봐도 공지글, 일반글 등 분류에 따라 동적으로 DOM에 적용되는것 같아보인다.

그렇기에 <div id="cMain"> 아래에 위치시켜준다.

<div id="dkContent" class="cont_skin" role="main">
	<div id="cMain">
		<div class='toc'></div><!-- TOC 추가 -->
		<s_notice_rep>
			<div id="mArticle" class="article_skin">

javascript 추가

바디가 끝나는 </body> 바로 위에 아래 스크립트를 추가해준다.

<script>
    var content = document.querySelector('.area_view')  // skin별로다름
    var headings = content.querySelectorAll('h1, h2, h3, h4, h5, h6, h7')
    var headingMap = {}

    Array.prototype.forEach.call(headings, function (heading) {
        var id = heading.id ? heading.id : heading.textContent.trim().toLowerCase()
                   .split(' ').join('-').replace(/[\!\@\#\$\%\^\&\*\(\):]/ig, '')
        headingMap[id] = !isNaN(headingMap[id]) ? ++headingMap[id] : 0
        if (headingMap[id]) {
          heading.id = id + '-' + headingMap[id]
        } else {
          heading.id = id
        }
      })

    tocbot.init({
      tocSelector: '.toc',
      contentSelector: '.area_view',  // skin별로다름
      headingSelector:'h1, h2, h3',
      hasInnerContainers: false,
      headingsOffset: 100,
      scrollSmoothOffset: -100,
      collapseDepth: 6
    });

    $(document).ready(function(){
      $('.toc').addClass('toc-absolute');

      var toc_top = $('.toc').offset().top - 165;
      $(window).scroll(function() {
        if ($(this).scrollTop() >= toc_top) {
          $('.toc').addClass('toc-fixed');
          $('.toc').removeClass('toc-absolute');
        } else {
          $('.toc').addClass('toc-absolute');
          $('.toc').removeClass('toc-fixed');
        }
      });
    });
</script>

"// skin별로다름"으로 주석이 달려있는 부분은 TOC가 적용될 본문 selector를 의미하며 스킨마다 다르기 때문에 적절하게 수정이 필요하다.

반응형#1의 경우 <div class="area_view">가 실제 본문 영역이기 때문에 해당 class selector로 적용해줬다.

tocbot의 경우 init을 통해 API를 노출해주고 있기 때문에 지원범위 내에서 입맛에 맛게 설정이 가능하다.

자세한 사항은 tocbot document에서 확인 가능하며 내가 설정해준 옵션의 대략적인 내용은 아래와 같다.

contentSelector : TOC를 적용할 본문 selector
headingSelector : TOC를 적용할 heading selector. 티스토리 기본제공서식 제목1은 h2부터 시작하기에 h2, h3만 줄까 하다가 HTML로 h1을 넣는 케이스도 있지 않을까 싶어서 h1, h2, h3을 줬다
headingsOffset : TOC가 트래킹할 heading의 offset
scrollSmoothOffset : TOC의 heading을 클릭했을때 스크롤될 offset
- headingsOffset, scrollSmoothOffset은 동일하게 맞춰줘야 한다. 반응형#1의 경우 상단영역 때문에 옵셋이 맞지않아 100정도 적용하니 잘 맞았다. tocbot document의 Fixed headers 참조.
collapseDepth : TOC에서 숨김처리할 heading depth. 기본 0으로 잡혀있어서 하위레벨은 숨김처리된다. 난 그게 싫어서 6으로 세팅했고, 6으로 세팅하면 숨김처리를 안하게 된다. (h1~h6)

CSS 추가

tocbot에 적용될 아래 CSS style을 CSS탭에 추가해준다.

.toc-absolute {
	position: absolute;
	margin-top:165px;
}
.toc-fixed {
	position: fixed;
	top: 165px;
}

.toc {
	left: calc((100% - 850px) / 2 - 300px);
	width: 250px;
	padding: 10px;
	box-sizing: border-box;
}

.toc-list {
	margin-top: 10px !important;
	font-size: 0.9em;
}

.toc > .toc-list li {
	margin-bottom: 10px;
}

.toc > .toc-list li:last-child {
	margin-bottom: 0;
}

.toc > .toc-list li a {
	text-decoration: none;
}

~~아... 기본 코드블럭 스타일 플러그인 너무 허접해서 짜증난다. 이것도 조만간 고쳐줘야겠다.~~

TOC의 박스 스타일이나 위치, font size 등을 변경하고 싶다면 위 CSS를 적절하게 수정해주면 된다.

코드블록 스타일 수정

기본제공 플러그인 적용

먼저 관리페이지에서 "플러그인"의 "코드 문법 강조" 플러그인을 적용시켜 준다. 해당 플러그인은 내부적으로 highlight.js를 사용한다.

CSS 수정

해당 스타일 선택자는 ".skin_view .area_view pre code.hljs"이고 "뷰"관련 CSS 기술해 놓은 곳에서 찾을 수 있다.

개인적으로 VSCode를 선호하는지라 아래와 같이 설정해주었다

.skin_view .area_view pre code.hljs { 
	font-family: Consolas, 'Courier New', Courier, monospace;
	font-size: 14px;
	line-height: 1.5;
	tab-size: 4;
	padding:16px; 
	border-radius: 5px;
	}

마무리

마지막으로 적용 버튼을 눌러 적용한 후 페이지 새로고침으로 확인해보면 잘 적용된것을 볼 수 있다.

프론트엔드 개발 경험이 없어서 HTML/CSS/javascript에 대한 지식이 없는지라 제대로 한건지는 잘 모르겠다.

특히 티스토리 기본제공 코드문법강조 플러그인이 highlight.js를 사용하기 때문에 여기에 highlightjs-line-number.js를 붙여쓸려고 했는데 기대한대로 동작하지 않아서 포기했다. 대충 cloudflare에 올라가있는 js 땡겨서 로드해주고 선택자만 잘 수정해서 스타일만 적용해주면 될것 같은데 티스토리 기본제공 플러그인의 highlight.js에 연결되는데 뭔가 놓친부분이 있는듯하다. highlightjs를 플러그인으로 제공하니 옵션으로 제공해주는게 어려운일도 아닐텐데 흔한 문서하나 없는것은 정말 아쉬운 점이었다. ~~티스토리 github 갔더니 API를 제외하곤 마지막 커밋이 거의 2~3년전이었다. 카카오에서 해당 프로젝트에 별로 관심을 안가지는가 싶었다.~~

Reference

http://tscanlin.github.io/tocbot/

Tocbot

Tocbot builds a table of contents (TOC) from headings in an HTML document. This is useful for documentation websites or long markdown pages because it makes them easier to navigate. This library was inspired by Tocify, the main difference is that Tocbot us

tscanlin.github.io

https://highlightjs.org/

highlight.js

Version 10.7.2 This is a patch release. The only change is that deprecation messages are throttled and shown only once.

highlightjs.org

https://github.com/highlightjs/highlight.js

GitHub - highlightjs/highlight.js: JavaScript syntax highlighter with language auto-detection and zero dependencies.

JavaScript syntax highlighter with language auto-detection and zero dependencies. - GitHub - highlightjs/highlight.js: JavaScript syntax highlighter with language auto-detection and zero dependencies.

github.com

https://notice.tistory.com/2483

코드블럭으로 소스코드 작성하기

코드 블럭 삽입하기 개발자 블로거를 위하여 코드 삽입 기능을 제공합니다. 코드 블럭은 소스코드를 입력하고 보기 좋게 공유하는 것을 돕는 기능입니다. 툴바 메뉴에서 더보기 > 코드블럭을

notice.tistory.com

저작자표시 비영리 변경금지

'Programming > IDE, Tools, etc.' 카테고리의 다른 글

[GitHub] 무료계정에서 private 저장소 branch protection rules 흉내내기 (with VSCode v1.69.0) (0)	2022.07.08
[GitHub] GitHub CLI를 이용한 Label 설정 복제 (0)	2022.07.06
[VSCode] 클린 설치 및 주요확장 (Windows10) (0)	2022.06.08
[VSCode] Unity 연동 설정 정리 (Windows) (3)	2022.06.08
[Notepad++] 개발자 필수유틸 notepad++ 활용 (0)	2022.05.09

공지사항

Hello Programmer!

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

글 보관함

외장뇌모리

티스토리 뷰