Skip to content

i18n(ja): update tutorial/5-astro-api/3.mdx #12455

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Oct 4, 2025
Merged

i18n(ja): update tutorial/5-astro-api/3.mdx #12455

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ae6f82f
i18n(ja): replace Astro.glob with import.meta.glob in tutorial/5-astr…
tkskto Sep 27, 2025
5e8769d
Merge branch 'main' into i18n/ja/tutorial-5-astro-api-3
yanthomasdev Oct 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
107 changes: 53 additions & 54 deletions src/content/docs/ja/tutorial/5-astro-api/3.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import { Steps } from '@astrojs/starlight/components';

## `/pages/folder/index.astro`ルーティングパターンを使う

ウェブサイトにタグインデックスページを追加するには、`src/pages/tags.astro`に新しいファイルを作成すればできます。
ウェブサイトにタグインデックスページを追加するには、新しく`src/pages/tags.astro`を作成します。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍🏿


しかし、すでに`/tags/`ディレクトリがあるので、Astroの別のルーティングパターンを利用して、タグに関連するファイルをすべてまとめてみましょう。

Expand Down Expand Up @@ -91,7 +91,7 @@ import { Steps } from '@astrojs/starlight/components';
```astro title="src/pages/tags/index.astro"
---
import BaseLayout from '../../layouts/BaseLayout.astro';
const tags = ['astro', 'blogging', 'learning in public', 'successes', 'setbacks', 'community']
const tags = ['astro', 'ブログ', '公開学習', '成功', 'つまずき', 'コミュニティ']
const pageTitle = "タグインデックス";
---
<BaseLayout pageTitle={pageTitle}>
Expand All @@ -114,7 +114,7 @@ import { Steps } from '@astrojs/starlight/components';
```astro title = "src/pages/tags/index.astro" ins={3}
---
import BaseLayout from '../../layouts/BaseLayout.astro';
const allPosts = await Astro.glob('../posts/*.md');
const allPosts = Object.values(import.meta.glob('../posts/*.md', { eager: true }));
const pageTitle = "タグインデックス";
---
```
Expand All @@ -125,8 +125,8 @@ import { Steps } from '@astrojs/starlight/components';
```astro title = "src/pages/tags/index.astro" ins={4}
---
import BaseLayout from '../../layouts/BaseLayout.astro';
const allPosts = await Astro.glob('../posts/*.md');
const tags = [...new Set(allPosts.map((post) => post.frontmatter.tags).flat())];
const allPosts = Object.values(import.meta.glob('../posts/*.md', { eager: true }));
const tags = [...new Set(allPosts.map((post: any) => post.frontmatter.tags).flat())];
const pageTitle = "タグインデックス";
---

Expand All @@ -145,7 +145,7 @@ import { Steps } from '@astrojs/starlight/components';
<div>{tags.map((tag) => <p>{tag}</p>)}</div>
</BaseLayout>
```
ブラウザのプレビューで、タグがリスト表示されていることを確認します。
ブラウザのプレビューで、タグがリスト表示されていることを確認します。ブログ投稿にタグが設定されていない場合や、タグの形式が不適切な場合、TypeScriptによるエラーが表示されます。これによりコードを確認し修正できます。

2. 各タグをそれぞれのページにリンクさせるには、次の`<a>`リンクを各タグ名に追加します。

Expand Down Expand Up @@ -209,9 +209,9 @@ import { Steps } from '@astrojs/starlight/components';
```astro title="src/pages/tags/index.astro"
---
import BaseLayout from '../../layouts/BaseLayout.astro';
const allPosts = await Astro.glob('../posts/*.md');
const tags = [...new Set(allPosts.map((post) => post.frontmatter.tags).flat())];
const pageTitle = "Tag Index";
const allPosts = Object.values(import.meta.glob('../posts/*.md', { eager: true }));
const tags = [...new Set(allPosts.map((post: any) => post.frontmatter.tags).flat())];
const pageTitle = "タグインデックス";
---
<BaseLayout pageTitle={pageTitle}>
<div class="tags">
Expand Down Expand Up @@ -272,47 +272,47 @@ const pageTitle = "Tag Index";
<Steps>
1. `<div class="tags">...</div>`と`<style>...</style>`を`src/pages/tags/index.astro`からコピーして`MarkdownPostLayout.astro`内で再利用します。

```astro title="src/layouts/MarkdownPostLayout.astro" ins={13-17, 21-40}
---
import BaseLayout from './BaseLayout.astro';
const { frontmatter } = Astro.props;
---
<BaseLayout pageTitle={frontmatter.title}>
<p><em>{frontmatter.description}</em></p>
<p>{frontmatter.pubDate.toString().slice(0,10)}</p>

<p>著者: {frontmatter.author}</p>

<img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />

<div class="tags">
{tags.map((tag) => (
<p class="tag"><a href={`/tags/${tag}`}>{tag}</a></p>
))}
</div>

<slot />
</BaseLayout>
<style>
a {
color: #00539F;
}

.tags {
display: flex;
flex-wrap: wrap;
}

.tag {
margin: 0.25em;
border: dotted 1px #a1a1a1;
border-radius: .5em;
padding: .5em 1em;
font-size: 1.15em;
background-color: #F8FCFD;
}
</style>
```
```astro title="src/layouts/MarkdownPostLayout.astro" ins={13-17, 21-40}
---
import BaseLayout from './BaseLayout.astro';
const { frontmatter } = Astro.props;
---
<BaseLayout pageTitle={frontmatter.title}>
<p><em>{frontmatter.description}</em></p>
<p>{frontmatter.pubDate.toString().slice(0,10)}</p>

<p>著者: {frontmatter.author}</p>

<img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />

<div class="tags">
{tags.map((tag: string) => (
<p class="tag"><a href={`/tags/${tag}`}>{tag}</a></p>
))}
</div>

<slot />
</BaseLayout>
<style>
a {
color: #00539F;
}

.tags {
display: flex;
flex-wrap: wrap;
}

.tag {
margin: 0.25em;
border: dotted 1px #a1a1a1;
border-radius: .5em;
padding: .5em 1em;
font-size: 1.15em;
background-color: #F8FCFD;
}
</style>
```
</Steps>

このコードが機能するには、`MarkdownPostLayout.astro`に貼り付けたコードを**1箇所だけ編集**する必要があります。どこを編集すればいいかわかりますか？
Expand All @@ -333,14 +333,13 @@ const pageTitle = "Tag Index";

```astro title="src/layouts/MarkdownPostLayout.astro" "frontmatter"
<div class="tags">
{frontmatter.tags.map((tag) => (
{frontmatter.tags.map((tag: string) => (
<p class="tag"><a href={`/tags/${tag}`}>{tag}</a></p>
))}
</div>
```
</details>
</details>

</Box>

### MarkdownPostLayoutのコードの確認
Expand All @@ -361,7 +360,7 @@ const { frontmatter } = Astro.props;
<img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />

<div class="tags">
{frontmatter.tags.map((tag) => (
{frontmatter.tags.map((tag: string) => (
<p class="tag"><a href={`/tags/${tag}`}>{tag}</a></p>
))}
</div>
Expand Down Expand Up @@ -395,7 +394,7 @@ const { frontmatter } = Astro.props;

### 確認テスト

与えられたファイルパスと同じルートにページを作成する別のファイルパスを選択してください。
与えられたファイルパスと同じルーティングでページを作成する別のファイルパスを選択してください。

1. `src/pages/categories.astro`

Expand Down
Loading