Localization: different contents for each language

[JJ]

Hiya, I need help with the issue of Multilingual Starter blog(Gatsby on localhost + DatoCMS)
I am customising this Multilingual Starter blog. I already followed this site of localization and unchecked the All locales required? option.

Would you please provide me with any tips to solve this problem as like the below picture shows?
I’d like to show only articles written in Japanese on the JA post list view page. What I really want to do is to show different contents for each language on the post list view page.
However, as you can see in the below picture, the date and minutesOfReading are still showed up. This issue happens only in other language and an english version is fine.

[m.finamor]

Hello @JJ

Did you follow the instructions on the README file of the Github for the localisation of the posts?

https://github.com/smastrom/headless-gatsby-multilang#1-languages

As you can see you’ll have to follow steps 1 to 15 on that readme file to make sure that the blog is configured with multi language support, and generates the posts accordingly.
Once you follow all the steps, you can just add posts in their respective locales through the dashboard and the blog will handle the generation of the posts accordingly based on the client selected language

Let me know if you find any problems allong the way

[JJ]

@JJ

Multilingual Starter blog

Thank you for reply.

I struggled to work on step 1.
Which file can I find this code in this repository ?

This below code is cited from the README.md (STEP1)

"allDatoCmsBlogPost": {
"edges": [
  {
    "node": {
      "slug": "introducing-jsx",
      "locale": "en"
    }
  },
  {
    "node": {
      "slug": "introduzione-a-jsx",
      "locale": "it"
    }
  },
  {
    "node": {
      "slug": "presentando-jsx",
      "locale": "es"
    }
  },

(Anyway, I am a beginner of front-end, so please allow me to ask you easy question.)

[m.finamor]

Hello @JJ

You won’t find that code in a specific file, it is just exemplifying the format of a query response now that you added more languages on the dashboard.
If you want to learn a little bit more about how queries work in depth, and how you can make one, you can check out this documentation page: Content Delivery API - Overview - DatoCMS Docs
But basically what this code snippet is saying, is that now that you’ve added those languages on your dashboard, the subsequent queries you’ll make on your code will have a response that has that format.
Does that make sense?

[JJ]

Hi, thank you for tips.

I can understand what you mentioned. I read the README again more seriously, but the steps from 1 to 15 do not seem to suggest the direct way to solve this issue. I might miss some points on the documents though. I am looking for the step or setting to avoid showing the date and minutesOfReading with post in JA which the above image is showing.

Thank you,

[m.finamor]

To change that directly, you should look into changing this component, at the end of the file you can see the date and time components: headless-gatsby-multilang/articleCard.jsx at main · smastrom/headless-gatsby-multilang · GitHub

[JJ]

Hi,
Thank you for providing me the prompt.

From your advise, I just added the “if condition” to archive.jsx of templates directory like the below code.

I thought that this code seemed to be logically correct to show different contents for each language but every contents in both language did not show up at all like the screenshot I attached with chat.
Is there any notice you think ?

After adding if condition

      <SectionWrapper isBlog>
        <SectionContainerGridThreeCols>
          {blogPostNodes.map(
            ({
              id,
              meta: { firstPublishedAt },
              minutesOfReading,
              cardImage,
              title,
              subtitle,
              author,
              slug,
            }) => {
              if (title)
              return
              (
              <ArticleCard>
                key={id}
                date={firstPublishedAt}
                time={`${minutesOfReading} ${minsReadSuffix}`}
                cardImg={
                  cardImage &&
                  CardImgArtDir(
                    cardImage.gatsbyImageData,
                    cardImage.squaredImage,
                    cardImage.alt
                  )
                }
                title={title}
                excerpt={subtitle}
                authorImg={author?.picture.gatsbyImageData}
                authorAltImg={author?.picture.alt}
                authorName={author?.name}
                slug={slug}
              </ArticleCard>
            )
          }
          )}
        </SectionContainerGridThreeCols>

Before adding if condition which is original code of repository.

      <SectionWrapper isBlog>
        <SectionContainerGridThreeCols>
          {blogPostNodes.map(
            ({
              id,
              meta: { firstPublishedAt },
              minutesOfReading,
              cardImage,
              title,
              subtitle,
              author,
              slug,
            }) => (
              <ArticleCard
                key={id}
                date={firstPublishedAt}
                time={`${minutesOfReading} ${minsReadSuffix}`}
                cardImg={
                  cardImage &&
                  CardImgArtDir(
                    cardImage.gatsbyImageData,
                    cardImage.squaredImage,
                    cardImage.alt
                  )
                }
                title={title}
                excerpt={subtitle}
                authorImg={author?.picture.gatsbyImageData}
                authorAltImg={author?.picture.alt}
                authorName={author?.name}
                slug={slug}
              />
            )
          )}
        </SectionContainerGridThreeCols>

[JJ]

I could solve this issue by fixing the code like the below.

      <SectionWrapper isBlog>
        <SectionContainerGridThreeCols>
          {blogPostNodes.map(
            ({
              id,
              meta: { firstPublishedAt },
              minutesOfReading,
              cardImage,
              title,
              subtitle,
              author,
              slug,
            }) => {
              if (title){
              return(
              <ArticleCard
                key={id}
                date={firstPublishedAt}
                time={`${minutesOfReading} ${minsReadSuffix}`}
                cardImg={
                  cardImage &&
                  CardImgArtDir(
                    cardImage.gatsbyImageData,
                    cardImage.squaredImage,
                    cardImage.alt
                  )
                }
                title={title}
                excerpt={subtitle}
                authorImg={author?.picture.gatsbyImageData}
                authorAltImg={author?.picture.alt}
                authorName={author?.name}
                slug={slug}
              />
              )
             }
          }
        )
      }

[m.finamor]

Hello @JJ

I replied to you on the new thread, but i’ll also put it here for future reference:

You can remove (or add) certain locales from a record by following the following video: Screen Recording 2022-01-24 at 10.52.47

When it comes to the project, i’m trying to install it to help you debug it, but i’m encountering some problems with it.
It isn’t a project directly maintained by Dato (you can see demo projects directly maintained by Dato here: Project starters - Free demo projects - Marketplace

So i can’t guarantee support for it, but i’ll try getting in contact with the project creator to see if we can find a solution.

[JJ]

Thank you for your corporation.

I already have removed certain locals in the same way as you did on the recording, then I posted this question. I did not notice that this repo is not officially supported by dato.

I found the multi lang version’s demo project with next.js in the free demo project list you provided.
Do you think that this demo project, “Next.js i18n blog” can meet what I want to do ? I will also try to debug this repo though.

[m.finamor]

@JJ

Sure! That Next.js demo provides a way to display a blog with several posts, allowing you to select the language of the entire site (including the posts) based on the option the user selected,. I think it is a good option for your use case.

[JJ]

I did the same thing for the “Next.js i18n blog” repository.

The blog still shows the image, auther, and date in english version. I unchecked “All locales required?”, I just removed an english content on the dato cms, and run it on local. I do not touch application code at all.

Would you please suggest next step if you have some notice ?

[m.finamor]

@JJ

Just so i’m certain of what you are trying to do, you are trying to remove a post in just one language? (that is, make the post show up only in italian, but not in english)
Or are you trying to remove the language option completely?

[JJ]

you are trying to remove a post in just one language? (that is, make the post show up only in italian, but not in english)

Yes, this is what I want to do.

[m.finamor]

@JJ

In that case, let’s say that you expect all posts to have a non-empty title.
So we will only render only the previews for posts that have a populated title.
We can modify our pages/index.js query to add a filter for non empty titles:

This will make sure that if the post has a blank title, its preview card won’t be rendered.

Now, if we want the post page itself also not to be rendered if the post doesn’t have a title (lets say, if someone inputs the post URL directly into the browser) we can add a similar check into the [slug].js file inside the “posts” folder.

Let me know if that was what you were looking for!

[JJ]

This is what I was looking for. I appreciated it.

I wonder if I can remove the post written only in Italy on the console[1].

[1]

[m.finamor]

Hello @JJ

Glad to know it was what you were looking for!

As for the Italian post showing up “On the english list”
That selection is only to select a title language, if that language is available, it is not an actual filter
There is a thread on the forum explaining this behaviour, here: Locale filter doesn't work

[JJ]

Ok, I understand that dato console does not support these kind of filtering function.
Anyway, I could solve what I was struggled with. Thank you.