代码已复制！
// Import dependencies
import React from 'react'
import ReactMarkdown from 'react-markdown'
import rehypeRaw from 'rehype-raw'
import remarkGfm from 'remark-gfm'
import remarkHeadingId from 'remark-heading-id'
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
import { duotoneLight } from 'react-syntax-highlighter/dist/esm/styles/prism'
import { CopyToClipboard } from 'react-copy-to-clipboard'

export default function Markdown({ data, position }) {
  if (!data) return null

  const myCustomTheme = {
    "introduction": {
      showLineNumbers: false,
      margin: 'none',
      background: 'none',
      padding: 'none',
      ...duotoneLight,
      'pre[class*="language-"]': {
        ...duotoneLight['pre[class*="language-"]'],
        background: 'none',
        padding: '0px'
      },
      'code[class*="language-"]': {
        ...duotoneLight['code[class*="language-"]'],
        background: 'none'
      }
    }
  };

  return (
    <ReactMarkdown remarkPlugins={[remarkGfm, remarkHeadingId]} rehypePlugins={[rehypeRaw]}
      children={data}
      components={{
        code(props) {
          const { children, className, node, ...rest } = props
          const match = /language-(\w+)/.exec(className || '')
          return match ? (
            <div className='CodeBlock'>
              <button className='CopyButton absolute right-2 top-4 size-9 p-2.5 rounded-md bg-slate-50 opacity-50 transition duration-300 hover:opacity-100'>
                <CopyToClipboard text={String(children)} onCopy={() => alert("Codeblock copied!")}>
                  <span className="icon icon-nav-list-order"></span>
                </CopyToClipboard>
              </button>
              <SyntaxHighlighter
                {...rest}
                PreTag="div"
                children={String(children).replace(/\n$/, '')}
                language={match[1]}
                style={position ? myCustomTheme[position] : duotoneLight}
                showLineNumbers={position ? myCustomTheme[position].showLineNumbers : false}
                wrapLines={false}
              />
            </div>
          ) : (
            <code {...rest} className={className}>
              {children}
            </code>
          )
        }
      }}
    />
  )
}

代码已复制！
...
  <div className="relative mt-10 overflow-x-scroll hide-scrollbar">
    <Markdown data={data.codeblockContent} position="introduction"/>
  </div>
...

代码已复制！
// Import libraries
import { fetcher } from '@/lib/api'
import formatDate from '@/lib/formatDate'

// Import Next components
import Image from 'next/image'
import Link from 'next/link'

// Import components
import CustomizedHead from '@/components/global/CustomizedHead'
import ArticleDynamicZone from '@/components/article/ArticleDynamicZone'

export default function BlogArticle({ globalData, data }) {
  const date = formatDate(data.publishedAt)

  return (
    <>
      <CustomizedHead globalData={globalData} data={data.seo} />
      <div>
        <Image src={`${process.env.NEXT_PUBLIC_API_URL}${data.cover.url}`} alt={`${data.cover.alternativeText}${globalData.globalAddOn}`} width={data.cover.width} height={data.cover.height} loading="lazy" className="max-h-screen object-cover object-center lg:max-h-[75vh]"/>
        <div className="customized-container mt-24 space-y-6">
          <h1 className="text-3xl font-medium uppercase lg:text-4xl xl:text-5xl">{data.title}</h1>
          <Link href={`/category/${data.category.slug}`} className="inline-block px-3 py-2 rounded-full border border-primary">{data.category.name}</Link>
          <p>
            {data.author.name},&nbsp;
            <span className="text-secondary">{date}</span>
          </p>
        </div>
      </div>
      <div className="customized-container mt-6">
        <section>
          <ArticleDynamicZone globalData={globalData} data={data.blocks} />
        </section>
      </div>
    </>
  )
}

export async function getStaticPaths() {
  const response = await fetcher(`articles`)

  const paths = response.data.map((article) => ({
    params: { 
      slug: [article.slug]
    },
  }))
 
  return { paths, fallback: false }
}

export async function getStaticProps({ params }) {
  const slug = params.slug[0] 
  const response = await fetcher(`articles?filters[slug][$eq]=${slug}&populate[0]=author&populate[1]=category&populate[2]=cover&populate[3]=seo&populate[4]=blocks&populate[5]=blocks.file&populate[6]=blocks.files`)
 
  return {
    props: {
      data: response.data[0]
    }
  }
}

代码已复制！
// Import Next components
import Image from 'next/image'

// Import libraries
import Markdown from '@/lib/markdown'

