#닦고 조이고 기름치자
며칠정도 남는시간을 투자하고 나니, Hexo 를 활용한 그럴듯한 나만의 블로그가 만들어 졌다. 하지만 여전히 아쉬운 부분들이 있었고 너무 거슬리는 것도 있었다. 정적웹 페이지가 돌아가는 방식 이나 HTML, CSS, Java script 에 문외한인 내가 구글링으로 문제를 해결해 왔던 것을 메모해 두었고 이곳에 옮겨 적어본다.
#카테고리 추가시 이름에 index. 가 항상 붙는 문제
포스트에서 -categories 를 활용하면, Hexo 블로그 상단메뉴에 항목으로 추가가 가능하다. 그런데, Hueman 테마를 설치 후에 “index.” 가 카테고리 이름 앞에 항상 붙어서 나오는 것을 확인하였다.
원인은, 테마 개발자가 메뉴바 번역(?) 을 위해 적어논 코드가 배포버전에서 제외되지 않은듯 하다. 아마 디버깅 목적이 아니었을까?
themes\hueman\layout\common
이 경로의 header.ejs 파일에 보면, 이런 부분이 있다.
__(‘index.’ + i.toLowerCase())
이걸 이렇게 바꾸면 된다. 나는 전체 소문자 변경도 빼고 싶어서 i 만 남겨두었다.
__(i)
코드는 이렇게 생겼다.
1 | <a class="main-nav-list-link" href="<%- url_for(theme.menu[i]) %>"><%= __(i) %></a> |
#메인바디 텍스트 영역, 사이드바 색 변경
Hexo 를 설치한 뒤에, 테마 폴더 안에 있는 _config.yml 을 사용하여 여러 커스텀 설정과 색 변경을 했는데, 유독 메인바디 텍스트 영역과 사이드바 배경은 색변경이 불가능 했었다.
처음 시도해 봤던 방식은 노가다 였다. 화면을 캡쳐해서 포토샵으로 띄우고 사이드바 색 (#F0F0F0) 과 텍스트 영역 배경색 (#000000) 을 VSC 에서 전체 검색으로 찾아서 다른색으로 바꿔보는 방법 이었다. 단시간에 해결이 안되다보니 필오님의 github 에서 받아두었던 폴더도 뒤져보다 보니, style.css 파일을 건드리면 될것만 같았다. 하지만, 직접 그 파일을 수정하여도 원하는대로 색이 바뀌지 않았다.
해결방법
themes\hueman\source\css
이 경로의 style.styl 파일을 수정하면 style.css 파일에 반영된다.
1 | .main-body |
이렇게 하고 나서도 여전히 사이드바는 색이 그대로 이다. 이건 다른 방법으로 해결해야 한다.
해결방법
themes\hueman\source\css\images
이 경로의 s-left.png 파일이 아래 코드에서 불리고 있다. 대충 통밥으로 읽어보면 sidebar 설정이 오른쪽일 경우와 그렇지 않을경우에, sidebar background 영역에 s-left.png 파일을 반복해서 그려주는것으로 보인다. 실제로 포토샵으로 s-left.png 파일을 불러서 색변경 해주면, 반영되는걸 볼 수 있다.
1 | .main-body-inner |
#Cannot GET /
Hexo 사용 초기에는 내가 쓴 포스트가 없는 상태에서 hello world.md 파일만 달랑 있었다. 순서가 어찌되었는지는 기억이 잘 나지 않으나, hexo server 명령으로 로컬서버에서 돌렸는데 웬 에러와 함께 블로그 전체가 보이지 않았다.
원인은, 포스트가 하나도 없는 상태에서 발생 가능하다. 아마 나도 hello world.md 를 지운 이후에 이러한 에러를 본듯 하다.
해결방법
포스트를 하나 작성하면 된다. 만약 draft 를 사용중 이라면, 아래와 같이 로컬서버 구동에 옵션을 넣어주면 된다.
1 | $ hexo server --draft |
#[Git] fatal : refusing to merge unrelated histories
Git 을 사용하게 된 주된 이유중 하나는 사무실컴과 집컴 간의 usb 복붙 노가다를 안하기 위해서 였다. 다른 프로젝트도 이와같이 잘 사용하고 있었고, Hexo 사용 초기에도 얼른 내가 원하는대로 꾸미고 싶은 마음에 하루에 열번도 넘게 deploy 해 보던 시기가 있었다. 백업을 위해 push 를 했지만 불가. 집에서 pull을 해보려 해도 에러만 나왔다.
원인은, hexo deploy 명령으로 인해 Github 원격저장소에 commit 되는 내용과 실제 내가 로컬에서 작업한 내용이 달라서 그렇다. 좀 더 이해하기 쉽게 Source tree로 보면 이렇게 생겼고, site update 는 deploy 하면서 생기는 commit 이다. 즉, 예상치 못한 branch 가 생긴 셈이다.
해결방법
Merge 해도 된다. 근데 귀찮기 때문에 다른 방법을 찾던 중, Eric Han 님의 블로그에서 이러한 내용을 잘 설명해 둔 포스트를 발견했다. 나중에 해봐야지.
1 | $ hexo server --draft |
#\f0d7 깨짐 현상, FontAwesome
Hueman 테마를 이리저리 갖고 놀다가, 갑자기 블로그 메인 화면에 카테고리 옆에 네모 박스가 생긴 것을 발견했다. 이외에도 여러 군데에서 이 정체불명의 박스를 발견할수 있었다.
해결방법
themes\hueman\source\css_variables.styl
FontAwesome 폰트를 찾을 수 없어서 발생한 현상이다. 웹폰트를 적용해 본다고 이것저것 건드리다가, 지워버렸다. 아래와 같이 ‘FontAwesome’ 을 복구시켜 주면, 정상적으로 그림이 뜬다. FontAwesome 은 사전 정의된 그림을 폰트화 하여 사용할 수 있는것 같다. 나중에 웹페이지 작성시 간단한 아이콘은 이 폰트로 대체가 가능할것 같다.
만일 이렇게 해도 안된다면, 해당 코드 (나의 경우는 깨지는 아이콘이 \f0d7 이었다)를 찾아서 css 나 styl 파일에서 사이즈 변경이나 여백 쪽을 확인해 보면 된다.
1 | font-sans = 'Noto Sans KR', 'FontAwesome', sans-serif |
#사이드바 크기 줄이기
포스팅을 하다보니 사이드바가 쓸데없이 넓대대 한 느낌을 받아서 슬림하게 만들고 싶었다.
해결방법
themes\hueman\source\css_variables.styl
우선 위 경로에 가서, sidebar-width 와 sidebar-toggle-width 를 수정한다. 후자는 사이드바가 숨겨져 있는 상태에서 토글되는 사이즈 이다.
1 | // Sidebar |
위쪽에서 사이드바 색상 변경 할때 등장했던 s-left.png 의 이미지 사이즈를 sidebar-width 와 동일하게 수정해야 한다. 아래 경로에 있다.
themes\hueman\source\css\images
#이미지가 안뜨는 경우
가끔 포스팅에 이미지가 안뜨는 경우가 있다.
해결방법
이미지 캡쳐 프로그램 마다 기본 확장자 저장을 다르게한다. 예를들면 .PNG 또는 .png 인 경우다. 확장자에도 대소문자를 맞춰주면 정상적으로 이미지가 보인다. 마치 “;” 빠트려서 빌드에러난 기분이다.
#속시원
언제나 그렇듯, 내가 마주한 에러나 궁금증에 대해 해결할 수 있는 정확한 페이지를 찾게 되면 속이 뻥 뚫린다. 앞으로 겪게 될 Hexo 관련 문제해결 내용은 여기에 포스팅 할 예정이다.
#Reference
