アストロへの読書時間の追加(簡単な方法)

あなたは、このブログに注意している可能性があります他の多くのと一緒に、読書時間を提供します.
この読書時間は、それが記事を読むのにどれくらいかかるかを示すのに用いられます.

これは貴重な情報ですが、時々あなたが記事を読み始める中に何を取得しているのかを知りたい.

アストロへの読み込み時間の追加
我々は簡単な方法を行くつもりです.それは科学的なアプローチではなく、完璧な数よりもガイドラインとして使用されています.
まず、アストロブログスターターを取りましょう.
スターターテンプレートをインストールします.

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
}

以下のようにこのスクリプトをインポートします.

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

// Rest of frontmatter
---

HTMLセクションでは以下のように使用できます:

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

関数を呼び出し、ポストコンテンツのHTMLを渡します.
しかし、この時点で何も起こらない.
したがって、components/PostPreview.astroファイルに戻る.
我々がする必要がある最初のことは平均的な人が1分あたり何を読むかを決定することです.
これは200/250語の間に広く知られているので、下の数字に固執しよう.

Read more on the number of words read per minute

これを念頭に置いて、この数を示す変数を作成することができます.

const WORDS_PER_MINUTE = 200;

我々が通過する内容は、HTMLタグ、画像などのすべての種類を含む純粋なHTMLです.
これらの要素を削除するには、Regexを使用しましょう.

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