如何使用NextJS将元数据动态插入页面中？

问题描述

我如何动态地将元数据插入页面？

我遵循了一个教程，并且能够使用'_services'目录中的文件名来获取列出我的服务名称的页面，但是这种方法只允许我插入子弹。

我想输入service_description和缩略图，但是使用{thumbnail}无效。

CODE位于/ pages目录中

    import Link from "next/link";
        import fs from "fs";
        import {getAllServiceTypes} from '../lib/services'
        import Layout from '../components/layout'
        import Container from '../components/container'

        const Services = ({ slugs }) => (

 
  <Layout>
     <Container>  
  <div>
    
    {slugs.map(slug => {
      return (
        <div key={slug}>
         
          <Link href={"/services/" + slug}>
            <a>{slug}</a>
          </Link>
      
       </div>        
      );
    })}
  </div>
</Container>
</Layout>
);

       export const getStaticProps = async () => {
       const allServiceTypes = getAllServiceTypes([
  
       
       ]);

       const files = fs.readdirsync("data/_services");
        return {
         props: {
          slugs: files.map(filename => filename.replace(".md",""))
    }
  };
};

        export default Services;

CODE位于/ lib目录

import fs from 'fs'
import { join } from 'path'
import matter from 'gray-matter'


const servicesDirectory = join(process.cwd(),'data/_services')



export function getServiceSlugs() {
  return fs.readdirsync(servicesDirectory)
}


export function getServiceBySlug(slug,fields = []) {
  const realSlug = slug.replace(/\.md$/,'')
  const fullPath = join(servicesDirectory,`${realSlug}.md`)
  const fileContents = fs.readFileSync(fullPath,'utf8')
  const { data,content } = matter(fileContents)

  const items = {}

  // Ensure only the minimal needed data is exposed
  fields.forEach((field) => {
    if (field === 'slug') {
      items[field] = realSlug
    }
    if (field === 'content') {
      items[field] = content
    }

    if (data[field]) {
      items[field] = data[field]
    }
  })

  return items
}



export function getAllServiceTypes(fields = []) {
  const slugs = getServiceSlugs()
  const posts = slugs
    .map((slug) => getServiceBySlug(slug,fields))
    // sort posts by date in descending order
    .sort((post1,post2) => (post1.date > post2.date ? '-1' : '1'))
  return posts
}

我希望从中提取属性的

降价文件。

     title: 'Corporate Identity'
    thumbnail: "/assets/blog/avx-studio-black.png"
    service_description: 'Some Text About Business Goes Here'
    design_tags:
    

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）