feed: Add support for Waline comment system

- Add documentation for Waline - Add config file for exampleSite - Update cdn data - Add lib/waline - Add support for Waline
HEIGE-PCloud · Apr 30, 2021 · df8a9b6 · df8a9b6
1 parent 2ad853b
commit df8a9b6
Show file tree

Hide file tree

Showing 16 changed files with 242 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -105,6 +105,7 @@ I hope you will LoveIt ❤️!
 * **Disqus** comment system supported by [Disqus](https://disqus.com)
 * **Gitalk** comment system supported by [Gitalk](https://github.com/gitalk/gitalk)
 * **Valine** comment system supported by [Valine](https://valine.js.org/)
+* **Waline** comment system supported by [Waline](https://waline.js.org/)
 * **Facebook comments** system supported by [Facebook](https://developers.facebook.com/docs/plugins/comments/)
 * **Telegram comments** system supported by [Telegram Comments](https://comments.app/)
 * **Commento** comment system supported by [Commento](https://commento.io/)
@@ -197,6 +198,7 @@ Thanks to the authors of following resources included in the theme:
 * [MetingJS](https://github.com/metowolf/MetingJS)
 * [Gitalk](https://github.com/gitalk/gitalk)
 * [Valine](https://valine.js.org/)
+* [Waline](https://waline.js.org/)
 * [cookieconsent](https://github.com/osano/cookieconsent)
 
 ## Author

diff --git a/README.zh-cn.md b/README.zh-cn.md
@@ -100,6 +100,7 @@ git submodule add https://github.com/HEIGE-PCloud/DoIt.git themes/DoIt
 * 支持 **[Disqus](https://disqus.com)** 评论系统
 * 支持 **[Gitalk](https://github.com/gitalk/gitalk)** 评论系统
 * 支持 **[Valine](https://valine.js.org/)** 评论系统
+* 支持 **[Waline](https://waline.js.org/)** 评论系统
 * 支持 **[Facebook](https://developers.facebook.com/docs/plugins/comments/) 评论**系统
 * 支持 **[Telegram comments](https://comments.app/) 评论**系统
 * 支持 **[Commento](https://commento.io/)** 评论系统
@@ -192,6 +193,7 @@ DoIt 主题中用到了以下项目，感谢它们的作者：
 * [MetingJS](https://github.com/metowolf/MetingJS)
 * [Gitalk](https://github.com/gitalk/gitalk)
 * [Valine](https://valine.js.org/)
+* [Waline](https://waline.js.org/)
 * [cookieconsent](https://github.com/osano/cookieconsent)
 
 ## 作者

diff --git a/assets/data/cdn/jsdelivr.yml b/assets/data/cdn/jsdelivr.yml
@@ -59,6 +59,8 @@ libFiles:
   gitalkJS: gitalk@1.6.2/dist/gitalk.min.js
   # valine@1.4.14 https://valine.js.org/
   valineJS: valine@1.4.14/dist/Valine.min.js
+  # waline@0.15.0 https://waline.js.org/
+  walineJS: "@waline/client@0.15.0/dist/Waline.min.js"
   # cookieconsent@3.1.1 https://github.com/osano/cookieconsent
   cookieconsentCSS: cookieconsent@3.1.1/build/cookieconsent.min.css
   cookieconsentJS: cookieconsent@3.1.1/build/cookieconsent.min.js
diff --git a/assets/js/theme.min.js b/assets/js/theme.min.js
diff --git a/assets/js/theme.min.js.map b/assets/js/theme.min.js.map
diff --git a/assets/lib/VERSION b/assets/lib/VERSION
@@ -23,4 +23,5 @@ aplayer@1.10.1 https://github.com/MoePlayer/APlayer
 meting@2.0.1 https://github.com/metowolf/MetingJS
 gitalk@1.6.2 https://github.com/gitalk/gitalk
 valine@1.4.14 https://valine.js.org/
+waline@0.15.0 https://waline.js.org/
 cookieconsent@3.1.1 https://github.com/osano/cookieconsent
diff --git a/assets/lib/waline/Waline.min.js b/assets/lib/waline/Waline.min.js
diff --git a/assets/lib/waline/Waline.scss b/assets/lib/waline/Waline.scss
@@ -0,0 +1,69 @@
+// ========== Global ========== //
+// Color of the border
+$border-color: #f0f0f0;
+$border-color-dark: #363636;
+
+// ========== Code ========== //
+// Color of the code
+$code-color: #E74C3C !default;
+$code-color-dark: #E5BF78 !default;
+
+// Color of the code background
+$code-background-color: #f5f5f5 !default;
+$code-background-color-dark: #272C34 !default;
+
+@mixin overflow-wrap($value) {
+  word-wrap: $value;
+  overflow-wrap: $value;
+}
+
+@mixin line-break($value) {
+  -webkit-line-break: $value;
+  -ms-line-break: $value;
+  line-break: $value;
+}
+
+@mixin tab-size($value) {
+  -moz-tab-size: $value;
+  -o-tab-size: $value;
+  tab-size: $value;
+}
+
+.v[data-class=v] {
+  .vcards .vcard .vcontent.expand {
+    &::before, &::after {
+      z-index: 50;
+    }
+  }
+
+  .vwrap,
+  .vwrap .vheader .vinput,
+  .vcards .vcard .vh,
+  .vcards .vcard .vquote,
+  blockquote {
+    border-color: $border-color;
+
+    [theme=dark] & {
+      border-color: $border-color-dark;
+    }
+  }
+
+  code, pre, pre code {
+    font-size: 90%;
+    @include overflow-wrap(break-word);
+    @include line-break(anywhere);
+    @include tab-size(4);
+    color: $code-color;
+    background: $code-background-color;
+
+    [theme=dark] & {
+      color: $code-color-dark;
+      background: $code-background-color-dark;
+    }
+  }
+
+  .emoji, .vemoji {
+    max-width: 1.5em;
+    vertical-align: text-bottom;
+  }
+}
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
@@ -869,7 +869,7 @@ enableEmoji = true
       # Valine comment config (https://github.com/xCss/Valine)
       # Valine 评论系统设置 (https://github.com/xCss/Valine)
       [params.page.comment.valine]
-        enable = true
+        enable = false
         appId = "aM7gLUeWp8it1Efrcp3rm8TB-MdYXbMMI"
         appKey = "Xn1xlYj3Fm5gvsYG3WyQpaix"
         placeholder = ""
@@ -893,6 +893,25 @@ enableEmoji = true
         # 可以在你的项目下相同路径存放你自己的数据文件:
         # "assets/data/emoji/"
         emoji = ""
+      # Waline comment config (https://waline.js.org)
+      # Waline 评论系统设置 (https://waline.js.org)
+      [params.page.comment.waline]
+        enable = true
+        serverURL = "https://planet-cloud-comment.vercel.app/"
+        placeholder = "Just Go Go."
+        wordLimit = 0
+        avatar = "mp"
+        meta = ["nick", "mail", "link"]
+        pageSize = 10
+        lang = "en"
+        visitor = true
+        highlight = true
+        avatarCDN = "https://cdn.v2ex.com/gravatar/"
+        avatarForce = false
+        emojiCDN = "https://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/"
+        emojiMaps = "微博表情包"
+        requiredFields = []
+        anonymous = false
       # Facebook comment config (https://developers.facebook.com/docs/plugins/comments)
       # Facebook 评论系统设置 (https://developers.facebook.com/docs/plugins/comments)
       [params.page.comment.facebook]

diff --git a/exampleSite/content/about/index.en.md b/exampleSite/content/about/index.en.md
@@ -53,6 +53,7 @@ math:
 * :(far fa-comment fa-fw): **Disqus** comment system supported by [Disqus](https://disqus.com)
 * :(far fa-comment-dots fa-fw): **Gitalk** comment system supported by [Gitalk](https://github.com/gitalk/gitalk)
 * :(far fa-comment-alt fa-fw): **Valine** comment system supported by [Valine](https://valine.js.org/)
+* :(far fa-comment-alt fa-fw): **Waline** comment system supported by [Waline](https://waline.js.org/)
 * :(far fa-comments fa-fw): **Facebook comments** system supported by [Facebook](https://developers.facebook.com/docs/plugins/comments/)
 * :(fas fa-comment fa-fw): **Telegram comments** system supported by [Comments](https://comments.app/)
 * :(fas fa-comment-dots fa-fw): **Commento** comment system supported by [Commento](https://commento.io/)
@@ -111,4 +112,5 @@ Thanks to the authors of following resources included in the theme:
 * [MetingJS](https://github.com/metowolf/MetingJS)
 * [Gitalk](https://github.com/gitalk/gitalk)
 * [Valine](https://valine.js.org/)
+* [Waline](https://waline.js.org/)
 * [cookieconsent](https://github.com/osano/cookieconsent)
diff --git a/exampleSite/content/about/index.zh-cn.md b/exampleSite/content/about/index.zh-cn.md
@@ -54,6 +54,7 @@ math:
 * :(far fa-comment fa-fw): 支持 **[Disqus](https://disqus.com)** 评论系统
 * :(far fa-comment-dots fa-fw): 支持 **[Gitalk](https://github.com/gitalk/gitalk)** 评论系统
 * :(far fa-comment-alt fa-fw): 支持 **[Valine](https://valine.js.org/)** 评论系统
+* :(far fa-comment-alt fa-fw): 支持 **[Waline](https://waline.js.org/)** 评论系统
 * :(far fa-comments fa-fw): 支持 **[Facebook](https://developers.facebook.com/docs/plugins/comments/) 评论**系统
 * :(fas fa-comment fa-fw): 支持 **[Telegram comments](https://comments.app/) 评论**系统
 * :(fas fa-comment-dots fa-fw): 支持 **[Commento](https://commento.io/)** 评论系统
@@ -112,4 +113,5 @@ DoIt 主题中用到了以下项目，感谢它们的作者：
 * [MetingJS](https://github.com/metowolf/MetingJS)
 * [Gitalk](https://github.com/gitalk/gitalk)
 * [Valine](https://valine.js.org/)
+* [Waline](https://waline.js.org/)
 * [cookieconsent](https://github.com/osano/cookieconsent)
diff --git a/exampleSite/content/posts/theme-documentation-basics/index.en.md b/exampleSite/content/posts/theme-documentation-basics/index.en.md
@@ -537,6 +537,25 @@ Please open the code block below to view the complete sample configuration :(far
         # you can store your own data files in the same path under your project:
         # "assets/data/emoji/"
         emoji = ""
+      # {{< link "https://github.com/xCss/Valine" Waline >}} comment config
+      [params.page.comment.waline]
+        # {{< version 0.2.11 >}}
+        enable = false
+        serverURL = ""
+        placeholder = "Just Go Go."
+        wordLimit = 0
+        avatar = "mp"
+        meta = ["nick", "mail", "link"]
+        pageSize = 10
+        lang = "en"
+        visitor = true
+        highlight = true
+        avatarCDN = "https://cdn.v2ex.com/gravatar/"
+        avatarForce = false
+        emojiCDN = "https://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/"
+        emojiMaps = "微博表情包"
+        requiredFields = []
+        anonymous = false
       # {{< link "https://developers.facebook.com/docs/plugins/comments" "Facebook comment" >}} config
       [params.page.comment.facebook]
         enable = false

diff --git a/exampleSite/content/posts/theme-documentation-basics/index.zh-cn.md b/exampleSite/content/posts/theme-documentation-basics/index.zh-cn.md
@@ -540,6 +540,25 @@ hugo
         # 可以在你的项目下相同路径存放你自己的数据文件:
         # "assets/data/emoji/"
         emoji = ""
+      # {{< link "https://github.com/xCss/Valine" Waline >}} 评论系统设置
+      [params.page.comment.waline]
+        # {{< version 0.2.11 >}}
+        enable = false
+        serverURL = ""
+        placeholder = "Just Go Go."
+        wordLimit = 0
+        avatar = "mp"
+        meta = ["nick", "mail", "link"]
+        pageSize = 10
+        lang = "en"
+        visitor = true
+        highlight = true
+        avatarCDN = "https://cdn.v2ex.com/gravatar/"
+        avatarForce = false
+        emojiCDN = "https://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/"
+        emojiMaps = "微博表情包"
+        requiredFields = []
+        anonymous = false
       # {{< link "https://developers.facebook.com/docs/plugins/comments" "Facebook 评论系统" >}}设置
       [params.page.comment.facebook]
         enable = false

diff --git a/layouts/partials/comment.html b/layouts/partials/comment.html
@@ -57,6 +57,62 @@
             </noscript>
         {{- end -}}
 
+        {{- /* Waline Comment System */ -}}
+        {{- $waline := $comment.waline | default dict -}}
+        {{- if $waline.enable -}}
+            <div id="waline" class="comment"></div>
+            {{- $options := dict "targetPath" "lib/waline/Waline.min.css" -}}
+            {{- dict "Source" "lib/waline/Waline.scss" "ToCSS" $options | dict "Scratch" .Scratch "Data" | partial "scratch/style.html" -}}
+            {{- $source := $cdn.walineJS | default "lib/waline/Waline.min.js" -}}
+            {{- dict "Source" $source "Fingerprint" $fingerprint | dict "Scratch" .Scratch "Data" | partial "scratch/script.html" -}}
+            {{- $commentConfig = dict "el" "#waline" "serverURL" $waline.serverURL | dict "waline" | merge $commentConfig -}}
+            {{- with $waline.placeholder -}}
+                {{- $commentConfig = dict "placeholder" . | dict "waline" | merge $commentConfig -}}
+            {{- end -}}
+            {{- with $waline.wordLimit -}}
+                {{- $commentConfig = dict "wordLimit" . | dict "waline" | merge $commentConfig -}}
+            {{- end -}}
+            {{- with $waline.avatar -}}
+                {{- $commentConfig = dict "avatar" . | dict "waline" | merge $commentConfig -}}
+            {{- end -}}
+            {{- with $waline.meta -}}
+                {{- $commentConfig = dict "meta" . | dict "waline" | merge $commentConfig -}}
+            {{- end -}}
+            {{- with $waline.pageSize -}}
+                {{- $commentConfig = dict "pageSize" . | dict "waline" | merge $commentConfig -}}
+            {{- end -}}
+            {{- with $waline.lang -}}
+                {{- $commentConfig = dict "lang" . | dict "waline" | merge $commentConfig -}}
+            {{- end -}}
+            {{- with $waline.visitor -}}
+                {{- $commentConfig = dict "visitor" . | dict "waline" | merge $commentConfig -}}
+            {{- end -}}
+            {{- with $waline.highlight -}}
+                {{- $commentConfig = dict "highlight" . | dict "waline" | merge $commentConfig -}}
+            {{- end -}}
+            {{- with $waline.avatarCDN -}}
+                {{- $commentConfig = dict "avatarCDN" . | dict "waline" | merge $commentConfig -}}
+            {{- end -}}
+            {{- with $waline.avatarForce -}}
+                {{- $commentConfig = dict "avatarForce" . | dict "waline" | merge $commentConfig -}}
+            {{- end -}}
+            {{- with $waline.emojiCDN -}}
+                {{- $commentConfig = dict "emojiCDN" . | dict "waline" | merge $commentConfig -}}
+            {{- end -}}
+            {{- with $waline.emojiMaps -}}
+                {{- $commentConfig = dict "emojiMaps" . | dict "waline" | merge $commentConfig -}}
+            {{- end -}}
+            {{- with $waline.requiredFields -}}
+                {{- $commentConfig = dict "requiredFields" . | dict "waline" | merge $commentConfig -}}
+            {{- end -}}
+            {{- with $waline.anonymous -}}
+                {{- $commentConfig = dict "anonymous" . | dict "waline" | merge $commentConfig -}}
+            {{- end -}}
+            <noscript>
+                Please enable JavaScript to view the comments powered by <a href="https://waline.js.org/">Waline</a>.
+            </noscript>
+        {{- end -}}
+
         {{- /* Facebook Comment System */ -}}
         {{- $facebook := $comment.facebook | default dict -}}
         {{- if $facebook.enable -}}

diff --git a/layouts/posts/single.html b/layouts/posts/single.html
@@ -60,6 +60,11 @@ <h2 class="single-subtitle">{{ . }}</h2>
                         <i class="far fa-eye fa-fw"></i>&nbsp;<span class=leancloud-visitors-count></span>&nbsp;{{ T "views" }}
                     </span>&nbsp;
                 {{- end -}}
+                {{- if $comment.enable | and $comment.waline.enable | and $comment.waline.visitor -}}
+                    <span id="{{ .RelPermalink }}" class="leancloud_visitors" data-flag-title="{{ .Title }}">
+                        <i class="far fa-eye fa-fw"></i>&nbsp;<span class=leancloud-visitors-count></span>&nbsp;{{ T "views" }}
+                    </span>&nbsp;
+                {{- end -}}
             </div>
         </div>
 

diff --git a/src/js/theme.js b/src/js/theme.js
@@ -640,6 +640,7 @@ class Theme {
                 gitalk.render('gitalk');
             }
             if (this.config.comment.valine) new Valine(this.config.comment.valine);
+            if (this.config.comment.waline) new Waline(this.config.comment.waline);
             if (this.config.comment.utterances) {
                 const utterancesConfig = this.config.comment.utterances;
                 const script = document.createElement('script');