1. banner_image 주소로 삽입하기

그동안 포스트에 배너이미지는 네이티브 이미지만이 삽입 가능했다.

---
 ...
banner_image: /images/2018/image_name.jpg
 ...
---

그런데 모든 이미지를 다운받아 링크를 걸자니 너무 귀찮아졌다.

다음과 같이 쓸 수 있지 않을까?

---
...
banner_image: https://your.img.link/image.jpg
...
---

어렵지 않을 것 같았다. include/post.html 에서 banner_image 관련 태그를 보자.


\{\% if page.banner_image \%\}

<div class="post-thumbnail">
    <img src="/assets/blog/posts/https://cdn-images-1.medium.com/max/1600/1*XC8smpR5WreT96bwSVNzjg.gif" alt="\{\% if page.banner_image_alt \%\}\{\% else \%\}블로그 마이너 업데이트\{\% endif \%\}">
</div>
\{\% endif \%\}

찾았다! 다음과 같이 고쳐준다.

\{\% if page.banner_image \%\}
<div class="post-thumbnail">
  \{\% if page.banner_image contains '://' \%\}
  <img src="https://cdn-images-1.medium.com/max/1600/1*XC8smpR5WreT96bwSVNzjg.gif" alt="\{\% if page.banner_image_alt \%\}\{\% else \%\}블로그 마이너 업데이트\{\% endif \%\}">
  \{\% else \%\}
  <img src="/assets/blog/posts/https://cdn-images-1.medium.com/max/1600/1*XC8smpR5WreT96bwSVNzjg.gif" alt="\{\%\{\% if page.banner_image_alt \%\}\{\% else \%\}블로그 마이너 업데이트\{\% endif \%\}">
  \{\% endif \%\}
</div><!-- .post-thumbnail -->
\{\% endif \%\}

끝!

2. youtube tag 삽입

3. Sidebar TOC Navigation

엄청난 삽질을 6시간 동안 하고 결국 전부 롤백시켰다.

도커를 공부하다가, 거의 완벽에 가까운 블로그를 봤다.

Suubicura님의 블로그

가장 마음에 들었던 것은, 글을 읽는 중간에 왼쪽에 이쁘게 나타났다가 글을 다 읽으면 사라지는 TOC (Table of Contents) 네이게이션이다.

글 내용도 내용이지만 너무나 유려한 인터페이스와 디자인에 매료되어서 오늘은 퇴근하고 내 블로그에 심어야겠다 라고 다짐했다.

그래서 구글링 시작.

먼저 TOC 깔고 (jekyll-toc)

gem install jekyll-toc

사이드 네이게이션에 대한 정보 수집.

구글링, 구글링, 구글링..

그리고..

damn

망했다. 아주 망해버렸다.

내 블로그는 오류를 내뿜고 쓰러져 버렸다.

아직 javascripts, jquery 지식이 부족한 상태에서 구글링에 의지해서 한게 잘못이다.

다시는 이런 짓은 저지르지 말자.

오늘의 교훈

배우지 않은건 제대로 배우고 덤비자.

끝.

Comments

Eungbean Lee's Picture

About Eungbean Lee

Lee is a Student, Programmer, Engineer, Designer and a DJ

Seoul, South Korea https://eungbean.github.io