Firestoreのデータからブログのサイドバーを表示する
WordPressブログをNuxt＋Firebaseに移行するシリーズ。 前回の記事で、記事一覧および記事本文を表示できるようになりましたが、 サイドバー、関連記事、コメントフォームなどの共通パーツがまだです。
サイドバー
このブログの場合、サイドバーに必要な機能は以下の通り。- 最新記事 最新コメント カテゴリー一覧 タグ一覧 アーカイブ カレンダー 人気の記事 広告
サイドバー
最新記事
これはトップページのメインループと同じ関数なので割愛。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 ...