FootNote for TISTORY |
- 편집기 기본모드에서 아래의 서식처럼 작성.
각주 기호는 숫자 넘버링.- 각주에 HTML 태그 사용 가능 - <p></p> 태그는 사용불가.
- 줄바꿈은 Shift + Enter.편집기 - HTML 모드에선, <br> 태그 추가
- 각주 출력 방식 - 클릭 또는 마우스 호버.
- 기존 티스토리의 각주를 새로운 스타일로 변경 가능.
- 모바일은 화면 아래에 각주 표시.
- 조건문 버그 픽스.
- 링크 블럭에 표시되는 현상 수정.
- 스크립트 최적화.
- 각주 인덱스 기능 추가 - 단축키 B
- 각주 기호에 접두어 붙일 수 있는 옵션 추가.접두어 + 숫자 넘버링
- 각주 기호를 숫자 넘버링이 아닌 기호로 대체할 수 있는 옵션 추가.숫자 넘버링 X
Demo & Code |
<!-- 서식 -->
[sfn]내용[/sfn]
/* 사용자 설정 시작 */
:root {
--sup-font: 'Arial'; /* 각주 기호 폰트 */
--sup-color: #006dd7; /* 각주 기호 색상 */
--note-padding: 12px 4px 12px 12px; /* 각주 여백 */
--note-padding-leftright: 14px; /* 모바일에서 각주 너비 조절 */
--note-height-mobile: 15%; /* 각주 높이 - 모바일 */
--note-border-radius: 16px; /* 각주 모서리 부드럽게 */
--note-bgcolor: #151515; /* 각주 배경색 */
--note-color: rgba(255, 255, 255, 0.8); /* 각주 글자색 */
--note-font-size: 14px; /* 각주 폰트 크기 */
--note-line-height: 28px; /* 각주 줄 간격 */
--note-word-break: break-all; /* 각주 단어 끊기 || or keep-all */
--note-edge: 6px solid #151515; /* 각주 꼭지점 크기 및 배경색 */
--note-edge-transparent: 6px solid transparent; /* 각주 꼭지점 따라가는 옵션 */
--note-scroll-size: 1px; /* 각주 스크롤바 크기 */
--note-scroll-color: rgba(255, 255, 255, 0.6); /* 각주 스크롤바 색상 */
--note-index-font-size: 14px; /* 각주 인덱스 폰트 크기 */
}
/* 사용자 설정 끝 */
/* 각주 기호 */
smallfoot { vertical-align: super; font-family: var(--sup-font); color: var(--sup-color); font-size: small; padding: 2px; cursor: pointer }
/* 스킨에 따라 margin, top, left 값의 수정이 필요할 수 있음 || 각주 너비 및 높이는 수정금지! */
div.smallfoot {
display: none !important; width: 240px; height: 120px; margin-top: -152px; margin-left: -24px; padding: var(--note-padding) !important;
background-color: var(--note-bgcolor); border-radius: var(--note-border-radius)
}
div.smallfoot.reveal { display: block !important }
/* 좌상단 */
div.smallfoot.reveal {
position: absolute; margin-top: -152px; margin-left: -24px; /*padding: var(--note-padding) !important;*/
background-color: var(--note-bgcolor); line-height: 28px; border-radius: 12px
}
div.smallfoot.reveal::after {
border-top: var(--note-edge); border-left: var(--note-edge-transparent); border-right: var(--note-edge-transparent);
border-bottom: 0px solid transparent; content: ""; position: absolute; top: 144px; left: 24px
}
/* 좌측 - 각주 기호 아래에 표시될 때 */
div.smallfoot.lb.reveal { margin-top: 26px }
div.smallfoot.lb.reveal::after {
border-top: 0px solid transparent; border-left: var(--note-edge-transparent); border-right: var(--note-edge-transparent);
border-bottom: var(--note-edge); content: ""; position: absolute; top: -6px; left: 24px
}
/* 우상단 */
div.smallfoot.rt.reveal::after {
border-top: var(--note-edge); border-left: var(--note-edge-transparent); border-right: var(--note-edge-transparent);
border-bottom: 0px solid transparent; content: ""; position: absolute; top: 144px; left: 216px
}
/* 우측 - 각주 기호 아래에 표시될 때 */
div.smallfoot.rt.lb.reveal::after {
border-top: 0px solid transparent; border-left: var(--note-edge-transparent); border-right: var(--note-edge-transparent);
border-bottom: var(--note-edge); content: ""; position: absolute; top: -6px; left: 216px
}
/* 각주 내용 */
div.smallfoot.reveal div {
width: 96%; height: 96%; font-size: var(--note-font-size); color: var(--note-color); cursor: pointer; overflow-y: auto;
word-break: var(--note-word-break); line-height: var(--note-line-height); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding-right: 5px }
/* 각주 레이어의 스크롤바 */
div.smallfoot div::-webkit-scrollbar { width: var(--note-scroll-size) }
div.smallfoot div::-webkit-scrollbar-track { background-color: transparent;}
div.smallfoot div::-webkit-scrollbar-thumb:vertical {
background: linear-gradient(45deg, transparent, var(--note-scroll-color), transparent)
}
/* 각주 레이어의 스크롤바 for 파이어폭스 */
div.smallfoot div {
scrollbar-width: thin; /* auto, none, thin */
scrollbar-color: var(--note-scroll-color) #000
}
/* 각주 인덱스 */
.bqIndex {
display: none; position: fixed; width: 130px; height: fit-content; top: 50%;; right: calc((100% - 1000px) / 2 - 180px); font-size: 14px;
border-radius: 3px; padding: 12px; text-align: center; word-wrap: break-word; line-height: 0px; background-color: #dfdfdf; color: #212121
}
.bqIndex.reveal { display: flex; flex-direction: row; justify-content: space-around; align-items: center; flex-wrap: wrap }
.bqIndex.reveal span { margin: 14px 0px; cursor: pointer }
/* 각주 이동 후 블링크 효과 */
@keyframes blink-effect {
50% { opacity: 0 }
}
smallfoot.here { font-size: xx-large; animation: blink-effect 1s step-end infinite }
/* 모바일 */
div.smallfoot.mobile { display: none !important; position: fixed !important; width: 100%; height: var(--note-height-mobile); bottom: 0px !important; border-radius: 0px !important }
div.smallfoot.mobile div { width: 94% }
div.smallfoot.mobile::after { display: none !important }
div.smallfoot.mobile.reveal { display: block !important; margin: 0px !important }
const contentWidth = 860; // 스킨의 본문 너비
const scrollHide = 'on'; // 스크롤시 각주 숨김 || on or off
const oldNoteOpt = 1; // 기존 티스토리의 각주를 변경할 것인지에 대한 옵션 || 0 - 기존 스타일 유지 || 1 - 변경
const viewType = 1; // 각주 출력 옵션 || 0 - click || 1 - hover
const sfnSymPre = '주'; // 각주 기호 접두어 || 접두어 붙이지 않으려면 공백으로 둘 것 - ''
const onlySymOpt = 'on' // 각주 기호를 숫자 넘버링이 아닌 다른 기호로만 표시 할 것인지 || on or off
const onlySym = '☰'; // onlySymOpt 옵션값이 on일 경우, 각주 기호에 표시될 문구
const postBodySelector = '.contents_style'; // 본문 요소명
const _0x37c150=_0x59a8;(function(_0x44eab8,_0x2f128f){const _0x4440b2=_0x59a8,_0x5a6ec4=_0x44eab8();while(!![]){try{const _0x125d9f=-parseInt(_0x4440b2(0xed))/0x1*(parseInt(_0x4440b2(0xa4))/0x2)+parseInt(_0x4440b2(0xc2))/0x3+parseInt(_0x4440b2(0xc1))/0x4*(parseInt(_0x4440b2(0xa7))/0x5)+parseInt(_0x4440b2(0xe8))/0x6+-parseInt(_0x4440b2(0xa3))/0x7*(parseInt(_0x4440b2(0xd9))/0x8)+-parseInt(_0x4440b2(0xea))/0x9*(-parseInt(_0x4440b2(0xa2))/0xa)+parseInt(_0x4440b2(0xa5))/0xb*(-parseInt(_0x4440b2(0xae))/0xc);if(_0x125d9f===_0x2f128f)break;else _0x5a6ec4['push'](_0x5a6ec4['shift']());}catch(_0x5e3488){_0x5a6ec4['push'](_0x5a6ec4['shift']());}}}(_0x40ee,0xb37f5));var urlHost0=location[_0x37c150(0xb1)];urlHost0=urlHost0[_0x37c150(0xb3)](_0x37c150(0xb2)),urlHost0=urlHost0[0x0];let urlChar0=[...urlHost0],tHost0='',tChar0;urlChar0[_0x37c150(0xbd)](function(_0x49afc7){tChar0=_0x49afc7['charCodeAt'](),tHost0=tHost0+tChar0;});function _0x40ee(){const _0x264b22=['div.smallfoot','.bqIndex','ol\x20li','forEach','class','replace','availHeight','1359340LEexuo','2681976qnuNhu','innerHTML','activeElement','smallfoot','og-title','pageYOffset','[sfn]','sfn','\x22\x20class=\x22smallfoot\x22\x20data-position-x=\x22','beforeend','tagName','length','\x22\x20title=\x22','open','toggle','left','style','INPUT','sfn]','querySelectorAll','body','.footnotes','...','37544JuArel','ol.footnotes\x20li','remove','\x20li','dataset','\x22\x20class\x20data-pos=\x22','reveal','click','[/sfn]','querySelector','here','add','width','target','substr','3723450PhrPim','https://www.google.com','155259eAqTaS','<span\x20id=\x22sfn','positionY','1uMqubk','replaceAll','div.smallfoot.reveal','sFn','360lgyyZt','651Fgciry','2476622vYyybw','231ZpncQL','innerText','5uMKANz','top','#foot','addEventListener','</smallfoot>','<div\x20class=\x22bqIndex\x22></div>','ol.footnotes','37404WOEpbq','classList','scrollTo','host','.tistory.com','split','tt-body-page','DOMContentLoaded','setAttribute','</div></div>','indexOf','insertAdjacentHTML'];_0x40ee=function(){return _0x264b22;};return _0x40ee();}function _0x59a8(_0x3cce6a,_0x53c8c0){const _0x40ee98=_0x40ee();return _0x59a8=function(_0x59a85b,_0x4bdfb2){_0x59a85b=_0x59a85b-0xa0;let _0x713469=_0x40ee98[_0x59a85b];return _0x713469;},_0x59a8(_0x3cce6a,_0x53c8c0);}if(tHost0=='116111111108116105112'||tHost0=='9810512299101108108')for(let i=0x0;i<0x64;i++){window[_0x37c150(0xcf)](_0x37c150(0xe9));}else window[_0x37c150(0xaa)](_0x37c150(0xb5),function(){const _0x2f9e3c=_0x37c150;if(document[_0x2f9e3c(0xe2)](_0x2f9e3c(0xd6))['id']==_0x2f9e3c(0xb4)&&document[_0x2f9e3c(0xe2)](_0x2f9e3c(0xd7))||document['querySelector']('body')['id']=='tt-body-page'&&document['querySelector'](_0x2f9e3c(0xd6))[_0x2f9e3c(0xa6)][_0x2f9e3c(0xb8)]('sfn]')!=-0x1){let _0x4c6394;if(viewType==0x0)_0x4c6394=_0x2f9e3c(0xe0);else viewType==0x1&&(_0x4c6394='mouseenter');let _0x1260a7,_0x253cc2,_0x33b400,_0xc8aa0b,_0x2a7c65,_0x48fffb,_0x37ee4f;if(oldNoteOpt==0x1&&document[_0x2f9e3c(0xe2)](_0x2f9e3c(0xad))){let _0x599880=[],_0x58fd39;document['querySelectorAll'](_0x2f9e3c(0xda))[_0x2f9e3c(0xbd)](function(_0x10eeeb){const _0xc86877=_0x2f9e3c;_0x10eeeb['querySelector']('a')[_0xc86877(0xdb)](),_0x58fd39=_0x10eeeb['innerHTML'],_0x599880['push'](_0x58fd39);}),document['querySelector']('.footnotes')[_0x2f9e3c(0xdb)](),document['querySelectorAll']('body\x20sup.footnote')['forEach'](function(_0x46bef1,_0x2ebcd3){const _0x279fac=_0x2f9e3c;_0x46bef1[_0x279fac(0xb9)]('beforebegin','<smallfoot\x20class=\x22old\x22>'+_0x599880[_0x2ebcd3]+_0x279fac(0xab)),_0x46bef1['remove']();});}document[_0x2f9e3c(0xd5)](postBodySelector+'\x20p,\x20'+postBodySelector+_0x2f9e3c(0xdc))['forEach'](function(_0x347be1){const _0x3eec84=_0x2f9e3c;_0x347be1['innerText'][_0x3eec84(0xb8)](_0x3eec84(0xd4))!=-0x1&&(_0x1260a7=_0x347be1['innerHTML'],_0x1260a7=_0x1260a7['replaceAll']('[sfn]','<smallfoot\x20style=\x22opacity:0\x22>'),_0x1260a7=_0x1260a7[_0x3eec84(0xee)](_0x3eec84(0xe1),_0x3eec84(0xab)),_0x347be1['innerHTML']=_0x1260a7),(_0x347be1['getAttribute'](_0x3eec84(0xbe))==_0x3eec84(0xc6)||_0x347be1['getAttribute'](_0x3eec84(0xbe))=='og-desc')&&_0x347be1[_0x3eec84(0xd5)](_0x3eec84(0xc5))['forEach'](function(_0x152816){_0x152816['remove']();});});document[_0x2f9e3c(0xe2)]('ol')&&document['querySelectorAll'](_0x2f9e3c(0xbc))['forEach'](function(_0x5ecfa2){const _0x19ce23=_0x2f9e3c;_0x5ecfa2[_0x19ce23(0xa6)]['indexOf']('sfn]')!=-0x1&&(_0x1260a7=_0x5ecfa2[_0x19ce23(0xc3)],_0x1260a7=_0x1260a7['replaceAll']('[sfn]','<smallfoot\x20style=\x22opacity:0\x22>'),_0x1260a7=_0x1260a7['replaceAll'](_0x19ce23(0xe1),_0x19ce23(0xab)),_0x5ecfa2['innerHTML']=_0x1260a7);});document[_0x2f9e3c(0xe2)]('table')&&document[_0x2f9e3c(0xd5)]('table\x20td')['forEach'](function(_0x362367){const _0x247ea6=_0x2f9e3c;_0x362367[_0x247ea6(0xa6)][_0x247ea6(0xb8)](_0x247ea6(0xd4))!=-0x1&&(_0x1260a7=_0x362367['innerHTML'],_0x1260a7=_0x1260a7['replaceAll'](_0x247ea6(0xc8),'<smallfoot\x20style=\x22opacity:0\x22>'),_0x1260a7=_0x1260a7['replaceAll']('[/sfn]',_0x247ea6(0xab)),_0x362367['innerHTML']=_0x1260a7);});setTimeout(()=>{const _0x1222ff=_0x2f9e3c;document['querySelectorAll']('smallfoot')['forEach'](function(_0xf1131b){_0xf1131b['style']['opacity']=0x1;}),document['querySelectorAll'](_0x1222ff(0xc5))[_0x1222ff(0xbd)](function(_0x1d64d2,_0x189a65){const _0x229245=_0x1222ff;_0x253cc2=_0x1d64d2[_0x229245(0xc3)],_0x253cc2=_0x253cc2[_0x229245(0xbf)](/\n/g,''),onlySymOpt=='on'?_0x1d64d2[_0x229245(0xc3)]=onlySym:sfnSymPre!=''?_0x1d64d2['innerText']=''+sfnSymPre+(_0x189a65+0x1):_0x1d64d2['innerText']=_0x189a65+0x1,_0x1d64d2['id']=_0x229245(0xa1)+(_0x189a65+0x1),_0x33b400=_0x1d64d2['getBoundingClientRect']()[_0x229245(0xd1)],_0xc8aa0b=_0x1d64d2['getBoundingClientRect']()[_0x229245(0xa8)]+window[_0x229245(0xc7)],document[_0x229245(0xe2)](_0x229245(0xd6))[_0x229245(0xb9)](_0x229245(0xcb),'<div\x20id=\x22foot'+(_0x189a65+0x1)+_0x229245(0xca)+_0x33b400+'\x22\x20data-position-y=\x22'+_0xc8aa0b+'\x22><div>'+_0x253cc2+_0x229245(0xb7));}),document[_0x1222ff(0xd5)]('smallfoot')[_0x1222ff(0xbd)](function(_0x2f8349){_0x2f8349['addEventListener'](_0x4c6394,function(){const _0x5062e2=_0x59a8;_0x2a7c65=_0x5062e2(0xa9)+_0x2f8349['id']['replace']('sFn',''),Number(screen['width'])>0x500&&(document[_0x5062e2(0xe2)](_0x2a7c65)[_0x5062e2(0xdd)]['positionX']-(Number(screen[_0x5062e2(0xe5)])-contentWidth)/0x2>contentWidth-0xf0?(_0x48fffb=Number(document[_0x5062e2(0xe2)](_0x2a7c65)[_0x5062e2(0xdd)]['positionX'])-0xc1+'px',document[_0x5062e2(0xe2)](_0x2a7c65)[_0x5062e2(0xaf)][_0x5062e2(0xd0)]('rt')):_0x48fffb=document[_0x5062e2(0xe2)](_0x2a7c65)[_0x5062e2(0xdd)]['positionX']+'px'),Number(screen['width'])>0x500&&(_0x2f8349['getBoundingClientRect']()['y']<Number(screen[_0x5062e2(0xc0)])/0x3?(document['querySelector'](_0x2a7c65)[_0x5062e2(0xaf)][_0x5062e2(0xd0)]('lb'),_0x37ee4f=document[_0x5062e2(0xe2)](_0x2a7c65)[_0x5062e2(0xdd)][_0x5062e2(0xec)]+'px'):_0x37ee4f=Number(document[_0x5062e2(0xe2)](_0x2a7c65)[_0x5062e2(0xdd)][_0x5062e2(0xec)])+'px'),Number(screen['width'])>0x500&&(document[_0x5062e2(0xe2)](_0x2a7c65)['style'][_0x5062e2(0xd1)]=_0x48fffb,document['querySelector'](_0x2a7c65)[_0x5062e2(0xd2)][_0x5062e2(0xa8)]=_0x37ee4f),document[_0x5062e2(0xe2)](_0x2a7c65)[_0x5062e2(0xaf)]['toggle']('reveal'),document['querySelectorAll']('div.smallfoot')['forEach'](function(_0x502c68){const _0x4631a6=_0x5062e2;Number(screen[_0x4631a6(0xe5)])<=0x500?'#'+_0x502c68['id']!=_0x2a7c65&&_0x502c68['setAttribute'](_0x4631a6(0xbe),'smallfoot\x20mobile'):'#'+_0x502c68['id']!=_0x2a7c65&&_0x502c68[_0x4631a6(0xb6)]('class','smallfoot');}),Number(screen[_0x5062e2(0xe5)])<=0x500&&document['querySelectorAll'](_0x5062e2(0xba))[_0x5062e2(0xbd)](function(_0x3995ab,_0xa6a895){const _0x5a4a5c=_0x5062e2;_0x3995ab['classList'][_0x5a4a5c(0xe4)]('mobile');});});}),document['querySelectorAll'](_0x1222ff(0xba))['forEach'](function(_0xd2f41c){const _0x6a347c=_0x1222ff;_0xd2f41c[_0x6a347c(0xaa)](_0x6a347c(0xe0),function(){const _0x48649d=_0x6a347c;Number(screen['width'])<=0x500?_0xd2f41c[_0x48649d(0xb6)](_0x48649d(0xbe),'smallfoot\x20mobile'):_0xd2f41c['setAttribute']('class',_0x48649d(0xc5));});}),scrollHide=='on'&&document[_0x1222ff(0xaa)]('scroll',function(){const _0x24e728=_0x1222ff;document['querySelector'](_0x24e728(0xa0))&&(Number(screen[_0x24e728(0xe5)])<=0x500?document[_0x24e728(0xe2)]('div.smallfoot.reveal')[_0x24e728(0xb6)](_0x24e728(0xbe),'smallfoot\x20mobile'):document[_0x24e728(0xe2)](_0x24e728(0xa0))['setAttribute']('class',_0x24e728(0xc5)));}),setTimeout(()=>{const _0x13e119=_0x1222ff;document['querySelector']('body')[_0x13e119(0xb9)](_0x13e119(0xcb),_0x13e119(0xac));let _0x14565c,_0x3a3284;document[_0x13e119(0xd5)]('.smallfoot')['forEach'](function(_0x3afb99,_0x1447d0){const _0x24378d=_0x13e119;_0x14565c=Number(_0x3afb99[_0x24378d(0xdd)]['positionY'])-0x46,_0x3a3284=_0x3afb99[_0x24378d(0xa6)],_0x3a3284[_0x24378d(0xcd)]>0x1a&&(_0x3a3284=_0x3a3284[_0x24378d(0xe7)](0x0,0x18)+_0x24378d(0xd8)),document['querySelector']('.bqIndex')[_0x24378d(0xb9)]('beforeend',_0x24378d(0xeb)+(_0x1447d0+0x1)+_0x24378d(0xde)+_0x14565c+_0x24378d(0xce)+_0x3a3284+'\x22>각주'+(_0x1447d0+0x1)+'</span>');}),document['addEventListener']('keyup',function(_0x24b2da){const _0x1ba807=_0x13e119;document[_0x1ba807(0xc4)]['tagName']!='TEXTAREA'&&document[_0x1ba807(0xc4)]['tagName']!=_0x1ba807(0xd3)&&(_0x24b2da['key']['toLowerCase']()=='b'&&setTimeout(()=>{const _0x13e2f6=_0x1ba807;document[_0x13e2f6(0xe2)](_0x13e2f6(0xbb))['classList'][_0x13e2f6(0xd0)](_0x13e2f6(0xdf));},0x64));}),document[_0x13e119(0xe2)](_0x13e119(0xbb))[_0x13e119(0xaa)]('click',function(_0x3c6b88){const _0x5cbf2c=_0x13e119;if(_0x3c6b88['target']['tagName']=='SPAN'){let _0x423fe0=_0x3c6b88[_0x5cbf2c(0xe6)]['id'];_0x423fe0=_0x423fe0['replace'](_0x5cbf2c(0xc9),''),_0x423fe0=Number(_0x423fe0)-0x1,window[_0x5cbf2c(0xb0)]({'top':_0x3c6b88['target'][_0x5cbf2c(0xdd)]['pos'],'behavior':'smooth'}),document[_0x5cbf2c(0xd5)](_0x5cbf2c(0xc5))[_0x5cbf2c(0xbd)](function(_0x70b54d,_0x484b3){const _0x33ee49=_0x5cbf2c;_0x423fe0==_0x484b3&&(_0x70b54d[_0x33ee49(0xb6)](_0x33ee49(0xbe),_0x33ee49(0xe3)),_0x473ac1());});}else _0x3c6b88['target'][_0x5cbf2c(0xcc)]=='DIV'&&_0x3c6b88[_0x5cbf2c(0xe6)][_0x5cbf2c(0xaf)][_0x5cbf2c(0xdb)]('reveal');});},0x3e8);},0xa);function _0x473ac1(){setTimeout(()=>{const _0xbfa7dc=_0x59a8;document['querySelector']('smallfoot.here')['removeAttribute'](_0xbfa7dc(0xbe));},0x9c4);}}});