티스토리/스킨제작

개요 현재 티스토리 스킨에 사용 중인 prism.js의 줄번호를 표시하는 플러그인을 추가하고자 합니다. 본문 스킨 편집 - + 사용법 앞서 body 태그에 line-numbers 클래스를 추가하였기 때문에, 기본적으로 code는 줄번호가 좌측에 추가됩니다. 특별히 줄번호를 추가하고 싶지 않을 경우, pre 태그에 no-line-numbers 클래스를 추가합니다. ... ... 출처 Line Numbers

개요 그동안 블로그를 운영하며 별 고민 없이 콘텐츠를 무단으로 복사할 수 없도록 티스토리에서 제공하는 플러그인을 사용하여 마우스의 사용을 막아 놓았습니다. 하지만 가만히 생각해보니 제 블로그에 기록해 놓은 많은 코드 부분(이하 코드 블록)의 경우 사용하기 위해서는 Copy & Paste 작업이 필요한 것을 깨닫게 되었습니다. 최근 이를 위하여 코드블록에 대해서 마우스를 이용하여 선택을 할 수 있도록 변경하였습니다. 이번에는 여기에 더하여 코드블록의 오른쪽 상단에 복사를 할 수 있는 버튼을 추가하여 사용자가 직접 드래그 등의 추가 조작 없이 편리하게 해당 콘텐츠를 이용할 수 있도록 하는 기능을 추가하였습니다. 이번 포스트에서는 티스토리의 스킨을 편집하여 코드블록에 복사 버튼을 추가한 내용을 정리하겠습니다...

개요 카테고리의 표시 형식은 티스토리의 형식이 아닌 Bootstrap의 리스트그룹으로 표시하고 있습니다. 최초 스킨 배포자의 경우, JavaScript를 사용하여 상위 레벨의 카테고리만 표시하도록 설정을 해 놓았습니다. 저의 경우는 서브 카테고리를 사용하기에 이 역시 화면에 함께 표시를 하고자 하였습니다. 따라서 해당 리스트그룹을 접었다 폈다 할 수 있는 형식으로 변경하였습니다. 완성된 모습은 다음과 같습니다. 수정사항 기존의 코드는 다음과 같습니다. // script.js var categories = []; // 전체 글 갯수 구하기 var totalNumberOfPosts = $("a.link_tit > span").text().match(/\(([^)]+)\)/)[1]; categories.pus..

개요 제가 수행하는 업무와 관심사로 인하여 제가 작성하는 대부분의 포스트는 소스코드가 삽입되어 있습니다. 때문에 이를 조금이라도 보기 좋게 표시 해줄 수 있도록 구문 강조기능을 적용해 주었습니다.Prismjs는 구문강조(syntax highlighter) 기능을 사용할 수 있도록 해주는 JavaScript module입니다. 다음과 같이 차이가 발생합니다.c언어 문법강조 미적용 #include int main(void) { printf("hello world\n"); return 0; } c언어 문법강조 예시 #include int main(void) { printf("hello world\n"); return 0; } 티스토리 적용하기 스킨수정 참고 : PrismJs - Basic Usage티스토리의 ..

개요 참고 : HTML Snippets for Twitter Boostrap framework : Bootsnipp.com 모바일 환경에서 편리하게 페이지 내에서 이동할 수 있도록, 오른쪽 하단에 back to top 버튼을 추가하였습니다. 화면이 아래로 스크롤되면 왼쪽 하단에 표시되며 누르면 스크롤되어 페이지 상단으로 이동하는 기능입니다. back to top 버튼 추가 작업은 티스토리의 스킨편집창에서 진행합니다. 단순한 기능이지만 조금더 멋스럽고 자연스럽게 화면을 스크롤해주고 툴팁이 사라지는 등의 애니메이션 기능이 필요하기 때문에 Jquery 라이브러리를 변경해주어야 합니다. html 항목을 선택한 후, 아래의 소스코드를 태그 아래에 추가하였습니다. Top 기존 수정들과 달리 html 뿐만 아니라 C..

개요 이번 포스트에서는 블로그의 접속 시 글의 제목과 본문이 표시되는 영역, 그리고 포스트 및 공지사항을 수정하도록 하겠습니다. 수정 대상 영역은 아래와 같습니다. Read more 버튼으로 교체하기 기초 템플릿은 메인화면에 글제목과 내용의 앞부분이 표시되며 글의 전체 내용을 보기 위한 주소는 Read more라는 링크로 되어있습니다. 이를 버튼으로 교체하였습니다. 스킨편집창에서 Read more 를 검색하여 해당부분을 찾습니다. 앞서 복사한 코드를 붙여 넣으면 링크대신 버튼으로 표시됩니다. [수정전 - 기본 템플릿] Read more [수정후 - 현재 버전] Read more → 댓글 시스템 교체하기 기본 템플릿은 티스토리의 기본 댓글 시스템이 적용되어있지 않았습니다. (덕분에 다양한 댓글 시스템이 있..

개요 블로그의 오른쪽에 위치한 사이드바도 간단한 수정 범위 내에서 제 취향대로 수정하였습니다. Icon 추가 사이드 바에도 역시 밋밋한 텍스트를 조금 더 꾸며줄 수 있도록 font awesome 아이콘 라이브러리를 사용하여 아이콘을 추가하였습니다. 티스토리 스킨 제작기 - Navbar 수정의 상단 메뉴 Icon 넣기를 참고한다면 어렵지 않게 수정할 수 있을 것이라고 예상하기 때문에 여기서는 생략하겠습니다. 방문자 수 표시 방법 변경 기초 템플릿의 사이드 바의 방문자수는 한 줄에 작성되어 있어 모양새가 좋도록 줄 바꿈이 필요하다는 생각이 들었습니다. 2줄로 나누어서 표시하였습니다. [수정전 - 기본 템플릿] Today: Yesterday: Total: [수정후 - 현재 버전] Total: Today: Ye..

개요 하단(footer)은 많은 부분을 고칠 것이 없어 내용이 많지 않습니다. 상단 메뉴(Navbar)와 동일한 색상을 적용하고, Copyright 문구의 연락처란을 본인의 것으로 교체하는 간단한 작업입니다. 색상과 연락처 정보 교체 상단의 Navbar 와 마찬기지로 색상을 교체하였습니다. Primary를 Dark로 교체합니다. 스킨 편집 창에서 footer로 검색합니다. 검색 결과 중 bg-primary를 bg-dark 로 수정하였습니다. 다음은 하단의 copyright 문구를 저의 메일 주소로 변경하였습니다. 앞선 과정과 동일한 요령으로 스킨 편집 창의 html 편집창에서 mailto로 검색합니다. 기초 템플릿 제작자의 메일 주소가 기입되어 있습니다. 이를 저의 메일 주소로 수정하였습니다. 이상입니다.