Multilingual website: translating the blog items such as "Read more", "next", "previous", and month dates

Naomi-lifelab · February 17, 2022

Hello everyone,

I need some help on the blog page as there are some words that are not translated. I am on a SS 7.0 business plan. I used bradgood tutorial in creating a multilingual site.

I have been trying to follow other threads and solutions here on SS forum, but none seem to work on my end:

I tried using this script for the blog dates but it does not change. I changed the "New Date" for the German translation.

This code is from tuanphan from forum thread:

Try adding to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  const translate = {
    Jan: "New Jan",
    	Feb: "New Feb",
    	Mar: "New Mar",
    	Apr: "New Apr",
    	May: "New May",
    	Jun: "New Jun",
    	Jul: "New Jul",
    	Aug: "New Aug",
    	Sep: "New Sep",
    	Oct: "New Oct",
    	Nov: "New Nov",
    	Dec: "New Dec"
}
const translate1 = {
    	January: "New Januanry",
    	February: "New February",
    	March: "New March",
    	April: "New April",
    	May: "New May",
    	June: "New June",
    	July: "New July",
    	August: "New August",
    	September: "New September",
    	October: "New October",
    	November: "New November",
    	December: "New December"
}
const day = {
    
    Monday: "New Monday",
    Tuesday: "New Tuesday",
    Wednesday: "New Wednesday",
    Thursday: "New Thursday",
    Friday: "New Friday",
    Saturday: "New Saturday",
    Sunday: "New Sunday"
}
$(document).ready(function() {
 $('time.blog-meta-item--date span').each(function(i, e) {
     const text = $(e).html()
     $(e).html(translate[text])
 })
 
})
S.fn.init [document]
const translate = {
    Jan: "New Jan",
    	Feb: "New Feb",
    	Mar: "New Mar",
    	Apr: "New Apr",
    	May: "New May",
    	Jun: "New Jun",
    	Jul: "New Jul",
    	Aug: "New Aug",
    	Sep: "New Sep",
    	Oct: "New Oct",
    	Nov: "New Nov",
    	Dec: "New Dec"
}
const translate1 = {
    	January: "New Januanry",
    	February: "New February",
    	March: "New March",
    	April: "New April",
    	May: "New May",
    	June: "New June",
    	July: "New July",
    	August: "New August",
    	September: "New September",
    	October: "New October",
    	November: "New November",
    	December: "New December"
}
const day = {
    
    Monday: "New Monday",
    Tuesday: "New Tuesday",
    Wednesday: "New Wednesday",
    Thursday: "New Thursday",
    Friday: "New Friday",
    Saturday: "New Saturday",
    Sunday: "New Sunday"
}
$(document).ready(function() {
 $('time.blog-meta-item--date span').each(function(i, e) {
     const text = $(e).html()
     $(e).html(translate[text])
 })
 $('time.blog-meta-item--date span').each(function(i, e) {
     let text = $(e).html()
     for(let key in translate) {
         text = text.replace(key, translate[key])
     }
     for(let key in day) {
         text = text.replace(key, day[key])
     }
     console.log(text)
     $(e).html(text)
 })
})
</script>

I also used this script to translate the "read more" but it did not work. This is from tuanphan as well. From this forum thread:

<script>
$('body.body-et .blog-more-link:contains("Read More")').text('Mehr lesen'); 
</script>

Am I doing anything wrong? I tried my best to do further research, but I failed. I am seeking for your kind assistance.

Thank you in advance!

tuanphan · February 21, 2022

Can you share link to some pages where we can see these text?

Naomi-lifelab · February 22, 2022

Hi @tuanphan,

My apologies for not providing more details. 😞

Here is the link for the main blog section:
https://lifelab.world/de/blog

Here is an example of one blog page indicating dates below the title and the "previous" and "next" on the bottom part of the blog:

https://lifelab.world/de/blog/was-eine-geschftspartnerschaft-ausmacht-ein-interview-mit-unseren-mitbegrndern

I have attached the screenshots of these as well. I hope it does not get translated in the English version.

Thank you again. 😊

Edited February 24, 2022 by Naomi-lifelab
tagged squarespace expert's name

tuanphan · February 27, 2022

On 2/22/2022 at 4:26 PM, Naomi-lifelab said:

Hi @tuanphan,

My apologies for not providing more details. 😞

Here is the link for the main blog section:
https://lifelab.world/de/blog

