새소식

반응형
Programming

Hexo 포스팅 스타일 설정하기

  • -
반응형

hexo를 통해 포스팅을 하다보니 테마커스텀에 대한 욕구가 스멀스멀 솟아올랐다. ㅎㅎㅎ;;
메인 이미지도 그리고 아이콘이나 위젯들의 위치도 이곳 저곳 옮겨보기도 하면서
나름 나만의 스타일로 하나씩 바꿔나가는 재미가 있었다.

아래 내용들은 현재 제가 사용하고 있는 icarus 테마를 기준으로 작성한것입니다.
다른 테마에서는 다른 방법이 있을 수 있습니다.

그렇게 블로그를 조금씩 꾸미고 여러가지 포스팅들도 올리고 하다가 한 가지 의문이 생겼다.
바로 포스트 리스트에서 사용하는 위젯들을 _config.yml 에서 설정으로 잡아 주었는데
포스트 상세페이지에서도 똑같이 노출이 되다보니 포스트 본문의 가로 넓이가 너무 적게 보인다는 점이었다.

 

그래서 _config.yml에 있는 설정들을 하나씩 뜯어보고 해당 기능이 있는지 찾아보았지만
원하는 기능은 없는것 같아서 기운없이 여러 블로그를 돌아다니고 있는 도중에 내가 사용하는 테마를 같이 사용하는
블로그에서 리스트와 포스트 상세페이지에 스타일이 다른 것을 발견하고는 다시 이것 저것 세팅을 바꿔보고
해당 블로그와 코드도 비교해 보면서 방법을 찾기 시작했다.

 

그러던 중 정말 우연히 내 포스트와 다른 점을 발견하게 됐고 방법을 찾았다.
나와 같은 필요를 느끼고 있는 분들을 위해 그 방법을 간단하게 정리해 보고자 한다.

우선 포스팅방법이 궁금하신 분들은 지난번에 작성한 hexo 포스팅 방법을 참고하면 됩니다.

여러가지 실험끝에 발견한 방법은 그러한 세팅이 따로 존재하는 것이 아니라 포스팅을 작성할때
머리말(Front matter)에 해당 파일의 정보를 입력해주면 되는 것이었다.

 

머리말은 지난 포스트에서 설명했듯이 포스트 생성시 포스트 최상단에 자동으로 생성이 됩니다.
이곳에는 카테고리,태그,썸네일등을 지정하여 포스트마다 다르게 노출되는 값들을 입력하는 곳이라 생각하였고
머리말을 이용하여 위젯이나 레이아웃을 변경할 수 있을것이라고는 미처 생각하지 못했었다.
그렇게 한참 다른 곳을 해메이다가 우연히 머리말의 입력값이 다른 것을 발견하고는 유레카를 외쳤다.

포스트작성시 머리글에 카탈로그,카테고리,태그 클라우드 위젯을 추가하고 싶었고
포스팅 우측에 고정으로 놓고 싶었다. 그래서 아래와 같은 설정을 머리말에 추가해 주었다.

toc: true
widgets:
  - type: toc
    position: right
  - type: category
    position: right
  - type: tagcloud
    position: right
sidebar:
  right:
    sticky: true

하나씩 옵션을 살펴보면

toc: true
# 카탈로그 옵션을 사용하기 위해 true옵션을 사용하였다.

widgets:
  - type: toc
    position: right
  - type: category
    position: right
  - type: tagcloud
    position: right  
# 위젯의 타입을 지정하여주고 위치를 오른쪽으로 지정하였다.   

sidebar:
  right:
    sticky: true
# sticky 옵션은 true로 하여 우측에 고정을 시켜주었다.    

위와 같은 내용들을 머리말에 추가하여 원하는 스타일로 꾸밀 수 있었다. 그리고 매번 포스팅을 할때
위의 내용을 작성하면 번거롭기 때문에 스캐폴드에 해당내용을 추가해서 자동으로 추가되게 세팅하였다.

이상으로 hexo 포스팅 스타일 설정하기 포스팅을 마칩니다. 해당글로 많은 분들이 조금이나마 쉽게 hexo 블로그를 접하고 꾸밀 수 있기를 바랍니다. 도움이 되었다면 댓글을 살포시 남겨주시면 감사하겠습니다.

반응형
Contents

포스팅 주소를 복사했습니다

이 글이 도움이 되었다면 공감 부탁드립니다.