Problems, need help? Have a tip or advice? Post it here.
5 posts Page 1 of 1
Hey there!

I want to make a single page with multiple sections - how can I divide them into "pages" in the admin panel?
I tried with templates, groups but nothing worked.
Hi :)

Perhaps you'll find the following post useful - viewtopic.php?f=2&t=7731

Feel free to let us know if something remains unclear.
Thanks.
Hi,

Consider looking at https://vuejs.org to handle the client side

In your template do something like this:

Code: Select all
 

<div id="app">
<ul>
  <li v-for="item in yourpages" :key="item.pagetitle">item.pagetitle</li>
</ul>

</div>


<script type="text/javascript" src="path to your/vue.js"></script> 
<script>
      // set vue data in JSON format
      new Vue({
        el: '#app',
        data: {
          yourpages: [ <cms:pages masterpage='your template.php'>{
                             "pagetitle":"<cms:addslashes><cms:show k_page_title/></cms:addslashes>"</cms:pages>} ]
        },
      });
    </script>


Please note! I'm not sure this is the way to go but, I'm using this kind of solution on the moment. Until now I'm amazed how easy it is to combine server- and client side solutions this way. Maybe some couch expert can look at this combination and point out some pros and cons.
I load frameworks and write bugs on top of them, after that I rearrange the code so that it looks like a cool product.
@Tomarnst, very interesting and valid approach. Thanks for sharing.

I see in this sample how you "cache" data in an array with vue and then use this data here and there.

Vue.js in this case comes in action after the page has been delivered to the client's browser. Vue scripted language used in HTML elements in attributes simply instructs main vue-script to clone certain elements in DOM.

Good thing, this is flexible and allows to display complex layouts where same certain editables are repeated on the page and it would be not wise to run <cms:pages > tag again and again. May be useful for very heavy templates with tons of editables, where each cms:pages call takes much time, so the less number of them the better. I think I met such kind of application only once and used <cms:capture> tag, and <cms:set > tag to cache some data for repeating it in other places.

Couch-driven approach has less impact on browser "draw" times, because all layout get generated on server-side before page gets sent to browser. I read that DOM operations, where elements may be repainted with JS, are not much welcomed by users after page gets delivered. This way I leave only whatever is required to be JS-managed, doing the core page-generation on server, which is very fast.

My opinion is very positive about your approach, it is something very interesting and inspiring. Maybe you could share more samples of vue-apps with couch? I think we'd think about it.
Hi @trendoman,

Thanks for taking the time on this. I really needed a second opinion, if this is a solution for having a server side rendered page with client side rendered features, I still can't believe how simple it gets this way. Think of it ... no SEO punishment from google, very fast search and filtering data, way less server traffic and much less and very simple coding because the ease of use from both couchcms and vue.js.

Maybe you could share more samples of vue-apps with couch?

When I'm ready with this project where I use this approach I think I have some quite good and simple examples by then, I can share them on this forum.
I load frameworks and write bugs on top of them, after that I rearrange the code so that it looks like a cool product.
5 posts Page 1 of 1