Astro에 읽기 시간 추가하기(쉬운 방법)

다른 많은 블로그와 함께 이 블로그가 읽기 시간을 제공한다는 사실을 눈치채셨을 것입니다.

이 읽기 시간은 기사를 읽는 데 걸리는 시간을 나타내는 데 사용됩니다.



기사를 읽기 시작하면서 어떤 내용을 접하게 되었는지 알고 싶을 때가 있기 때문에 이것은 귀중한 정보입니다.

Astro에 독서 시간 추가

우리는 쉬운 길을 갈 것입니다. 과학적 접근 방식이 아니며 완벽한 숫자보다 지침으로 더 많이 사용됨을 의미합니다.

우선, Astro 블로그 스타터를 가지고 거기서부터 작업해 봅시다.

다음 명령을 사용하여 스타터 템플릿을 설치합니다.

mkdir astro-blog && cd astro-blog
npm init astro -- --template blog-multiple-authors

방문자가 읽고 싶은 기사를 결정할 수 있도록 게시물 개요 페이지에 읽기 시간 스크립트를 추가할 것입니다.

먼저 실제 읽기 시간을 결정하는 파일을 만들어 봅시다.

이 작은 스크립트를 위해 lib 디렉토리에 src 폴더를 만들어 readingtime.js 파일을 만들었습니다.

그런 다음 콘텐츠를 수락하고 읽기 시간을 반환해야 하는 함수를 만드는 다음 템플릿을 추가합니다.

export function getReadingTime(content) {
  if (!content) return;
  // Do something
}

이제 components/PostPreview.astro를 열고 다음과 같이 이 스크립트를 가져옵니다.

---
import { getReadingTime } from '../lib/readingtime.js'

// Rest of frontmatter
---

그리고 HTML 섹션에서 다음과 같이 사용할 수 있습니다.

<p>{getReadingTime(post.astro.html)} minutes to read</p>

함수를 호출하고 게시물 콘텐츠의 HTML을 전달합니다.
그러나 이 시점에서는 아무 일도 일어나지 않습니다.

따라서 readingtime.js 파일로 돌아가십시오.
우리가 해야 할 첫 번째 일은 평균적인 사람이 분당 무엇을 읽는지 결정하는 것입니다.

이것은 200/250 단어 사이로 널리 알려져 있으므로 더 낮은 숫자를 고수합시다.

Read more on the number of words read per minute

이를 염두에 두고 이 숫자를 나타내는 변수를 만들 수 있습니다.

const WORDS_PER_MINUTE = 200;

우리가 전달하는 콘텐츠는 모든 종류의 HTML 태그, 이미지 등을 포함하는 순수 HTML이며 읽기 시간에 포함되지 않습니다.

Astro에서는 문서 조작을 사용할 수 없으므로 정규식을 사용하여 이러한 요소를 제거해 보겠습니다.

export function getReadingTime(content) {
  if (!content) return;
  const clean = content.replace(/<\/?[^>]+(>|$)/g, '');
}

그런 다음 정리된 문자열을 공백으로 분할하여 단어 수를 추출할 수 있습니다.

const numberOfWords = clean.split(/\s/g).length;

마지막으로 단어 수를 분당 단어 변수로 나누고 반올림할 수 있습니다.

함수를 다음과 같이 만듭니다.

const WORDS_PER_MINUTE = 200;

export function getReadingTime(content) {
  if (!content) return;
  const clean = content.replace(/<\/?[^>]+(>|$)/g, '');
  const numberOfWords = clean.split(/\s/g).length;
  return Math.ceil(numberOfWords / WORDS_PER_MINUTE);
}

이제 웹 사이트로 이동하면 읽기 시간 팝업이 표시됩니다.



참조용으로 GitHub에서 완성된 코드 예제를 찾을 수도 있습니다.

읽어주셔서 감사합니다. 연결해 보겠습니다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나