Skip to main content

Creating Content List/Detail Pages

In this tutorial, we will explain how to display a list and detail pages for the "News" content structure in a project using Kuroco. We will introduce two frontend code options: Nuxt.js and Next.js.

info

This tutorial is written with the following versions:
Nuxt2: v2.15.8
Nuxt3: v3.8.0
Next.js: v13.4.12 (Using App Router)

info

This tutorial assumes that you have already set up a project with Kuroco and Nuxt.js.
If you have not yet set up one, please refer to the following tutorial.
Nuxt.js:Beginner's guide to Kuroco

Kuroco settings​

Creating content​

First, create the content on the Kuroco management screen. Create a "News" topic group by referring to the Creating topic group(s) page.

Please check the WYSIWYG option for the Content input method.

Image from Gyazo

tip

Note about the "News" topic, configure View/Edit restriction "No selection".
Please refer here for View/Edit restriction.

Next, create a topic from the created "News" topic group. Create it as follows.

Image from Gyazo

This completes the content creation.

Basic API setup​

Next, we will set the API, select [BackendAPI] under [API] selection from the Kuroco management screen.

fetched from Gyazo Click [Security] and select "Cookie".

fetched from Gyazo When cookie(s) are used as a token for security, if the API domain and the front end domain are different, there will be a problem with the third party cookie, and the authentication will not work in browsers such as Safari.
Since it is necessary to set the front end and API domain with different subdomains, please set the API domain in Custom domain/TLS certificate and change the API domain in Account Settings.
(Since it works normally in Chrome, we recommend that you build it in Chrome first at the development and testing stages.)

If there are no problems, click [Save].

Setting up CORS​

Click [Operation CORS].

fetched from Gyazo Click [Add Origin] in CORS_ALLOW_ORIGINS and add the following:

  • http://localhost:3000/

Click [Add Method] for CORS_ALLOW_METHODS and add the following:

  • GET
  • POST

Image (fetched from Gyazo) If there are no problems, click [Save].

Setting up the endpoints​

Next, we need endpoints to get the content "News" created earlier.
In this exercise, we will create two endpoints, "News List" and "News Details".

First, create an endpoint for the news list.
Click [Configure Endpoint].

Image (fetched from Gyazo) Enter the following:

  • Path：news
  • Category：Content
  • Model：Topics
  • Operation：list

Image from Gyazo

Also, enter the group ID of the topic group "News" in "topics_group_id" in the center of the screen.

fetched from Gyazo Reference) The group ID can be found on the topic group list screen.

fetched from Gyazo After entering all the details, click "Add" at the top or bottom of the screen.

Image (fetched from Gyazo) This completes the endpoint creation of the "News List".

Next, create an endpoint for "News Details". Similarly to "News list", click [Configure Endpoint] and set the following.

  • Path: newsdetail
  • Category: Content
  • Model: Topics
  • Operation: details
  • topics_group_id: (target group ID)

Image from Gyazo fetched from Gyazo After entering all the details, click "Add".

This completes the Kuroco settings.

Frontend Implementation​

Displaying the content created in Kuroco on the frontend.

File Creation​

Create files in the directory where you've installed the frontend framework following the structure below.
For this tutorial, we've created files so that pages can be displayed with directory names /news/ and /news/slug.

pages
 - news
   - _slug.vue
   - index.vue

Creating the List Page​

The list page is documented as follows:

/pages/news/index.vue
loading...

Note) For /rcms-api/4/news, please enter the path specified on the Kuroco management screen.

Image from Gyazo

Save the above code and access http://localhost:3000/news.
The following screen will be displayed.
Image (fetched from Gyazo)

Creating the Detail Page​

The detail page is documented as follows:

/pages/news/_slug.vue
loading...

Note) For /rcms-api/4/newsdetail, please enter the path specified on the Kuroco management screen.

Image from Gyazo

Save the above code and click the title of the news list screen to display the details screen as shown below.

Image (fetched from Gyazo)

Summary​

This concludes the explanation of implementing News list/detail pages with Kuroco.
Did it display correctly?
You can learn more from the following references:

  • Kuroco API settings
  • Viewing Kuroco content using Nuxt.js/Next.js

Please utilize these to build your own site.

Support

If you have any other questions, please contact us or check out Our Slack Community.

Contact form
Join Kuroco Slack community