Trying to use Kirby as headless CMS: How can I change the "Open" button to point to my custom front-end?

Kirby 3 Solved ✅
1

I thought I found my answer here, so I added the following to my blueprints/pages/default.yml:

options:
  preview: "https://localhost:3000/{{ page.slug }}"

This doesn’t seem to do anything; the button still points to 0.0.0.0:8000/en.

I do have a notice on http://0.0.0.0:8000/panel/pages/home saying

This page has no blueprint yet. You can define the setup in /site/blueprints/Page.yml

but it appears regardless of whether I try to use the preview option or not.

I’m thinking maybe there is a build step I don’t know about yet?

Any ideas @ktryn ?

2

Unless it’s a copy-paste error, you seem to have an extra quotation mark at the end: }}"" should be }}"

3

Here is what I use for a multilingual website:

options:
  preview: "{{kirby.option('url_frontend')}}/{{kirby.language}}/{{page.uri}}
  • kirby.option(‘url_frontend’) to get the URL of the front-end environment which I’ve set in my config.php file based on the environment. This is necessary, so It is dynamic whether you work on localhost or have your site uploaded to a remote.
  • kirby.language the current language as my decoupled front-end also translates to myurl.tld/de and myurl.tld/en.
  • page.uri translated page ID
1 Like
4

Oops, indeed that was a copy-paste error

5

I don’t know, this doesn’t seem to be doing anything. Do you have a full example with all the code I could look at?

6

My example won’t just work unless you are in the same situation, being you use a multilingual website with the URL structure being myurl.tld/<languageCode>/<translatedSlug>.

Assuming you don’t add a frontend URL setup in your config, my example looks like you for your context:

options:
  preview: "http://localhost:3000/{{kirby.language}}/{{page.uri}}

Would it be possible for you to share what your frontend setup is? e.g. do you use a static site generator (e.g. Hugo, Eleventy) or an SPA approach (e.g. client-side React, Vue, raw JavaScript)? How do you retrieve the data from Kirby CMS, and how do you create your routing structure?

If you access a page you created, e.g. a page with the slug my-page, does the frontend show it when you directly type the URL e.g. http://localhost:3000/en/my-page?

If you can’t access the page directly, it might not really have anything to do with Kirby but you might miss the appropriate handlers in your front-end to reflect the URL structure.

Also make sure the page is “published” and not in draft mode.

7

Thanks renestalder!

In the end, there were 2 blueprints folders and that’s why nothing was working. I’m using Next.js on the front-end and for routing and data-fetching.