不可能在 astro 中组合静态路由和静态页面生成

Question

我正在做一个基于天文学的项目，我试着做以下事情:

1 -我创建了一个天文页面[productPage].astro

2 -在本页中我有以下代码

import data from "../data/data.json";
import { processTitle } from "../utils/stringUtils.js";
export function getStaticPaths() {
const paths = data.products.map((product) => ({
params: {
productPage: processTitle(product.title, product.id)
}
}));
return paths;
}
const { productPage } = Astro.params;

这是有效的(astro生成了几个页面，有一个很好的名字，如my-title-1,my-title-2,my-title-3,my-title-4- 2作为ID产品)，但每个页面都有相同的内容。这样做允许我更改用于路由名称的字符串(出于搜索引擎优化的目的)，而无需更改代码(因为我有其他页面需要路由名称作为链接)。

页面其余部分的代码为

<ProductPageDetail
title={data.products[0].title}
minPrice={data.products[0].minPrice}
images={data.products[0].images}
colors={data.products[0].colors}
description={data.products[0].description}
data={data.products[0].data}
type={data.products[0].types}
/>

3 -我想要的是用当前页面的产品值替换products[0](就像我上面说的，我将为每个产品值生成一个页面)。如果我必须将我的页面命名为[id].astro，那么我可以使用相同的变量来获取每个id的产品，但由于我有一个转换的页面名称，不确定如何做到这一点。

Answer 1

其实很简单，我找到了答案。我像下面这样修改了getStaticPaths

export function getStaticPaths() {
const paths = data.products.map((product) => ({
params: {
productPage: processTitle(product.title, product.id)    
},
props: {
myproduct: product
}
}));
return paths;
}

然后访问该对象

const {myproduct} = Astro.props;

表示产品值的代码

<ProductPageDetail
title="ddssds"
minPrice={myproduct.minPrice}
images={myproduct.images}
colors={myproduct.colors}
description={myproduct.description}
data={myproduct.data}
type={myproduct.types}
/>