HUGO 사이트 썸네일 설정방법 정리

partials 코드 변경방법

Image credit: hugo-logo

HUGO 싸이트 섬네일 설정 방법

HUGO로 블로그를 만들었을때 블로그 글을 보여주기 위해서 링크로 공유할 일이 많아질 것이다. 하지만 그러한 공유 링크에 알맞은 사진이 없다면, 한없이 없어보인다. 따라서 썸네일을 포스트에 맞게 설정해주는 것은 중요하다.

Update (June 12, 2020)

현재 휴고 템플릿으로 적용완료

HUGO의 이미지 메타데이터 작성 템플릿은 images를 이용하고 있음. 따라서 포스트 맨 윗쪽에 이미지를 지정할 때 image가 아닌 images를 이용해서 써줘야 함. 이런 식:

date: "2006-01-02"
description: Text about this post
images:
- post-cover.png
series: []
tags: []
title: Post title
videos: []

HUGO에서 정의한 템플릿을 이용

만약 자신이 이용한 블로그가 일반적인 룰을 따르는 사이트라면 다음과 같이 미리 정의된 HUGO의 템플릿을 사용하여 정의해 줄 수 있다.

HUGO의 오픈 그래프 템플릿 링크

위의 링크의 요지는 HUGO 사이트의 폴더 중 layouts > partials 폴더 안에 head.html 파일에 다음의 명령어를 써넣으면 된다.

{{ template "_internal/opengraph.html" . }}

혹시나 휴고 아카데믹 테마를 이용한다면 Custom head를 만들어서 넣어준다.

위의 템플릿을 이용하면 포스트를 공유했을 경우의 메타 데이터를 알아서 잡아준다.

직접 코드 작성

필자는 자바 스크립트를 전혀 할 줄 몰라서 아주아주 개고생을 해서 알아내었다. 왜냐하면 필자의 경우 위의 방법을 적용했을때의 결과가 og:image태그를 쏙 빼놓고 생성이 되었기 때문이다. 필자가 현재 쓰고있는 코드는 다음과 같다.

head.html 파일에 다음과 같은 코드를 삽입한다.

  <meta property="og:image" content="youbaseURL/{{ with .Params.Image }}{{ . }}{{ else }}{{ with .Site.Params.Image }}{{ . }}{{ end }}{{ end }}">

그리고 각 포스트의 맨 위에 image: image/filename.png or jpg 식으로 설정해주면, Params.Image에 그 태그 값이 잡혀서 baseURL이랑 합쳐서 출력이 되는 것을 감으로 때려맞췄다. 잘하시는 분이라면 더 깔끔하게 만들어 쓰는 방법을 바로 알 수 있을 것이라 생각된다.

오늘도 여전히 미래의 나를 위한 포스팅 완료. 블로그는 만드는 주기가 길어서 매번 만들때마다 고생한다.

Avatar
이삭
PhD candidate

I believe anyone can learn anything with a proper education process.

comments powered by Disqus
Next
Previous