티스토리의 포스팅한 글의 읽는 시간을 표시하는 JS를 추가해보도록 하겠습니다.
이번에 사용할 것은 github에 공개된 readingtime.js를 활용하시면 됩니다.
포스팅 읽는 시간 알려주는 readingtime.js
먼저 깃허브에서 다운로드 받으신 다음 스킨에 파일 업로드 합니다.
한국 블로거 분이 한글 버전으로 변경해주셨습니다.
다운로드 링크
<script src="./images/readingtime.js" defer></script>이후 스킨에 추가하면 되는데요.
파일 업로드에서 다운받은 파일을 추가하시고 HTML에서 JS 스크립트를 추가해주시면 됩니다.
이렇게 HTML칸에서 추가를 해주시구요.
표기될 곳에서도 eta라는 span을 불러와야 합니다.
먼저 이 스킨의 경우 글쓴이의 위치가 나오는 곳이 post-meta인데요.
이곳에 <span class="eta"></span>을 추가해 줍니다.
<div class="hgroup">
<h1></h1>
<div class="post-meta">
<span class="author"></span>
<span class="eta"></span>
<span class="date"></span>
<s_ad_div>
<span><a href="">수정</a></span>
<span><a href="#" onclick="">삭제</a></span>
</s_ad_div>
</div>
</div>
이후 css도 추가해야 하는데요.
해당 위치에 CSS를 추가해줍니다.
post-meta 아래에 eta를 주고 마진만 두었습니다.
.hgroup .post-meta span:first-child:before {
content: none;
}
.hgroup .post-meta .eta {
margin-left: 20px;
}이렇게 설정해주시면 됩니다.
마지막으로 <body>에 읽는시간에 대한 코드를 작성해주면 됩니다.
<script>
$(function(){
$('.entry-content').readingTime({
readingTimeAsNumber: false,
readingTimeTarget: $('.eta'),
wordsPerMinute: 200,
round: true,
prependTimeString: '📚 읽는시간 : ',
lang: 'kr'
});
})
</script>
</body>'Blog' 카테고리의 다른 글
| 티스토리 2차 도메인 등록시 문제점 해결하기(리다이렉션, 댓글) (0) | 2022.11.18 |
|---|---|
| 호스팅 KR 도메인 구입후 티스토리 2차 도메인 연결하기 (0) | 2022.11.17 |
| 깃허브로 간단하게 블로그 시작하는 방법 (0) | 2022.11.12 |
| 워드프레스 사이트 건강상태 확인하여 최적화하기 - imagick 에러 (0) | 2022.10.05 |
| Ubuntu에서 개인 블로그용 워드프레스 설치하기 (1) | 2022.09.30 |