안녕하세요!
오늘은 티스토리 스킨을 새로 바꿔보고, 바꾸면서 헤맸던 부분을 공유해드리려고해요.
hELLO 스킨
일단 저는 hELLO 라고 하는 스킨을 적용했습니다.
개발자들에게 아주 인기 있는 스킨이라고 하더라구요!
정상우 개발자 님이 제작하셨으며, 아래 포스팅에서 다운로드 받을 수 있습니다.
https://pronist.tistory.com/5?category=844785
hELLO 티스토리 스킨을 소개합니다.
hELLO 스킨은 본래 기능의 많이 없었다가, 티스토리 블로거 여러분의 호응에 힘입어 기능의 추가와 함께 업데이트를 여러 번 하게 되었습니다. hELLO 1.0 때와 비교하면 비교할 수도 없을 만큼의 기
pronist.dev
스킨 적용하기
관리자 페이지에 들어가서 스킨 변경 > 스킨 등록 을 눌러줍니다.
추가 버튼을 누른 후 다운로드 받은 hELLO 스킨 파일들을 추가해줍니다.
다운 받은 여러 폴더, 파일 중에는 image 라는 폴더도 있을텐데요.
이 폴더 안에 있는 파일들도 모두! 추가해주셔야합니다(이걸 올리지 않아서 문제를 겪는 분들이 많은 것 같더라구요.)
추가 하셨다면 이번엔 스킨 보관함에 들어가봅니다.
우리가 등록해놓은 스킨을 볼 수 있습니다.
저 위에 마우스를 올리면 적용이라는 버튼이 뜰거예요. 클릭해주시면 적용이 됩니다.
혹시 이 스킨을 적용하면서 잘 안되는부분이나, 문제가 생겼다면
아래의 깃허브 레포지터리에서 issue 부분을 먼저 확인해보세요!
비슷한 문제를 겪으셨던 분들의 해결방법이 잘 나와있습니다.
https://github.com/pronist/tistory-skin-hELLO/issues?page=2&q=
GitHub - pronist/tistory-skin-hELLO: 😎 당신의 멋진 블로그에 걸맞는 최고의 티스토리 스킨
😎 당신의 멋진 블로그에 걸맞는 최고의 티스토리 스킨. Contribute to pronist/tistory-skin-hELLO development by creating an account on GitHub.
github.com
별모양 버튼의 정체
오른쪽 상단에 있는 별모양 버튼은 눌러도 아무런 동작을 안하길래 궁금했는데 원래 구독 버튼이라고 하네요!
로그인한 본인이 본인 블로그의 별모양 버튼을 누르면 아무런 동작을 안하는게 맞고, 다른 사람이 눌렀을 때에는 구독 기능 정상작동한다고 합니다.
기본 목록 스타일
스킨 편집 > 기본 설정에 보시면 기본 목록 스타일을 설정하실 수 있는데요
리스트, 그리드, 지그재그. 총 3개의 스타일이 있습니다.
맘에드는 스타일로 설정하면 되겠습니다.
저는 무난한 리스트 스타일로 설정했어요!
글쓰기 버튼 추가하기
💡 이 섹션의 내용은 사이드바 메뉴에 글쓰기, 관리 버튼을 추가하는 방법에 관련된 내용입니다.
이 방법은 모든 방문자들이 글쓰기, 관리 버튼을 볼 수는 있지만, 일반 방문자들이 접근할 수는 없습니다.
방문자들에게는 보이지 않는 별도의 글쓰기, 관리 버튼을 생성하고 싶으신 분들은 더 스크롤을 내려서 [글쓰기 / 관리 버튼 별도로 만들기] 섹션의 내용을 확인해주세요!
이 스킨을 적용했을 때 처음 마주하는 당황스러운 문제점은 글쓰기 버튼이 없다는 것입니다..!
관리자 페이지에 들어가서 글쓰기 버튼을 누를 수도 있었지만
기존에 사용하던 스킨은 글쓰기 버튼 접근성이 좋았었거든요 😓
맥북 기준 command + Q 를 누르면 바로 관리자 페이지로 넘어갈 수도 있지만
그래도 글쓰기 버튼을 한번 만들어보도록 하겠습니다.
따로 html css 를 건들진 않구요. 블로그 메뉴에 추가해줄거라서 단순 티스토리 내부 기본 기능을 이용할 거예요.
(스킨 제작자 정상우 개발자님의 포스팅을 참고하였습니다)
블로그 설정 > 메뉴 에 들어갑니다
그리고 이름을 '글쓰기'라고 작성해주고 (자유!)
링크 부분은 (본인의 블로그 링크)/manage/post 로 설정해주었습니다.
추가 버튼을 눌러주면 끝!
사이드바를 펼치면 블로그 메뉴에 글쓰기 버튼이 생긴 것을 확인하실 수 있습니다.
궁금해서 로그아웃하고 클릭해보았는데, 티스토리 로그인 화면으로 넘어가더라구요.
보이는건 모두한테 보이지만 로그인한 본인만 접근할 수 있으니 걱정안하셔도돼요!
highlight.js 적용
이번에는 highlight.js 라는 것을 적용시켜볼텐데요.
개발자들이라면 블로그에 코드블럭을 많이 작성하실겁니다.
이 코드블럭을 예쁘게 바꿔주는 기능을 추가해볼거예요!
https://highlightjs.org/download/
Getting highlight.js
Hosted A prebuilt version of highlight.js with 36 commonly used languages is hosted by following CDNs: cdnjs jsdelivr unpkg You can find the list of commonly used languages below in the custom download form. For other available styles look into the highlig
highlightjs.org
위 링크에 들어가서 원하는 언어를 체크해준 뒤(저는 Common 만 체크한 상태로 그대로 뒀어요)
맨 밑으로 내리면 다운로드 버튼이 보입니다.
클릭해서 파일 다운받기!
이번엔 원하는 테마를 골라볼거예요.
https://highlightjs.org/static/demo/
highlight.js demo
highlightjs.org
위 링크에서 테마들을 구경할 수 있습니다.
저는 Vs 2015 가 제일 예뻐서 이걸로 선택했어요!
이번엔 블로그 설정 > 스킨 편집 > Html 편집 > 파일 업로드 으로 들어가봅니다.
방금 다운로드 받은 파일중에 highlight.min.js 를 추가해주고,
다운로드 받은 파일에 들어가보면 styles 라는 폴더가 있을텐데, 이 안에 있는 테마 css 파일도 추가해주면 됩니다.
(저 같은 경우에는 vs2015.min.css 가 되겠네요)
정리하자면 두개의 파일을 추가해야하는데 아래와 같습니다.
1. highlight.min.js
2. (원하는 테마 이름).min.css
그리고 이번엔 파일 업로드가 아닌 HTML 탭으로 가서 아래와 같이 코드를 4줄 추가해줍니다.
<head> 태그 안에 위치시켜주시면돼요.
전 </head> 바로 위에 복사 붙여넣기 해줬습니다.
<!--Syntax Highlighter-->
<script src="./images/highlight.min.js"></script>
<link rel="stylesheet" href="./images/vs2015.min.css">
<script>hljs.initHighlightingOnLoad();</script>다 됐다면 적용을 누릅니다.
혹시 기존 설정해놓은 플러그인 중에서 Syntax Highlight 가 있다면 이건 설정 해제해주시면 됩니다.
(켜놨다가 문제를 겪는 사람들이 있나봅니다)
폰트, 가로스크롤 추가
CSS 맨 아래에 다음과 같은 코드를 추가해줍니다.
pre code {
font-family: "consolas", monospace;
font-size:0.9rem;
line-height: 1.3;
}
pre code.hljs {
padding: 10px; margin: 15px 0; max-width: 100%;
overflow-x: auto; overflow-y: hidden; border-radius: 7px; line-height: 130%;
}
.hljs {
white-space: pre;
overflow-x: auto;
}
/* for block of numbers */
.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: 2px solid #CCC;
vertical-align: top;
padding-right: 10px !important;
/* your custom style here */
}
/* for block of code */
.hljs-ln-code {
padding-left: 15px !important;
}이렇게 추가해주면 폰트가 이렇게 바뀌고 숫자 옆에 길게 세로바가 생겨서 코드가 좀 더 깔끔해보일거예요!
근데 지금 문제는, 밝은 바탕에 밝은색 글씨가 적용되어서 잘 안보이는 겁니다!
저는 항상 다크모드처럼 코드블럭이 보였으면 하는데 말이죠..
구글링을 열심히 해봤는데 제가 사용한 방법은 다음과 같습니다.
CSS 에서 pre code 를 검색하면 border-radius 를 적용하는 contents-style 속성이 있는데요.
이 안에 다음과 같은 코드를 작성해줬습니다.
background-color: #292A2D !important;
그러면 이렇게 라이트모드에서도 코드블럭 배경색을 어둡게 만들 수 있어요!
이미지 원본 팝업 문제
저한테는 이미지를 클릭해도, 원본이미지가 팝업으로 뜨는 기능이 작동을 안하더라구요.
맨 아래 블로그에서 해결방법을 찾아 공유합니다!
블로그 설정 > 스킨 편집 > Html 편집 으로 들어가
<head> 태그 바로 아래에 다음과 같은 코드를 추가해줍니다.
<script src="//t1.daumcdn.net/tistory_admin/lib/jquery/jquery-1.12.4.min.js"></script>
그럼 이미지 팝업이 잘 뜨는 것을 확인하실 수 있습니다!
코드 블럭 내의 텍스트 색 수정(24.03.06 추가)
스킨을 사용하다보니 코드블럭 내의 특정 class가 어둡게 나타나는 문제가 있었습니다.
예를 들어 다음과 같습니다.
위 예시에서는 'Dog' 라는 글자가 라이트 모드일 때에 #ccc(하얀색) 으로 보이지 않아 문제였습니다.
그래서 개발자 도구를 켜서 이 요소의 이름을 확인했습니다.
마우스를 올려놓으니 class 이름이 hljs-title.class_ 인 것을 확인할 수 있었어요.
이 요소의 색이 현재는 #5C2699(어두운 보라색) 로 되어있는데, #CCC(하얀색) 으로 수정해주면 될 것 같아요.
티스토리의 스킨 편집 > html 편집 으로 들어가줍니다.
그리고 CSS 탭으로 들어가주세요.
그리고 위와 같이 hljs-title.class_ 의 color 를 제가 원하는 #ccc(하얀색)으로 지정해주는 코드를 작성합니다.
.hljs-title.class_ {
color: #ccc !important;
}
작성 후 '적용'을 누르고 미리보기로 수정된 화면을 확인해보겠습니다.
제가 원하던 대로 코드 블럭 내의 요소 color가 수정되었습니다.
글쓰기 / 관리 버튼 별도로 만들기(24.09.12 추가)
일반 방문자들에게도 글쓰기, 관리 버튼이 사이드바 메뉴가 보이는게 마음에 들지 않아 방법을 찾아보던 중 채야미님의 블로그를 참고하여 별도의 버튼을 만들어보았습니다!
티스토리 html 편집에 들어가 s_sidebar_element 요소를 검색해서 찾아준 후, 원하는 위치에 아래 코드를 추가해줍니다.
<s_sidebar_element><!-- 관리-->
<div class="sidebar-element">
<div class="manage-menu text-sm" style="display:none;">
<a href="https://본인티스토리주소/manage/entry/post" target='_blank'>글쓰기</a>
<a href="https://본인티스토리주소/manage" target='_blank'>관리</a>
</div>
</div>
</s_sidebar_element>
저는 검색창 위에 보였으면 해서, 아래와 같이 '검색' 관련 코드 위에 배치했습니다.
그리고 </body> 바로 위에, 아래와 같은 script 코드를 작성해줍니다.
내 블로그의 경우에는 글쓰기, 관리 버튼이 보일 수 있게 해주는 과정입니다.
<!--관리자 버튼-->
<script>
$(document).ready(function () {
const nowurl = window.location.origin;
const manageElement = $('.manage-menu');
const myBlogurl = window.T.config.USER.homepage;
if (myBlogurl === nowurl) {
manageElement.css('display', 'flex');
} else {
manageElement.css('display', 'none');
}
});
</script>
적용한 실제 모습은 다음과 같습니다.
그리고 CSS 를 적용해줍니다.
저는 CSS 파일에 다음과 같은 코드를 추가했습니다.
.manage-menu {
display: none;
justify-content: center;
align-items: center;
gap: 10px;
padding: 10px 0;
}
.manage-menu a {
padding: 5px 10px;
text-decoration: none;
color: #888;
transition: color 0.3s;
}
.manage-menu a:hover {
color: #000;
}
기존 사이드바 메뉴에 있는 요소들에 hover 했을 때 (마우스를 올렸을 때) 텍스트의 색상이 회색 -> 검정색 으로 바뀌는 것을 통일해보고싶어서, hover 속성도 적용해보았습니다.
'글쓰기' 버튼와 '관리' 버튼이 가운데 정렬이며, 약간의 간격이 있도록 CSS 를 작성해보았습니다.
위와 같이 CSS 를 작성했다면 아래와 같이 보이게 됩니다.
참고로 로그인하지않은, 일반 방문자가 블로그에 들어왔을 때에는 아래와 같이 글쓰기, 관리 버튼이 보이지 않게 됩니다.
상단바 글 제목 옆에 카테고리 노출(24.09.12 추가)
hELLO 스킨을 적용하면 상단바에 현재 보고 있는 글의 제목'만' 보이게 되는데요.
글이 어느 카테고리에 해당하는지 또한 보이길 원해서 커스텀을 해보았습니다.
(채야미님의 블로그를 참고했어요)
먼저 현재 읽고 있는 글에 대한 카테고리 정보를 얻어와야합니다.
html 편집에 들어가 ##_article_rep_category_## 를 검색해보면, 검색 결과는 3개가 나오고 a 태그에 해당하는 것은 2개정도 나옵니다.
a 태그들 중 하나를 수정해줍시다.
class="content-category-getter" 를 추가합니다.
<a class="content-category-getter" href="/category/Tips">Tips</a>
아래는 실제로 적용한 모습입니다.
그리고 아래와 같은 script 태그를 </body> 위에 추가합니다.
방금 추가한 코드를 통해서 글 카테고리의 텍스트, 링크 데이터를 가져와 now-page-article-category 라는 부분에 추가해주겠다-라는 내용의 코드입니다.
<!--카테고리-->
<script>
window.addEventListener('load', function () {
const categoryElement = document.querySelector(".content-category-getter");
const currentCate = categoryElement.textContent;
const categoryLink = categoryElement.getAttribute('href');
const divElement = document.querySelector('.now-page-article-category');
const currentCateText = currentCate.replace(/\/+/g, ' / ')
if (divElement) {
divElement.innerHTML = `<a href="${categoryLink}">${currentCateText} / </a>`;
}
});
</script>
아래는 실제로 적용한 모습입니다.
그럼 마지막으로 now-page-article-category 라는 부분을 만들어줄 차례입니다.
page_title 로 검색하면 검색 결과 2개가 나오는데요.
head 바로 아래에 위치한 부분인 1번째 검색결과가 아닌, 2번째 검색 결과 부분을 수정해줄 것입니다.
기존에는 글 제목만 보여주는 코드였다면, now-page-article-category 라는 클래스를 가지는 div 를 만들어주어서 글 카테고리가 들어갈 자리를 마련해주었고, flex CSS 속성을 이용해서 '글 카테고리' 와 '글 제목' 이 나란히 가로로 정렬되도록 구현했습니다.
// 기존 코드
<div class="m-0 text-sm font-bold h-5 text-overflow-hidden max-w-[calc(80vw-152px)] text-h-800 dark:text-h-200">hELLO, highlight.js 적용 및 커스텀(feat. 글쓰기/구독 버튼, 코드블럭 다크모드 등)</div>
// 수정 후 코드
<div class="flex">
<div class="now-page-article-category m-0 text-overflow-hidden text-sm font-bold text-h-400"></div>
<div class="m-0 text-sm font-bold h-5 text-overflow-hidden max-w-[calc(80vw-152px)] text-h-800 dark:text-h-200">hELLO, highlight.js 적용 및 커스텀(feat. 글쓰기/구독 버튼, 코드블럭 다크모드 등)</div>
</div>
아래는 실제로 적용한 모습입니다.
여기까지 수정하시고 적용 후 확인해보시면, 아래와 같이 글 카테고리가 같이 상단바에 노출되는 것을 확인하실 수 있습니다.
링크도 추가되어있기 때문에, 카테고리 클릭 시 링크도 정상적으로 동작합니다.
별모양 구독버튼에 텍스트 추가(24.09.20 추가)
hELLO 스킨의 구독버튼은 별모양으로 생겼는데요.
많은 분들이 이게 구독버튼인지 모르는 경우가 많아 헷갈려하십니다.
그래서 구독버튼에 텍스트를 넣어보려고해요! (가비엘 님의 블로그를 참고하여 진행했습니다.)
결과물은 아래 이미지와 같습니다.
클릭하면 텍스트가 '구독중'으로 바뀌어요!
블로그 관리에서 스킨편집으로 들어갑니다.
그리고 html 편집으로 들어갑니다.
그리고 CSS 의 맨 아래에 다음과 같은 코드를 추가해주세요.
/* 구독 버튼 */
.btn_menu_toolbar.btn_subscription {
border-radius: 20px;
width: 100px;
}
.btn_menu_toolbar.btn_subscription::before {
float: left;
padding: 0 10px 0 10px;
}
.btn_subscription.txt_state {
font-size: 0.8rem;
display: block;
font-style: inherit;
margin: 0;
width: auto;
font-weight: bold;
padding: 0 10px 0 10px;
text-align: center;
}
그리고 이번에는 HTML 탭으로 이동합니다.
ctrl + f 를 통해 subscription 키워드를 검색해주세요.
<!--
<div><button class="subscription flex justify-center items-center w-10 h-10 outline-0 rounded-full bg-h-200 text-h-500 hover:bg-h-300 dark:text-h-200 dark:bg-h-700 dark:hover:bg-h-600 btn_menu_toolbar btn_subscription #subscribe" :data-blog-id="T.config.BLOG.id" :data-url="TistoryBlog.tistoryUrl"><span class="text-hidden">구독하기</span><i class="fa-solid fa-star font-bold text-sm"></i></button></div>
-->
<div id="ex-subscription">
<i class="fa-solid fa-star font-bold text-sm"></i>
</div>
그러면 subscription 을 포함하고 있는 button 클래스를 찾을 수 있어요.
해당 button 태그와 그 부모인 div 태그를 주석처리해주고, 위와 같이 ex-subscription 요소를 추가해줍니다.
아래는 실제로 적용한 모습입니다.
그리고 마지막으로, </head> 태그 바로 위에 아래와 같은 script 를 추가해주겠습니다.
<script>
document.addEventListener('DOMContentLoaded', function() {
const txtToolId = document.querySelector('.txt_tool_id');
if (txtToolId) {
const starIcon = document.createElement('i');
starIcon.classList.add('fa-solid', 'fa-star', 'font-bold', 'text-sm');
starIcon.style.padding = '0 5px 0 0';
txtToolId.parentNode.replaceChild(starIcon, txtToolId);
}
const exSubscription = document.querySelector('#ex-subscription');
const btnSubscription = document.querySelector('.btn_menu_toolbar.btn_subscription');
if (exSubscription && btnSubscription) {
exSubscription.parentNode.replaceChild(btnSubscription, exSubscription);
btnSubscription.style.display = 'flex';
btnSubscription.classList.add('subscription', 'flex', 'justify-center', 'items-center', 'w-10', 'h-10', 'outline-0', 'rounded-full', 'bg-h-600', 'text-h-200');
}
const txtState = btnSubscription.querySelector('.txt_state');
if (txtState) {
txtState.style.fontSize = '0.875rem';
txtState.style.fontStyle = 'normal';
}
});
</script>
아래는 실제로 적용한 모습입니다.
여기까지 진행하면 구독버튼에 '구독하기', '구독중' 텍스트가 나타나는 것을 확인하실 수 있습니다.
헤더가 항상 표시되도록 수정하기(24.09.26 추가)
현재 스킨에서는 스크롤을 아래로 내릴 때에 헤더가 나타나도록 되어있습니다.
하지만 사용하다보니 개인적으로 헤더가 계속 표시되어 있으면 좋겠다는 생각이 들더라구요.
사이드 메뉴를 펼칠 때가 많은데, 펼치고 싶으면 스크롤을 아래로 일부러 내려야하니까요!
그래서 html 을 조금 편집해보려고합니다.
블로그 관리에서 스킨편집으로 들어갑니다.
그리고 html 편집으로 들어갑니다.
그리고 HTML 에서 command + f 혹은 ctrl + f 를 눌러 아래의 코드를 검색해주세요.
<div class="w-full box-border px-4 h-14 top-0 fixed flex justify-between items-center z-30 backdrop-blur bg-h-100/50 dark:bg-h-800/80 xl:px-5 <s_if_var_sidebar>xl:w-c</s_if_var_sidebar>" x-data="top" @scroll.window="toggle" x-show="open" x-transition:enter="transition ease-linear duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-linear duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0">
그리고 이 코드를 아래와 같이 수정해주세요.
<div class="w-full box-border px-4 h-14 top-0 fixed flex justify-between items-center z-30 backdrop-blur bg-h-100/50 dark:bg-h-800/80 xl:px-5 <s_if_var_sidebar>xl:w-c</s_if_var_sidebar>" x-data="top">
x-show 와 x-transition 관련 속성들을 제거하여 헤더가 스크롤 상태와 상관없이 항상 표시되도록 수정한 것입니다.
수정한 결과는 위와 같습니다.
포스팅 읽어주셔서 감사합니다 :D
ref: https://leeporter.tistory.com/19
티스토리 스킨 적용하기 (feat. hELLO, highlight.js)
2023.01.04 수정 - 2022년 10월에 있었던 데이터센터 화재로 카카오 서버가 먹통이 되었고, 이후 복구 과정에서 여러 문제점들이 발생되었는데, 그 중 지금까지 문제가 지속되던 '이미지 클릭 시 원본
leeporter.tistory.com