export default function ArticleDynamicZone({ globalData, data }) {
  const renderComponent = (component, index) => { // 定义 renderComponent 函数，传入 component 和 index 参数
    switch (component.__component) { // 为传入的动态组件数据建立 switch 条件判断
      case 'shared.rich-text' : // 类型为 rich-text 时执行 Markdown 渲染
        return (
          <Markdown data={component.body} key={`rich-text-${component.id}-${index}`}/>
        )

      case 'shared.quote': // 类型为 quote 时渲染 <blockquote> 及其中的 <p> 与 <cite> 标签
        return (
          <blockquote key={`quote-${component.id}-${index}`}>
            <p>"{component.body}"</p>
            {component.title && (
              <cite >— {component.title}</cite>
            )}
          </blockquote>
        )

      case 'shared.media': // 类型为 media 时渲染图片或视频，并自动添加 caption 文本
        return (
          <div key={`media-${component.id}-${index}`}>
            <div>
              {component.file &&  // 通过 files.mime 的开头字段判断文件类型：图片或视频
                component.file.mime?.startsWith('image/') ? ( // 渲染图片
                  <Image key={`media-${component.id}-${index}`} src={`${process.env.NEXT_PUBLIC_API_URL}${component.file.url}`} alt={`${component.file.alternativeText}${globalData.globalAddOn}`} width={component.file.width} height={component.file.height} />
                ) : 
                component.file.mime?.startsWith('video/') ? ( // 渲染视频；本段代码还需要实际上传视频做测试
                  <video controls width={component.file.width} height={component.file.height} poster={component.file.previewUrl ? `${process.env.NEXT_PUBLIC_API_URL}${component.file.previewUrl}` : undefined}>
                    <source src={`${process.env.NEXT_PUBLIC_API_URL}${component.file.url}`} type={component.file.mime} />
                  </video>
                ) : ''}
            </div>
            {component.file.caption && (
              <p className="caption">{component.file.caption}</p>
            )}
          </div>
        )

      case 'shared.slider': // 类型为 sliders 时渲染一组图片
        return (
          component.files.length > 0 ? (
            <div key={`slider-${component.id}-${index}`} >
              <div>
                {component.files.map((file, fileIndex) => (
                  <Image key={`slider-item-${fileIndex}`} src={`${process.env.NEXT_PUBLIC_API_URL}${file.url}`} alt={`${file.alternativeText} - Slider image ${fileIndex + 1}${globalData.globalAddOn}`} width={file.width} height={file.height}/>
                ))}
              </div>
              <p className="caption">Slide to view images &gt;&gt;</p>
            </div>
          ): ''
        )
        

      default: // 默认情况下在打印台警告一个未知组件，并在 HTML 中渲染未知组件信息
        console.warn(`Unknown component type: ${component.__component}`)
        return (
          <div key={`unknown-${index}`}>
            <p>Unknown component: {component.__component}</p>
          </div>
        )
    }
  }

  return ( // 渲染 Dynamic Zone 组件列表
    <>
      {data.map((component, index) => renderComponent(component, index))}
    </>
  )
}

代码已复制！
// Import library
import { fetcher } from '@/lib/api'

// Import components
import CustomizedHead from '@/components/global/CustomizedHead'
import Information from '@/components/shared/Information'
import FeaturedArticles from '@/components/blog/FeaturedArticles'
import ArticleCardContainer from '@/components/shared/ArticleCardContainer'

export default function Blog ({ globalData, data, latestArticles }) {
  return (
    <>
      <CustomizedHead globalData={globalData} data={data.seo}/>
      <Information globalData={globalData} data={data.banner} position="blog"/>
      <FeaturedArticles globalData={globalData} articlesOfTheDay={data.articlesOfTheDay} articlesOfTheDay2={data.articlesOfTheDay2} latestArticles={latestArticles} />
      <ArticleCardContainer globalData={globalData} data={data.featuredCategories} position="blog"/> {/* 在这里传入页面位置 */}
    </>
  )
}

export async function getStaticProps() {
  const response = await fetcher(`blog?populate[0]=articlesOfTheDay.author&populate[1]=articlesOfTheDay.category&populate[2]=articlesOfTheDay.cover&populate[3]=articlesOfTheDay2.author&populate[4]=articlesOfTheDay2.category&populate[5]=articlesOfTheDay2.cover&populate[6]=banner.image&populate[7]=featuredCategories.articles.cover&populate[8]=featuredCategories.articles.author&populate[9]=seo`)
  const latestArticles = await fetcher(`articles?sort=publishedAt:desc&populate=*&pagination[limit]=3`)

  return {
    props: {
      data: response.data,
      latestArticles: latestArticles.data
    }
  }
}

代码已复制！
// Import Next component
import Link from 'next/link'
import Image from 'next/image'

// Import components
import Search from './Search'

export default function Information({ globalData, data, position }) {
  const backgroundClasses = {
    "course": "bg-[url('/image/shared/information_course_bg.png')]",
    "blog": "bg-[url('/image/shared/information_blog_bg.png')]",
    "about": "bg-[url('/image/shared/information_about_bg.png')]",
    "search": "bg-[url('/image/shared/information_search_bg.png')]" // 新增背景，需要创建对应的图片在对应目录下
  }

  return (
    <div className={`relative flex items-center w-full h-screen px-6 pt-6 mask-b-from-67% bg-cover bg-center bg-no-repeat md:px-9 md:pt-9 lg:max-h-180 lg:px-18 lg:pt-18 2xl:px-[calc(50%-43.5rem)] ${backgroundClasses[position]}`}>
      <div className="relative max-w-120">
        {/* 判断所处的页面位置，于 About 、 Blog 与 Course 页面时，为标题增设 uppercase 原子类名 */}
        <h1 className={`text-3xl font-medium lg:text-5xl ${(position === 'about' || position === 'blog' || position === 'course') ? 'uppercase' : ''}`}>{data.heading}</h1>
        <p className="mt-6">{data.description}</p>

        {/* 为博客、文章搜索与文章目录页时渲染搜索框，否则渲染链接 */}
        {position === "blog" || position === "blog-search" || position === "category"
          ? <Search globalData={globalData} />
          : <Link href={data.buttonLink} {...(data.openInNewTab && { target: '_blank' })} className="customized-link-button mt-9">
            {data.buttonText}
            <span></span>
          </Link> 
        }
      </div>
    </div>
  )
}

代码已复制！
// Import React hooks
import { useState, useEffect } from "react"

// Import Next components
import { useRouter } from "next/router"

