feat(comment): add Telegram Comments support (#180)

2020-03-17 22:39:25 +08:00
parent 6b03c711ac
commit 01d814ef6f
13 changed files with 274 additions and 203 deletions
--- a/README.md
+++ b/README.md
@@ -31,16 +31,17 @@ Compared to the original LeaveIt theme and the KeepIt theme, the LoveIt theme ha
 * More readable **dark mode**
 * Some beautiful **CSS animations**
 * Easy-to-use and self-expanding **table of contents**
+* More **social links**, **share sites** and **comment system**
 * Extended markdown syntax for **[Font Awesome](https://fontawesome.com/) icons**
 * Extended markdown syntax for **ruby annotation**
-* **Mathematical formula** support by [KaTeX](https://katex.org/)
-* **Diagram syntax** shortcode support by [mermaid](https://github.com/knsv/mermaid)
+* **Mathematical formula** supported by [KaTeX](https://katex.org/)
+* **Diagram syntax** shortcode supported by [mermaid](https://github.com/knsv/mermaid)
 * **Interactive data visualization** shortcode supported by [ECharts](https://echarts.apache.org/)
-* Embedded **music player** support by [APlayer](https://github.com/MoePlayer/APlayer) and [MetingJS](https://github.com/metowolf/MetingJS)
-* **Bilibili** player support
-* Kinds of **admonitions** shortcode support
-* Custom style shortcodes support
-* **CDN** for all third-party libraries support
+* Embedded **music player** supported by [APlayer](https://github.com/MoePlayer/APlayer) and [MetingJS](https://github.com/metowolf/MetingJS)
+* **Bilibili** player supported
+* Kinds of **admonitions** shortcode supported
+* Custom style shortcodes supported
+* **CDN** for all third-party libraries supported
 * ...

 In short,
@@ -57,9 +58,9 @@ I hope you will LoveIt ❤️!

 * Optimized for **performance**: 99/100 on mobile and 100/100 on desktop in [Google PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights)
 * Optimized SEO performance with a correct **SEO SCHEMA** based on JSON-LD
-* [**Google Analytics**](https://analytics.google.com/analytics) support
-* Search engine **verification** support (Google, Bind, Yandex and Baidu)
-* **CDN** for third-party libraries support
+* [**Google Analytics**](https://analytics.google.com/analytics) supported
+* Search engine **verification** supported (Google, Bind, Yandex and Baidu)
+* **CDN** for third-party libraries supported
 * Automatically converted images with **Lazy Load** by [lazysizes](https://github.com/aFarkas/lazysizes)

 ### Appearance and Layout
@@ -67,21 +68,22 @@ I hope you will LoveIt ❤️!
 * **Responsive** layout
 * **Dark/Light** mode
 * Globally consistent **design language**
-* **Pagination** support
+* **Pagination** supported
 * Easy-to-use and self-expanding **table of contents**
-* **Multilanguage** support and i18n ready
+* **Multilanguage** supported and i18n ready
 * Beautiful **CSS animation**

 ### Social and Comment Systems

 * **Gravatar** supported by [Gravatar](https://gravatar.com)
-* Local **Avatar** support
-* Up to **61** social sites supported
-* Up to **28** share sites support
+* Local **Avatar** supported
+* Up to **61** social links supported
+* Up to **28** share sites supported
 * **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/)
 * **Facebook comments** system supported by [Facebook](https://developers.facebook.com/docs/plugins/comments/)
+* **Telegram Comments** system supported by [Comments](https://comments.app/)

 ### Extended Features

--- a/README.zh-cn.md
+++ b/README.zh-cn.md
@@ -30,6 +30,7 @@
 * 可读性更强的**暗黑模式**
 * 一些美观的 **CSS 动画**
 * 易用和自动展开的**文章目录**
+* 支持更多的**社交链接**、**网站分享**和**评论系统**
 * 支持基于 **[Font Awesome](https://fontawesome.com/) 图标**的扩展 Markdown 语法
 * 支持**上标注释**的扩展 Markdown 语法
 * 支持基于 [KaTeX](https://katex.org/) 的**数学公式**
@@ -77,6 +78,7 @@
 * 支持 **[Gitalk](https://github.com/gitalk/gitalk)** 评论系统
 * 支持 **[Valine](https://valine.js.org/)** 评论系统
 * 支持 **[Facebook](https://developers.facebook.com/docs/plugins/comments/) 评论**系统
+* 支持 **[Telegram Comments](https://comments.app/) 评论**系统

 ### 扩展功能

--- a/assets/css/_page/_single.scss
+++ b/assets/css/_page/_single.scss
@@ -301,11 +301,6 @@
    .version {
      font-weight: bold;
      font-style: normal;
-      color: $global-highlight-color;
-
-      .dark-theme & {
-        color: $global-highlight-color-dark;
-      }
    }
  }

--- a/assets/css/_variables.scss
+++ b/assets/css/_variables.scss
@@ -32,10 +32,6 @@ $global-link-hover-color-dark: #fff !default;
 // Color of the border
 $global-border-color: #dcdcdc !default;
 $global-border-color-dark: #4a4b50 !default;
-
-// Color of the highlight
-$global-highlight-color: #df1a08 !default;
-$global-highlight-color-dark: #fff !default;
 // ========== Global ========== //

 // ========== Scrollbar ========== //
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -249,6 +249,16 @@ enableEmoji = true
          numPosts = 10
          appId = ""
          languageCode = "en_US"
+        # Telegram Comments Config (https://comments.app/)
+        [languages.en.params.comment.telegram]
+          enable = false
+          siteID = ""
+          limit = 5
+          height = ""
+          color = ""
+          colorful = true
+          dislikes = false
+          outlined = false

  [languages.zh-cn]
    weight = 2
@@ -473,6 +483,16 @@ enableEmoji = true
          numPosts = 10
          appId = ""
          languageCode = "zh_CN"
+        # Telegram Comments 评论系统设置 (https://comments.app/)
+        [languages.zh-cn.params.comment.telegram]
+          enable = false
+          siteID = ""
+          limit = 5
+          height = ""
+          color = ""
+          colorful = true
+          dislikes = false
+          outlined = false

  [languages.fr]
    weight = 3
@@ -697,6 +717,16 @@ enableEmoji = true
          numPosts = 10
          appId = ""
          languageCode = "fr"
+        # Telegram Comments Config (https://comments.app/)
+        [languages.fr.params.comment.telegram]
+          enable = false
+          siteID = ""
+          limit = 5
+          height = ""
+          color = ""
+          colorful = true
+          dislikes = false
+          outlined = false

 [params]
  # LoveIt theme version
--- a/exampleSite/content/about.en.md
+++ b/exampleSite/content/about.en.md
@@ -25,9 +25,9 @@ It is based on the original [LeaveIt Theme](https://github.com/liuzc/LeaveIt/) a

 * :(fas fa-rocket): Optimized for **performance**: 99/100 on mobile and 100/100 on desktop in [Google PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights)
 * :(fab fa-searchengin): Optimized SEO performance with a correct **SEO SCHEMA** based on JSON-LD
-* :(fab fa-google): [**Google Analytics**](https://analytics.google.com/analytics) support
-* :(fas fa-search): Search engine **verification** support (Google, Bind, Yandex and Baidu)
-* :(fas fa-tachometer-alt): **CDN** for third-party libraries support
+* :(fab fa-google): [**Google Analytics**](https://analytics.google.com/analytics) supported
+* :(fas fa-search): Search engine **verification** supported (Google, Bind, Yandex and Baidu)
+* :(fas fa-tachometer-alt): **CDN** for third-party libraries supported
 * :(fas fa-cloud-download-alt): Automatically converted images with **Lazy Load** by [lazysizes](https://github.com/aFarkas/lazysizes)

 #### Appearance and Layout
@@ -35,21 +35,22 @@ It is based on the original [LeaveIt Theme](https://github.com/liuzc/LeaveIt/) a
 * :(fas fa-desktop): / :(fas fa-mobile): **Responsive** layout
 * :(fas fa-moon): / :(fas fa-sun): **Dark/Light** mode
 * :(fas fa-layer-group): Globally consistent **design language**
-* :(fas fa-ellipsis-h): **Pagination** support
+* :(fas fa-ellipsis-h): **Pagination** supported
 * :(far fa-list-alt): Easy-to-use and self-expanding **table of contents**
-* :(fas fa-language): **Multilanguage** support and i18n ready
+* :(fas fa-language): **Multilanguage** supported and i18n ready
 * :(fab fa-css3-alt): Beautiful **CSS animation**

 #### Social and Comment Systems

 * :(far fa-user): **Gravatar** supported by [Gravatar](https://gravatar.com)
-* :(fas fa-user-circle): Local **Avatar** support
-* :(far fa-id-card): Up to **61** social sites supported
-* :(fas fa-share-square): Up to **28** share sites support
+* :(fas fa-user-circle): Local **Avatar** supported
+* :(far fa-id-card): Up to **61** social links supported
+* :(fas fa-share-square): Up to **28** share sites supported
 * :(far fa-comment): **Disqus** comment system supported by [Disqus](https://disqus.com)
 * :(far fa-comment-dots): **Gitalk** comment system supported by [Gitalk](https://github.com/gitalk/gitalk)
 * :(far fa-comment-alt): **Valine** comment system supported by [Valine](https://valine.js.org/)
 * :(far fa-comments): **Facebook comments** system supported by [Facebook](https://developers.facebook.com/docs/plugins/comments/)
+* :(fas fa-comments): **Telegram Comments** system supported by [Comments](https://comments.app/)

 #### Extended Features

--- a/exampleSite/content/about.fr.md
+++ b/exampleSite/content/about.fr.md
@@ -30,9 +30,9 @@ It is based on the original [LeaveIt Theme](https://github.com/liuzc/LeaveIt/) a

 * :(fas fa-rocket): Optimized for **performance**: 99/100 on mobile and 100/100 on desktop in [Google PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights)
 * :(fab fa-searchengin): Optimized SEO performance with a correct **SEO SCHEMA** based on JSON-LD
-* :(fab fa-google): [**Google Analytics**](https://analytics.google.com/analytics) support
-* :(fas fa-search): Search engine **verification** support (Google, Bind, Yandex and Baidu)
-* :(fas fa-tachometer-alt): **CDN** for third-party libraries support
+* :(fab fa-google): [**Google Analytics**](https://analytics.google.com/analytics) supported
+* :(fas fa-search): Search engine **verification** supported (Google, Bind, Yandex and Baidu)
+* :(fas fa-tachometer-alt): **CDN** for third-party libraries supported
 * :(fas fa-cloud-download-alt): Automatically converted images with **Lazy Load** by [lazysizes](https://github.com/aFarkas/lazysizes)

 #### Appearance and Layout
@@ -40,21 +40,22 @@ It is based on the original [LeaveIt Theme](https://github.com/liuzc/LeaveIt/) a
 * :(fas fa-desktop): / :(fas fa-mobile): **Responsive** layout
 * :(fas fa-moon): / :(fas fa-sun): **Dark/Light** mode
 * :(fas fa-layer-group): Globally consistent **design language**
-* :(fas fa-ellipsis-h): **Pagination** support
+* :(fas fa-ellipsis-h): **Pagination** supported
 * :(far fa-list-alt): Easy-to-use and self-expanding **table of contents**
-* :(fas fa-language): **Multilanguage** support and i18n ready
+* :(fas fa-language): **Multilanguage** supported and i18n ready
 * :(fab fa-css3-alt): Beautiful **CSS animation**

 #### Social and Comment Systems

 * :(far fa-user): **Gravatar** supported by [Gravatar](https://gravatar.com)
-* :(fas fa-user-circle): Local **Avatar** support
-* :(far fa-id-card): Up to **61** social sites supported
-* :(fas fa-share-square): Up to **28** share sites support
+* :(fas fa-user-circle): Local **Avatar** supported
+* :(far fa-id-card): Up to **61** social links supported
+* :(fas fa-share-square): Up to **28** share sites supported
 * :(far fa-comment): **Disqus** comment system supported by [Disqus](https://disqus.com)
 * :(far fa-comment-dots): **Gitalk** comment system supported by [Gitalk](https://github.com/gitalk/gitalk)
 * :(far fa-comment-alt): **Valine** comment system supported by [Valine](https://valine.js.org/)
 * :(far fa-comments): **Facebook comments** system supported by [Facebook](https://developers.facebook.com/docs/plugins/comments/)
+* :(fas fa-comments): **Telegram Comments** system supported by [Comments](https://comments.app/)

 #### Extended Features

--- a/exampleSite/content/about.zh-cn.md
+++ b/exampleSite/content/about.zh-cn.md
@@ -50,6 +50,7 @@ lightgallery: true
 * :(far fa-comment-dots): 支持 **[Gitalk](https://github.com/gitalk/gitalk)** 评论系统
 * :(far fa-comment-alt): 支持 **[Valine](https://valine.js.org/)** 评论系统
 * :(far fa-comments): 支持 **[Facebook](https://developers.facebook.com/docs/plugins/comments/) 评论**系统
+* :(fas fa-comments): 支持 **[Telegram Comments](https://comments.app/) 评论**系统

 #### 扩展功能

--- a/exampleSite/content/posts/theme-documentation-basics.en.md
+++ b/exampleSite/content/posts/theme-documentation-basics.en.md
@@ -385,6 +385,17 @@ Note that some of these parameters are explained in details in other sections of
      numPosts = 10
      appId = ""
      languageCode = "en_US"
+    # {{< version 0.2.0 >}}
+    # {{< link "https://comments.app/" "Telegram Comments" >}} Config
+    [params.comment.telegram]
+      enable = false
+      siteID = ""
+      limit = 5
+      height = ""
+      color = ""
+      colorful = true
+      dislikes = false
+      outlined = false

  # site verification code for Google/Bing/Yandex/Pinterest/Baidu
  [params.verification]
--- a/exampleSite/content/posts/theme-documentation-basics.fr.md
+++ b/exampleSite/content/posts/theme-documentation-basics.fr.md
@@ -390,6 +390,17 @@ Note that some of these parameters are explained in details in other sections of
      numPosts = 10
      appId = ""
      languageCode = "en_US"
+    # {{< version 0.2.0 >}}
+    # {{< link "https://comments.app/" "Telegram Comments" >}} Config
+    [params.comment.telegram]
+      enable = false
+      siteID = ""
+      limit = 5
+      height = ""
+      color = ""
+      colorful = true
+      dislikes = false
+      outlined = false

  # site verification code for Google/Bing/Yandex/Pinterest/Baidu
  [params.verification]
--- a/exampleSite/content/posts/theme-documentation-basics.zh-cn.md
+++ b/exampleSite/content/posts/theme-documentation-basics.zh-cn.md
@@ -386,7 +386,18 @@ hugo
      width = "100%"
      numPosts = 10
      appId = ""
-      languageCode = "en_US"
+      languageCode = "zh_CN"
+    # {{< version 0.2.0 >}}
+    # {{< link "https://comments.app/" "Telegram Comments" >}} 评论系统设置
+    [params.comment.telegram]
+      enable = false
+      siteID = ""
+      limit = 5
+      height = ""
+      color = ""
+      colorful = true
+      dislikes = false
+      outlined = false

  # 网站验证代码，用于 Google/Bing/Yandex/Pinterest/Baidu
  [params.verification]
--- a/layouts/partials/comment.html
+++ b/layouts/partials/comment.html
@@ -113,4 +113,14 @@
            Please enable JavaScript to view the <a href="https://developers.facebook.com/docs/plugins/comments/">comments powered by Facebook.</a>
        </noscript>
    {{- end -}}
+
+    {{- /* Telegram Comments System */ -}}
+    {{- if .Site.Params.comment.telegram.enable -}}
+        {{- $telegram := .Site.Params.comment.telegram -}}
+        <div id="telegram-comments" class="comment"></div>
+        <script async src="https://comments.app/js/widget.js?2" data-comments-app-website="{{ $telegram.siteID }}" data-limit="{{ $telegram.limit | default 5 }}"{{ with $telegram.height }} data-height="{{ . }}"{{ end }}{{ with $telegram.color }} data-color="{{ . }}"{{ end }}{{ if $telegram.colorful }} data-colorful="1"{{ end }}{{ if $telegram.dislikes }} data-dislikes="1"{{ end }}{{ if $telegram.outlined }} data-outlined="1"{{ end }}></script>
+        <noscript>
+            Please enable JavaScript to view the <a href="https://comments.app/">comments powered by Telegram Comments.</a>
+        </noscript>
+    {{- end -}}
 {{- end -}}
--- a/resources/_gen/assets/scss/css/style.template.scss_90197bdac482216ecaaaae0fb88517c1.content
+++ b/resources/_gen/assets/scss/css/style.template.scss_90197bdac482216ecaaaae0fb88517c1.content