목차
1. 스킨 편집으로 이동
티스토리는 각종 블로그 스킨 템플릿을 제공하며, 사용 중인 스킨 또한 HTML 편집이 가능하다.
블로그 메인화면 > 블로그 관리 > 꾸미기(왼쪽 사이드바 하단) > 스킨 편집 > HTML 편집 으로 이동
2. css 파일 준비하기
나는 다음 블로그의 템플릿을 사용했다.
티스토리 소제목 꾸미기 | 인용구 서식(HTML) 스타일 모음
티스토리 인용구 서식(HTML) 스타일 모음티스토리나 다른 블로그 플랫폼에서 '인용구'를 사용하는 이유는 주로 시각적 효과와 구조적 명확성 때문입니다. 시각적 구분: '인용구' 요소를 사용하면
galam.tistory.com
텍스트 편집기 자체에도 html 편집 모드를 지원하므로 블로그의 코드를 그대로 붙여넣기 해도 된다.
하지만 후에 수정이 필요할 시 모든 글을 일일이 수정해야 한다.
따라서 공통 css 파일을 따로 생성했다. (편집기는 VSCode를 사용했다.)
이 과정에서 프론트 문외한인 나는 다음과 같은 실수를 저질렀다.
(1번 사진과 같이) css를 algo_h1 등으로 적용시킨다면,
(2번 사진과 같이) 티스토리 텍스트 편집기 사용 시
제목1, 제목2, 제목3이 각각 h2, h3, h4 태그를 의미하기 때문에 해당 기능을 혼용할 수 없게된다.
따라서 h 태그에 custom-title 이라는 class명을 가진 태그에 대해서만 title css를 적용받도록 수정 하였다.
css를 이렇게 선언하면 안되는 이유가 하나 더 있다.
2-1 data-ke-size?
티스토리 css 파일에 다음과 같은 코드가 있었다.
글 작성 이후 html모드로 들어가면 대부분의 태그에 마찬가지로 해당 속성이 붙어있었다.
티스토리 모바일웹과의 호환을 위해 자동으로 부여하는 속성인듯 했다. 많은 악평이 있었다.
나의 실수와 결합하면, <algo_h1 data-ke-size="16">과 같은
속성 적용은 안되지만 코드는 엄청나게 길어지는 혼종이 탄생한다.
관련 내용은 다음과같다.
https://seollal.tistory.com/978
data-ke-size 문제 임시 해결법
마지막 수정일 : 2021년 5월 15일. 최초 작성일 : 2021년 5월 15일. . 애드블록 등 광고 차단 프로그램을 비활성화해주시면 감사하겠습니다. 목차 data-ke-size 문제가 뭐죠? . 2021년 5월 13일 티스토리에서
seollal.tistory.com
3. 파일 업로드
3-1 css/js 파일 업로드
파일업로드 탭 > 추가 > css/js 파일 업로드
이후 티스토리 서버에 해당 파일이 올라간다. 폴더가 images 밖에 없으므로 css 및 js 파일을 여기 넣어야한다.
3-2 jquery toc plugin 다운로드 및 업로드
후에 사용할 jquery 목차 플러그인도 다운받아 넣어준다.
https://www.nikhildabas.com/toc/
4. 경로 복사하기
업로드를 마쳤다면, 링크 주소 복사 버튼을 눌러 파일들의 경로를 복사해놓는다. 다음과 같은 형식이다.
https://tistory1.daumcdn.net/tistory/6222721/skin/images/lsh.title.css
5. 전체 HTML 파일에 Import 하기
HTML 탭을 눌러 <head> 태그 사이에 파일들을 import 시킨다.
이미지 디렉토리 앞의 경로는 루트로 자동 인식되므로, 다음과 같이 바꿔준다.
1. css 및 js 파일
<link rel="stylesheet" href="./images/YOUR_FILE_NAME.css">
<script src="./images/YOUR_FILE_NAME.js"></script>
2. jquery toc 파일
<script src="./images/jquery.toc.min.js"></script>
이후 자신의 css 파일에 따라 다음과 같이 사용할 수 있다.
<h2 class="custom-title" style="color: #333333; text-align: start;" data-ke-size="size26">The Network Edge</h2>
5-1. 서식 만들기 (선택)
어떤 양식을 반복해서 사용할 것이라면 서식을 만들어 두는것이 좋다.
블로그 관리 -> 서식 관리 탭에 저장해놓고, 글 작성 시 더보기에서 서식을 불러와 간편히 사용할 수 있다.
6. 목차/인용구 작성 및 적용하기
6-1. 인용구 적용하기
출처, 링크 등에 사용할 수도 있다.
CSS 파일은 다음 블로그의 폴더 4번을 사용하였다.
이후엔 다음의 코드를 추가하였다.
폴더 안의 텍스트를 읽어 href속성으로 추가한 후,
href의 밑줄과 파랑색을 지우는 코드이다.
<script>
document.addEventListener('DOMContentLoaded', function() {
var BOJLinkContainer = document.getElementById('quote-link-container');
var linkText = BOJLinkContainer.innerText.trim();
var linkElement = document.createElement('a');
linkElement.href = linkText;
linkElement.innerText = linkText;
linkElement.style.color = 'black';
linkElement.style.textDecoration = 'none';
linkElement.className = 'boj-link';
BOJLinkContainer.innerHTML = '';
BOJLinkContainer.appendChild(linkElement);
});
</script>
6-2. 목차 적용하기
다음의 코드로 목차에 요소들을 추가하였다.
1. HTML CODE
<div class="toc-container">
<div class="toc-header"> </div>
<p class="toc-title" data-ke-size="size16"><span>목차</span></p>
<div class="toc-arrow"> </div>
<ul id="toc" class="toc-list" style="list-style-type: disc;" data-ke-list-type="disc"></ul>
</div>
id=toc인 ul 태그를 제외한 나머지는 마찬가지로 앞선 블로그의 템플릿을 사용했다.
2. SCRIPT CODE
<script>
$(function() {
var headingSelector = "h1, h2, h3, h4";
$("#toc").toc({
content: ".tt_article_useless_p_margin",
headings: headingSelector,
});
});
</script>
이후엔 h1,h2, h3, h4 태그를을 스캔하여 자동으로 목차로 만들어 주는 것을 볼 수 있다.
6-3. 목차 유의사항 - 자동으로 href가 적용되는 이유
https://www.nikhildabas.com/toc/
Table of Contents jQuery Plugin — jquery.toc
Table of Contents jQuery Plugin A minimal, tiny jQuery plugin that will generate a table of contents, using semantic, nested lists with hash-link anchors to headings. Download Version 0.4.0 · GitHub Project Live Example Table of contents, auto-generated f
www.nikhildabas.com
참고한 DOCS의 링크이다.
jquery toc plugin은 content 내의 heading 들을 리스트 형식으로 추가한다.
이 때,
요소들의 id가 없다면, 태그의 내용을 id로 부여한 후 리스트에 href = #[태그 내용] 속성을 적용하여 추가한다.
id가 있다면, href 속성에 해당 id를 적용하여 추가한다.
결국 목차를 누르면 해당 소제목을 top으로 하는 곳으로 이동시키는 동작을 하게된다.
또한, h1,h2,h3등의 태그간 계층화도 자동으로 해준다.
만약 더 이상의 커스텀(부드러운 스크롤 등)을 원한다면 다음과 같은 확장 플러그인을 이용하면 된다.
https://github.com/ndabas/toc/wiki/Alternatives
Alternatives
Table of Contents jQuery Plugin - A minimal, tiny jQuery plugin that will generate a table of contents, drawing from headings on the page. - ndabas/toc
github.com
6-4. 목차 유의사항 - .tt_article_useless_p_margin?
티스토리에서 목차 사용시, 태그 스캔의 시작점인 content 속성에
content: ".tt_article_useless_p_margin" 를 필수로 기입해야 한다.
이유는 다음과 같다.
티스토리는 렌더링 시 전체 html파일과 하나의 글 html 파일을 합쳐서 렌더링 하는 과정에서 추가 작업을 한다.
그 증거로 작성 중인 글의 미리보기 에서는 동작하지 않던 스크립트가 글 작성 이후엔 동작하기도 했다.
여기서 tt_article_useless_p_margin이란,
tt_article이란 뜻 그대로 현재 글에 포함되는 요소들이 담기는 div이다.
따라서 toc의 content scope에 tt_article_useless_p_margin을 꼭 기입해줘야 한다.
그렇지 않으면, 글의 본문을 벗어난 h태그들을 모두 목차에 집어넣어 버린다.
이른바 내 블로그명, 카테고리 없음 등이 있을 것이다.
7. 트러블 슈팅 요약
1. 글 작성중에는 동작하지 않는 script가 작성 이후엔 동작
=> 티스토리는 글 작성 이후에 서버 에서 추가 렌더링을 한다.
=> data-ke-size 속성, tt_article_useless_p_margin div 등이 추가된다.
2. TOC에서 h 태그 스캔 시 글 밖의 요소도 포함됨
=> tt_article_useless_p_margin에는 현재 글의 모든 요소들이 담긴다. 이 안의 요소만을 포함해야 한다.
3. jquery toc plugin을 통한 목차 생성 시, 추가 스크립트 없이도 해당 소제목으로 가는 href 속성 적용
=> 이유는 위에 작성하였다. 커스텀이 더 필요하다면 확장 플러그인을 사용한다.
4. CSS 파일 변경 및 추가 이후에도 변경사항 적용되지 않음
=> 캐싱으로 인한 현상인가 해서 브라우저 임시파일들을 다 지워봤으나, 여전히 적용되지 않았다.
=> 이후 덜 중요한 CSS보다 HTML을 바꿔보면 바로 적용되지 않을까 했다.
=> HTML에 아무 텍스트나 적어 저장하고 다시 지우고 저장했다. 바로 적용이 됐다.
'ETC' 카테고리의 다른 글
| [Java/Socket] TCP Socket Communication - Hello, Server! (1) | 2024.09.08 |
|---|---|
| 백준 출력문제 빨리 풀기 & 비교 (0) | 2024.06.16 |
| 백준에서 Assert 메서드를 사용할 수 있을까? (0) | 2024.05.28 |