{"status":1,"code":"essepage_fetched","payload":{"essepage_head":"多言語ページ\n\t\n \n \n \n \n\t\n\n \n \n\n\t\n\n\t\n\t\t\n\n\t\n\t\n\t\n\t\n\t\n\n\t\n\t\n\t\n\n \n\n\t\n\n\t\n\n\t\n\n\t\n\n\t\n\n ","essepage_body":"\n\n

{return{y:0,async init(){await $nextTick();this.removeFloatMenu()},disableBodyScroll(){document.querySelector("body").style.overflow="hidden"},enableBodyScroll(){document.querySelector("body").style.overflow="visible"},floatMenu(){$store.global.mobileMenuOpen=false;if(window.matchMedia("screen and (max-width: 768px)").matches){return}const e=document.querySelector(".menu-scroll-area");const o=e.scrollTop;const l=e.offsetLeft;e.style.position="fixed";e.style.top=0;e.style.bottom=0;e.style.left=l+`px`;e.classList.add("hide-scroll-bar");const t=e.cloneNode(true);let r=document.querySelector("body");r.append(e);e.scrollTop=o;t.scrollTop=o},removeFloatMenu(){const e=document.querySelector(".menu-scroll-area");const o=document.querySelector("body > .menu-scroll-area");if(o){e.scrollTop=o.scrollTop;o.remove()}}}};\" @scroll.window.throttle.5ms=\"y = window.scrollY\">\n\n\t\n\t\n\t

30 ? `group-[.page-layout]:shadow-[0_5px_9px_-10px_color(from_var(--text-color)_srgb_r_g_b_/_0.5)] dark:group-[.page-layout]:shadow-[0_5px_9px_-10px_color(from_var(--dark-text-color)_srgb_r_g_b_/_0.35)]` : ``\">\n\n\t\t\n\n\t\t

\n\t\t\t\n\t\t\t

\n\t\t\t\t\n\t

\n\n\t\t\t\t\t\n\t\t\t\t\t

\n\t\t\t\t\t\t $\"logo\"$ \n\t\t\t\t\t\t\n Essepage\n \n \n \t\t\t\t\t\t\n ドキュメント\n \n \n\t\t\t\t\t

\n\n\t\t\t\t\t\n\t\t\t\t\t\n\n\t

\n\n\t\t\t\t\t\n\t\t\t\t\t\tガイド\n\t\t\t\t\t\n\n\t\t\t\t\t\n\t\t\t\t\t\t実装例\n\t\t\t\t\t\n\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\n\t\t\t\t\t\n\t\t\t\t\t\tショーケース\n\t\t\t\t\t\n\n\t\t\t\t\t\n\n\t\t\t\t\t\n\n\t\t\t\t\t\n\n \n \n\n

\n \n \n \n \n \n \n \n \n

\n\n \n\n \n\n\n\n\n\n\n\n\t\t\t\t\t\n\n\n\n\n\n\n\n\n\t\t\t\t\t\n\n\t\t\t\t\t\n\t\t\t\t\t\n\n\t\t\t\t\t

{ close() }, 50)\" x-on:keydown.escape=\"close\">\n\t\t\t\t\t\t\n\t\t\t\t\t\t

\n\t\t\t\t\t\t\t

\n\n\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t言語\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\tEnglish\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t한국어\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t日本語\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t

\n\n\t\t\t\t\t\t\t\n\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\n\t\t\t\t

\n\t\t\t

\n\t\t

\n\n\t

\n\n\n\n\n\t\n\t\n\t

\n\n

\n \n

\n \n \n

\n \n 上に戻る\n \n

\n \n

{return{tocs:[],async init(){const e=document.querySelector(".markdown-toc");if(e?.dataset?.toc){const t=JSON.parse(e?.dataset?.toc);if(t.length){for(const[n,o]of Object.entries(t)){if(1\n\n \n\n \n\n\n

\n\n

\n\n\t

\n\n\n\t\n\n\t

\n\n\t\t

\n\t\t\t\n\t\t

\n\n\n\t\t\n\n\t\t\n\t\t

\n\n\t\t\t\n\t\t\t

{return{menuOpenState:true,async init(){if(!Essepage.articleMode){return}let t=false;let s=false;if(window.__lang!=Essepage?.pageLanguage){window.__lang=Essepage?.pageLanguage;t=true}let l="";if(Essepage?.pageFolderPath){l="/"+Essepage.pageFolderPath.slice(0,Essepage.pageFolderPath.lastIndexOf("/"))}if(window.__categoryFolder!=l){window.__categoryFolder=l;s=true}const c=document.querySelector(".menu-scroll-area");c.classList.add("hide-scroll-bar");if($store.global.menuCategoryList.length<1||t||s){let r=await Essepage.articleList(l||`/guide`,{sortBy:"datetime",sortOrder:"asc",pageRow:100});let a=[];for(const[o,e]of Object.entries(r?.payload?.pageArticleList)){const n=JSON.parse(e.pageMetaInfo);if(n["essepage:not_on_the_list"]){continue}const i=a.findIndex(u=>u.category===e.categoryPath);e.currentView=false;const g=new RegExp(`${e.path}/${e.slug}$`);if(g.test(window.location.href)){e.currentView=true}if(i<0){a=[...a,{category:e.categoryPath,categoryOpen:this.menuOpenState,categoryName:e.categoryName,items:[e]}]}else{a[i].items=[...a[i].items,e]}}for(const o of a){o.items.sort((e,n)=>new Date(e.publishedAt)-new Date(n.publishedAt))}a.sort((o,e)=>new Date(o.items[0].categoryCreatedAt)-new Date(e.items[0].categoryCreatedAt));$store.global.menuCategoryList=a}await $nextTick();c.classList.remove("hide-scroll-bar");for(const[r,a]of Object.entries($store.global.menuCategoryList)){for(const[o,e]of Object.entries($store.global.menuCategoryList[+r].items)){$store.global.menuCategoryList[r].items[o].currentView=false;const n=$store.global.menuCategoryList[r].items[o].path;const i=$store.global.menuCategoryList[r].items[o].slug;const g=new RegExp(`${n}/${i}$`);if(g.test(window.location.href)){$store.global.menuCategoryList[r].items[o].currentView=true;$store.global.menuCategoryList[r].categoryOpen=true}}}},openMenuAll(){for(const[t,s]of Object.entries($store.global.menuCategoryList)){$store.global.menuCategoryList[+t].categoryOpen=true}},closeMenuAll(){for(const[t,s]of Object.entries($store.global.menuCategoryList)){$store.global.menuCategoryList[+t].categoryOpen=false}},capitalizeFirstLetter(t){return t.charAt(0).toUpperCase()+t.slice(1)},isMenuSelected(t){if(window.location.href?.includes(t)){return true}return false},decodeHtml(t){var s=document.createElement("textarea");s.innerHTML=t;return s.value}}};\" class=\"pt-4 md:pt-0 mr-[var(--layoutPaddingX)]\">\n\n \n\n \n\n\n \n\n

\n\n\t\t

\n\n\t\t\n\t\t

\n\t\t\t

\n\n\n\t\t\t\t

{return{PrevPost:null,NextPost:null,tocAnchors:[],tocLinks:[],async init(){this.essepressMarkdownPreprocess(document.querySelector(".markdown-content"));this.essepressSyntax(document.querySelector(".markdown-content"));await this.shiki();await $nextTick();this.tocAnchors=document.querySelectorAll(".markdown-content h2, .markdown-content h3");this.tocLinks=document.querySelectorAll(".toc-content ul > li > a");if(Essepage.articleMode){let t=await Essepage.articleList(`../`,{articleSlug:Essepage.articleSlug,sort:"asc"});const e=t?.payload?.pageArticleList;this.PrevPost=e.find(s=>s.articleDirection=="prev");this.NextPost=e.find(s=>s.articleDirection=="next")}},tocHighlight(t){const e=this.tocAnchors;const s=this.tocLinks;if(typeof e!="undefined"&&e!=null&&typeof s!="undefined"&&s!=null){let r=window.scrollY;let i=false;if(window.innerHeight+r>=document.body.scrollHeight){i=true}if(s){s.forEach((l,n)=>{l?.classList.remove(`after:bg-[var(--highlight-color)]`)});if(i){s[e.length-1]?.classList.add(`after:bg-[var(--highlight-color)]`)}else{for(var o=e.length-1;o>=0;o--){if(r>e[o].offsetTop-91){s[o]?.classList.add(`after:bg-[var(--highlight-color)]`);break}}}}}},async shiki(){const{codeToHtml:t}=await import("https://cdn.jsdelivr.net/npm/shiki@1.22.2/+esm");const{transformerNotationDiff:e,transformerNotationHighlight:s,transformerNotationFocus:o}=await import("https://cdn.jsdelivr.net/npm/@shikijs/transformers@1.22.2/+esm");const r=document.getElementsByClassName("code-block");for(const i of r){const l=i.firstChild;const n=document.createElement("div");n.innerHTML=await t(l.textContent,{lang:l?.dataset?.lang,theme:"one-light",transformers:[e(),s(),o()]});const a=n.firstChild;const c=a.getAttribute("class");i.classList.add(...c.split(" "));i.setAttribute("tabindex",0);i.setAttribute("style",a.getAttribute("style"));i.innerHTML=a.innerHTML}},essepressMarkdownPreprocess(t){const e={elements:[],container:t,selector:"pre.code-block"};e.elements=Array.prototype.slice.apply(e.container.querySelectorAll(e.selector));if(e.elements.length){for(const[s,o]of Object.entries(e.elements)){if(o.classList.contains("code-block")){this.essepressMarkdownPreprocessCodeBlock(o)}}}},essepressMarkdownPreprocessCodeBlock(t){const e=t?.dataset?.lang||"";const s=t?.dataset?.extra||"";let o=t.querySelector("& > code")?.innerText;if(o){t.outerHTML=`\\n

\\n

\\n \\n ${e}\\n ${s?`${s}`:``}\\n

\\n ${t.outerHTML}\\n

\\n `}},essepressSyntax(t){const e={elements:[],container:t,selector:"div.ep-code-group, div.ep-tip, div.ep-details"};e.elements=Array.prototype.slice.apply(e.container.querySelectorAll(e.selector));for(let s=0,o;o=e.elements[s++];){if(o.classList.contains("ep-code-group")){this.essepressSyntaxCodeGroup(o)}if(o.classList.contains("ep-tip")){this.essepressSyntaxTip(o)}if(o.classList.contains("ep-details")){this.essepressSyntaxDetails(o)}}},essepressSyntaxCodeGroup(t){const e=t.querySelectorAll("div.es-code-block");let s=``;let o=``;if(e.length){for(const[r,i]of Object.entries(e)){s+=`\\n \\n `;o+=`

${i.outerHTML}

`}}if(o){t.innerHTML=`

${s}

${o}

`}else{t.innerHTML=`

No 'ep-code-group' or in-code-blocks here.

`}},essepressSyntaxTip(t){const e=t.querySelector("h6")?.innerText?.trim();const s=t.querySelectorAll("p, div.es-code-block");if(s.length){let o="";for(const[r,i]of Object.entries(s)){o+=`${i.outerHTML}`}t.classList.add(..."bg-violet-100 px-5 py-0.5 rounded-lg text-sm leading-relaxed".split(" "));t.innerHTML=`\\n

${e||"TIP"}

\\n ${o}\\n `}},essepressSyntaxDetails(t){console.log(`Details class:`);console.log(t);const e=t.querySelector("h6")?.innerText?.trim();console.log(`h6TitleEl: `+e);const s=t.querySelectorAll("p, div.es-code-block");if(s.length){let o="";for(const[r,i]of Object.entries(s)){o+=`${i.outerHTML}`}t.classList.add(..."px-5 py-0.5 rounded-lg text-sm font-light leading-relaxed".split(" "));t.innerHTML=`\\n

\\n

\\n \\n

${e||"TIP"}

\\n

\\n ${o}\\n

\\n

\\n `}},decodeHTMLEntities(t){const e=document.createElement("textarea");e.innerHTML=t;return e.value}}};\" @scroll.window.debounce.100ms=\"tocHighlight\" @scroll.window.throttle.100ms=\"tocHighlight\">\n\n \n \n

\n\n \n

\n \n\n \n

{return{availableLangPageUrls:[],async init(){const e={"en":"English","ko":"한국어","ja":"日本語"};this.availableLangPageUrls=[...this.availableLangPageUrls,{"lang_code":Essepage.defaultLanguage||"en","lang_url":Essepage.href(`/${Essepage.pagePath}`,``),"lang_text":e["en"]}];if(Essepage?.additionalLanguagesInContent){for(const a of Essepage?.additionalLanguagesInContent){this.availableLangPageUrls=[...this.availableLangPageUrls,{"lang_code":a,"lang_url":Essepage.href(`/${Essepage.pagePath}`,a),"lang_text":e[a]}]}}const g=Essepage.pageLanguage||"en";const n=(a,s)=>{return a.filter(l=>l.lang_code!==s)};this.availableLangPageUrls=n(this.availableLangPageUrls,g);await $nextTick()}}};\">\n\n \n\n

\n\n\n

\n\n

\n 多言語ページ\n

\n\n

\n \t\n\n\n\n\n\n\nEssepageで多言語ページを構築する最も直感的な制作例です。\n\n別の翻訳ファイルを用意することなく、テキストを表示したい場所に直接各言語のフレーズを記述できます。面倒な設定作業から解放され、手軽にページを多言語化してみましょう。\n\n\n\n## Source Code\n\n\n\n\n\n\n

\n\n

\n\n \n

\n\n

\n\n \n\n \n\n

\n\n \n Last updated: \n \n

\n\n\n

\n\n

\n \n \n

\n\n

\n \n

\n\n

\n\n\n\n

\n\n

\n\n\n\n\n\n \n

\n\n \n

\n\n

\n\n \n

\n\n \n \n\n

\n\n\n\t\t\t

\n\t\t

\n\n\t

\n\n\n\t\n\t

\n\t\t\n\t\t\n\t

\n\n

","page_title":"多言語ページ","page_datetime":"2024-12-12T12:10:00+00:00","site_name":"≶ Essepage ドキュメント","page_meta":{"title":"多言語ページ","description":"レイアウトによるナビゲーションやページごとのHead設定を含んだ、Essepageの最もベーシックなウェブサイト制作例です。","keywords":"","date":"2024-12-12","og:title":"多言語ページ","og:description":"レイアウトによるナビゲーションやページごとのHead設定を含んだ、Essepageの最もベーシックなウェブサイト制作例です。","og:image":"https://i.esdrop.com/d/f/bh8rwl3bwU/3ae1rhxZ8A.png","essepage:not_on_the_list":"","viewport":"width=device-width, initial-scale=1"},"page_hash_tags":[],"html_and_body_attributes":{"html":[],"body":[]},"additional_languages":["ko","ja"],"default_language":"en","additional_languages_in_content":["ko","ja"],"file_type":"essepage","page_token":"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3ODkwOTA5NDAsIm5iZiI6MTc4OTA5MDk0MCwiZXhwIjoxNzg5MDk0NTQwLCJmcCI6ImFwaV9lc3NlcGFnZV9jb20iLCJkYXRhIjp7ImVzc2VwYWdlX3N0YXR1cyI6IjkwMCJ9fQ._yiqS7D5iO09tyCRSdgOMzh3HbDwBF9j1Phtq09KhEw","s_fetch":true,"use_ssr_cache":false,"href_path":"/ja/examples/basic/multilingual","article_mode":true,"category_folder":"examples/basic","slug":"multilingual","cv":"20260911014220","essepage_code":"essepage-docs"}}

\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t言語\n\t\t\t\t\t\t\t\t\t

\n \n 目次\n

\n Title\n

${e||"TIP"}

${e||"TIP"}

\n 多言語ページ\n

\n \n 目次\n