반응형
I have created a multi-lingual blog using the 'Poster' skin before and I realized that the code needed a little adjustment if it were to be used for other skins. In this writing, we will see how we can create a multi-lingual blog using 'Book Club' skin
Completed Codes
English Blog Code - Changing Language
▶ English Post
<script>
setTimeout(() => {
if (document.querySelector('h1')) {
document.querySelector('h1').innerText = 'JOYS-WORLD'
}
if (document.querySelector('em.txt_state')) {
document.querySelector('em.txt_state').innerText = 'Subscribe'
}
if (document.querySelector('.tags h2')) {
document.querySelector('.tags h2').innerText = 'Tags'
}
if (document.querySelector('.comment-form [name="name"]')) {
document.querySelector('.comment-form [name="name"]').placeholder = 'Name'
}
if (document.querySelector('.comment-form [name="password"]')) {
document.querySelector('.comment-form [name="password"]').placeholder = 'Password'
}
if (document.querySelector('.comment-form [name="comment"]')) {
document.querySelector('.comment-form [name="comment"]').placeholder = 'I appreciate your comment'
}
if (document.querySelector('.submit button')) {
document.querySelector('.submit button').innerText = 'Post'
}
if (document.querySelector('#footer .admin')) {
document.querySelector('#footer .admin').innerText = 'Admin'
}
if (document.querySelector("#gnb")) {
document.querySelectorAll("#gnb ul li a")[0].innerText = 'HOME'
document.querySelectorAll("#gnb ul li a")[1].innerText = 'TAG'
document.querySelectorAll("#gnb ul li a")[2].innerText = 'COMMENTS'
}
if (document.querySelector("#entry2Comment > form > div > div.field > div > label")) {
document.querySelector("#entry2Comment > form > div > div.field > div > label").innerText = 'Secret'
}
if (document.querySelector("#content > div.inner > div.comments > h2")) {
document.querySelector("#content > div.inner > div.comments > h2").innerText = 'Comments'
}
if (document.querySelector("#aside > div.sidebar-2 > div.post-list.tab-ui > h2 > a.current")) {
document.querySelector("#aside > div.sidebar-2 > div.post-list.tab-ui > h2 > a.current").innerText = 'Recent'
}
if (document.querySelector("#aside > div.sidebar-2 > div.recent-comment > h2")) {
document.querySelector("#aside > div.sidebar-2 > div.recent-comment > h2").innerText = 'Recent Comments'
}
if (document.querySelector("#aside > div.sidebar-2 > div.count > h2")) {
document.querySelector("#aside > div.sidebar-2 > div.count > h2").innerText = 'Total Visitors'
}
if (document.querySelector("#aside > div.sidebar-1 > nav > ul > li > a")) {
document.querySelector("#aside > div.sidebar-1 > nav > ul > li > a").innerText = 'All Categories'
}
if (document.querySelector("#aside > div.sidebar-2 > div.notice > h2")) {
document.querySelector("#aside > div.sidebar-2 > div.notice > h2").innerText = 'Notices'
}
if (document.querySelector("#aside > div.sidebar-2 > div.post-list.tab-ui > h2 > a:nth-child(2)")) {
document.querySelector("#aside > div.sidebar-2 > div.post-list.tab-ui > h2 > a:nth-child(2)").innerText = 'Popular'
}
if (document.querySelector(".uoc-icon span.txt_like.uoc-count")) {
document.querySelector(".uoc-icon span.txt_like.uoc-count").innerText = 'Like'
}
if (document.querySelectorAll('.tt_category .link_tit')) {
document.querySelectorAll('.tt_category .link_tit').innerText = 'All Category'
}
if(document.querySelector("#content > div.inner > div.post-cover > div > span.meta > a:nth-child(3)")) {
document.querySelector("#content > div.inner > div.post-cover > div > span.meta > a:nth-child(3)").innerText = 'Edit'
}
if(document.querySelector("#content > div.inner > div.post-cover > div > span.meta > a:nth-child(4)")) {
document.querySelector("#content > div.inner > div.post-cover > div > span.meta > a:nth-child(4)").innerText = 'Delete'
}
if (document.querySelector("#popular-cont > h3")) {
document.querySelector("#popular-cont > h3").innerText = 'Popular Posts'
}
document.querySelector("head > title").innerText = document.querySelector("head > title").innerText.replace('웹 개발 이것저것', 'JIN-CO DEVLOG')
document.querySelector('html').lang = 'en'
}, 100);
</script>Creating Buttons to Change Languages
▶ Korean Post
<style>
.lan-box {
display: flex;
height: 50px;
width: 180px;
gap: 5px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: auto;
z-index: 15;
}
.lan-box a {
width: 50px;
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
border: none;
cursor: pointer;
border-radius: 5px;
box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, .3);
}
.lan-box a:active {
transform: scale(.97);
}
.lan-box a.disabled {
opacity: .2;
}
.lan-box a.disabled:active {
transform: scale(1);
}
.lan-box a {
text-decoration: none;
}
.lan-box button {
color: #fff;
}
</style>
<script>
const multiLanguageBox = document.createElement('div')
multiLanguageBox.className = 'lan-box'
multiLanguageBox.innerHTML = `
<a class="lan-kr-btn disabled" style="background-color: rgb(203, 37, 37, .8);">
<button>한글</button>
</a>
<a href="https://jin-co.tistory.com/190" class="lan-en-btn" style="background-color: rgb(61, 61, 233, .8);">
<button>EN</button>
</a>
`
if (window.location.href.includes('com/m/')) {
multiLanguageBox.style.top = '180px'
document.querySelector("#mainContent > div.blogview_tit").appendChild(multiLanguageBox)
} else {
document.querySelector("#content").insertBefore(multiLanguageBox ,document.querySelector("#content > div"))
}
</script>▶ English Post
<style>
.lan-box {
display: flex;
height: 50px;
width: 180px;
gap: 5px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: auto;
z-index: 15;
}
.lan-box a {
width: 50px;
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
border: none;
cursor: pointer;
border-radius: 5px;
box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, .3);
}
.lan-box a:active {
transform: scale(.97);
}
.lan-box a.disabled {
opacity: .2;
}
.lan-box a.disabled:active {
transform: scale(1);
}
.lan-box a {
text-decoration: none;
}
.lan-box button {
color: #fff;
}
</style>
<script>
const multiLanguageBox = document.createElement('div')
multiLanguageBox.className = 'lan-box'
multiLanguageBox.innerHTML = `
<a href="https://jin-co.tistory.com/190" class="lan-kr-btn" style="background-color: rgb(203, 37, 37, .8);">
<button>한글</button>
</a>
<a class="lan-en-btn disabled" style="background-color: rgb(61, 61, 233, .8);">
<button>EN</button>
</a>
`
if (window.location.href.includes('com/m/')) {
multiLanguageBox.style.top = '180px'
document.querySelector("#mainContent > div.blogview_tit").appendChild(multiLanguageBox)
} else {
document.querySelector("#content").insertBefore(multiLanguageBox ,document.querySelector("#content > div"))
}
</script>Analyzing
First, I scanned the UI to identify all the elements with a text. For 'Book Club' skin, we need to change the blog title, top menus,
post title, categories,
side menus,
and footer texts
Implementation
Changing Categories' Text
The easiest way to make the English version of the categories, I think, is to create a separate category for the English version.
Go to Admin -> Category Manager and add the equivalent version of English category for the Korean version
When you are done, categorize the post in the appropriate category then you will see the result
Changing General Text
For the rest of the texts that need to be converted, we will manipulate each element using JavaScript
<script>
setTimeout(() => {
if (document.querySelector('h1')) {
document.querySelector('h1').innerText = 'JOYS-WORLD'
}
if (document.querySelector('em.txt_state')) {
document.querySelector('em.txt_state').innerText = 'Subscribe'
}
if (document.querySelector('.tags h2')) {
document.querySelector('.tags h2').innerText = 'Tags'
}
if (document.querySelector('.comment-form [name="name"]')) {
document.querySelector('.comment-form [name="name"]').placeholder = 'Name'
}
if (document.querySelector('.comment-form [name="password"]')) {
document.querySelector('.comment-form [name="password"]').placeholder = 'Password'
}
if (document.querySelector('.comment-form [name="comment"]')) {
document.querySelector('.comment-form [name="comment"]').placeholder = 'I appreciate your comment'
}
if (document.querySelector('.submit button')) {
document.querySelector('.submit button').innerText = 'Post'
}
if (document.querySelector('#footer .admin')) {
document.querySelector('#footer .admin').innerText = 'Admin'
}
if (document.querySelector("#gnb")) {
document.querySelectorAll("#gnb ul li a")[0].innerText = 'HOME'
document.querySelectorAll("#gnb ul li a")[1].innerText = 'TAG'
document.querySelectorAll("#gnb ul li a")[2].innerText = 'COMMENTS'
}
if (document.querySelector("#entry2Comment > form > div > div.field > div > label")) {
document.querySelector("#entry2Comment > form > div > div.field > div > label").innerText = 'Secret'
}
if (document.querySelector("#content > div.inner > div.comments > h2")) {
document.querySelector("#content > div.inner > div.comments > h2").innerText = 'Comments'
}
if (document.querySelector("#aside > div.sidebar-2 > div.post-list.tab-ui > h2 > a.current")) {
document.querySelector("#aside > div.sidebar-2 > div.post-list.tab-ui > h2 > a.current").innerText = 'Recent'
}
if (document.querySelector("#aside > div.sidebar-2 > div.recent-comment > h2")) {
document.querySelector("#aside > div.sidebar-2 > div.recent-comment > h2").innerText = 'Recent Comments'
}
if (document.querySelector("#aside > div.sidebar-2 > div.count > h2")) {
document.querySelector("#aside > div.sidebar-2 > div.count > h2").innerText = 'Total Visitors'
}
if (document.querySelector("#aside > div.sidebar-1 > nav > ul > li > a")) {
document.querySelector("#aside > div.sidebar-1 > nav > ul > li > a").innerText = 'All Categories'
}
if (document.querySelector("#aside > div.sidebar-2 > div.notice > h2")) {
document.querySelector("#aside > div.sidebar-2 > div.notice > h2").innerText = 'Notices'
}
if (document.querySelector("#aside > div.sidebar-2 > div.post-list.tab-ui > h2 > a:nth-child(2)")) {
document.querySelector("#aside > div.sidebar-2 > div.post-list.tab-ui > h2 > a:nth-child(2)").innerText = 'Popular'
}
if (document.querySelector(".uoc-icon span.txt_like.uoc-count")) {
document.querySelector(".uoc-icon span.txt_like.uoc-count").innerText = 'Like'
}
if (document.querySelectorAll('.tt_category .link_tit')) {
document.querySelectorAll('.tt_category .link_tit').innerText = 'All Category'
}
if(document.querySelector("#content > div.inner > div.post-cover > div > span.meta > a:nth-child(3)")) {
document.querySelector("#content > div.inner > div.post-cover > div > span.meta > a:nth-child(3)").innerText = 'Edit'
}
if(document.querySelector("#content > div.inner > div.post-cover > div > span.meta > a:nth-child(4)")) {
document.querySelector("#content > div.inner > div.post-cover > div > span.meta > a:nth-child(4)").innerText = 'Delete'
}
if (document.querySelector("#popular-cont > h3")) {
document.querySelector("#popular-cont > h3").innerText = 'Popular Posts'
}
document.querySelector("head > title").innerText = document.querySelector("head > title").innerText.replace('웹 개발 이것저것', 'JIN-CO DEVLOG')
document.querySelector('html').lang = 'en'
}, 100);
</script>Open the English post' edit page and click 'HTML block'
Copy the codes above and paste them
Save the work and all the texts will be converted on the English version
Adding Buttons to Link Posts
To allow users to freely change between the two versions and help search engines to identify the related post as one post with different versions, we will add buttons to link them
Likewise, when we added the English version codes, Open each post' edit page and click 'HTML block'
Add the code below to each post
▶ Korean Post
<style>
.lan-box {
display: flex;
height: 50px;
width: 180px;
gap: 5px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: auto;
z-index: 15;
}
.lan-box a {
width: 50px;
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
border: none;
cursor: pointer;
border-radius: 5px;
box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, .3);
}
.lan-box a:active {
transform: scale(.97);
}
.lan-box a.disabled {
opacity: .2;
}
.lan-box a.disabled:active {
transform: scale(1);
}
.lan-box a {
text-decoration: none;
}
.lan-box button {
color: #fff;
}
</style>
<script>
const multiLanguageBox = document.createElement('div')
multiLanguageBox.className = 'lan-box'
multiLanguageBox.innerHTML = `
<a class="lan-kr-btn disabled" style="background-color: rgb(203, 37, 37, .8);">
<button>한글</button>
</a>
<a href="https://jin-co.tistory.com/190" class="lan-en-btn" style="background-color: rgb(61, 61, 233, .8);">
<button>EN</button>
</a>
`
if (window.location.href.includes('com/m/')) {
multiLanguageBox.style.top = '180px'
document.querySelector("#mainContent > div.blogview_tit").appendChild(multiLanguageBox)
} else {
document.querySelector("#content").insertBefore(multiLanguageBox ,document.querySelector("#content > div"))
}
</script>▶ English Post
<style>
.lan-box {
display: flex;
height: 50px;
width: 180px;
gap: 5px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: auto;
z-index: 15;
}
.lan-box a {
width: 50px;
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
border: none;
cursor: pointer;
border-radius: 5px;
box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, .3);
}
.lan-box a:active {
transform: scale(.97);
}
.lan-box a.disabled {
opacity: .2;
}
.lan-box a.disabled:active {
transform: scale(1);
}
.lan-box a {
text-decoration: none;
}
.lan-box button {
color: #fff;
}
</style>
<script>
const multiLanguageBox = document.createElement('div')
multiLanguageBox.className = 'lan-box'
multiLanguageBox.innerHTML = `
<a href="https://jin-co.tistory.com/190" class="lan-kr-btn" style="background-color: rgb(203, 37, 37, .8);">
<button>한글</button>
</a>
<a class="lan-en-btn disabled" style="background-color: rgb(61, 61, 233, .8);">
<button>EN</button>
</a>
`
if (window.location.href.includes('com/m/')) {
multiLanguageBox.style.top = '180px'
document.querySelector("#mainContent > div.blogview_tit").appendChild(multiLanguageBox)
} else {
document.querySelector("#content").insertBefore(multiLanguageBox ,document.querySelector("#content > div"))
}
</script>
※ Multi-Lingual Blog SEO
SEO (Multi-Lingual Blog Indexing)
After making multi-lingual blog on tstory. I was looking for a way to improve search result for each content when I came across on how to help Google to identify pages with the same content but with different languages. Implementation The implementation is
jin-co.tistory.com
We have seen how we can make a multi-lingual blog using the 'Book Club' skin.
728x90
반응형
'Web Development Tips > TStory' 카테고리의 다른 글
| tstory - How to Add A Clipboard Function (8) | 2023.03.18 |
|---|---|
| tstory - Multi-Lingual Blog (Poster Skin) (0) | 2023.03.08 |
| tstory - How to Use the Format (2) | 2023.03.08 |
| Tstory - Smooth rendering (1) | 2023.03.04 |
