#Different design/theme based on route and parameters

4 messages · Page 1 of 1 (latest)

knotty plinth
#

Hi Guys

I need some idea how to implement some logic where my goals is to have a website that will have different theme or design based on the route for example

  1. example.com/japanese will have design that resembles japanese culture
  2. example.com/chinese will have design that resembles chinese culture
  3. and so on

does anyone know how to do it?

image.png
worn sphinx
#

You can use a dynamic route to render different layouts depending on the language parameter inside the URL, something like this:

// src/pages/[lang]/somepage.astro
---
import LayoutChinese from '.../';
import LayoutJapanese from '.../';

export function getStaticPaths () {
 return [
    {params: {lang: 'chinese' }},
    {params: {lang: 'japanese' }},
  ];
}

const { lang } = Astro.params;

const Layout = {
  chinese: LayoutChinese,
  japanese: LayoutJapanese 
}[lang]
---

<Layout />

Dynamic routes: https://docs.astro.build/en/guides/routing/#dynamic-routes
Dynamic tags: https://docs.astro.build/en/basics/astro-syntax/#dynamic-tags
Layouts: https://docs.astro.build/en/basics/layouts/

knotty plinth
#

@worn sphinx sorry i might not describe it enough, but what i means is not language, but the design of the UI.

so one routes can be japanese themed, design UI
one routes can be chinese themed, design UI

worn sphinx