技術・Web 3年前

Firestoreのデータからブログのサイドバーを表示する

WordPressブログをNuxt+Firebaseに移行するシリーズ。  前回の記事で、記事一覧および記事本文を表示できるようになりましたが、  サイドバー、関連記事、コメントフォームなどの共通パーツがまだです。

サイドバー

 このブログの場合、サイドバーに必要な機能は以下の通り。
    最新記事 最新コメント カテゴリー一覧 タグ一覧 アーカイブ カレンダー 人気の記事 広告
 意外と多くてしんどいのですが、そもそもこのあたりの必要データ構造は↓の記事で整えたので、  この記事ではあんまり書くことがなさそうです。
WordPressのカテゴリー・タグなどのデータをFirestoreに同期する | Our Story's Diary  サイドバーを共通パーツ化することで、ページ遷移時に再読み込みしなくて良くなります。  これをいい感じに差分更新してくれるのがNuxt化の最大のメリットであり、WordPressだとajaxとかで無理やり遷移させることになりますが、どこを書き換えてどこを残すかを人間の頭で管理するのは不可能です

サイドバー

最新記事

 これはトップページのメインループと同じ関数なので割愛。limitを5にするくらい。

最新コメント

 これもWordPressからWP REST API経由で取るので割愛。

カテゴリー一覧

 カテゴリー一覧の取得クエリは async categories() { const query = db.collection('categories').orderBy('name') // タグはtags const data = await query.get().then(querySnapshot => { return querySnapshot.docs.map(doc => doc.data()) }) return data }  実際に出力する際は <ul class="menu-list"> <li v-for="category in categories" :key="category.id"> <n-link :to="`/category/${category.slug}`"> {{ category.name }} </n-link> </li> </ul>  で前回作ったカテゴリーページにリンクできます。  ちなみにこのブログでは、サイドバーにはアスタリスクから始まるカテゴリーのみを表示するようにしています。(最近使っていないカテゴリーが無駄に多いので) const data = await db .collection('categories') .orderBy('name') .startAt('*') .endAt('*' + '\uf8ff') .get() .then(querySnapshot => { return querySnapshot.docs.map(doc => doc.data()) })  Cloud FirestoreでLike検索する方法|shogo yamada|note の記事を

タグ一覧

 タグは上位20件をcountで並べます。 const query = db .collection('tags') .orderBy('count', 'desc') .limit(20) const ...

comment  0
favorite  1