아겔로그

🐌 블로그 디자인 수정 + 제목 자동 emoji 붙여주기

블로그 CSS을 또 수정하고, 레이아웃도 좀 더 고쳤다. 간단하게 가볍게 보였으면 해서.

그런데 그간 고민해오던 것들이 있음:

  1. (예전에) 귀찮아서 new-ping.pl-스크립트 같은거 짜놓고 자동 생성한 포스팅 제목으로 그대로 포스팅한 "Ping ….."-같은 제목의 포스팅들은 archives에서 봐도 뭐가 뭔지 구분이 안됨.
  2. h1-같은 markdown/org-mode에서 export한 제목과 각 포스팅의 제목(이것도 h1-같은 태그인)이 눈에 딱 들게 구분이 되지 않았음.

archives에서 각 포스팅의 preview을 표시했다

조금 내용도 나오니까 찾아보기 더 수월해진거 같다. ㅎㅎ 그리고 막상 이렇게 전체 목록 / 시간에 따라, 내용을 조금이나마 보여주니까 일대기 형식이라 재밌네.

포스팅 제목에 자동으로(!) emoji을 붙여주도록 했다 🤖

랜덤하게, 혹은 특정한 값에 의해, emoji 목록에서 선택하여 자동으로 붙여주기,,를 하면 좀 각 포스팅별로 구분되어 보일 것 같아서 시도.

그런데, 페이지 렌더링 때마다 매번 랜덤하게 붙여주면, 그 포스팅의 개성이 사라지는거 같아서, 해당 포스팅의 제목/내용 같은 문자열 조합에 따라서 emoji 목록에서 선택하는 방식으로 구현해 봤다.

어차피 static site generator을 사용하고 있으므로, 선택지는:

  1. javascript : 웹브라우저가 페이지 렌더링 할 때에.
  2. static site generator templating : 포스팅 publish 전에 html에 생성.

자바스크립트를 쓰면 쉽겠지만, 자바스크립트가 없는 웹브라우저를 쓰는 누군가👽를 위해서 (2)번 방식, static site generator templating만을 쓰기로 했다.

그래서 구현해봤다:

1
2
3
4
5
6
7

  {{- /* layouts/partials/emojibyhash.html */ -}}
  {{- $emojis := slice "😀" "😃" /* ...여기에 엄청 많이 이모지 목록 나열... */ -}}
  {{- $h := crypto.SHA1 .input -}}
  {{- $hn := cast.ToInt (add "0x" (slicestr $h 36)) -}}
  {{- $emoji_idx := mod $hn (len $emojis) -}}
  {{- $emoji := index $emojis $emoji_idx -}}
  {{- return $emoji -}}

어떤 문자열을 전달 받고(.input), 그걸 sha1 >> slice _ 36 >> ToInt-해서 작은 정수값으로 만들고, 그 정수값으로 remainder연산해서 이모지목록에서 선택하는 방식.

주어진 문자열(.input)만 고정되어 있다면, 항상 같은 이모지를 선택해주도록 했다.

사용하는 곳에선:

1
2

  {{- $emoji := partial "emojibyhash.html" (dict "input" .Title) -}}
  <h1>{{ $emoji }} {{ .Title }}</h1>

hugo template partials을 활용해서, 이렇게 function-or-macro 같이 사용할 수 있더라. shortcodes1으로 만들어서 쓰는 방식도 가능하던데, 일단 그냥 partials으로 무식하게 만들어봤다.

…재밌었다. ㅎㅎ

포스팅에 자동으로 emoji을 붙여주니 좀 걱정도 생긴다 🫣

음… 자동으로 붙여주는건 정말 좋은데 걱정이: …포스팅 제목에 따라서 붙은 이모지 조합이, 종종 nsfw하거나 괴상한 의미로 읽힐 수도 있을거 같은 예가 좀 보여서.

Footnotes

1

https://gohugo.io/templates/shortcode/