Here is an example of one blog page indicating dates below the title and the "previous" and "next" on the bottom part of the blog:

https://lifelab.world/de/blog/was-eine-geschftspartnerschaft-ausmacht-ein-interview-mit-unseren-mitbegrndern

I have attached the screenshots of these as well. I hope it does not get translated in the English version.

Thank you again. 😊

With previous/next, add this to Design > Custom CSS

a.lang-de.BlogItem-pagination-link--prev .BlogItem-pagination-link-label {
    visibility: hidden;
}

a.lang-de.BlogItem-pagination-link--next .BlogItem-pagination-link-label {
    visibility: hidden;
}

a.lang-de.BlogItem-pagination-link--prev .BlogItem-pagination-link-label:before {
    content: "new previous";
    visibility: visible;
}

a.lang-de.BlogItem-pagination-link--next .BlogItem-pagination-link-label:after {
    content: "new next";
    visibility: visible;
}

with blog date, edit above code, I mean this code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  const translate = {
    Jan: "New Jan",
    	Feb: "New Feb",
    	Mar: "New Mar",
    	Apr: "New Apr",
    	May: "New May",
    	Jun: "New Jun",
    	Jul: "New Jul",
    	Aug: "New Aug",
    	Sep: "New Sep",
    	Oct: "New Oct",
    	Nov: "New Nov",
    	Dec: "New Dec"
}
const translate1 = {
    	January: "New Januanry",
    	February: "New February",
    	March: "New March",
    	April: "New April",
    	May: "New May",
    	June: "New June",
    	July: "New July",
    	August: "New August",
    	September: "New September",
    	October: "New October",
    	November: "New November",
    	December: "New December"
}
const day = {
    
    Monday: "New Monday",
    Tuesday: "New Tuesday",
    Wednesday: "New Wednesday",
    Thursday: "New Thursday",
    Friday: "New Friday",
    Saturday: "New Saturday",
    Sunday: "New Sunday"
}
$(document).ready(function() {
 $('time.blog-meta-item--date span').each(function(i, e) {
     const text = $(e).html()
     $(e).html(translate[text])
 })
 
})
S.fn.init [document]
const translate = {
    Jan: "New Jan",
    	Feb: "New Feb",
    	Mar: "New Mar",
    	Apr: "New Apr",
    	May: "New May",
    	Jun: "New Jun",
    	Jul: "New Jul",
    	Aug: "New Aug",
    	Sep: "New Sep",
    	Oct: "New Oct",
    	Nov: "New Nov",
    	Dec: "New Dec"
}
const translate1 = {
    	January: "New Januanry",
    	February: "New February",
    	March: "New March",
    	April: "New April",
    	May: "New May",
    	June: "New June",
    	July: "New July",
    	August: "New August",
    	September: "New September",
    	October: "New October",
    	November: "New November",
    	December: "New December"
}
const day = {
    
    Monday: "New Monday",
    Tuesday: "New Tuesday",
    Wednesday: "New Wednesday",
    Thursday: "New Thursday",
    Friday: "New Friday",
    Saturday: "New Saturday",
    Sunday: "New Sunday"
}
$(document).ready(function() {
 $('time.blog-meta-item--date span').each(function(i, e) {
     const text = $(e).html()
     $(e).html(translate[text])
 })
 $('time.blog-meta-item--date span').each(function(i, e) {
     let text = $(e).html()
     for(let key in translate) {
         text = text.replace(key, translate[key])
     }
     for(let key in day) {
         text = text.replace(key, day[key])
     }
     console.log(text)
     $(e).html(text)
 })
})
</script>