export default function Search({ globalData }) {
  const router = useRouter()
  // 使用 React hook useState 定义搜索内容状态与内容更新函数
  const [searchContent, setSearchContent] = useState('')

  const handleFormSubmit = (e) => {
    e.preventDefault()
    const trimmedSearch = searchContent.trim()
    
    if (!trimmedSearch) {
      // 如搜索内容为空则调用清除逻辑
      handleClearSearch()
      return
    }

    // trimmedSearch 可用时跳转到搜索页面
    router.push(`/blog/search?q=${encodeURIComponent(trimmedSearch)}&page=1`)
  }

  // 封装清除逻辑，使其便于调用
  const handleClearSearch = () => {
    // 清除搜索内容
    setSearchContent('')
    // 返回博客首页
    router.push('/blog')
  }

  return (
    <form onSubmit={handleFormSubmit} className="relative inline-block mt-9">
      <span className="customized-shadow"></span>
      <span className="absolute w-[calc(100%-.25rem)] h-[calc(100%-.3125rem)] left-0.5 top-0.5 rounded-full bg-linear-to-b from-slate-300 to-slate-100"></span>
      
      {/* 搜索框，内容变更同步提交到 searchContent */}
      <input name="search" value={searchContent} onChange={(e) => setSearchContent(e.target.value)} placeholder="Search content here" className="relative h-13 min-w-72 rounded-full border-white border-2 border-b-3 pl-6 pr-17 focus:outline-slate-400" />
      
      {/* 清除按钮，当 searchContent 不为空时渲染 */}
      {searchContent && (<button type="button" onClick={handleClearSearch} className="absolute top-1/2 right-15 -translate-y-1/2 text-gray-400 hover:text-gray-600 z-10" aria-label="Clear search content">✕</button> )}

      <button type="submit" className="absolute aspect-square h-[calc(100%-.25rem)] top-0.5 right-0.5 p-3.5 rounded-full bg-radial-[at_75%_25%] from-[#bdcde1] to-[#9fb5d6] hover:from-[#a8bdd4] hover:to-[#8da8ca] transition-colors cursor-pointer" aria-label="Search">
        <span className="icon icon-form-search block brightness-500"></span>
      </button>
    </form>
  )
}

代码已复制！
// Import React hooks
import { useState, useEffect, useCallback } from 'react'
import { useRouter } from 'next/router'

// Import library
import { fetcher } from '@/lib/api'

// Import components
import CustomizedHead from '@/components/global/CustomizedHead'
import Information from '@/components/shared/Information'
import ArticleCardContainer from '@/components/shared/ArticleCardContainer'
import Link from 'next/link'

// Set-up per page variants
const pageSize = 12 // 设定分页参数为 12 ，即每页最多 12 个

export default function BlogSearch({ globalData, searchResults, searchContent, pageIndex }) {
  const router = useRouter()
  const { q: urlSearch, page: urlPage } = router.query // 设定搜索参数与路由
  const [error, setError] = useState(null) // 初始化错误内容
  const [data, setData] = useState(searchResults.data) // 将搜索结果中的数据映射到 data
  const [meta, setMeta] = useState(searchResults.meta) // 将搜索结果中的分页信息映射到 meta
  const [isLoading, setIsLoading] = useState(false) // 初始化加载状态为否
  const [searchTerm, setSearchTerm] = useState(searchContent) // 初始化搜索内容
  const [currentPage, setCurrentPage] = useState(pageIndex) // 初始化页码

  // 获取搜索结果
  const fetchSearchResults = useCallback(async (searchContent, pageIndex) => {
    // 检查是否填写了搜索内容
    if (!searchContent) return
    // 检查 pageIndex 是否为有效的正整数
    if (!Number.isInteger(pageIndex) || pageIndex < 1) {
      console.error('Invalid page index:', pageIndex)
      return
    }

    // 启用加载状态
    setIsLoading(true)
    try {
      // 获取数据
      const data = await fetcher(
        `articles?filters[title][$containsi]=${encodeURIComponent(searchContent)}&sort[0]=createdAt:desc&fields[0]=slug&fields[1]=title&populate[0]=cover&populate[1]=author&populate[2]=category&pagination[page]=${pageIndex}&pagination[pageSize]=${pageSize}`
      )
      // 加载数据
      setData(data.data)
      setMeta(data.meta)
      // 清空错误信息
      setError(null)
    } catch (error) {
      console.error('Failed to fetch search results:', error) // 控制台打印错误
      setError('Failed to load search results. Please try again.') // 提示搜索错误
      // 清空数据
      setData([])
      setMeta([])
    } finally {
      setIsLoading(false)
    }
  }, [])

  // 监听 URL 变化，重新获取数据
  useEffect(() => {
    // 如果 URL 参数不存在，不执行任何操作（使用服务端数据）
    if (!urlSearch || !urlPage) return

    const newSearchTerm = urlSearch
    const newPage = parseInt(urlPage, 10)

    // 检查是否与当前状态相同，避免重复请求
    if (newSearchTerm === searchTerm && newPage === currentPage) return

    // 验证页码有效性
    if (!Number.isInteger(newPage) || newPage < 1) {
      // 重定向到第一页
      router.replace(`/blog/search?q=${encodeURIComponent(newSearchTerm)}&page=1`)
      return
    }

    // 更新状态并获取数据
    setSearchTerm(newSearchTerm)
    setCurrentPage(newPage)
    // 将 (newSearchTerm, newPage) 作为参数传入 fetchSearchResults(searchContent, pageIndex)
    fetchSearchResults(newSearchTerm, newPage)
  }, [urlSearch, urlPage, searchTerm, currentPage, router, fetchSearchResults]) // 移除依赖以避免循环

  // 处理搜索结果信息，传入 Information 组件
  const searchInformation = (
    searchResults.error ? {
      "heading": "No articles found",
      "description": `No articles found for "${searchContent}", try other keywords`
    } : error ? {
      "heading": "Search failed",
      "description": error
    } : {
      "heading": `Search results of "${searchContent}"`,
      "description": `Found ${meta.pagination.total} articles in ${meta.pagination.pageCount} pages`
    }
  )

  // 处理分页动态路由，传入 ArticleCardContainer 组件
  const handlePageChange = (newPage) => {
    const params = new URLSearchParams()
    params.set('q', searchTerm)
    params.set('page', newPage.toString())
    router.push(`/blog/search?${params.toString()}`, undefined, { shallow: true })
  }

  // 处理搜索结果数据，传入 ArticleCardContainer 组件
  const searchData = {
    data,
    meta,
    name: isLoading ? "Searching, please wait" : "Search results",
    onPageChange: handlePageChange
  }

  // 自定义 SEO
  const searchSeo = {
    metaTitle: `Search Results of "${searchTerm}"`,
    metaDescription: `Browse ${meta.pagination.total || 'all'} articles related to "${searchTerm}". Find tutorials, guides, and insights on "${searchTerm}" and related topics.`,
    metaRobots: 'noindex, follow',
    canonicalUrl: `/blog/search?q=${encodeURIComponent(searchTerm)}&page=${currentPage}`
  }
  
  return (
    <>
      <CustomizedHead globalData={globalData} data={searchSeo}/>
      <Information globalData={globalData} data={searchInformation} position="blog-search" />
      <ArticleCardContainer globalData={globalData} data={searchData} position="blog-search" />
    </>
  )
}

