이 글을 본다면 avatar 적용에 애를 먹지 않고 다른 것에 더 많은 시간 투자를 할 수 있을 것이다.
깃 테마를 적용한 후 블로그를 꾸며 보기 시작했다.
다른 블로그에서 설명한대로 avatar를 바꾸기 위해 원하는 이미지 파일을 root/assets/img 경로에 붙여 넣었다.
하지만 avatar를 확인해 보면 자꾸 검은색으로 떴다.
오류의 원인을 확인하기 위해 우선 개발자 도구에서 avatar의 상태를 확인해 봤다.
분명 경로는 잘 들어가 있다.
근데 style이 display:none인 것을 확인할 수 있었다.
display:none을 해제시켜봤지만 avatar는 엑박만 떴다.
문제의 원인을 알기 위해 avatar를 만들어주는 소스코드 찾아내어 확인을 해봤더니
오류가 있을 때는 display 속성을 none으로 해주는 것을 발견할 수 있었다.
display:none의 이유는 알았지만
그 후로 경로가 잘못되었나 싶어서 해 본 시도들…
- default 값이었던 commons/파일명으로 경로도 바꿔봄.
- 파일 경로에 큰따옴표도 넣어봄.
💡 아무것도 안되던 찰나에 chripy 테마를 쓰는 다른 사람의 블로그를 보고
내 것과 어떤 차이가 있는지 확인해야겠다는 생각이 들었다.
그렇게 찾은 랜덤의 블로그.
아바타 적용이 잘 되어있네.. 도대체 뭐 때문일까 궁금해..!!
개발자 도구로 검사한 결과 내 경로 앞에는 “https://chirpy-img.netlify.app” 주소가 추가로 붙어있었다. 알고 보니 \_config.yml에서 img_cdn에 기본값이 있는데 그게 “https://chirpy-img.netlify.app“였다.
이로써 알 수 있는 것은 commons/avatar.jpg는 chripy 제작자가 avatar.jpg라는 이미지를 자신의 cdn 경로의 commons 폴더에 넣은 것이다.
어쩐지 맨 처음에 avatar를 바꾸기 위해 avatar의 기본값인 commons/avatar.jpg의 commons 폴더를 찾는데 안 찾아지더랬지.
img_cdn의 주석을 읽으니 img_cdn에 cdn 주소를 입력한 뒤 avatar에서는 “/” + 파일명으로 cdn의 이미지를 불러올 수 있다고 한다.
결국 img_cdn의 주소는 주석처리를 했다.
Note:
\_config.yml파일 변경 후 새로고침으로는 브라우저에서 변경된 사항을 확인할 수 없기 때문에 꼭bundle exec jekyll serve를 다시 하고 확인해야 한다.
짜잔-
드디어 avatar가 적용이 되었다.
적용된 모습을 보니 사이즈가 잘 안 맞아서 다시 적용을 해야겠다.
다른 블로그를 보고 avatar의 경로만 바꾸면 될 줄 알았지만 cdn 주석 처리까지 해줘야 한다는 걸 알게 됐다. 별거 아닌 것 같지만 생각보다 구글 검색에 나오지 않아서 5분 만에 끝내야 할 일이 배로 들게 됐다. 이 글을 본다면 avatar 적용에 애를 먹지 않고 다른 것에 더 많은 시간 투자를 할 수 있을 것이다.