to this code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  const translate = {
    Jan: "New Jan",
    	Feb: "New Feb",
    	Mar: "New Mar",
    	Apr: "New Apr",
    	May: "New May",
    	Jun: "New Jun",
    	Jul: "New Jul",
    	Aug: "New Aug",
    	Sep: "New Sep",
    	Oct: "New Oct",
    	Nov: "New Nov",
    	Dec: "New Dec"
}
const translate1 = {
    	January: "New Januanry",
    	February: "New February",
    	March: "New March",
    	April: "New April",
    	May: "New May",
    	June: "New June",
    	July: "New July",
    	August: "New August",
    	September: "New September",
    	October: "New October",
    	November: "New November",
    	December: "New December"
}
const day = {
    
    Monday: "New Monday",
    Tuesday: "New Tuesday",
    Wednesday: "New Wednesday",
    Thursday: "New Thursday",
    Friday: "New Friday",
    Saturday: "New Saturday",
    Sunday: "New Sunday"
}
$(document).ready(function() {
 $('time.blog-meta-item--date span').each(function(i, e) {
     const text = $(e).html()
     $(e).html(translate[text])
 })
 
})
S.fn.init [document]
const translate = {
    Jan: "New Jan",
    	Feb: "New Feb",
    	Mar: "New Mar",
    	Apr: "New Apr",
    	May: "New May",
    	Jun: "New Jun",
    	Jul: "New Jul",
    	Aug: "New Aug",
    	Sep: "New Sep",
    	Oct: "New Oct",
    	Nov: "New Nov",
    	Dec: "New Dec"
}
const translate1 = {
    	January: "New Januanry",
    	February: "New February",
    	March: "New March",
    	April: "New April",
    	May: "New May",
    	June: "New June",
    	July: "New July",
    	August: "New August",
    	September: "New September",
    	October: "New October",
    	November: "New November",
    	December: "New December"
}
const day = {
    
    Monday: "New Monday",
    Tuesday: "New Tuesday",
    Wednesday: "New Wednesday",
    Thursday: "New Thursday",
    Friday: "New Friday",
    Saturday: "New Saturday",
    Sunday: "New Sunday"
}
$(document).ready(function() {
 $('.body-de time.Blog-meta-item--date').each(function(i, e) {
     const text = $(e).html()
     $(e).html(translate[text])
 })
 $('.body-de time.Blog-meta-item--date').each(function(i, e) {
     let text = $(e).html()
     for(let key in translate) {
         text = text.replace(key, translate[key])
     }
     for(let key in day) {
         text = text.replace(key, day[key])
     }
     console.log(text)
     $(e).html(text)
 })
})
</script>

Naomi-lifelab · March 1, 2022

On 2/27/2022 at 10:52 AM, tuanphan said:

With previous/next, add this to Design > Custom CSS

a.lang-de.BlogItem-pagination-link--prev .BlogItem-pagination-link-label {
    visibility: hidden;
}

a.lang-de.BlogItem-pagination-link--next .BlogItem-pagination-link-label {
    visibility: hidden;
}

a.lang-de.BlogItem-pagination-link--prev .BlogItem-pagination-link-label:before {
    content: "new previous";
    visibility: visible;
}

a.lang-de.BlogItem-pagination-link--next .BlogItem-pagination-link-label:after {
    content: "new next";
    visibility: visible;
}

with blog date, edit above code, I mean this code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  const translate = {
    Jan: "New Jan",
    	Feb: "New Feb",
    	Mar: "New Mar",
    	Apr: "New Apr",
    	May: "New May",
    	Jun: "New Jun",
    	Jul: "New Jul",
    	Aug: "New Aug",
    	Sep: "New Sep",
    	Oct: "New Oct",
    	Nov: "New Nov",
    	Dec: "New Dec"
}
const translate1 = {
    	January: "New Januanry",
    	February: "New February",
    	March: "New March",
    	April: "New April",
    	May: "New May",
    	June: "New June",
    	July: "New July",
    	August: "New August",
    	September: "New September",
    	October: "New October",
    	November: "New November",
    	December: "New December"
}
const day = {
    
    Monday: "New Monday",
    Tuesday: "New Tuesday",
    Wednesday: "New Wednesday",
    Thursday: "New Thursday",
    Friday: "New Friday",
    Saturday: "New Saturday",
    Sunday: "New Sunday"
}
$(document).ready(function() {
 $('time.blog-meta-item--date span').each(function(i, e) {
     const text = $(e).html()
     $(e).html(translate[text])
 })
 
})
S.fn.init [document]
const translate = {
    Jan: "New Jan",
    	Feb: "New Feb",
    	Mar: "New Mar",
    	Apr: "New Apr",
    	May: "New May",
    	Jun: "New Jun",
    	Jul: "New Jul",
    	Aug: "New Aug",
    	Sep: "New Sep",
    	Oct: "New Oct",
    	Nov: "New Nov",
    	Dec: "New Dec"
}
const translate1 = {
    	January: "New Januanry",
    	February: "New February",
    	March: "New March",
    	April: "New April",
    	May: "New May",
    	June: "New June",
    	July: "New July",
    	August: "New August",
    	September: "New September",
    	October: "New October",
    	November: "New November",
    	December: "New December"
}
const day = {
    
    Monday: "New Monday",
    Tuesday: "New Tuesday",
    Wednesday: "New Wednesday",
    Thursday: "New Thursday",
    Friday: "New Friday",
    Saturday: "New Saturday",
    Sunday: "New Sunday"
}
$(document).ready(function() {
 $('time.blog-meta-item--date span').each(function(i, e) {
     const text = $(e).html()
     $(e).html(translate[text])
 })
 $('time.blog-meta-item--date span').each(function(i, e) {
     let text = $(e).html()
     for(let key in translate) {
         text = text.replace(key, translate[key])
     }
     for(let key in day) {
         text = text.replace(key, day[key])
     }
     console.log(text)
     $(e).html(text)
 })
})
</script>

