Share layouts in each language using Shared Layout
In the previous article, we created an English layout for the partial design. This time, we will create a common layout for each language.
Blog
You can check blog articles order by publish date.
Create a partial design in Pages - Create a footer
In the last issue, we created a header that just displays the logo in the upper left corner. This time, we will create a footer using the navigation component.
Creating a Partial design in Pages - Creating a header
As for the components, I will introduce the parts to be custom-made at a later date, but I would like to introduce them in a more page-like manner, so I would like to create a header in this case.
Implement multilingual support with the created components
The breadcrumb list component we created in the last issue, how will it behave when it is multilingual? This time, we will update the component with that part in mind.
Create a breadcrumb list component
Applying the behavior of the previous LinkList, I would like to create a breadcrumb list component this time.
Check the behavior of the LinkList component
In this article, we will check how the LinkList component, a component of Headless SXA, is defined.
Enable enhanced Pages rich text editor UI - RTE
When using the Rich Text Editor, the right-hand side of the page displays the target item, but a new mechanism in Pages makes it easier to use. In this article, we will show you how to do it.
Make ColumnSplitter components available in Tailwind CSS
In this article, we will introduce the components of the horizontal column splitter (horizontal splitting) using Flex, which is used in Tailwind.css.
Check the operation of styles available in Pages
We have been able to verify the application of style sheets by component, but there is a style mechanism available in Pages. We will check the behavior with respect to this.
Applying Tailwind CSS Styles to XM Cloud's Starter Kit
The Basic site is working with Bootstrap 5, but for the time being we will check the steps to make it work with Tailwind.css. This will allow us to verify the default behavior. This time we will apply styles.
See how the grids provided by XM Cloud work
We have previously covered a bit about how the Next.js grid used by XM Cloud works, but we have not introduced how it works. This time, I would like to address this issue.
Check XM Cloud's layout process
I would like to briefly discuss how the SDK based on Next.js provided by XM Cloud actually works. This time, we would like to take a look at the layout. This time, we will focus on the layout.