Comments (9)
First and foremost, you will have to parse the layout field correctly. Please take a look into the documentation on how to use the toLayouts()
method. 🙂
After parsing the layouts, we will have to parse columns, then finally call the toHtml()
method on each column's block, since you can't simply echo a $block
like in regular Kirby templates.
Best option is likely to convert the layouts into an array. Here is some untested demo code, without taking account of columns (it just parses the first one, you will have to introduce another layer):
$data = [
'content' => $page
->layout()
->toLayouts()
->map(function ($layout) {
// TODO: Handle multiple columns by returning array
$column = $layout->columns()->first();
return $column->blocks()->toHtml();
})
->values();
];
Edit: Also you can't simply print raw HTML, since it will be escaped. Use a <div v-html="item">
or similar instead.
from kirby-vue3-starterkit.
Wonderful! Thank you @johannschopplich this gives me plenty to work with :)
from kirby-vue3-starterkit.
@rjdusk Hope it works out for your project. Let me know what you came up with!
from kirby-vue3-starterkit.
Phew this is a real doozy. I've been messing around a little more and I can get all the columns and blocks in an array using this:
'columns' => $page
->layout()
->toLayouts()
->map(function ($layout) {
$columns = $layout->columns();
return $columns->toArray();
})
->values(),
which on the front-end I get
{
"columns": [
[
{
"blocks": [
{
"content": {
"level": "h1",
"text": "This is H!"
},
"id": "ff98539c-e102-4137-a3fb-2cf1cb0b40cb",
"isHidden": false,
"type": "heading"
}
],
"id": "06c5cc06-8baf-416f-ac55-a69e3f5032b8",
"width": "1/1"
}
],
[
{
"blocks": [
{
"content": {
"level": "h2",
"text": "w one half"
},
"id": "3adc44e7-64a2-4696-b24d-80eb4250c643",
"isHidden": false,
"type": "heading"
}
],
"id": "5309b4e9-f71b-481d-9640-7f36999c2e66",
"width": "1/2"
},
{
"blocks": [
{
"content": {
"text": "<p>w two hals</p>"
},
"id": "4bf8fb48-4778-43e7-bf6a-8f3aff1d44a7",
"isHidden": false,
"type": "text"
}
],
"id": "56430216-c475-45d9-a667-9f729d55fc70",
"width": "1/2"
}
],
[
{
"blocks": [
{
"content": {
"level": "h2",
"text": "col1"
},
"id": "3a3dddea-b79c-4840-9f91-6bc4796efd0a",
"isHidden": false,
"type": "heading"
}
],
"id": "9f76e34e-3cb8-4c3e-afe3-ce3b4065ee83",
"width": "1/3"
},
{
"blocks": [
{
"content": {
"level": "h2",
"text": "col2"
},
"id": "558c1a44-b90f-45c3-af55-5e777e1885d0",
"isHidden": false,
"type": "heading"
}
],
"id": "13ef3a05-4c3e-4740-a55f-63fb38b743c2",
"width": "1/3"
},
{
"blocks": [
{
"content": {
"level": "h2",
"text": "col3"
},
"id": "5abac79c-69b2-4cfb-b8b5-4ec4c51aa483",
"isHidden": false,
"type": "heading"
}
],
"id": "2c45794e-2763-4600-b416-65da37dc1a3c",
"width": "1/3"
}
]
]
}
What I'm having real trouble with is traversing this array on the front-end with Vue. Plus I can see I'll run into some roadblocks with the 'level' and 'width', maybe it's better to output to HTML? Otherwise I'll have to check which 'level' something is to assign the correct tag. Again not wanting to clog up your issues, just looking for some pointers. Thanks!
from kirby-vue3-starterkit.
May I ask what your use-case is? The layout field doesn't work well with an SPA intention. You could send the whole HTML to the frontend, but then the purpose of the Vue application is defeated. If heavy use of the layout field is important, then I'd stick to a plain Kirby setup.
from kirby-vue3-starterkit.
Yes definitely, I'm planning on rebuilding my site in Kirby and thought I'd give Vue a go while I was at it. Your starterkit has everything I was looking for - Vue, Vite, Kirby, .env, multi-language, etc. The site is currently built with Eleventy, but I need something with a very light CMS behind it.
However I'm getting the feeling that with my site, where layouts vary from page to page, for example a portfolio page layout, a Kirby plain setup would be better suited. Trying to force this in Vue would be more hassle than it's worth. If my understanding is correct?
from kirby-vue3-starterkit.
Well, that's a stunning website to look at. Fellow photography friend so to speak. 🙂 Couldn't find you on Instagram tho.
I'm flattered you want to rebuild with this starterkit. But I really don't recommend to do so if you are relying on the layouts field. As mentioned earlier, the purpose of using Vue gets defeated if HTML is transferred to the frontend on a bigger scale. I presume it would be best to stick to the default Kirby setup. That's also why I don't use the current Kirby starter kit for this Vue boilerplate – the layout field doesn't suit the single page application objective.
Maybe you can dig into Vue + Kirby for another project?
from kirby-vue3-starterkit.
Thanks, I'm flattered! I use to be on Instagram, but after many years of it, I got sick of it and deleted it (plus Facebook, etc). I do post to flickr when I have time :)
Thank you so much for your talking me through this, I'm definitely going to use this starterkit in the future, I love the ease of which I could get up and running, a great little self contained kit! Good luck and keep up the great work!
from kirby-vue3-starterkit.
Yep, I feel you. Not using Facebook as well. Instagram sort of as an portfolio and inpirational source.
My pleasure! Don't hesitate to write me via email in the future if you have any questions. Good luck to you as well and your website rewrite – complex task ahead! Hope you have fun in the process.
from kirby-vue3-starterkit.
Related Issues (20)
- Deployed vite scripts refers to localhost HOT 4
- (?) Best Practice: Using Tags for filtered Collections HOT 1
- Kirby caches path to assets? HOT 1
- router-view transition won't fade in on router.replace HOT 1
- PHP / Kirby Routing HOT 4
- Sitemap.xml HOT 1
- Build Issue: Page not found HOT 1
- Deployment: What and how? HOT 17
- Vue.js devtools HOT 2
- Replacing default image block snippet HOT 4
- Meta-tags kirby-extended HOT 1
- Storing and accessing development/production variables in env HOT 1
- Alias HOT 1
- Queries not working HOT 1
- .env files not loading HOT 6
- Draft preview not working HOT 3
- create pages from frontend HOT 1
- Outsource internal `kirby-vue-kit` into own repository HOT 1
- Custom language variables best practice HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from kirby-vue3-starterkit.