如何使用 next.js 在每 'n' 次 Post 之后在 Feed 中添加 Google 广告

Question

我想创建一个提要，其中 Google 广告在每 10 个帖子后显示，就像 Instagram 一样。我使用 Firebase 作为我的数据库，使用 tailwind-CSS 作为样式。我将如何使用 Google 广告来实现此功能？

这是我显示 Feed 的代码

Feed.js

import {React, useState, useEffect} from "react";
import Navbar from "./Navbar";
import Post from "./Post";
import { onSnapshot, collection, query, orderBy } from "@firebase/firestore";
import { db } from "../firebase";

function Feed() {
  const [posts, setPosts] = useState([]);
  useEffect(
    () =>
      onSnapshot(
        query(collection(db, "posts"), orderBy("timestamp", "desc")),
        (snapshot) => {
          setPosts(snapshot.docs);
        }
      ),
    [db]
  );
  return (
    <div>
      <Navbar />
      <div className="pb-72">
        {posts.map((post) => (
          <Post key={post.id} id={post.id} post={post.data()} />
        ))}
      </div>
    </div>
  );
}

export default Feed;

Answer 1

javascript map 函数有第二个参数 - index - 告诉你它正在迭代的数组中的项目的索引。所以你想做两个关键的改变：

return (
  <div>
    <Navbar />
    <div className="pb-72">
      {posts.map((post, idx) => {
         // If true, you're on the tenth post
         const isTenthPost = (idx + 1) % 10 === 0

         // Note the addition of the React fragment brackets - your map call
         // has to return a single React component, so we add this to handle
         // the case where we want to return both the post and the Google ad.
         return (
           <>
             <Post key={post.id} id={post.id} post={post.data()} />
             { isTenthPost && <GoogleAdComponent /> }
           </>
         )
      })}
    </div>
  </div>
);

我并不是建议您完全复制粘贴，但它应该可以帮助您了解如何确定您是否在第 n 个 post 以及如何有条件地显示另一个组件。

如何使用 next.js 在每 'n' 次 Post 之后在 Feed 中添加 Google 广告

How to add Google Ads in a Feed after every 'n' number of Post using next.js

javascript

firebase

google-cloud-firestore

next.js

tailwind-css