export async function getServerSideProps({ query }) {
  // 初始化搜索内容与页码
  const { q: searchContent = '', page = '1' } = query
  // 解析页码
  const pageIndex = parseInt(page, 10)

  // 如果没有搜索词，重定向到博客首页
  if (!searchContent) {
    return {
      redirect: {
        destination: '/blog',
        permanent: false,
      },
    }
  }

  // 验证页码，如果无效则重定向到第一页
  if (!Number.isInteger(pageIndex) || pageIndex < 1) {
    return {
      redirect: {
        destination: `/blog/search?q=${encodeURIComponent(searchContent)}&page=1`,
        permanent: false,
      },
    }
  }

  // 获取搜索结果
  const searchResults = await fetcher(
    `articles?filters[title][$containsi]=${encodeURIComponent(searchContent)}&sort[0]=createdAt:desc&fields[0]=slug&fields[1]=title&populate[0]=cover&populate[1]=author&populate[2]=category&pagination[page]=${pageIndex}&pagination[pageSize]=${pageSize}`
  )

  return {
    props: {
      searchResults,
      searchContent,
      pageIndex
    }
  }
}

代码已复制！
// Import Next components
import Link from 'next/link'

// Import components
import ArticleCard from '@/components/shared/ArticleCard'

export default function ArticleCardContainer ({ globalData, data, position }){
  // 封装渲染逻辑
  const renderCategory = (category, categoryIndex) => {
    // 根据页面类型执行数组判断
    const articles = position === "blog" ? category.articles : category.data

    // 设定位于 Blog 与 Category 下的 tag.name 与 tag.slug，因为它们都是相同的，不需要在 Article 里头拿数据
    const tag = position !== "blog-search" ? { name: category.name, slug: category.slug } : null

    // 检测数据数组是否有长度，有的话渲染内容；如数组无长度且当前分页超出最大页码，则直接渲染错误提示
    return articles.length ? (
      <div key={categoryIndex} className="space-y-6">
        <div className="px-6 mx-6 max-lg:space-y-3 md:px-9 lg:flex lg:justify-between lg:items-center lg:px-0">
          <h3 className="text-2xl capitalize">{category.name}</h3>
          {/* 判断是否位于博客文章搜索页或文章目录页，是就显示文章基数，否则一律为 View all 链接，点击跳转至目录 */}
          {(position === "blog-search" || position === "category") ? <p>{category.meta.pagination.total} Articles</p> : <Link href={`/category/${category.slug}`}>View all &gt;&gt;</Link>}
        </div>

        <div className="max-lg:overflow-x-scroll hide-scrollbar">
          <div className={`gap-6 px-6 md:grid md:grid-cols-2 md:px-9 lg:px-0 xl:grid-cols-3 ${position === 'latest' && 'max-lg:w-240'}`}>
            {articles && articles.map((articleCard, articleCardIndex) => {
              {/* 如果在搜索页面则从数组循环中为各个文章定义 searchArticlesTag ，否则使用页面内的 Tag */}
              const searchArticlesTag = position === "blog-search" && { name: articleCard.category.name, slug: articleCard.category.slug }
              return (<ArticleCard key={articleCardIndex} globalData={globalData} data={articleCard} tag={searchArticlesTag ? searchArticlesTag : tag}/> )
            })}
          </div>
        </div>
      </div>
    ) : <p>Invalid page count, please input correct value.</p> 
  }

  // 执行渲染
  return (
    <div className="mt-30 space-y-30 lg:max-w-8xl lg:px-18 lg:mx-auto">
      {/* 判断页面位置，除了博客页面有多个 category 需要渲染，其他页面只取单条 data */}
      {position === "blog"
        ? data && data.map((category, categoryIndex) => renderCategory(category, categoryIndex))
        : renderCategory(data, 0)
      }
    </div>
  )
}