to this code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  const translate = {
    Jan: "New Jan",
    	Feb: "New Feb",
    	Mar: "New Mar",
    	Apr: "New Apr",
    	May: "New May",
    	Jun: "New Jun",
    	Jul: "New Jul",
    	Aug: "New Aug",
    	Sep: "New Sep",
    	Oct: "New Oct",
    	Nov: "New Nov",
    	Dec: "New Dec"
}
const translate1 = {
    	January: "New Januanry",
    	February: "New February",
    	March: "New March",
    	April: "New April",
    	May: "New May",
    	June: "New June",
    	July: "New July",
    	August: "New August",
    	September: "New September",
    	October: "New October",
    	November: "New November",
    	December: "New December"
}
const day = {
    
    Monday: "New Monday",
    Tuesday: "New Tuesday",
    Wednesday: "New Wednesday",
    Thursday: "New Thursday",
    Friday: "New Friday",
    Saturday: "New Saturday",
    Sunday: "New Sunday"
}
$(document).ready(function() {
 $('time.blog-meta-item--date span').each(function(i, e) {
     const text = $(e).html()
     $(e).html(translate[text])
 })
 
})
S.fn.init [document]
const translate = {
    Jan: "New Jan",
    	Feb: "New Feb",
    	Mar: "New Mar",
    	Apr: "New Apr",
    	May: "New May",
    	Jun: "New Jun",
    	Jul: "New Jul",
    	Aug: "New Aug",
    	Sep: "New Sep",
    	Oct: "New Oct",
    	Nov: "New Nov",
    	Dec: "New Dec"
}
const translate1 = {
    	January: "New Januanry",
    	February: "New February",
    	March: "New March",
    	April: "New April",
    	May: "New May",
    	June: "New June",
    	July: "New July",
    	August: "New August",
    	September: "New September",
    	October: "New October",
    	November: "New November",
    	December: "New December"
}
const day = {
    
    Monday: "New Monday",
    Tuesday: "New Tuesday",
    Wednesday: "New Wednesday",
    Thursday: "New Thursday",
    Friday: "New Friday",
    Saturday: "New Saturday",
    Sunday: "New Sunday"
}
$(document).ready(function() {
 $('.body-de time.Blog-meta-item--date').each(function(i, e) {
     const text = $(e).html()
     $(e).html(translate[text])
 })
 $('.body-de time.Blog-meta-item--date').each(function(i, e) {
     let text = $(e).html()
     for(let key in translate) {
         text = text.replace(key, translate[key])
     }
     for(let key in day) {
         text = text.replace(key, day[key])
     }
     console.log(text)
     $(e).html(text)
 })
})
</script>

Hello @tuanphan

Thank you for looking into this!

The pagination translation code has worked. I really appreciate your help on this.

