-
Is your feature request related to a problem? Please describe. Describe the solution you'd like Describe alternatives you've considered |
Beta Was this translation helpful? Give feedback.
Replies: 6 comments
-
A workaround i found right now is to use an empty layout and use a custom Vue Layout Component in each page as outer Component. But thats kinda ugly workaround... |
Beta Was this translation helpful? Give feedback.
-
I would think that you can use frontmatter for that: https://iles-docs.netlify.app/guide/development#pages In your layout any frontmatter can be accessed with the
If you only need the frontmatter values within your layout template, this doesn't even require you to add the script content, you can access the frontmatter with
|
Beta Was this translation helpful? Give feedback.
-
@davidlueder Thank you. Unfortunately it does not work reliable in dynamic pages for me. I generate two pages that are configured the same via the frontmatter attributes and one looks good after build and one did not apply the configuration. |
Beta Was this translation helpful? Give feedback.
-
Could you share the code with us that is responsible for the generation of those dynamic pages? Maybe something that can be solved by wrapping the variables with |
Beta Was this translation helpful? Give feedback.
-
Yes, i will provide an example as soon as I have time (for now my workaround works quite well and I need to get forward). |
Beta Was this translation helpful? Give feedback.
-
The problem with choosing a layout dynamically, is that in order to bundle the app consistently (specially CSS), it's important to resolve which page uses which layout statically at build time. Now, let's look at ways to achieve similar results. In most cases, // Example: Configure all posts to use a different layout without having to
// add `layout: 'post'` in every file.
extendFrontmatter (frontmatter, filename) {
if (filename.includes('/posts/'))
frontmatter.layout ||= 'post'
}, However, since you are referring to blog posts fetched from a CMS, you are probably using Dynamic Paths, in which case using Something that should work well for this use case, is to access the dynamic page <script setup lang="ts">
const { props } = usePage()
</script>
<template>
<Header :transparent="props.transparent"/>
<slot/>
</template> You would then provide |
Beta Was this translation helpful? Give feedback.
The problem with choosing a layout dynamically, is that in order to bundle the app consistently (specially CSS), it's important to resolve which page uses which layout statically at build time. Now, let's look at ways to achieve similar results.
In most cases,
extendFrontmatter
provides enough flexibility to setlayout
accordingly for each page:However, since you are referring to blog posts fetched from a CMS, you are probably using Dynamic Paths,…