studio-variable/designtopack
3
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

document new route

Browse source
This commit is contained in:
isUnknown 2024-09-17 18:11:42 +02:00
parent 36146497ec
commit 463428f14c
4 changed files with 65 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

45
README.md
View file

@ -42,11 +42,12 @@ VITE_PASSWORD=your-private-password
### Creating a page
Templates are managed through Vue (`/src/views`). Thus, the process for creating new pages differs from the Kirby usual one. In addition to the **blueprint** (`/public/site/blueprints/pages/example.yml`) and **template** (`/public/site/templates/example.php`) files, it needs at least a **content representation** (`/public/site/templates/example.json.php`) and a **view component** (`/src/views/Example.vue`) ones.
Templates are managed through Vue (`/src/views`). Thus, the process for creating new pages differs from the Kirby usual one. In addition to the **blueprint** (`/public/site/blueprints/pages/example.yml`) and **template** (`/public/site/templates/example.php`) files and the corresponding content directory (`/public/content/<page-uri>/<template>.txt`), it needs at least a **content representation** (`/public/site/templates/example.json.php`) and a **view component** (`/src/views/Example.vue`) ones.
1. **Create the blueprint** as usual.
2. **Create the corresponding template**. Distincts templates are needed, but all of them should contain this same single line of code (that you can also find in `/public/site/templates/example.php`) : `<?php snippet('generic-template') ?>`.
3. **Create the corresponding [content representation](https://getkirby.com/docs/guide/templates/content-representations)** following this code (also in `/public/site/templates/example.json.php`) :
3. **Create the corresponding content directory**. Put the `<template-name>.txt` within.
4. **Create the corresponding [content representation](https://getkirby.com/docs/guide/templates/content-representations)** following this code (also in `/public/site/templates/example.json.php`) :
```php
<?php
@ -63,34 +64,44 @@ echo json_encode($data);
`$genericData` are defined in the `/public/site/controllers/site.php` controllers. By default, it contains a simple representation of the page object.
4. **Create the corresponding views** in `/src/views/`. It's just a simple vue component that heritates data through the props (also in `/src/views/Example.vue`) :
4. **Create the corresponding views** in `/src/views/`. It's just a simple vue component that heritates the page data through the page object (also in `/src/views/Example.vue`) :
```vue
<template>
<h1>{{ data.content.title }}</h1>
<!-- ... -->
<h1>{{ page.content.title }}</h1>
</template>
<script setup>
const { data } = defineProps({
data: Object,
});
// ....
<script setup>
import { usePageStore } from "../stores/page";
import { storeToRefs } from "pinia";
const { page } = storeToRefs(usePageStore());
</script>
```
5. **Import the view** in the `/src/App.vue` root component :
5. **Create the route** in the `/src/router/routes.js`. A route is a combination of a path and a corresponding component. The path can include variable parameters, which can be captured and passed to the component. To create a route, you need to import the component and add an object to the routes array. See the [Vue Router documentation](https://router.vuejs.org/guide/) for more information.
```vue
<script setup>
...
import example from "./views/Example.vue";
import ExampleView from "../views/ExampleView.vue";
const components = {
example
};
const routes = [
// Existing routes go here...
{
// This is a static route without any variable parameters
path: "/page-uri",
component: ExampleView,
},
{
// This is a dynamic route with a variable parameter :title
path: "/page-uri/:title",
component: ExampleView,
// OPTIONAL. The props: true option allows the route parameters to be passed as props to the component.
props: true,
},
];
...
export default routes;
</script>
```