But for the date translation, it doesn't seem to work on my end:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  const translate = {
    Jan: "Jän",
    	Feb: "Feb",
    	Mar: "März",
    	Apr: "Apr",
    	May: "Mai",
    	Jun: "Juni",
    	Jul: "Juli",
    	Aug: "Aug",
    	Sep: "Sept",
    	Oct: "Okt",
    	Nov: "Nov",
    	Dec: "Dek"
}
const translate1 = {
    	January: "Januar",
    	February: "Februar",
    	March: "März",
    	April: "April",
    	May: "Mai",
    	June: "Juni",
    	July: "Juli",
    	August: "August",
    	September: "September",
    	October: "Oktober",
    	November: "November",
    	December: "Dezember"
}
const day = {
    
    Monday: "Montag",
    Tuesday: "Dienstag",
    Wednesday: "Mittwoch",
    Thursday: "Donnerstag",
    Friday: "Freitag",
    Saturday: "Samstag",
    Sunday: "Sonntag"
}
$(document).ready(function() {
 $('time.blog-meta-item--date span').each(function(i, e) {
     const text = $(e).html()
     $(e).html(translate[text])
 })
 
})
S.fn.init [document]
const translate = {
    Jan: "Jän",
    	Feb: "Feb",
    	Mar: "März",
    	Apr: "Apr",
    	May: "Mai",
    	Jun: "Juni",
    	Jul: "Juli",
    	Aug: "Aug",
    	Sep: "Sept",
    	Oct: "Okt",
    	Nov: "Nov",
    	Dec: "Dek"
}
const translate1 = {
    	January: "Januar",
    	February: "Februar",
    	March: "März",
    	April: "April",
    	May: "Mai",
    	June: "Juni",
    	July: "Juli",
    	August: "August",
    	September: "September",
    	October: "Oktober",
    	November: "November",
    	December: "Dezember"
}
const day = {
    
    Monday: "Montag",
    Tuesday: "Dienstag",
    Wednesday: "Mittwoch",
    Thursday: "Donnerstag",
    Friday: "Freitag",
    Saturday: "Samstag",
    Sunday: "Sonntag"
}
$(document).ready(function() {
 $('.body-de time.Blog-meta-item--date').each(function(i, e) {
     const text = $(e).html()
     $(e).html(translate[text])
 })
 $('.body-de time.Blog-meta-item--date').each(function(i, e) {
     let text = $(e).html()
     for(let key in translate) {
         text = text.replace(key, translate[key])
     }
     for(let key in day) {
         text = text.replace(key, day[key])
     }
     console.log(text)
     $(e).html(text)
 })
})
</script>

Is there something I missed?

Thank you in advance and for your time and efforts on this. 🙏

Naomi-lifelab · March 1, 2022

Hello again @tuanphan
I was also trying to apply the "Read more" translated with this code that I learned from you from other threads.

<script>
$('body.body-de .blog-more-link:contains("Read More")').text('Mehr lesen'); 
</script>

I am not sure why it does not work as well. I tweaked the body-de as the language is Deutsch.

I know that I am almost there. But I can seem to make it work. 😅

May I also ask help on this? Thank you!

I left all the code in the code injection > footer for your reference.

Naomi-lifelab · March 1, 2022

1 hour ago, Naomi-lifelab said:
Hello again @tuanphan
I was also trying to apply the "Read more" translated with this code that I learned from you from other threads.
<script>
$('body.body-de .blog-more-link:contains("Read More")').text('Mehr lesen'); 
</script>
I am not sure why it does not work as well. I tweaked the body-de as the language is Deutsch.

I know that I am almost there. But I can seem to make it work. 😅

May I also ask help on this? Thank you!

I left all the code in the code injection > footer for your reference.

Just a quick update I found this code and tested it out, but it keeps on showing in all languages.
I am not good with coding, but I tried adding this 'body.body-de. It doesn't seem to work and show only in DE/German page.

May I please ask for help in having this applied only in the German pages?

<script>
  // Read More Text
  document.querySelectorAll('.BlogList-item-readmore span').forEach(function(summary) {
      summary.textContent = "View Full Article"; // Customize text here
  })
</script>

in this thread:

Thank you!

tuanphan · March 3, 2022

try change this

.BlogList-item-readmore span

to

body.body-de .BlogList-item-readmore span

Naomi-lifelab · March 8, 2022

On 3/3/2022 at 8:57 PM, tuanphan said:
try change this
.BlogList-item-readmore span
to
body.body-de .BlogList-item-readmore span

Hello @tuanphan

Thanks for getting back to me.

I have tried adding the "body.body-de", but it still doesn't seem to work. 😞

Is there any other way?

Thank you so much!

Multilingual website: translating the blog items such as "Read more", "next", "previous", and month dates

Recommended Posts

Naomi-lifelab

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Posted Images

tuanphan

Naomi-lifelab

tuanphan

Naomi-lifelab

Naomi-lifelab

Naomi-lifelab

tuanphan

Naomi-lifelab

Create an account or sign in to comment

News

Circle Benefits

Events

Circle Day

Resources

Product Updates

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources