본문 읽는 시간 보여주기

Medium을 이용하다보면, 해당 아티클을 읽는데 몇 분이 소요되는지 알려주는 아이콘이 있는데, 이걸 내 블로그에도 적용시켜보고 싶었다. 그러다 우연히 Eric Han님의 블로그에서 방법을 찾게되어 허락을 구하고 공유하게 되었다.

순서는 아래와 같다.

• 플러그인 설치
• _config.yml 설정
• 코드 작성

플러그인 설치

$ npm install hexo-symbols-count-time --save

블로그 메인 디렉토리에 있는 _config.yml 설정

symbols_count_time:
  symbols: true
  time: true
  total_symbols: true
  total_time: true

article.ejs에 코드 작성

아티클 내 메타 데이터 아래에 아래 코드를 작성한다. date와 tag를 불러오는 코드 아래에 작성하는게 좋다.

<span class="reading-time">⏱ <%- symbolsTime(post.content, 4, 300, '분') %></span>

여기서 symbolsTime()안에 들어가는 파라미터들은 다음과 같다.

• post.content : 현재 포스트

• 4 : 평균단어길이 (AWL, Average Word Length)

• 300 : 분당 읽는 단어 (WPM, Word Per Minutes)

• '분' : 시간 단위명

단어길이를 바꿀 수도 있고, WPM(분당 읽는 단어)을 바꿀 수도 있다. 이렇게 해서 각자 읽는 속도 계산을 변경할 수 있다.

출처 : Hexo 글자 수와 리딩 타임 추가하기