feat: add internationalization support for comments and update language handling

Author: D-Sketon

_config.yml

@@ -283,11 +283,7 @@ clarity: false
 # -> valine -> waline -> twikoo -> gitalk -> giscus
 comment:
   # comment system title
-  title: 说些什么吧！
-  # or with i18n
-  # title: 
-  #   en: Say something!
-  #   zh-CN: 说些什么吧！
+  # title: 说些什么吧！# deprecated, use i18n instead
   default: waline # default comment system, when you enable multiple comment systems
 
 # valine comment system. https://valine.js.org
@@ -299,7 +295,7 @@ valine:
   appKey: # leancloud application app key
   pageSize: 10 # comment list page size
   avatar: mp # gravatar style https://valine.js.org/#/avatar
-  lang: zh-cn # i18n: zh-cn/en
+  # lang: zh-cn # deprecated, use html.lang instead
   placeholder: Just go go # valine comment input placeholder(like: Please leave your footprints )
   guest_info: nick,mail,link #valine comment header info
   recordIP: true # whether to record the IP address of the commenters
@@ -312,7 +308,7 @@ valine:
 waline:
   enable: false
   serverURL:
-  lang: zh-CN
+  # lang: zh-CN # deprecated, use html.lang instead
   locale: {} # https://waline.js.org/guide/features/i18n.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E8%AF%AD%E8%A8%80
   emoji:
     - https://unpkg.com/@waline/[email protected]/weibo
@@ -360,8 +356,8 @@ giscus:
   reactionsEnabled: 1
   emitMetadata: 0
   inputPosition: bottom
-  # commentTheme: light # this option is invalid, because the theme is set by the theme itself
-  lang: zh-CN
+  # commentTheme: light # deprecated, because the theme is set by the theme itself
+  # lang: zh-CN # deprecated, use html.lang instead
 
 ########################################
 # Search

languages/en.yml

@@ -68,4 +68,10 @@ article_copyright:
   date: "Published: "
   updated: "Updated: "
   license: "License: "
-  license_content: "All articles on this blog are licensed under the %s license agreement unless otherwise stated. Please indicate the source when reprinting!"
+  license_content: "All articles on this blog are licensed under the %s license agreement unless otherwise stated. Please indicate the source when reprinting!"
+
+comments:
+  title: "Say something!"
+
+outdate:
+  message: This article was last updated on {time}. Please note that the content may no longer be applicable.

languages/ja.yml

@@ -69,3 +69,9 @@ article_copyright:
   updated: "更新日: "
   license: "ライセンス: "
   license_content: 本ブログのすべての文書は、特に指定されていない限り、%s ライセンスに従っています。引用の際は出典を明記してください！
+
+comments:
+  title: "何か言ってみて！"
+
+outdate:
+  message: この記事は最終更新日：{time}。記載内容が現在有効でない可能性がありますのでご注意ください。

languages/zh-CN.yml

@@ -68,4 +68,10 @@ article_copyright:
   date: 本文发布时间：
   updated: 本文更新时间：
   license: 本文版权：
-  license_content: 本博客所有文章除特别声明外，均采用 %s 许可协议。转载请注明出处！
+  license_content: 本博客所有文章除特别声明外，均采用 %s 许可协议。转载请注明出处！
+
+comments:
+  title: 说些什么吧！
+
+outdate:
+  message: 本文最后更新于 {time}，请注意文中内容可能已不适用。

languages/zh-TW.yml

@@ -68,4 +68,10 @@ article_copyright:
   date: 本文發佈時間：
   updated: 本文更新時間：
   license: 本文版權：
-  license_content: 本部落格所有文章除特別聲明外，均採用 %s 授權協議。轉載請註明出處！
+  license_content: 本部落格所有文章除特別聲明外，均採用 %s 授權協議。轉載請註明出處！
+
+comments:
+  title: 說些什麼吧！
+
+outdate:
+  message: 本文最後更新於 {time}，請注意文中內容可能已不適用。

layout/_partial/article.ejs

@@ -98,11 +98,7 @@
 <% if (post.comments !== false && activeSystems.length) { %>
   <section id="comments" data-aos="<%= theme.animation.options.article.whole %>">
     <div class="comment-header">
-      <% var commentTitle = theme.comment.title; %>
-      <% if (typeof commentTitle !== 'string') { %>
-        <% commentTitle = commentTitle[post.lang]; %>
-      <% } %>
-      <h2 class="comment-title"><%= commentTitle %></h2>
+      <h2 class="comment-title"><%= __("comments.title") %></h2>
       <div class="comment-selector">
         <div class="comment-selector-wrap">
             <% for(const active of activeSystems) { %>

layout/_partial/post/comment.ejs

@@ -47,7 +47,7 @@
               placeholder: "<%= theme.valine.placeholder %>",
               pageSize: '<%= theme.valine.pageSize %>',
               avatar: '<%= theme.valine.avatar %>',
-              lang: '<%= theme.valine.lang %>',
+              lang: document.documentElement.lang || 'en',
               recordIP: recordIP,
               highlight: highlight,
               visitor: visitor,
@@ -77,7 +77,7 @@
         window.walineInstance = walineInit({
           el: '.waline-comment',
           serverURL: '<%= theme.waline.serverURL %>',
-          lang: '<%= theme.waline.lang %>',
+          lang: document.documentElement.lang || 'en',
           locale: <%- JSON.stringify(theme.waline.locale) %>,
           emoji: <%- JSON.stringify(theme.waline.emoji) %>,
           meta: <%- JSON.stringify(theme.waline.meta) %>,
@@ -108,6 +108,7 @@
               envId: '<%= theme.twikoo.envId %>',
               el: '.tcomment',
               region: '<%= theme.twikoo.region %>',
+              lang: document.documentElement.lang || 'en',
             })
           }
         } 
@@ -148,8 +149,9 @@
             repo: '<%= theme.gitalk.repo %>',
             owner: '<%= theme.gitalk.owner %>',
             admin: <%- JSON.stringify(theme.gitalk.admin) %>,
-            id: gitalkId, // Ensure uniqueness and length less than 50
-            distractionFreeMode: false // Facebook-like distraction free mode
+            id: gitalkId,
+            distractionFreeMode: false,
+            language: document.documentElement.lang || 'en',
           })
           gitalk.render('gitalk-comment');
         }
@@ -181,7 +183,7 @@
         giscusScript.setAttribute('data-emit-metadata', '<%= theme.giscus.emitMetadata %>');
         giscusScript.setAttribute('data-input-position', '<%= theme.giscus.inputPosition %>');
         giscusScript.setAttribute('data-theme', domMode === 'dark' ? 'dark' : 'light');
-        giscusScript.setAttribute('data-lang', '<%= theme.giscus.lang %>');
+        giscusScript.setAttribute('data-lang', document.documentElement.lang || 'en');
         giscusScript.setAttribute('crossorigin', 'anonymous');
         giscusScript.async = true;
         container.appendChild(giscusScript);

layout/layout.ejs

@@ -2,7 +2,7 @@
   <%- partial('404', {post: page}) %>
 <% } else { %>
   <!DOCTYPE html>
-  <html <% if (config.language) { %>lang="<%- config.language %>" <% } %> 
+  <html <% if (page.lang) { %>lang="<%- page.lang %>" <% } else if (config.language) { %>lang="<%- config.language %>" <% } %> 
     <% if (theme.dark_mode.enable === true) { %>
       data-theme-mode="true"
     <% } else if (theme.dark_mode.enable === 'auto') { %>