어..하는 김에 하는 포스팅이다..
사실 저번 포스팅을 마지막으로 블로그 만들기 포스팅을 끝내려했는데
해당 포스팅을 하다보니 한 가지 이슈가 생겨서 이렇게 별도 포스팅을 하나 더 하게 되었다.
예전 포스팅에 덫 붙이려했더니..나름 또 다른 주제같기도하고
저번 포스팅이 생각보다 길어질 거 같아서 이렇게 별도로 뺐다.
이야기하려는 건 마크다운에서 이미지를 넣는 방법이다.
…정말 별 거 아니지 않은가?
 와 같은 형식으로 마크다운에 선언하면 알아서 이미지가 로드된다.
사실 나도 저게 끝인 줄 알았고, 그래서 별의심없이 사용했으며 별도의 언급을 하지 않았다.
기존 포스팅들에서는 딱히 이미지를 로드할 필요가 없었기에 사용하지 않은 기능이었는데
[Hexo] Github Page로 블로그 만들기 06을 작성하다보니
화면 캡쳐를 넣는 게 좀 더 이해에 좋을 것 같아서 2장의 이미지를 넣게 되었다, 위와 같은 마크다운 문법으로.
그리고 여기서 앞서 말했듯 한 가지 이슈가 발생했다.
그 이슈가 뭐냐면…포스팅의 상세 페이지에서는 이미지가 나오는데 메인 페이지에선 엑박이 뜬 것이다
처음엔 이게 뭥미? 싶었다.
개발자라면 누구나 그렇겠지만 이미지나 css,js 파일등이 로드되지 않으면 일단 경로부터 보곤한다.
나도 그래서 개발자 도구를 열어서 메인 페이지와 상세 페이지를 비교해봤는데
두 페이지가 각각 이미지를 로드할때 잡는 베이스경로가 달랐다.
블로그 주소가 localhost:4000 이고 마크다운에 이미지 경로가 ./test.png 예로 들어보자면
메인 페이지는 localhost:4000 이 베이스가 되어서 읽어오는 이미지의 경로가 localhost:4000/test.png가 되버리고 상세 페이지는 localhost:4000/year/month/day 가 베이스라서localhost:4000/year/month/day/test.png 를 읽어오는 거다..
해당 문제가 발생한 원인은 _config.yml의 post_asset_folder 옵션을 true로 설정했기 때문이다.
그냥 편하게 source 아래에 image 폴더 같은 거 만들어서 무조건 저기에 몰아넣으면 편할수도 있겠지만..
블로그별 리소스 관리측면에선 해당 옵션이 true 인 편이 훨씬 편하기에 저렇게 사용하는 게 더 효율적이라 생각한건데
이런 함정이 나를 기다릴 줄은 몰랐다.
사실, 그전에 마크다운 문법인 로 할떄로 경로를 어떻게 잡아야 하나 한참 헤맸던터라
상세페이지에서 이미지가 뙇하고 나와줬을때 다 했다, 싶었는데..홈으로 가니 나오는 엑박을 보곤 정신적 피로감이 팡하고 터졌다.
게다가 관련 사항에 대해 구글링을 해봐도 잘 나오질 않아서 그냥 이미지 없이 글로만 설명할까, 란 생각도 했다.
하지만 앞으로 포스팅에 이미지를 하나도 안 넣을 것도 아니기에..어쩔 수 없이 나는 언제나 그렇듯 답을 찾아야 했다.
그래서 뭐 어떻게 해결한 건데?
해답은 의외로 쉬운 곳에서 나왔다.
아니, 어쩌면 당연히 해답이 있어야 할 곳에서 해답이 나왔다.
Hexo의 공식 가이드 중 Asset Folders 항목에 해답이 있었다.
해당 가이드를 읽어보면 아래쪽에 상대 경로 참조를 위한 태그 플러그인 이라는 항목이 있는데
해당 항목을 보면 마크다운 구문의 상대경로를 통해 asset 파일 참조 시 아카이브, 또는 인덱스 페이지에서 이를 표시하지 못 하는 문제가 있습니다
..라고 적혀있다. 그리고 그에따라 Hexo2에서 해결하기 위한 플러그인을 만들었고,,Hexo3에서 이를 위한 태그 플러그인들이 추가 되었다고 한다.
태그 플러그인이 무엇인지는 차후에 더 알아보도록 하고, 일단 위에서 나온 엑박 문제를 해결하기 위한 코드는 아래와 같았다.
위와 같이 post_asset_folder 옵션이 true일 때
{ % asset_img image.png % }
위와 같은 형식으로 마크다운 파일에 적어주면 상세페이지에서도, 메인 페이지에서도 이미지가 아주 잘 나온다.
(태그 플러그인의 이스케이프 문자가 먹질 않아서 중괄호와 퍼센트 사이를 띄웠는데, 실제 사용시엔 붙여야 한다)
다만 저 앞에 있는 asset_img 라는 단어를 img나 여타다른 임의 문구로 바꿨을 때는
hexo에서 자체 에러를 뿜뿜하는데 아마 태그 플러그인 내부적으로 asset_img 라는 단어를
시동어쯤으로 사용하는가보다, 하는 추측을 했다.
정리하자면, 포스팅에서 필요한 리소스 파일(이미지든 뭐든)이 있다면 생성된 디렉토리에 넣고
위와 같은 태그 플러그인으로 파일의 명을 명시하면 hexo가 알아서 로드를 해준다는 것이다.
..하,고작 이걸 위해 얼마나 시간을 날린거니 나ㅠㅠ..이번 포스팅은 여기까지.
다음엔 또 이렇게 태그 플러그인이라는 생소한 아이를 봐버렸으니 그에 대한 걸 다루지 않을까 싶은데..
6편으로 마무리 하려 했던 블로그 만들기 포스팅은 끝날 기미가 보이질 않는 것 같다.
좀 적당히 파고들어가는 성격이면 에라 됐다 싶을텐데..끙…
여튼 그럼 다음 포스팅에 보는 걸로 하자.
