Astro.js：为每个文件夹创建导航结构

问题描述 投票：0回答：1

我有一个 Astro 网站，如下所示：

  1. 不同的部门文件夹
    foo
    、
    bar
    等
  2. 对于每个文件夹，都有一个不同的导航菜单，供内部页面使用。
  3. 父文件夹中有一些常见的共享MDX页面，例如
    about.mdx
    。

我的问题是：

foo/about.astro
链接到共享的 
../about.mdx
。后者由一些 
~/layouts/MDXPageLayout.astro
组件渲染。 该组件需要知道页面是来自 
foo/about.astro
还是其他地方，才能知道要显示什么菜单。

这是一个最小的工作示例：

foo/about.astro
页面：

---
import  MDXPage  from '../about.mdx';
---
<MDXPage folder="foo" />

常用

../about.mdx
页面：

---
title: About page
layout: ~/layouts/MDXPageLayout.astro
---

We are ACME Industries.

布局页面

~/layouts/MDXPageLayout.astro
:

---
---
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
    <header>
      <p>I was called from folder: ... </p>
    </header>
    <main>
      <slot />
    </main>
  </body>
</html>

在我写

<p>I was called from folder: ... </p>
的地方，我应该能够检测到
folder="foo"
中的参数
about.astro
。 然后，我就可以构建一个基于临时文件夹的菜单。

routes navigation jsx astrojs mdxjs
1个回答
0
投票

您可以在任何包含当前请求 URL 的 Astro 组件中使用 

Astro.url
。

.pathname
将返回当前页面的路径，正如您已经计算出来的，将其拆分为 
/
并提取索引 1 处的元素将给出路径第一段的名称：

console.log(Astro.url.pathname.split('/'))
console.log(Astro.url.pathname.split('/')[1])

在 

/foo/about
中将打印：

[ '', 'foo', 'about' ]
foo
最新问题
© www.soinside.com 2019 - 2025. All rights reserved.