技術・Web 3年前

Firestoreのデータからブログを表示する

WordPressブログをNuxt+Firebaseに移行するシリーズ。  WordPressに存在する記事データの必要な情報は全てFirestoreに同期させたので、次はいよいよ表示。  現在のブログ表示で行っていることを、Firestoreからデータを取得するクエリに置き換えていきます。  前回も書きましたが、そもそもブログごとに必要・不必要な部分がたくさんあるので難しいんですよね。  ルーティング自体は書きますが、JSONデータをどう扱うかは完全に個々のブログのデザインの話になるので。

初期設定

 Firebaseの初期設定やNuxtとの連携の話はもういろいろなところにあると思うのでざっくり。
    yarn add firebase する ダッシュボードから「アプリを追加」でWEBアプリを追加 表示されるJS情報をplugin/firebase.ts ファイルに入れてnuxtで読み込む
import firebase from 'firebase/app'import 'firebase/firestore'if (!firebase.apps.length) { const config = { apiKey: process.env.firebaseApiKey, authDomain: process.env.firebaseAuthDomain, databaseURL: process.env.firebaseDatabaseURL, projectId: process.env.firebaseProjectId, storageBucket: process.env.firebaseStorageBucket, messagingSenderId: process.env.firebaseMessagingSenderId } firebase.initializeApp(config)}export default firebase  ここでは@nuxt/dotenvを使って環境変数化していますが、面倒な方は表示されるIDなどを直接書いてもそんなに問題はないと思います。(そもそもCDNでも使える設計なので公開情報のはず)  加えて、今後GitHubからFirebase Hostingへの自動デプロイを行うためには.env をGitHubに上げる必要も出てくるので、あまり意味がなくなる可能性もあります。気休めみたいなものです。  ストアから情報を呼び出す際は、このプラグインで初期化されたfirebaseを呼び出すので、 import firebase from '~/plugins/firebase'const db = firebase.firestore()  みたいになります。  このDBに対しての具体的な操作は、Firebaseのドキュメントを見ればわかります。
Cloud Firestore を使ってみる | Firebase  これ以降はdbの定義などは省いて書いていきます。

コンテンツ

 「WordPressサイトからURLを変えることなく移行」するためには、各アーカイブページを表示する必要があります。

ルーティング

 WordPressに存在する主要なページは以下の通り。
ページ名URL
トップページ(記事一覧)/
記事/archives/{post_id}
カテゴリーアーカイブ/category/{category_slug}
タグアーカイブ/tag/{tag_slug}
年別・月別・日別アーカイブ/archives/date/{year}/{month}/{day}
固定ページ/{page_slug}
 実はページの種類としてはこのくらいしかありません。  NuxtのPagesのルーティングを使うとこうなります。 image-20191110001933705  年別/月別/日別だけ面倒ですが、WordPressのルーティングを再現するのは意外と簡単なのです。  というわけで作るページはこんな感じです。意外と少ないですね。

トップページ

 まずメインの記事部分はこんな感じで取得してきます。 import firebase from '~/plugins/firebase'const db = firebase.firestore()export const state = () => ({ posts: []})export const mutations = { SET_POSTS: (state, ...

comment  0
favorite  1