代码已复制！
// Import Next components
import Head from 'next/head'

export default function CustomizedHead({ globalData, data }) {
  const seo = {
    metaTitle: data?.metaTitle + globalData.globalAddOn || globalData.defaultSeo.metaTitle + globalData.globalAddOn,
    metaDescription: data?.metaDescription || globalData.defaultSeo.metaDescription,
    shareImage: data?.shareImage?.url || globalData.defaultSeo.shareImage.url,
    metaRobots: data?.metaRobots || null,
    canonicalUrl: data?.canonicalUrl || null
  }

  return (
    <Head>
      <title>{seo.metaTitle}</title>
      <meta name="description" content={seo.metaDescription} />
      <meta property="og:title" content={seo.metaTitle} />
      <meta property="og:description" content={seo.metaDescription} />
      <meta property="og:image" content={`${process.env.NEXT_PUBLIC_API_URL}${seo.shareImage}`} />
      {seo.metaRobots && <meta name="robots" content={seo.metaRobots} /> }
      {seo.canonicalUrl && <link rel="canonical" href={seo.canonicalUrl} /> }
    </Head>
  )
}

代码已复制！
...
  // 自定义 SEO
  const categorySeo = {
    metaTitle: `Articles of "${slug}"`,
    metaDescription: `Browse ${pagination.total || 'all'} articles in "${slug}" category. Find tutorials, guides, and insights on "${slug}" and related topics across ${pagination.pageCount} pages.`,
    metaRobots: 'index, follow',
    canonicalUrl: `/category/${slug}?page=${page}`
  }

  return (
    <>
      <CustomizedHead globalData={globalData} data={categorySeo} />
      <Information globalData={globalData} data={categoryInformation} position="category" />
      <ArticleCardContainer globalData={globalData} data={categoryData} position="category"/>
    </>
  )
...

代码已复制！
export function generatePagination(currentPage, pageCount) {
  return [
    '< Prev',
    currentPage > 3 && 1,
    currentPage > 4 && '...',
    currentPage > 2 && currentPage - 2,
    currentPage > 1 && currentPage - 1,
    currentPage,
    currentPage < pageCount && currentPage + 1,
    currentPage < pageCount - 1 && currentPage + 2,
    currentPage + 3 < pageCount && '...',
    currentPage + 2 < pageCount && pageCount,
    'Next >'
  ].filter(Boolean)
}

代码已复制！
// Import Next components
import Link from 'next/link'

// Import components
import ArticleCard from '@/components/shared/ArticleCard'

// Import utilities
import { generatePagination } from '@/utils/pagination'

export default function ArticleCardContainer ({ globalData, data, position }){
  // 封装渲染逻辑
  const renderCategory = (category, categoryIndex) => {
    // 根据页面类型执行数组判断
    const articles = position === "blog" ? category.articles : category.data

    // 设定位于 Blog 与 Category 下的 tag.name 与 tag.slug，因为它们都是相同的，不需要在 Article 里头拿数据
    const tag = position !== "blog-search" ? { name: category.name, slug: category.slug } : null

    // 添加分页功能，处理非博客页面的数据
    //// 定义当前页码与最大页码
    const currentPage = position !== "blog" && category.meta.pagination.page
    const pageCount = position !== "blog" && category.meta.pagination.pageCount
    //// 调用工具函数
    const pagination = generatePagination(currentPage, pageCount)
    //// 将 onPageChange 方法单独提取出来
    const onPageChange = position !== "blog" && category.onPageChange
    //// 定义 onClick 事件逻辑
    const handlePaginationClick = (page) => {
      if (!onPageChange) return
      
      if (typeof page === 'number') {
        onPageChange(page)
      } else if (page === '< Prev') {
        onPageChange(currentPage - 1)
      } else if (page === 'Next >') {
        onPageChange(currentPage + 1)
      }
    }

    // 检测数据数组是否有长度，有的话渲染内容；如数组无长度且当前分页超出最大页码，则直接渲染错误提示
    return articles.length ? (
      <div key={categoryIndex} className="space-y-6">
        <div className="px-6 mx-6 max-lg:space-y-3 md:px-9 lg:flex lg:justify-between lg:items-center lg:px-0">
          <h3 className="text-2xl capitalize">{category.name}</h3>
          {/* 判断是否位于博客文章搜索页或文章目录页，是就显示文章基数，否则一律为 View all 链接，点击跳转至目录 */}
          {(position === "blog-search" || position === "category") ? <p>{category.meta.pagination.total} Articles</p> : <Link href={`/category/${category.slug}`}>View all &gt;&gt;</Link>}
        </div>

        <div className="max-lg:overflow-x-scroll hide-scrollbar">
          <div className={`gap-6 px-6 md:grid md:grid-cols-2 md:px-9 lg:px-0 xl:grid-cols-3 ${position === 'latest' && 'max-lg:w-240'}`}>
            {articles && articles.map((articleCard, articleCardIndex) => {
              {/* 如果在搜索页面则从数组循环中为各个文章定义 searchArticlesTag ，否则使用页面内的 Tag */}
              const searchArticlesTag = position === "blog-search" && { name: articleCard.category.name, slug: articleCard.category.slug }
              return (<ArticleCard key={articleCardIndex} globalData={globalData} data={articleCard} tag={searchArticlesTag ? searchArticlesTag : tag}/> )
            })}
          </div>
        </div>

        {/* 为页面添加分页按钮 */}
        { position !== "blog" && 
          <div className="flex justify-center mt-12 space-x-4 overflow-x-scroll">
            {pagination && pagination.map((page, paginationIndex) => (
              <button key={paginationIndex} className={`shrink-0 min-w-9 h-12 p-2 rounded-lg not-disabled:border border-secondary transition-colors duration-300 not-disabled:cursor-pointer not-disabled:hover:bg-secondary not-disabled:hover:text-white disabled:text-secondary/67 disabled:cursor-not-allowed ${page === currentPage ? 'bg-secondary text-white' : (page === '< Prev' || page === 'Next >') ? 'max-md:hidden' : ''}`} onClick={() => handlePaginationClick(page)} disabled={page === '...' || (page === '< Prev' && currentPage === 1) || (page === 'Next >' && currentPage === pageCount)}>{page}</button>
            ))}
          </div>
        }
      </div>
    ) : (pageCount < currentPage) && <p>Invalid page count, please input correct value.</p> 
  }

  // 执行渲染
  return (
    <div className="mt-30 space-y-30 lg:max-w-8xl lg:px-18 lg:mx-auto">
      {/* 判断页面位置，除了博客页面有多个 category 需要渲染，其他页面只取单条 data */}
      {position === "blog"
        ? data && data.map((category, categoryIndex) => renderCategory(category, categoryIndex))
        : renderCategory(data, 0)
      }
    </div>
  )
}

