oris9
티스토리 스킨 세팅 본문
맨날 스킨 바꿔서 적는 기본 세팅 값들 😵💫😵💫😵💫
1. 기본모드에서 인라인코드 백틱(`)으로 삽입하기
<!-- Inline code block Script -->
<script>
let textNodes = document.querySelectorAll(".스킨컨텐츠영역클래스명 .contents_style > *:not(figure):not(pre)");
textNodes.forEach(node => {
node.innerHTML = node.innerHTML.replace(/`(.*?)`/g, '<code>$1</code>');
});
</script>
<!-- end of Inline code block Script --></body> 태그 바로 위에 붙여넣고
.area_view code {
font-family: Menlo, Consolas, Monaco, monospace;
}
.area_view p code {
padding: 2px 5px;
border-radius: 3px;
background: #efefef;
margin: 0 2px;
border: 1px solid #e0e0e0;
}원하는 스타일을 적용해주면 된다. (없으면 새로 작성해주면 됨)
한 가지 작은 오류(?)라고 한다면
글 목록 미리보기 텍스트에서는 백틱만 보이고 백틱 내부 텍스트는 보이지 않는다.
그래도 검색 결과에서 제외되지는 않는다
`백틱테스트입니다`
2. 프리텐다드 폰트
<head>
...
<!--pretendard-->
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/ungveloper/web-fonts/Pretendard/font-face.css" />
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/ungveloper/web-fonts/Pretendard/font-family.css" />
<!--pretendard-->
</head>
3. 상단 가로스크롤바
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/ungveloper/web-components-kit/topScrollIndicator/css/styles.css" />
</head>
...
<script src="https://cdn.jsdelivr.net/gh/ungveloper/web-components-kit/topScrollIndicator/js/scripts.js"></script>
</body> <style>
#topScrollIndicator {
/* 채워지는 선 굵기 (숫자만 변경) */
height: 3px;
/* 채워지는 선 색상 */
background: #333333;
}
</style>
</head>
4. 서식 필요없이 목차 생성
<script src="./images/jquery.toc.min.js"></script>
<script>
// 목차 생성
$(document).ready(function() {
var $toc = $("#toc");
if($toc.length == 0) {
var firstContent = $('.tt_article_useless_p_margin').children().eq(0);
var titleLength = $('.tt_article_useless_p_margin h2,h3,h4').length - $('.another_category h4').length - $('h3.tit_list_type').length;
// 목차제목 있는 버전
// if(titleLength > 0 && firstContent.length > 0) {
// firstContent.before('<div class="book-toc"><p>목차</p><ul id="toc"></ul></div>');
// $toc = $("#toc");
// }
// 목차제목 없는 버전
if(titleLength > 0 && firstContent.length > 0) {
firstContent.before('<div class="book-toc"><ul id="toc"></ul></div>');
$toc = $("#toc");
}
}
if($toc.length > 0) {
$toc.toc({content: ".tt_article_useless_p_margin", headings: "h2,h3,h4"});
if($('.another_category').length > 0) {
$toc.find('li:last').remove();
}
}
});
</script>
</body>** 주의!
.tt_article_useless_p_margin
부분을 각 스킨에 맞는 클래스명으로 변경해주어야함 (본문 영역으로)
티스토리 반응형 #2의 경우 .area_view로 변경
/* 목차(TOC) */
#toc * {
font-size: 16px;
font-weight: 200;
color: #575757;
list-style: none;
}
#toc a {
color: #686868;
}
#toc a:hover {
font-weight: 200;
text-decoration: none;
color: #000000;
}
#toc ul {
margin-top: 5px;
margin-bottom: 0px;
}
#toc ol {
margin-top: 5px;
margin-bottom: 0px;
}
#toc {
margin-left: 0px;
}
#toc > li {
margin-bottom: 0;
margin-top: 7px;
}
#toc > li > a {
text-decoration:none;
}
#toc > li > ul {
margin-top: 0;
margin-bottom: 0;
}
#toc > li > ul > li {
font-size: 0.9em;
margin-bottom: 5px;
margin-top: 5px;
}
#toc > li > ul > li > a {
font-size: 1em;
text-decoration:none;
}
#toc > li > ul > li > ul {
margin-bottom: 0;
}
#toc > li > ul > li > ul > li {
font-size: 0.9em;
margin-bottom: 0px;
margin-top: 0px;
}
#toc > li > ul > li > ul > li > a {
font-size: 0.9em;
text-decoration:none;
}
/* 목차(TOC) 끝 */
감사합니다 (참고자료)
인라인코드 - https://haruisshort.tistory.com/253
프리텐다드, 가로스크롤바 - https://ungveloper.tistory.com/5?category=1162932
'기타 자료' 카테고리의 다른 글
| [네트워크] HTTP 메소드에 대해 알아보자 (0) | 2024.04.07 |
|---|---|
| HTTP 상태코드(Status Code)와 관련 사이트(고냥이강아지) (0) | 2024.03.31 |
| [AWS] EC2 연결 시 Operation/Connection timed out 발생 (0) | 2024.03.04 |
| [AWS] 서버 접속하기 (0) | 2024.03.03 |
| 터미널 quote 뜰 때 탈출하기 (0) | 2024.01.20 |
'기타 자료' Related Articles
more
