hELLO 스킨(헬로 스킨)
오늘은 개발 블로그에서 자주 보이는 hELLO 스킨의 커스텀을 진행하였다.
우선 hELLO 스킨은 정상우님이 만드신 티스토리 스킨으로 매우 깔끔하고 다양한 기능들이 포함되어있다 !
우선 제작자 정상우님의 블로그에 대략적인 기능들이 포함되어 있으며, 해당 글에 GITHUB DISCUSSION 링크도 있어서 간단한 오류들이나 기능들은 저기서도 확인하면 될 것 같다.
hELLO 티스토리 스킨을 소개합니다.
hELLO 스킨은 초기에 기능이 많이 없었다가, 티스토리 블로거 여러분의 호응에 힘입어 기능의 추가와 함께 업데이트를 여러 번 하게 되었습니다. hELLO 1.0 때와 비교하면 비교할 수도 없을 만큼의
pronist.tistory.com
GitHub - tidory/hello: 😎 당신의 멋진 블로그에 걸맞는 최고의 티스토리 스킨
😎 당신의 멋진 블로그에 걸맞는 최고의 티스토리 스킨. Contribute to tidory/hello development by creating an account on GitHub.
github.com
아래는 내가 나중에 업데이트 되는 버전에도 이용하기 위해서 커스텀한 것들만 작성하였다.
!! 혹시나 문제가 되는 부분이 있다면 삭제하도록 하겠습니다.
!! 또한 아래 기능들에 관련하여 모르는 것이 있다면 댓글로 알려주시면 알려드리겠습니다.
!! 다른 hELLO 스킨 관련 질문은 위의 개발자님의 Github의 discussion에 작성하면 친절하게 알려주십니다!!
1. 제목3 태그 TOC 추가
우선 기본적으로 태그 TOC, 본문에서 카테고리가 떠다니는 기능 및 목차 기능이 포함되어있는데 대부분의 스킨과 hELLO스킨에서도 H3는 지원하지 않는다고 한다. 그래도 나는 추가하고 싶어서 hELLO 스킨의 discussion을 참조하여 수정하였다.
자동목차에 제목3도 포함할 수 있는 옵션 부탁드려요. · tidory/hello · Discussion #178
먼저 깔끔한 스킨 너무너무 잘 쓰고 있습니다. 사용한지는 얼마되지 않았는데.. 완전 제 스타일입니다. 자동목차도 너무 마음에 드는데.. 제목3까지 자동목차에 사용할 수 있는 옵션이 있었으면
github.com
우선 티스토리 스킨에 업로드한 `script.js`를 다운받아 아래부분을 찾아서 뒤의 `.contents_style > h4`를 추가해주고 다시 업로드 해준다.
supportHeadings: '.contents_style > h2, .contents_style > h3, .contents_style > h4',다음으로 들여쓰기가 되게하기 위해서 html 편집에 들어가서서 아래를 전부 찾아 수정해준다.
원래는 H3부분까지 적혀있으니, H3까지를 복사하여 검색한다음, 뒷부분을 해당하는 태그들에 붙여넣어 준다.
:class='{ "pl-0": heading.tagName === "H2", "pl-4": heading.tagName === "H3", "pl-8": heading.tagName === "H4" }'마지막으로 CSS 편집에 들어가서 아래 style을 추가해주면 된다. (들여쓰기되는스타일 적용이다.)
.pl-8 {
padding-left: 2rem;
}2. 코드 인라인 넘버(inline number)
다음으로 코드블럭에 인라인 넘버를 추가하는 방법이다.
html편집에 들어가서 `</body>`바로 위에다가 아래 코드를 그대로 붙여넣어주면 된다.
<script defer src='//cdn.jsdelivr.net/npm/highlightjs-line-numbers.js@2.8.0/dist/highlightjs-line-numbers.min.js'></script>
<script>
window.addEventListener('load', () => {
hljs.initLineNumbersOnLoad()
})
</script>그리고 css편집에 들어가서 아래 스타일을 적용시켜준다.
#content .hljs-ln-numbers {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
color: #ccc;
border-right: 1px solid #CCC;
vertical-align: top;
padding-right: 5px;
}
#content .hljs-ln-code {
padding-left: 10px;
}그럼 아래와 같이 인라인 넘버가 표시된다.
3. 코드 폰트 수정
우선 티스토리 코드셀의 디자인 변경은 너무 감사하게도, 기본적으로 스킨 편집에서 수정할 수 있다.
기본적으로 d2coding으로 폰트가 적용되어 있는데 나는 얼마전 다른 폰트를 알게되어 해당폰트로 변경하였다.
우선 자신이 원하는 아래 링크에서 찾은다음 import할 링크를 복사해온다. 우측에 뜨는 웹폰트에서 사용할 수 있도록 해주는 링크를 복사해오면된다.
Browse Fonts - Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
그다음 html 편집에 들어가서 `<head>`아래에 적어주면 된다.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Victor+Mono:wght@300&display=swap" rel="stylesheet">다음으로 css편집에서 `D2Coding`을 검색해준다음 바로 앞에 자신이 원하는 폰트명을 작성해주면 된다.
code,
kbd,
samp,
pre {
font-family: Victor Mono, D2Coding, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
/* 1 */
font-size: 1em;
/* 2 */
}4. 티스토리 span 태그 없애기 (티스토리 버그)
이건 티스토리의 예전부터 발생하던 복사 붙여넣기를 하면 자동으로 이상한 태그들이 발생하는 오류를 편법으로 수정하는 방법이다. 저 span태그들이 붙어있으면 평소에는 이상없어보이는데, 다크모드로 바꾸거나 할 때 글씨가 이상해진다.
따라서 css편집에 들어가서 아래 style을 붙여넣어준다. 저 태그들을 가진 것들은 강제적으로 글씨 색상과 배경색상을 정해주는 것이다.
이걸해도 안되는 부분들이 있다면 글 작성시 에디터에서 html모드로 들어가서 문제가 발생하는 태그를 복사하여 앞에 `.dark`를 붙인뒤 맨위에 붙여넣고 `,`를 잊지말고 적어주면 된다. 아래 css 위에 이어서 작성해주면 된다.
.dark span[style*="color: #333333; text-align: start;"],
.dark span[style*="color: #000000; text-align: start;"],
.dark span[style*="color: #333333;"],
.dark span[style*="color: #000000;"],
.dark span[style*="background-color: #ffffff;"],
.dark h1[style="background-color: #ffffff; color: #000000; text-align: start;"],
.dark h1[style*="color: #000000; text-align: start;"],
.dark h2[style*="color: #000000; text-align: left;"],
.dark h2[style*="color: #000000; text-align: start;"],
.dark h2[style="background-color: #ffffff; color: #000000; text-align: start;"],
.dark h3[style="background-color: #ffffff; color: #000000; text-align: start;"],
.dark h3[style*="color: #000000;"][style*="text-align: left;"],
.dark h3[style*="color: #000000;"][style*="text-align: start;"],
.dark h3[style*="color: #333333;"][style*="text-align: start;"],
.dark h4[style*="color: #333333;"][style*="text-align: start;"],
.dark h4[style*="color: #000000;"][style*="text-align: start;"],
.dark ol[style="list-style-type: decimal; color: #000000; text-align: start;"],
.dark ul[style="list-style-type: disc; background-color: #ffffff; color: #212529; text-align: start;"],
.dark ul[style="list-style-type: disc; background-color: #ffffff; color: #000000; text-align: start;"][data-ke-list-type="disc"],
.dark li[style="list-style-type: decimal; color: #666666;"],
.dark li[style="list-style-type: disc; color: #666666;"],
.dark p[style="color: #333333; text-align: start;"],
.dark p[style="color: #000000; text-align: start;"],
.dark p[style="background-color: #ffffff; color: #000000; text-align: start;"]{
background-color: rgb(30, 31, 33) !important;
color: #fff !important;
}
[수정]
위의 방법은 티스토리에서 발생하는 복붙하거나 줄바꿈을 했을 때 생기는 span 태그의 css만을 변경해서 색이 제대로 나오게하는 거였는데, 이 방법을 사용해도 html모드로 들어가서 보면 여전히 이상한 태그들이 나왔이고 지저분했다.
그래서 아예 해당 span태그를 없애버리는 방법을 찾았다.(어디에도 이 방법을 찾을 수가 없어서 매우 오래걸렸다..)
<script>
// span 없애는 함수
function removeSpanTags(htmlString) {
var regex = /<span\s+style\s*=\s*['"]color:\s*#333333;\s*text-align:\s*start;\s*['"]\s*>(.*?)<\/span>/g;
var result = htmlString.replace(regex, '$1');
console.log(result);
return result;
}
var spanElements = document.querySelectorAll('span[style="color: #333333; text-align: start;"]');
spanElements.forEach(function(spanElement) {
var htmlString = spanElement.outerHTML;
var result = removeSpanTags(htmlString);
console.log(htmlString);
spanElement.outerHTML = result;
});
function removeDataKeSizeFromPTags(htmlString) {
var regex = /<p\s+data-ke-size\s*=\s*['"]size16['"]\s*(.*?)<\/p>/g;
var result = htmlString.replace(regex, '<p $1</p>');
// console.log(result);
return result;
}
var pElements = document.querySelectorAll('p[data-ke-size="size16"]');
pElements.forEach(function(pElement) {
var htmlString = pElement.outerHTML;
var result = removeDataKeSizeFromPTags(htmlString);
// console.log(htmlString);
pElement.outerHTML = result;
});
});
</script>정규표현식을 이용해서 해당 이상한 태그들을 찾아내고, 그 태그에 감싸져있는 텍스트만 남기고 태그를 없애는 코드이다!
이렇게하니 지저분한 티스토리의 span태그들이 없어졌다.
나의 경우 `<span style="color: #333333; text-align: start;>'이게 생겨나서 위와같이 제거한 것이고, 혹시나 다른 span style이 생성된다면 그에 맞게 위의 코드에서 `regex`를 해당 태그의 정규표현식을 참고해서 수정하고, `querySelectorAll`에 들어가는 태그를 수정해주면 될 것이다.
5. 인라인 코드 블럭
`이런것` 과 같이 인라인 코드블럭을 사용하려면 이전에도 포스팅했지만 조금 번거롭다.
이런과정을 키보드의 1왼쪽에 있는 물결과 같이 있는 `백틱으로 감싸줌으로써 간단하게 사용할 수 있게 해준다.
이것또한 html편집에 들어가서 `</body>`앞에 넣어주면 된다.
<script>
let textNodes = document.querySelectorAll("article > *:not(figure):not(pre)");
textNodes.forEach(node => {
node.innerHTML = node.innerHTML.replace(/`(.*?)`/g, '<code>$1</code>');
});
</script>다음으로 css 편집에 들어가서 아래 부분을 붙여넣어준다. 아래 css는 자기 마음대로 수정하면 된다.
p code {
font-family: Consolas !important;
line-height: normal;
background: rgba(135,131,120,0.15);
color: #EB5757 !important;
border-radius: 3px;
font-size: 85% !important;
padding: 0.2em 0.4em;
margin-right: 0.2em;
display: inline-block;
}6. 헤더 편집
아래의 헤더는 enerG님의 블로그를 참조하였으며 ,css와 html도 모두 enerG님이 작성하셨다.
'Project Record/Customize Tistory' 카테고리의 글 목록
에너지 넘치는 엔지니어⚡ 읽고 쓰고 정리하는 것을 좋아합니다.
energneer.tistory.com
헤더에 원래 해당 글의 썸네일이 표시되는데 나는 특정 이미지로 설정되게 바꿔놨다.
우선 아래의 헤더를 html편집에서 찾아서 주석처리 혹은 제거해준다.
<header class="h-64 mb-10 flex justify-center items-center border-b border-b-solid border-b-h-200 dark:border-b-h-700 lg:mb-16">
<s_article_rep_thumbnail>
<div class='thumbnail absolute right-0 top-0 w-full h-64 before:backdrop-blur before:content-[""] before:absolute before:right-0 before:top-0 before:w-full before:h-64 before:bg-h-900/50 before:z-10 [&+.description]:text-h-200'><img class="absolute right-0 top-0 w-full h-64 z-0 object-cover" src="https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbHKLOY%2FbtsBxckxEGA%2FIqGppvOqBwVUzxB8BsJZp0%2Fimg.png" alt=""></div>
</s_article_rep_thumbnail>
<div class="description flex flex-col items-center gap-y-3 z-20 relative mx-4 text-h-800 dark:text-h-200 lg:mx-0">
<h1 class="text-center font-bold text-2xl lg:text-3xl">hELLO 스킨 커스텀</h1>
<div class="flex gap-x-1 text-sm"><time>2023. 12. 7. 23:51</time><a href="/category/%EC%95%8C%EC%93%B8%EC%8B%A0%EC%9E%A1" class="category-getter">· 알쓸신잡</a><span class="admin flex gap-x-1">
<s_ad_div><a href="">수정</a><a href="#" onclick="">삭제</a><a href="#" onclick=""></a></s_ad_div>
</span></div>
</div>
</header>그리고 아래 코드를 해당 자리에 그대로 붙여넣어준다.
아래의 ` src="./images/업로드한이미지.png"`이 부분은 나는 모든 글에 똑같은 그림으로 설정해놓기 위해 티스토리 스킨에 이미지를 올려놓고 해당 이미지를 불러왔고, 해당 글의 썸네일을 표시하고싶으면, 해당 src부분을 아래처럼 바꾸면 된다.
아래 맨뒤에 # 두개를 붙여서 사용하세요.
`src="[##_article_rep_thumbnail_url_# #]"`
<header class="mt-20 mb-10 flex flex-col justify-end px-5 w-full lg:max-w-screen-lg lg:w-pem lg:px-0 lg:mx-auto">
<div class="description text-h-800 dark:text-h-200 lg:mx-0">
<div class="mb-6 header-thumbnail"><img class="header-thumbnail" src="./images/업로드한이미지.png" width="140" height="140"></div>
<h1 class="font-extrabold mt-4 text-3xl lg:text-4xl">hELLO 스킨 커스텀</h1>
<div class="flex gap-x-2 mt-2 text-sm flex-wrap text-h-500 dark:text-h-200 font-medium">
<div class="mt-4 mr-2">
<a class="text-sm header-des-cate" href="/category/%EC%95%8C%EC%93%B8%EC%8B%A0%EC%9E%A1">Recorded -</a>
</div>
<div class="flex gap-x-2 mt-4">
<time class="header-des">
<script>
const month = '03' - 1;
const m = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug", "Sep","Oct","Nov","Dec"];
document.write(m[month]);
</script>, 2023</time>
</div>
</div>
<div class="flex gap-x-1 text-sm"><span class="admin flex gap-x-1">
<s_ad_div><a href="/category/%EC%95%8C%EC%93%B8%EC%8B%A0%EC%9E%A1" class="category-getter"> 알쓸신잡 </a><a href="">수정 /</a><a href="#" onclick="">삭제 /</a><a href="#" onclick=""></a></s_ad_div>
</span></div>
</div>
</header>그리고 css편집에서 아래 부분을 추가해준다.이것또한 자유롭게 수정하면 된다.
div.header-thumbnail{
width: 130px;
height: 130px;
border-radius: 999px;
overflow: hidden;
box-shadow: 0px 2px 15px rgb(0 0 0 / 10%), 1px 2px 3px rgb(0 0 0 / 3%);
}
img.header-thumbnail {
width: 100%;
height: 100%;
object-fit: cover;
}
+) 수정 앞의 카테고리 이름을 가리고 싶다면,
아래 코드를 찾아서 display=none을 추가해주면 된다.(없애면 안되는 이유는 아래의 카테고리 펼치기에 사용되기 떄문)
티스토리 치환자 때문에 맨뒤에 ##을 모두 # # 으로 해놓았으니 ##으로 수정하여 검색하셔야 합니다.
<s_ad_div><a href="/category/%EC%95%8C%EC%93%B8%EC%8B%A0%EC%9E%A1" class="category-getter" style="display: none;"> 알쓸신잡 </a><a href="">수정 /</a><a href="#" onclick="">삭제 /</a><a href="#" onclick=""></a></s_ad_div>
7. 카테고리 펼치기
이건 내가 지금 들어와있는 글에 해당하는 카테고리를 펼쳐놓는 코드이다. 이것도 enerG님의 블로그를 참조하였으며 script와 html 모두 enerG님이 작성하셨다.
티스토리 hELLO 스킨 현재 카테고리만 펼치기
사이드바의 카테고리 목록 중, 현재 보고 있는 글이 속한 카테고리만 펼쳐지게 하고 싶었다. 1. 바로 위 script에 아래와 같이 넣어준다. const cateLists = document.querySelectorAll(".sub_category_list"); const curre
energneer.tistory.com
html편집에 들어가서 `</body>`태그위에 아래의 script를 붙여넣어준다.
<script>
const cateLists = document.querySelectorAll(".sub_category_list");
const currentPageCate = document.querySelector(".category-getter").textContent;
window.addEventListener('load', function() {
function cateHandler(category) {
const cateText = category.parentNode.childNodes[1].childNodes[0].textContent.trim();
if(currentPageCate.includes(cateText)){
category.parentNode.firstChild.click();
}
}
cateLists.forEach(cateHandler);
});
</script>다음으로
- [##_list_conform_# #]를 감싸고 있는 h1과, [##_article_rep_category_# #]를 감싸고 있는 a 를 전부 찾아서 해당 h1과 a 태그에 category-getter 클래스를 넣어준다. (전부 맨 뒤 #붙여서 검색하세요)
그럼 정상적으로 카테고리가 펼쳐진다.
(만약 위의 다른 커스텀들도 적용하셨다면, [인라인코드넘버]->[카테고리펼치기]->[인라인코드] 순으로 script가 작성되어있으면 제대로 돌아간다.)
8. Light box오류
티스토리에서 lightbox지원을 종료해서 개발자모드에 들어가면 항상 lightbox오류가 뜨고 블로그에 올린 이미지들을 눌러도 확대가 안됐다. 아래 코드를 `</body>` 바로 위에 적어주면 lightbox를 정상적으로 적용할 수 있다.
<script>window.jQuery = tjQuery;</script>9. 이미지 폭 맞추기
다음으로 이미지 폭 맞추기이다.
hELLO 스킨에서 이미지를 삽입하였을 때 단일 이미지의 아래 제일 왼쪽에 있는 것을 선택해주면 본문 폭에 자동으로 맞게 설정되는데, 2개 이상의 이미지를 나란히 삽입하였을 때는 저런 버튼도 없을 뿐더러, 이미지가 본문 폭을 넘어갔다....
글을 다 작성하고 보니 깔끔한 느낌이 들지 않아 찾아보게되었고
이것은 버그가 아니라!! 개발자님이 이미지를 더 풍부하게 사용하도록 의도하신거라고 한다.
그렇지만! 나는 폭이 안넘어갔으면 좋겠어서 CSS를 수정해서 2개 이상의 이미지를 삽입했을 때도 본문 폭이 넘어가지 않도록 수정하였다!! CSS의 제일 아래쪽에 해당 코드를 삽입해주면 이제 여러장의 이미지를 나란히 넣을 때도 본문 폭에 넘어가지 않도록 한다.
figure.imagegridblock {
width: 100% !important;
}10. 수학수식 표현하기
다음은 HELLO 스킨에서 수학수식을 작성할 수 있는 방법을 알아보겠다. 수학수식이란 $ y= ax+b $ 이렇게 나타나는 것을 의미한다. 제일 위쪽 `</head>`앞에 복붙해주면 된다.
사용법은 $ 로 감싸면 그냥 인라인 형식으로 작성되고 $$ 로 감싸면 아래와 같이 가운데 정렬이 된다. 참고로 $를 쓰고 한칸 띄고 안에 수식을 적고 한칸 띄고 닫아야 한다. 수학수식은 LATEX문법으로 작성하면 된다!!
<script type="text/x-mathjax-config">MathJax.Hub.Config({ tex2jax: {inlineMath: [['$','$']]} }); </script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-MML-AM_CHTML"></script>$ y=ax+b $
'알쓸신잡' 카테고리의 다른 글
| Vscode ssh로 윈도우 서버 연결(데스크탑, 노트북) (1) | 2023.12.14 |
|---|---|
| VSCODE 폰트 바꾸기 (0) | 2023.12.08 |
| Github 2FA 이중인증 등록하기 (1) | 2023.12.07 |
| 딥러닝 NVIDIA GPU / cuda 사용하기 (1) | 2023.11.27 |
| scikit-learn-intelex (0) | 2023.11.24 |