代码已复制！
// Import React hooks
import { useRouter } from 'next/router'

// Import libraries
import { fetcher } from '@/lib/api'

// Import components
import CustomizedHead from '@/components/global/CustomizedHead'
import Information from '@/components/shared/Information'
import ArticleCardContainer from '@/components/shared/ArticleCardContainer'

// Set-up per page variants
const pageSize = 12 // 设定分页参数为 12 ，即每页最多 12 个

export default function Category ({ globalData, data, slug }){
  const router = useRouter()

  // 添加分页处理函数
  const handlePageChange = (newPage) => {
    router.push(`/category/${slug}?page=${newPage}`)
  }

  const categoryData = {
    data: data.data[0].articles,
    meta: data.meta,
    name: slug,
    slug: slug,
    onPageChange: handlePageChange
  }
  const pagination = categoryData.meta.pagination

  // 处理分类信息，传入 Information 组件
  const categoryInformation = {
    "heading": `Articles of "${slug}"`,
    "description": `Found ${pagination.total} articles in ${pagination.pageCount} pages`
  }

  return (
    <>
      <CustomizedHead globalData={globalData} data={data.data[0].seo} />
      <Information globalData={globalData} data={categoryInformation} position="category" />
      <ArticleCardContainer globalData={globalData} data={categoryData} position="category"/>
    </>
  )
}

export async function getServerSideProps({ params, query }) {
  const slug = params.slug
  const page = parseInt(query.page || '1', 10)

  // 验证页码
  if (!Number.isInteger(page) || page < 1) {
    return {
      redirect: {
        destination: `/category/${slug}?page=1`,
        permanent: false,
      },
    }
  }

  const response = await fetcher(
    `categories?filters[slug][$eq]=${slug}&populate[0]=articles&populate[1]=articles.author&populate[2]=articles.category&populate[3]=articles.cover&populate[4]=seo&pagination[page]=${page}&pagination[pageSize]=${pageSize}`
  )

  // 检查页码是否超出范围
  if (page > response.meta.pagination.pageCount) {
    return {
      redirect: {
        destination: `/category/${slug}?page=1`,
        permanent: false,
      },
    }
  }

  return {
    props: {
      data: response,
      slug
    }
  }
}

代码已复制！
...
export async function getStaticProps() {
  const response = await fetcher(`home?populate[0]=introduction&populate[1]=frameworks&populate[2]=comparisons&populate[3]=comparisonInformations.contents&populate[4]=comparisonInformations.contents.detailList&populate[5]=comparisonInformations.contents.logo&populate[6]=guideChapters&populate[7]=guideChapterContents&populate[8]=guideChapters.image&populate[9]=playground&populate[10]=playgroundContents&populate[11]=seo`)

  return {
    props: {
      data: response.data
    },
    revalidate: 3600 // 每小时重新生成一次
  }
}

代码已复制！
...
export async function getStaticProps() {
  const response = await fetcher(`course?populate[0]=banner&populate[1]=banner.image&populate[2]=courses.image&populate[3]=specializedCourses&populate[4]=specializedCoursesContents.image&populate[5]=seo`)

  return {
    props: {
      data: response.data 
    },
    revalidate: 3600 // 每小时重新生成一次
  }
}

代码已复制！
...
export async function getStaticProps() {
  const response = await fetcher(`blog?populate[0]=articlesOfTheDay.author&populate[1]=articlesOfTheDay.category&populate[2]=articlesOfTheDay.cover&populate[3]=articlesOfTheDay2.author&populate[4]=articlesOfTheDay2.category&populate[5]=articlesOfTheDay2.cover&populate[6]=banner.image&populate[7]=featuredCategories.articles.cover&populate[8]=featuredCategories.articles.author&populate[9]=seo`)
  const latestArticles = await fetcher(`articles?sort=publishedAt:desc&populate=*&pagination[limit]=3`)

  return {
    props: {
      data: response.data,
      latestArticles: latestArticles.data
    },
    revalidate: 1800 // 每 30 分钟重新生成一次
  }
}

