블로그의 첫 게시물은 도커가 장식했지만, 그래도 명색이 헥소로 기껏 만든 블로그인데 적용기를 써보자~
다른 블로그를 봐도 헥소 테마 레이아웃을 만드는 방법은 잘 나와있지 않아서, 이왕 하는 김에 테마 만드는 법도 같이 기술하련다.
헥소 프레임워크를 좀 만져봤는데, 작동원리는 쪼끔 알겠고 헥소 기반 테마 만드는법을 모르는 사람에게 추천한다. 헥소 공식 사이트에도 만드는 방법이 어렴풋하게나마 나와있으니 참조해도 좋다(그리 자세히 나와있진 않지만..)
1. 레이아웃 폴더 만들기
우선… 블로그 폴더 구조는 다음과 같다.
먼저 프로젝트 루트 폴더에 themes 폴더를 만들고, 내부에 자기가 만들 테마의 이름을 짓자.
이 안에 블로그 틀이 들어갈 📁layout 폴더와 img/js/font처럼 정적 소스들이 들어갈 📁source 폴더를 만든다.
블로그 테마에 적용시킬 변수들을 모아 관리하는 _config.yml파일도 만든다.
3. 렌더링할 템플릿 엔진 선택
필자는 Express를 사용해와서.. 상대적으로 익숙한 ejs로 작성할 것이다.
블로그의 전체 레이아웃을 담당하는 layout.ejs 파일을 📁layout 폴더 안에 만들어준다.
이 layout.ejs 파일이 블로그의 뼈대 역할을 해줄 것이다.
4. 부분 렌더링 파츠별로 작성
📁layout 폴더 안에 각 부분별 파츠가 들어갈📁_partial 폴더를 만들어주고, layout.ejs 파일을 한번 보자.
5. 레이아웃 변수를 담당할 _config.yml 파일 작성
ejs 문법 속에 동적으로 들어갈 변수들을 yml 로 작성한다.
6. 부가적인 것
서버 통신이 필요한 무언가를 만들고 싶다.. 가령 댓글이라거나..
Hexo가 직접 댓글서비스를 지원하진 않지만, 관련 플러그인을 지원한다.
댓글을 붙이고 싶다면, 상세한 커스터마이징 없이 Utterances나 Disqus처럼 댓글 위젯을 서비스받는 방법도 있다. Hexo 에서 직접 추천하는 방법이며, 공식 메뉴얼도 있다!
직접 만들고 싶다면, 아쉽게도 Hexo는 정적 서비스를 중점적으로 빠르게 작성하기 위한 프레임워크이기 때문에, 서버통신이 필요한 무언가를 작성할 때 그렇게 용이하지는 않다. 이렇게 되면.. 정적 소스 폴더 안의 js로 직접 서버 API로 ajax를 날리는 방법을 택해야💦..
이럴 바에야 차라리 서버사이드 렌더링(SSR) 방식으로 만드는 게 더 낫지 않은가 고민해보길 바란다.
그래도 Hexo 블로그에 서버 API를 이용하는 덧글 위젯을 직접 만들고 싶다면… [링크]:Hexo 와 API 서버 간의 통신
iframe 으로 위젯 만들기?
iframe 내부에 들어갈 위젯이 고정 높이폭과 너비를 가진다면 가능하다!
혹은 position: absolute; 로 동동 떠 있으면 iframe으로 위젯을 만들어도 좋다.