Hexo

Hexo 트위터 연동 플러그인

🗓 ⏰ 소요시간 12 분

저는 SNS를 많이 하지 않습니다. 사진을 잘 찍지 않으니 인스타도 안하고, 할 이야기가 있으면 페북 대신 블로그나 미디엄을 이용합니다. 그나마 하는 것이 트위터입니다. 가끔은 뉴스보다 더 빠르게 소식이 올라오기도 하고, 짧고 재미있는 읽을 거리가 많아서 종종 들어갑니다.

트위터는 정적인 블로그와 달리 콘텐츠의 전파 및 소비의 속도가 굉장히 빠릅니다. 그래서 블로그를 홍보할 때는 트위터가 굉장히 유용한데요, 이번 포스트에서는 단순한 포스트 공유 버튼을 넘어서 트위터와 연동해서 사용할 수 있는 Hexo 플러그인 두 가지를 살펴보겠습니다.

트윗 인용하기

블로그를 하다보면 트윗을 인용해서 사용하고 싶을 때가 있습니다. 그럴 때 딱히 방법이 없으면 귀찮게 캡쳐해서 첨부해야겠죠. 대신 hexo-tag-twitter 플러그인을 이용해서 간단하게 첨부해보도록 하겠습니다.

설치하기

1
$ npm i -S hexo-tag-twitter

사용하기

가장 사용하기 쉬운 방법입니다. 그냥 트윗 url 을 복사해서 넣으면 됩니다.

1
2
3
# 첫번째 방법: 가장 간단한 방법
# {% twitter tweet-url %}
{% twitter https://twitter.com/hdhXD/status/1024286456473247745 %}

해당 url 을 살펴보시면 사용자 아이디와 트윗 아이디 두 가지로 이루어져있습니다. 이걸 이용해서 좀 더 깔끔하게 작성할 수 있습니다.

1
2
3
# 두번째 방법: 깔끔해서 보기 좋은 방법
# {% twitter tweet-id user-id %}
{% twitter 1024286456473247745 hdhXD %}

만약 저 트윗이 본인의 트윗이거나, 지속적으로 인용하는 사용자라면 아예 설정에서 기본값으로 고정해놓을 수도 있습니다.

_config.yml
1
2
tagTwitter:
  id: hdhXD

그렇다면 다음과 같이 트윗 아이디만 가지고도 사용 가능합니다. 당연하게도 트윗 아이디를 지정해놓은 후에도 첫번째, 두번째 방법으로 다른 유저의 트윗도 첨부 가능합니다. 만약 로컬 서버에서 테스트할 때 적용이 안된다면 서버를 올렸다 내려보시면 됩니다.

1
2
3
# 세번째 방법: user-id 기본값을 설정해놓은 방법
# {% twitter tweet-id %}
{% twitter 1024286456473247745 %}

하지만 그냥 url 그대로 붙여넣는 첫번째 방법이 제일 쉽고 간단한 방법이네요.

인용구를 쉽게 트윗하기

Hexo의 대부분 테마에는 트위터에 쉽게 공유할 수 있는 share 버튼이 달려있습니다. 그런데 포스트 url이 아닌 포스트 내에 있는 명언이나 인용구를 트위터에 공유하고 싶다면 어떨까요? Medium이라면 바로 원하는 부분에 블록을 씌우고 트윗 버튼을 눌렀겠지만, 아쉽게도 Hexo에는 그런 기능이 없네요. 그렇다면 손수 복사해서 트윗을 써야할 겁니다.

명언이나 인용구를 트윗하기 쉽게 만들어주는 hexo-tag-tweetable-quote 플러그인이 있습니다. 물론 독자가 원하는 부분을 자유자재로 트윗할 수 있는 것은 아니지만, 보통 마크다운에서 > 로 처리하는 인용구를 트윗하기 쉽게 만들어줄 수 있습니다.

설치 및 설정하기

다른 여타 플러그인과 마찬가지로 npm 을 이용해서 설치하고 _config.yml 파일에 설정 내용을 넣어줍니다.

1
$ npm i -S hexo-tag-tweetable-quote
_config.yml
1
2
3
4
5
6
7
tweetableQuote:
  quote_font_color : #258fb8 # 글자 색
  quote_font_size  : 1.2em # 글자 크기
  link_font_color  : #6e7b8d # 링크 색
  link_font_size   : 0.9em # 링크 크기
  via_twitter_account : fcreator_twt # 트윗 계정
  related_twitter_accounts : hdhXD,twitter # 연관된 트윗 계정으로 트윗 다음에 나옴

사용법

1
2
# {% tweetableQuote '명언/인용구' '작가/출처' ['해시태그'] %}
{% tweetableQuote '잃어버린 시간은 결코 다시 찾을 수 없다.' '벤자민 프랭클린' 'quote,book' %}

사용법도 간단합니다. 여기서 해시태그는 옵션으로 콤마(,)를 이용해서 여러 개 넣어줄 수 있습니다. 간단하게 인용구를 트윗할 수 있도록 만들었습니다. 저는 기본값에서 설정을 조금 바꿔서 글자 크기를 줄여봤습니다.

아쉬운 점이 있다면 글자 색과 링크 색은 바꿔도 적용되지가 않네요. 이 부분은 직접 css 를 건드려야 할 것 같습니다. 다양한 커스터마이징 기능이 없는 것도 조금 아쉽습니다.

이번 포스팅에서는 트위터와 연동해서 사용할 수 있는 플러그인을 알아봤습니다. hexo-tag-twitter는 블로거가 트윗을 쉽게 인용할 수 있는 플러그인이었고, hexo-tag-tweetable-quote는 독자들이 명언이나 인용구를 트윗하기 쉽게 만들어주는 플러그인이었습니다.

Share