hexo 블로그를 꾸며보자!! 자세히 보기(read more) 적용!!

안녕하세요.

굳헬로 @goodhello 입니다.

어제는 hexo 블로그의 위젯들에 대해 간단히 살펴 보았는데요.

오늘은 이어서 계속 블로그를 꾸며나가 보도록 하겠습니다.

hexo 블로그에 접속해보면 다음과 같이

홈 화면에서도 블로그의 내용이 주르륵 다 나오고 있는데요.

이런식으로 다 나오는 것보다 조금만 보여주는게 더 좋아 보일 것 같아 알아보니 hexo 블로그에서는 summary와 read more 버튼 기능을 제공하고 있더라구요.

다만 일일이 수동으로 다 만들어 주어야 한다는 것....

블로그가 저장된 폴더 내에 source폴더 내에 _posts 폴더에 모든 포스트가 마크다운 파일 즉 md 로 저장이 되어 있는데요.

이 md 파일을 열어서 적당한 위치에 <!-- more --> 코드를 넣으면

다음과 같이 자세히 보기 버튼이 생기면서

포스트 일부분만 보여주게 됩니다.

하지만 이 방법은 괜찮긴 한데 포스트 마다 수작업으로 일일이 수정해줘야 하니 여간 귀찮은 일이 아니죠.

그래서 조금 더 조사를 해보았습니다.

hexo 에는 다양한 플러그인들이 존재하고 있더라구요.

https://hexo.io/plugins/

그리고 그 중에서

hexo-auto-excerpt 플러그인 발견!!

이 플러그인은 자동으로 read-more 버튼을 만들어 주는 기능을 제공하더라구요.

그럼 이 플러그인을 설치해 보겠습니다.

npm install --save hexo-auto-excerpt

위의 명령어를 이용해서 플러그인을 설치할 수 있으며, 설치가 끝나면 다시 hexo 서버를 가동시킵니다.

모든 포스트가 자동으로 앞부분만 보여주면서 자세히 보기 버튼이 붙었네요.

앞에서 사용한 <!-- more --> 기능은 원하는 부분에서 자를 수 있고, 이미지도 보여주는데... 이 hexo-auto-excerpt플러그인은 이미지는 보여주지 않아 약간 아쉽긴 하네요.

참고로 플러그인이 마음에 들지 않아 삭제하려고 하신다면

npm uninstall hexo-auto-excerpt

해주시면 되겠습니다.

그리고 hexo 서버를 재가동한 후에도 수정한 사항이 반영이 잘 안된다면 서버 가동전에 hexo clean 한번 실행해 주시고 다시 서버를 가동하면 제대로 반영이 되어 있을겁니다.

그나저나 아직 node.js 를 제대로 다루지 못하다 보니 세세하게 고치려면 공부를 좀 해야 할 것 같네요.

그럼 오늘도 열공모드 들어가보겠습니다~

오늘 하루도 행복하시고~ 파이팅입니다~