티스토리 스킨 수정 일지 #1 - 테이블 정렬 기능 자바스크립트 추가

가끔 게임 공략 쓰다보면 표를 작성하거나 원문에서 배껴올 때가 있다. 그런데 오름차순/내림차순 기능이 있으면 보기에 편할것같아서 티스토리 기본으로 기능을 뒤져봤지만 찾을 수가 없었음ㅜㅜ 결국 this is part of as days pass by, by Stuart Langridge 여기를 참고해서 자바스크립트를 스킨에 추가해본 결과... 성공!

원문에서 표 복사후 코드 깔끔하게 정리하기

복사하는 곳의 표가 지저분하거나, 약간 수정이 필요할 경우 원드라이브의 엑셀을 이용한다. 표를 붙여넣은 뒤 홈 탭의 지우기 기능을 클릭하면 위 이미지와 같이 나온다. "서식지우기"와 "하이퍼링크 제거"기능을 이용해서 깔끔하게 다듬자(구글 스프레드시트로도 똑같은 작업이 가능하지만 코드가 훨씬 지저분해진다). 이후 복사한다.

<div data-ccp-timestamp="1650509686098">
<table style="border-collapse: collapse; width: 100%;" border="1" width="1163" data-ke-align="alignLeft" data-ke-style="style12">
<tbody>
<tr>
<td style="width: 22.3256%;" width="274" height="22">Primary Effect</td>
<td style="width: 21.8605%;" width="265">Side Effects</td>
<td style="width: 20.6977%;" width="250">&nbsp;</td>
<td style="width: 19.186%;" width="230">Reagents</td>
<td style="width: 7.90698%;" width="72">&nbsp;</td>
<td style="width: 7.90698%;" width="72">&nbsp;</td>
</tr>

<table style="border-collapse: collapse; width: 100%;" border="1" data-ke-align="alignLeft" data-ke-style="style12" class="sortable">
<thead>
<tr>
<th>Primary Effect</th>
<th>Side Effects 1</th>
<th>Side Effects 2</th>
<th>Reagents 1</th>
<th>Reagents 2</th>
<th>Reagents 3</th>
</tr>
</thead>
<tbody>

티스토리 기본모드에서 표를 붙여넣은 뒤 원하는 표 테마를 선택 한 후, HTML 모드로 가서 코드를 복사한다. 이후 노트패드++같은 에디터를 이용해서 수정해주면 된다.

표를 감싸고 있는 <div data-ccp-timestamp="1650509686098">와 </div>를 지워준다.

표의 1행에 해당하는 부분(Primary Effect, Side Effects ...)이 <tbody>안에 있는데, 위의 두번째와 같이 <tbody>위에 <thead>를 만들어서 그 안에 넣은 후 <td></td>는 <th></th>로 수정한다.

위와 같은 정규식 표현 "[^"]*" 을 이용해서 필요없는 스타일 코드를 지워준다(<table>안의 내용은 지워지지 않게 주의).

<table>안에 class="sortable"를 넣어준다. 이렇게 하면 모든 열에 정렬기능이 생긴다. 만약 특정 열은 정렬기능을 사용하지 않고 싶다면, 정렬기능을 원하지 않는 <th>안에 class="sorttable_nosort"를 넣어주면 된다. 가계부 처럼 표 맨 하단의 "총 금액"같이 정렬기능으로 움직이지 않는 행을 만들고 싶으면 해당 행을 <tfoot></tfoot>로 감싸주면 된다. 더 많은 기능은 https://www.kryogenix.org/code/browser/sorttable 를 참고할것.

Primary Effect옆에 오름차순/내림차순 버튼을 만들기 위해서 현재 사용중인 스킨의 CSS에 다음을 추가한다(선택사항).

table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after { 
    content: " \25B4\25BE" 
}

 

자바스크립트 삽입하기

https://www.kryogenix.org/code/browser/sorttable/sorttable.js

위의 sorttable.js를 다운받아 티스토리 스킨폴더에 업로드준다.

<script src="./images/sorttable.js"></script>
</head>

html 편집 화면에서는 위와같이 </head> 위에다가 <script src="./images/sorttable.js"></script>를 넣어준다.

 

결과물

 

Order	Progression	Skill points required
1	Solvent Proficiency	7
2	Keen Eye: Reagents	3
3	Medicinal Use	3
4	Chemistry	3
5	Laboratory Use	1
6	Snakeblood	3
Totals	All	20

 

Primary Effect	Side Effect	Reagents 1	Reagents 2
Breach		Lady's Smock	Beetle Scuttle
Breach		Violet Coprinus	Beetle Scuttle
Cowardice	Increase Spell Resist	White Cap	Bugloss
Cowardice	Restore Health	Blue Entoloma	Bugloss
Defile		Clam Gall	Nightshade
Defile		Spider Egg	Mudcrab Chitin
Defile		Spider Egg	Nightshade
Detection		Corn Flower	Wormwood
Detection		Torchbug Thorax	Corn Flower
Detection		Torchbug Thorax	Wormwood
Detection		White Cap	Corn Flower
Detection		White Cap	Torchbug Thorax
Detection		White Cap	Wormwood