마크다운 파일의 모든 단어 세기 ~ Astro

이제 counted all our words using a CLI script 이 있으므로 Astro 웹 사이트에 이 기능을 추가하는 방법을 살펴보겠습니다.

이전 Astro 기사를 팔로우했다면 reading time for an article 을 가져오는 함수를 이미 작성했습니다.

위 기사에서 설명한 방법은 기사당 단어 수를 사용하여 대략적인 읽기 시간을 검색했습니다.
지금까지는 꽤 정확했습니다.

이 방법은 공백을 기반으로 문자열을 제거하며 이는 CLI 스크립트에서 본 것과 다를 수 있습니다. 이 방법은 HTML 태그 내부의 모든 항목도 계산하기 때문입니다. (코드 블록 등)

읽기 시간 수정

현재 읽기 시간 함수는 읽기 시간이 얼마인지 알려주는 문자열만 반환합니다.

배열을 반환할 수 있도록 이 함수를 수정해 보겠습니다.

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

이 함수는 콘텐츠의 단어 수와 예상 읽기 시간을 반환합니다.

이 정보를 사용하여 두 값을 모두 포함하도록 이 함수를 호출하는 lib/posts.js 함수를 변경할 수 있습니다.

async function load() {
  const fetchedPosts = import.meta.globEager('../pages/posts/*.md');
  const mappedPosts = Object.keys(fetchedPosts).map((key) => {
    const post = fetchedPosts[key];
    const url = key.replace('../pages/', '/').replace('.md', '/');
    const item = { ...post.frontmatter, url };
    const [numberOfWords, readingTime] = getReadingTime(post.metadata.html);
    item.numberOfWords = numberOfWords;
    item.readingTime = readingTime;
    return item;
  });

  return mappedPosts;
}

보시다시피 단어 수와 읽기 시간을 포함하도록 기능을 변경했습니다.

Note: I created the posts lib function to load all posts in Astro faster.

이제 모든 것이 준비되었으므로 총 단어 수를 표시해 보겠습니다.

내 웹 사이트에서 나는 Stats.astro 이라는 구성 요소를 사용합니다. 총 구독자 수와 총 게시물 수에 대한 통계를 보여줍니다.

이 예에서는 거기에 전체 단어를 추가하겠습니다.

이 함수가 모든 게시물을 로드하면 거기에 호출할 새 변수totalWords를 추가할 수 있습니다. 이 함수는 reduce method을 사용하여 모든 게시물의 총 단어를 요약합니다.

const totalWords = allPosts.reduce(
  (total, post) => (total += post.numberOfWords),
  0
);

그런 다음 통계에서 이 값을 렌더링할 수 있습니다.

<li class="flex items-center">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    fill="currentColor"
    class="w-5 h-5 mr-1"
    viewBox="0 0 32 32"
    fill="currentColor"
  >
    <path
      d="M 3 6 L 3 25 L 13 25 C 14.101563 25 15 25.898438 15 27 L 17 27 C 17 25.898438 17.898438 25 19 25 L 29 25 L 29 6 L 19 6 C 17.808594 6 16.734375 6.527344 16 7.359375 C 15.265625 6.527344 14.191406 6 13 6 Z M 5 8 L 13 8 C 14.101563 8 15 8.898438 15 10 L 17 10 C 17 8.898438 17.898438 8 19 8 L 27 8 L 27 23 L 19 23 C 17.808594 23 16.734375 23.527344 16 24.359375 C 15.265625 23.527344 14.191406 23 13 23 L 5 23 Z M 15 12 L 15 14 L 17 14 L 17 12 Z M 15 16 L 15 18 L 17 18 L 17 16 Z M 15 20 L 15 22 L 17 22 L 17 20 Z"
    ></path></svg
  >{totalWords} words written
</li>

이제 지금까지 작성한 총 단어 수가 표시됩니다!



이 웹사이트는 오픈 소스이므로 GitHub에서 전체 코드를 찾을 수도 있습니다.

읽어주셔서 감사합니다. 연결합시다!

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