代码已复制！
...
export async function getStaticProps() {
  const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/about?populate[0]=banner.image&populate[1]=seo`)
  const response = await res.json()

  return {
    props: {
      data: response.data 
    },
    revalidate: 86400 // 每天重新生成一次
  }
}

代码已复制！
...
export async function getStaticProps({ params }) {
  const slug = params.slug.join('/')
  const article = await fetcher(`articles?filters[slug][$eq]=${slug}&populate[0]=cover&populate[1]=author.avatar&populate[2]=category&populate[3]=content.image&populate[4]=seo`)

  return {
    props: {
      data: article.data[0]
    },
    revalidate: 1800 // 每 30 分钟重新生成一次
  }
}

代码已复制！
# 于停止 Strapi 服务后
yarn add @strapi/provider-email-nodemailer

代码已复制！
module.exports = ({ env }) => ({
  email: {
    config: {
      provider: 'nodemailer',
      providerOptions: {
        host: env('EMAIL_SMTP_HOST', 'smtp.example.com'),
        port: env('EMAIL_SMTP_PORT', 587),
        auth: {
          user: env('EMAIL_SMTP_USERNAME'),
          pass: env('EMAIL_SMTP_PASSWORD'),
        },
        // 可选配置
        secure: false, // 如果使用 465 端口，设置为 true
        // tls: {
        //   rejectUnauthorized: false // 开发环境可以设置为 false
        // }
      },
      settings: {
        defaultFrom: env('EMAIL_ADDRESS_FROM', 'noreply@example.com'),
        defaultReplyTo: env('EMAIL_ADDRESS_REPLY', 'noreply@example.com'),
      },
    },
  },
});

代码已复制！
# Email
EMAIL_SMTP_HOST=smtp.mail.com
EMAIL_SMTP_PORT=587
EMAIL_SMTP_USERNAME=your-email@mail.com
EMAIL_SMTP_PASSWORD=your-app-password
EMAIL_ADDRESS_FROM=noreply@yourdomain.com
EMAIL_ADDRESS_REPLY=support@yourdomain.com

代码已复制！
# Email

## 个人测试用 QQ 邮箱就行，下述内容以 QQ 邮箱作为参考
EMAIL_SMTP_HOST=smtp.qq.com

## SMTP 端口号一般要改成465
EMAIL_SMTP_PORT=465

## 填写你自己的邮箱地址与密钥
EMAIL_SMTP_USERNAME=[你的邮箱地址]
EMAIL_SMTP_PASSWORD=[你的 SMTP 密钥，不是你在服务商那边的登陆密码，要去 SMTP 设置里自行获取]

## 填写发送邮箱地址
### 一般格式是 noreply@你的域名.com
EMAIL_ADDRESS_FROM=[发送邮箱地址]

## 填写接收邮箱地址
### 一般格式是 support@你的域名.com
EMAIL_ADDRESS_REPLY=[接收邮箱地址]

代码已复制！
...
        port: env('EMAIL_SMTP_PORT', 465), // 修改端口号为465
        auth: {
          user: env('EMAIL_SMTP_USERNAME'),
          pass: env('EMAIL_SMTP_PASSWORD'),
        },
        // 可选配置
        secure: true, // 如果使用 465 端口，设置为 true

代码已复制！
yarn dev

代码已复制！
module.exports = {
  // 使用 afterCreate hooks ，以在创建完毕后执行
  async afterCreate(event) {
    // 将数据映射到 result 对象
    const { result } = event;
    // 在 Strapi 控制台打印：内容已创建
    console.log('Content created!')

    try{
      // 使用 Strapi Email 插件执行 services.email.send() 方法
      await strapi.plugins['email'].services.email.send({
        to: 'demo@example.com',
        from: 'demo@example.com',
        subject: 'You have one new message from rainydesign.cn',
        html: `
          <h4>User message:</h4>
          <table>
            <tbody>
              <tr>
                <td><p style="margin-right: 12px"><strong>Name:</strong><p></td>
                <td><p>${result.name}<p></td>
              </tr>
              <tr>
                <td><p style="margin-right: 12px"><strong>Email or Whatsapp:</strong><p></td>
                <td><p>${result.tel}<p></td>
              </tr>
              <tr>
                <td><p style="margin-right: 12px"><strong>Requirements:</strong><p></td>
                <td><p>${result.wechatOrQQ}<p></td>
              </tr>
              <tr>
                <td><p style="margin-right: 12px"><strong>Message:</strong><p></td>
                <td><p>${result.message}<p></td>
              </tr>
            </tbody>
          </table>
        `,
      })
      // 在 Strapi 控制台打印：邮件已发送
      console.log('E-mail sended!')
    } catch(err) {
      // 在 Strapi 控制台打印错误
      console.log(err);
    }
  }
}

代码已复制！
// Import Next.JS components
import Head from 'next/head'
import Image from 'next/image'
import Link from 'next/link'

export default function Custom404({ globalData }){
  const metaTitle = "404 - Page not found" + globalData.globalAddOn;
  
  return (
    <>
      <Head>
        <title>{metaTitle}</title>
        <meta name="description" content="Page not found" />
      </Head>

      <div className="flex flex-col justify-center items-center w-full h-[50vh] pt-32 lg:pt-48">
        <Image src="/logo/logo-128x128-with-padding.svg" width={128} height={128} alt={`Logo${globalData.globalAddOn}`} loading="eager" />
        <h1>404 - Page not found</h1>
        <Link href="/" className="px-4 py-2 mt-3 rounded-full border border-primary transition-colors duration-300 hover:bg-primary hover:text-white">Back to home</Link>
      </div>
    </>
  )
}

代码已复制！
// Import Next.JS components
import Head from 'next/head'
import Image from 'next/image'
import Link from 'next/link'

export default function Custom500({ globalData }){
  const metaTitle = "500 - Internal server error" + globalData.globalAddOn;

  return (
    <>
      <Head>
        <title>{metaTitle}</title>
        <meta name="description" content="Internal server error" />
      </Head>

      <div className="flex flex-col justify-center items-center w-full h-[50vh] pt-32 lg:pt-48">
        <Image src="/logo/logo-128x128-with-padding.svg" width={128} height={128} alt={`Logo${globalData.globalAddOn}`} loading="eager" />
        <h1>500 - Internal server error</h1>
        <Link href="/" className="px-4 py-2 mt-3 rounded-full border border-primary transition-colors duration-300 hover:bg-primary hover:text-white">Back to home</Link>
      </div>
    </>
  )
}

代码已复制！
// Import Next.JS components
import Image from 'next/image'
import Link from 'next/link'

// Import components
import CustomizedHead from '@/components/global/CustomizedHead'

function Error({ globalData, statusCode }) { // 这里拿到状态编码
  const data = {
    metaTitle: statusCode ? `${statusCode} - Server Error` : 'Client Error' + globalData.globalAddOn,
    metaDescription: statusCode ? `A ${statusCode} error occurred on server` : 'An error occurred on client'
  }

  return (
    <>
      <CustomizedHead globalData={globalData} data={data}/>

      <div className="flex flex-col justify-center items-center w-full h-[50vh] pt-32 lg:pt-48">
        <Image src="/logo/logo-128x128-with-padding.svg" width={128} height={128} alt={`Logo${globalData.globalAddOn}`} loading="eager" />
        <h1>{statusCode ? `${statusCode} - Server Error` : 'Client Error'}</h1>
        <Link href="/" className="px-4 py-2 mt-3 rounded-full border border-primary transition-colors duration-300 hover:bg-primary hover:text-white">Back to home</Link>
      </div>
    </>
  )
}

// 通过 getInitialProps 获取错误参数
Error.getInitialProps = ({ res, err }) => {
  // 定义一个 statusCode 变量并 return 出去，如果有响应对象就拿到状态编码，如无则获取错误对象的编码，两者皆无则默认为 404
  const statusCode = res ? res.statusCode : err ? err.statusCode : 404
  return { statusCode }
}

export default Error

代码已复制！
// Import libraries
import { fetcher } from "@/lib/api";

function generateSiteMap(articles, categories) {
  return `<?xml version="1.0" encoding="UTF-8"?>
    <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
      <!-- Manually add sitemaps -->
      <url>
        <loc>${process.env.NEXT_PUBLIC_SITE_URL}/</loc>
        <changefreq>daily</changefreq>
        <priority>1.0</priority>
      </url>
      <url>
        <loc>${process.env.NEXT_PUBLIC_SITE_URL}/blog</loc>
        <changefreq>daily</changefreq>
        <priority>0.8</priority>
      </url>
      <url>
        <loc>${process.env.NEXT_PUBLIC_SITE_URL}/course</loc>
        <changefreq>weekly</changefreq>
        <priority>0.7</priority>
      </url>
      <url>
        <loc>${process.env.NEXT_PUBLIC_SITE_URL}/about</loc>
        <changefreq>monthly</changefreq>
        <priority>0.6</priority>
      </url>

      <!-- Automatic generate sitemaps -->
      ${articles?.data?.map((item) => {
        return `
          <url>
            <loc>${process.env.NEXT_PUBLIC_SITE_URL}/blog/${item.slug}</loc>
            <lastmod>${item.updatedAt ? new Date(item.updatedAt).toISOString() : new Date().toISOString()}</lastmod>
            <changefreq>weekly</changefreq>
            <priority>0.7</priority>
          </url>
        `;}).join('') || ''}
      ${categories?.data?.map((item) => {
        return `
          <url>
            <loc>${process.env.NEXT_PUBLIC_SITE_URL}/category/${item.slug}</loc>
            <lastmod>${item.updatedAt ? new Date(item.updatedAt).toISOString() : new Date().toISOString()}</lastmod>
            <changefreq>weekly</changefreq>
            <priority>0.6</priority>
          </url>
        `;}).join('') || ''}
    </urlset>
 `;
}

function SiteMap() {
  // getServerSideProps will do the heavy lifting
}

export async function getServerSideProps({ res }) {
  try {
    // Get data
    const articles = await fetcher('articles');
    const categories = await fetcher('categories');

    // Generate XML sitemap with data
    const sitemap = generateSiteMap(articles, categories);

    // Added headers
    res.setHeader('Content-Type', 'text/xml');
    res.setHeader('Cache-Control', 'public, s-maxage=86400, stale-while-revalidate');

    // Write sitemap XML file
    res.write(sitemap);
    res.end();

    return {
      props: {},
    };
  } catch (error) {
    console.error('Error generating sitemap:', error);
    
    // Return basic file
    const basicSitemap = generateSiteMap({ data: [] }, { data: [] });
    res.setHeader('Content-Type', 'text/xml');
    res.write(basicSitemap);
    res.end();

    return {
      props: {},
    };
  }
}

export default SiteMap;

代码已复制！
export default function Robots() {
  // getServerSideProps will handle the response
}

export async function getServerSideProps({ res }) {
  const robotsTxt = `User-agent: *
Allow: /

Sitemap: ${process.env.NEXT_PUBLIC_SITE_URL}/sitemap.xml
`;

  res.setHeader('Content-Type', 'text/plain');
  res.setHeader('Cache-Control', 'public, s-maxage=86400, stale-while-revalidate');
  res.write(robotsTxt);
  res.end();

  return {
    props: {},
  };
}