无法在AstroJS中显示获取的帖子

Question

我试图在AstroJS中构建我的网站，我无法显示我在“砖石”组件中获取的内容，该组件在我的浏览器中被呈现为一个空的"div“。

​

---
import BaseLayout from "../layouts/BaseLayout.astro";
import Masonry from "../components/Masonry.astro";
import ProjectThumbnail from "../components/ProjectThumbnail.astro";
const projects = await Astro.glob('./projects/*.md');
---
{console.log(projects.length)}
<BaseLayout title="overview">
    <Masonry title="grid">
        {projects.map(
            (project)=>{
                console.log(project);
                <ProjectThumbnail title={project.frontmatter.title} w_cols={project.frontmatter.width_cols} h_cols={project.frontmatter.height_cols} />
            }
        )}
    </Masonry>
</BaseLayout>

​

正如您所看到的，有两个控制台日志：

• 第一个输出"2“，因为./projects目录中有两个.md文件
• 第二个方案是：

​

{
  frontmatter: [Getter],
  file: [Getter],
  url: [Getter],
  rawContent: [Getter],
  compiledContent: [Getter],
  getHeadings: [Getter],
  getHeaders: [Getter],
  Content: [Getter],
  default: [AsyncFunction: Content] { [Symbol(astro.needsHeadRendering)]: false },
  [Symbol(Symbol.toStringTag)]: 'Module'
}
{
  frontmatter: [Getter],
  file: [Getter],
  url: [Getter],
  rawContent: [Getter],
  compiledContent: [Getter],
  getHeadings: [Getter],
  getHeaders: [Getter],
  Content: [Getter],
  default: [AsyncFunction: Content] { [Symbol(astro.needsHeadRendering)]: false },
  [Symbol(Symbol.toStringTag)]: 'Module'
}

​

我的.md文件名为project-sample.md和project-sam-two.md，它们的内容如下(根据文件更改标题)：

​

---
title: 'Project sample'
layout: '../../layouts/Project.astro'
thumbnail: '/project-sample-img.jpg'
excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
height_cols: '1'
width_cols: '2'
---

Dolor sit amet Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

​

当我以个人身份打开帖子时，我会访问localhost:3001/projects/projects，它们都会显示它们的内容。

我希望你能帮助我，告诉我我在这里缺少的是什么。诚挚的问候!

ps:我正在遵循阿童木博士的这个参考

Answer 1

改变这个问题是为了解决这个问题：

​

            (project)=>{
                console.log(project);
                <ProjectThumbnail title={project.frontmatter.title} w_cols={project.frontmatter.width_cols} h_cols={project.frontmatter.height_cols} />
            }

​

对此：

            (project)=>(
            <ProjectThumbnail title={project.frontmatter.title} w_cols={project.frontmatter.width_cols} h_cols={project.frontmatter.height_cols} />
        )