Hi @tired furnace. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#change separator
dry wrenBOT
Sure, you can change the separator to '/' in the getStaticPaths() function. Here's how you can do it:
---
import { getGlobal, getLanguages } from '@lib/api.js';
import BaseLayout from '@layouts/BaseLayout.astro';
import Layouts from '@components/Layouts.astro';
const API_URL = import.meta.env.KIRBY_URL;
export async function getStaticPaths() {
const API_URL = import.meta.env.KIRBY_URL;
const pagesResponse = await fetch(API_URL + '/index.json');
const pages = await pagesResponse.json();
const languages = await getLanguages();
const allLang = languages.map((lang) => lang.code);
const paths = [];
for (const lang of allLang) {
for (const page of pages) {
paths.push({
params: {
lang: lang,
slug: page.uri.split('/'), // Change separator to '/'
},
});
}
}
return paths;
}
const { slug } = Astro.params;
const pages = await fetch(API_URL + '/' + slug.join('/') + '.json'); // Join slug with '/'
const data = await pages.json();
const global = await getGlobal();
const pageTitle = global.siteTitle + ' | ' + data.title;
---
<BaseLayout pageTitle={pageTitle} data={data} global={global}>
<Layouts layouts={data.layouts} data={data} global={global} />
</BaseLayout>
In this code, page.uri.split('/') splits the uri into an array of strings by separating the string into substrings using '/' as a separator. Then, slug.join('/') joins all elements of the slug array into a string using '/' as a separator.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
tired furnace
@dry wren can you change the separator in this example?
---
import { getGlobal, getLanguages } from '@lib/api.js';
import BaseLayout from '@layouts/BaseLayout.astro';
import Layouts from '@components/Layouts.astro';
const API_URL = import.meta.env.KIRBY_URL;
export async function getStaticPaths() {
const API_URL = import.meta.env.KIRBY_URL;
const pagesResponse = await fetch(API_URL + '/index.json');
const pages = await pagesResponse.json();
const languages = await getLanguages();
const allLang = languages.map((lang) => lang.code);
const paths = [];
for (const lang of allLang) {
for (const page of pages) {
paths.push({
params: {
slug: `${lang}-${page.uri}`, // Combine lang and slug with a dash
},
});
}
}
return paths;
}
const { slug } = Astro.params;
const [lang, pageSlug] = slug.split('-'); // Split the combined slug back into lang and slug
const pages = await fetch(`${API_URL}/${lang}/${pageSlug}.json`);
const data = await pages.json();
const global = await getGlobal();
const pageTitle = `${global.siteTitle} | ${data.title}`;
---
<BaseLayout pageTitle={pageTitle} data={data} global={global}>
<Layouts layouts={data.layouts} data={data} global={global} />
</BaseLayout>
Let me check the knowledge base for you. One moment! :books:
Sure, you can change the separator in the getStaticPaths() function and the subsequent slug split. Here's how you can do it with '/' as the separator:
---
import { getGlobal, getLanguages } from '@lib/api.js';
import BaseLayout from '@layouts/BaseLayout.astro';
import Layouts from '@components/Layouts.astro';
const API_URL = import.meta.env.KIRBY_URL;
export async function getStaticPaths() {
const API_URL = import.meta.env.KIRBY_URL;
const pagesResponse = await fetch(API_URL + '/index.json');
const pages = await pagesResponse.json();
const languages = await getLanguages();
const allLang = languages.map((lang) => lang.code);
const paths = [];
for (const lang of allLang) {
for (const page of pages) {
paths.push({
params: {
slug: `${lang}/${page.uri}`, // Combine lang and slug with a slash
},
});
}
}
return paths;
}
const { slug } = Astro.params;
const [lang, pageSlug] = slug.split('/'); // Split the combined slug back into lang and slug
const pages = await fetch(`${API_URL}/${lang}/${pageSlug}.json`);
const data = await pages.json();
const global = await getGlobal();
const pageTitle = `${global.siteTitle} | ${data.title}`;
---
<BaseLayout pageTitle={pageTitle} data={data} global={global}>
<Layouts layouts={data.layouts} data={data} global={global} />
</BaseLayout>
In this code, ${lang}/${page.uri} combines lang and uri with a slash as the separator. Then, slug.split('/') splits the combined slug back into lang and slug using '/' as the separator.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
tired furnace
@dry wren now i get the error: Expected "slug" to match "[^/#?]+?", but got "de/test"
dry wrenBOT
Let me check the knowledge base for you. One moment! :books:
The error message you're seeing is due to the way Astro handles dynamic routing. In Astro, dynamic segments in a URL pattern (like slug in your case) are expected to match any character except /, #, and ?. This is indicated by the regular expression [^\/#\?]+?.
In your case, the value of slug is de/test, which includes a / character. This is why you're seeing the error.
To resolve this issue, you could consider changing your URL structure to avoid using / within a single dynamic segment. For example, you could use a structure like /:lang/:slug instead of combining lang and slug into a single dynamic segment.
Here's how you could adjust your code:
---
import {{ getGlobal, getLanguages }} from '@lib/api.js';
import BaseLayout from '@layouts/BaseLayout.astro';
import Layouts from '@components/Layouts.astro';
const API_URL = import.meta.env.KIRBY_URL;
export async function getStaticPaths() {{
const API_URL = import.meta.env.KIRBY_URL;
const pagesResponse = await fetch(API_URL + '/index.json');
const pages = await pagesResponse.json();
const languages = await getLanguages();
const allLang = languages.map((lang) => lang.code);
const paths = [];
for (const lang of allLang) {{
for (const page of pages) {{
paths.push({{
params: {{
lang: lang,
slug: page.uri,
}},
}});
}}
}}
return paths;
}}
const {{ lang, slug }} = Astro.params; // Get lang and slug separately
const pages = await fetch(`${{API_URL}}/${{lang}}/${{slug}}.json`);
const data = await pages.json();
const global = await getGlobal();
const pageTitle = `${{global.siteTitle}} | ${{data.title}}`;
---<BaseLayout pageTitle={{pageTitle}} data={{data}} global={{global}}>
<Layouts layouts={{data.layouts}} data={{data}} global={{global}} />
</BaseLayout>
In this code, `/:lang/:slug` is used as the URL structure, and `lang` and `slug` are extracted separately from `Astro.params`.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------