글 서식을 추가했다가 스킨이 망가져 버렸다....
대체 무슨 이유인지도 모르고..!!..
보이시나요... 저의 망가진 블로그 흑흑
이후로 계속 오류가 생겨서 🥲🥲🥲🥲
공부도 못하고 계속 수정해보다가 그냥 지우고 다시 적용하기로 했다^^
앗!! 찾아보다 보니 저와 같은 분들이 계시더라구요‼️‼️‼️
카테고리 글 배치 오류인데ㅠㅠ 티스토리 이슈인 것 같더라구요!
아래 링크에서 이슈 관련해서 확인하실 수 있습니다.
https://github.com/pronist/hello/issues/224
카테고리 글 배치 오류 · Issue #224 · pronist/hello
환경 (버그가 발생한 환경을 적어주세요.): 운영체제: windows 브라우저: chrome 버전: 22 스킨 버전 4.3.0 설명 갑자기 글이 구성이 깨지기 시작하면서 첨부된 그림처럼 바꼈습니다. 발생 과정 robot_only
github.com
📌 스킨 배치 오류 해결 방법
임시 방편 해결 방법은 위 깃허브 이슈에서 찾은 것처럼 스팬태그를 추가해줬습니다!
이제 배치 오류는 나지 않네요^^..
저는 괜히 다시 스킨을 적용했지만 hELLO 스킨을 새로 적용하시는 분들에게 도움이 되길 바라며..!
다시 스킨을 적용했던 과정을 정리해보려 합니다!
또 꿀팁 있으면 댓글로 알려주세요🤗
hELLO 스킨 다운로드
아래 링크에서 다운로드 받아주세요!
hELLO 티스토리 스킨을 소개합니다.
hELLO 는 티스토리에서 많은 블로거분들께 사랑을 받은 스킨입니다. hELLO 티스토리 스킨은 개발자 커뮤니티인 깃허브의 약 천 개에 달하는 티스토리와 관련된 모든 프로젝트 중 가장 많은 별을 받
pronist.tistory.com
티스토리에 스킨 적용하기
티스토리 설정 > 꾸미기 > 스킨 변경 > 스킨 등록에 가셔서 다운로드 받은 파일들을 전부 등록해줍니다.
image 폴더 안에 있는 파일까지 전부 등록해주세요.
그리고 저장하고 적용 버튼을 클릭하면 적용이 잘 됩니당!
글쓰기 버튼 추가
이 스킨에는 글쓰기 버튼이 따로 없는데 추가해줄게요. 스킨 옆에 메뉴 설정을 눌러줍니다.
'글쓰기' 라는 이름으로 메뉴를 하나 추가해볼게요.
링크는 블로그링크 옆에 /manage/post 추가해주면 됩니다.
이제 좌측 카테고리바 메뉴에 글쓰기 버튼이 추가됐을 거에요!
highlight.js 적용
이제 기본 설정은 마쳤습니다.
하지만 코드 블럭을 쓰시는 분들이라면 코드 블럭도 꾸며줘야죠!
highlight.js 파일을 우선 다운로드 받고 추가해줍시다.
아래 링크에서 원하는 언어를 선택해서 다운로드 받아주세요.
저는 vs2015 테마를 적용했습니다.
다운로드 받은 파일 중 이렇게 두 파일을 추가해주면 돼요.
highlight.min.js 그리고 style 폴더 안에 있는 원하는 테마의 css 파일입니다!
이제 스킨 편집에 들어가서 html 파일을 편집해볼게요.
<!--Syntax Highlighter-->
<script src="./images/highlight.min.js"></script>
<link rel="stylesheet" href="./images/vs2015.min.css">
<script>hljs.initHighlightingOnLoad();</script>사진과 같이 </head> 바로 위에 위의 코드를 넣어주세요.
그리고 적용이 잘 되지 않을 때 플러그인에 Syntax Highlight가 있다면 설정 해제해줍시다~!
코드 블럭 수정
1) 코드 폰트 및 가로 스크롤
코드 폰트를 수정하고 줄 번호도 추가해주고 가로 스크롤이 되도록 수정해볼게요.
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;
}
2) 코드 줄 번호 추가
위의 코드로 줄 번호가 변경이 되지 않을 수도 있는데 이 때는 아래 방법을 사용해줍시다!
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.onload = function() {
hljs.highlightAll();
hljs.initLineNumbersOnLoad()
}
</script>
2) 코드 블럭 배경색 변경
코드 배경색은 어두운 게 좋죠.
배경색을 변경하는 아래 코드를 추가해주세요!
background-color: #292A2D !important;
3) 복사 버튼 만들기
html의 <head>와 </head> 사이에 아래 스크립트 코드를 넣어주세요!
<!--Copy Button-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js" integrity="sha512-7O5pXpc0oCRrxk8RUfDYFgn0nO1t+jLuIOQdOMRp4APB7uZ4vSjspzp5y6YDtDs4VzUSTbWzBFZ/LKJhnyFOKw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript">
window.addEventListener('load', function () {
document.querySelectorAll('pre[id^="code"]').forEach(function (e, index) {
let button = document.createElement('button');
button.className = 'copy-button';
button.style.cursor = 'pointer';
button.setAttribute('data-clipboard-text', e.innerText);
button.addEventListener('mouseleave', function(event) {
event.currentTarget.setAttribute('class', 'copy-button');
});
var copyIcon = Object.assign(document.createElement('img'), { src: './images/new_copy_clipboard_icon.png', alt: 'Copy Icon' });
button.appendChild(copyIcon);
e.appendChild(button);
});
var clipboard = new ClipboardJS('.copy-button');
clipboard.on('success', function (e) {
var button = e.trigger;
var successIcon = Object.assign(document.createElement('img'), { src: './images/new_check_clipboard_icon.png', alt: 'Copy Complete Icon' });
var copyIcon = Object.assign(document.createElement('img'), { src: './images/new_copy_clipboard_icon.png', alt: 'Copy Icon' });
button.innerHTML = '';
button.appendChild(successIcon);
button.setAttribute('class', 'copy-button copy-message');
setTimeout(function() {
button.setAttribute('class', 'copy-button');
button.innerHTML = '';
button.appendChild(copyIcon);
}, 1500);
});
});
</script>
이미지 버튼을 위해 원하는 복사 버튼의 이미지를 가져와 파일에 업로드 해서 src에 이름을 입력해주세요!
저는 'copy_clipboard_icon.png', 'check_clipboard_icon.png' 라는 이름으로 파일을 업로드 해서 사용하였습니다. (색상은 화이트로 설정해서 아이콘을 다운로드 받았어요.)
css 파일에 버튼 이미지를 꾸밀 수 있도록 아래 코드를 추가해주세요.
/* copy button */
pre {
position: relative;
overflow: visible;
}
pre .copy-button {
opacity: 0;
position: absolute;
right: 8px;
top: 8px;
padding: 4px;
background: #2c2d31;
border-radius: 5px;
border-color: #9ca3af;
border-width: 1px;
transition: opacity .3s ease-in-out;
}
pre .copy-button img {
width: 24px;
height: 24px;
vertical-align: middle;
}
pre:hover .copy-button {
opacity: 1;
}
pre .copy-button:hover {
color: #eee;
transition: all ease-in-out 0.3s;
}
pre .copy-button:active {
border-width: 3px;
border-color: #FFA500;
transition: all ease-out 0.1s;
}
.copy-message:before {
font-family: SUIT, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
content: "Copied";
position: absolute;
font-weight: bold;
font-size: 14px;
left: -10px;
bottom: 49px;
padding: 2px;
color: #eee;
background: #2c2d31;
border-radius: 5px;
}
.copy-message:after {
border-top: 8px solid #2c2d31;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 0px solid transparent;
content: "";
position: absolute;
bottom: 41px;
}
제목1 크기 변경 및 밑줄 추가
제목1의 글꼴 수정 및 밑줄을 추가해주고 싶다면
css에서 아래 코드 블럭을 검색해서 찾고 다음과 같이 변경해줍시다!
#content .contents_style h2 {
font-size: 1.5rem;
font-weight: 700;
line-height: 1.75rem;
--tw-border-opacity: 0.7;
border-bottom: 1px solid rgb(230 230 233 / var(--tw-border-opacity)) !important;
padding-bottom: 0.5rem;
margin-top: 3em;
margin-bottom: 1rem;
}
@media (min-width: 1100px) {
#content .contents_style h2 {
font-size: 1.625rem;
line-height: 2rem
}
}
저는 다른 이슈의 오류였지만 새로 스킨을 적용하시는 분들께 이 포스팅이 도움이 되었길 바랍니다!
참고 블로그 링크
'Devlog👩🏻💻 > etc' 카테고리의 다른 글
| [Error/Xcode] Missing package product <package name> (5) | 2024.05.15 |
|---|---|
| [GitHub/iOS] 깃허브 프로젝트 업로드(.gitignore 파일 추가해서 올리기) (8) | 2024.05.05 |
| [GitHub] The requested URL returned error: 403 (1) | 2024.04.24 |
| TMDB API 사용법 (2) | 2024.04.23 |
| 프로그래머스 Github 자동으로 커밋하기 (2) | 2024.03.20 |
