From 31e7e9d5b63d1810ae8c316fc2412bb92a95946f Mon Sep 17 00:00:00 2001
From: dharmx <dharmx.dev@gmail.com>
Date: Sun, 23 Jul 2023 03:59:19 +0530
Subject: [PATCH] chore: added reactions and changed colors

Signed-off-by: dharmx <dharmx.dev@gmail.com>
---
 assets/css/_custom.scss       |    1 +
 assets/css/_single.scss       |    7 -
 assets/css/_sponsor.scss      |    6 +
 assets/lib/waline/waline.css  | 1354 +++++++++++++++++++++++++++++++++
 config/_default/params.toml   |   13 +-
 layouts/partials/comment.html |  372 +++++++++
 6 files changed, 1744 insertions(+), 9 deletions(-)
 create mode 100644 assets/css/_sponsor.scss
 create mode 100644 assets/lib/waline/waline.css
 create mode 100644 layouts/partials/comment.html

diff --git a/assets/css/_custom.scss b/assets/css/_custom.scss
index b4342e8..5c014fb 100644
--- a/assets/css/_custom.scss
+++ b/assets/css/_custom.scss
@@ -2,3 +2,4 @@
 @import "_fonts";
 @import "_summary";
 @import "_single";
+@import "_sponsor";
diff --git a/assets/css/_single.scss b/assets/css/_single.scss
index 6305d1a..b765039 100644
--- a/assets/css/_single.scss
+++ b/assets/css/_single.scss
@@ -3,10 +3,3 @@
     font-style: normal;
   }
 }
-
-.sponsor-bio {
-  em {
-    font-style: unset;
-    color: $global-font-secondary-color-dark;
-  }
-}
diff --git a/assets/css/_sponsor.scss b/assets/css/_sponsor.scss
new file mode 100644
index 0000000..7fa457a
--- /dev/null
+++ b/assets/css/_sponsor.scss
@@ -0,0 +1,6 @@
+.sponsor-bio {
+  em {
+    font-style: unset;
+    color: $global-font-secondary-color-dark;
+  }
+}
diff --git a/assets/lib/waline/waline.css b/assets/lib/waline/waline.css
new file mode 100644
index 0000000..d25534c
--- /dev/null
+++ b/assets/lib/waline/waline.css
@@ -0,0 +1,1354 @@
+:root {
+  --waline-font-size: 1rem;
+  --waline-white: #fff;
+  --waline-light-grey: #999;
+  --waline-dark-grey: #666;
+  --waline-theme-color: #5fb0fc;
+  --waline-active-color: #79afdf;
+  --waline-color: #444;
+  --waline-bgcolor: #fff;
+  --waline-bgcolor-light: #f8f8f8;
+  --waline-bgcolor-hover: #f0f0f0;
+  --waline-border-color: #41484e;
+  --waline-disable-bgcolor: #f8f8f8;
+  --waline-disable-color: #000;
+  --waline-code-bgcolor: #282c34;
+  --waline-bq-color: #f0f0f0;
+  --waline-avatar-size: 3.25rem;
+  --waline-m-avatar-size: calc(var(--waline-avatar-size) * 9 / 13);
+  --waline-badge-color: #3498db;
+  --waline-badge-font-size: 0.75em;
+  --waline-info-bgcolor: #f8f8f8;
+  --waline-info-color: #999;
+  --waline-info-font-size: 0.625em;
+  --waline-border: 1px solid var(--waline-border-color);
+  --waline-avatar-radius: 50%;
+  --waline-box-shadow: none
+}
+
+[data-waline] {
+  font-size: var(--waline-font-size);
+  text-align: start
+}
+
+[dir=rtl] [data-waline] {
+  direction: rtl
+}
+
+[data-waline] * {
+  box-sizing: content-box;
+  line-height: 1.75
+}
+
+[data-waline] p {
+  color: var(--waline-color)
+}
+
+[data-waline] a {
+  position: relative;
+  display: inline-block;
+  color: var(--waline-theme-color);
+  text-decoration: none;
+  word-break: break-word;
+  cursor: pointer
+}
+
+[data-waline] a:hover {
+  color: var(--waline-active-color)
+}
+
+[data-waline] img {
+  max-width: 100%;
+  max-height: 400px;
+  border: none
+}
+
+[data-waline] hr {
+  margin: .825em 0;
+  border-style: dashed;
+  border-color: var(--waline-bgcolor-light)
+}
+
+[data-waline] code,
+[data-waline] pre {
+  margin: 0;
+  padding: .2em .4em;
+  border-radius: 3px;
+  background: var(--waline-bgcolor-light);
+  font-size: 85%
+}
+
+[data-waline] pre {
+  overflow: auto;
+  padding: 10px;
+  line-height: 1.45
+}
+
+[data-waline] pre::-webkit-scrollbar {
+  width: 6px;
+  height: 6px
+}
+
+[data-waline] pre::-webkit-scrollbar-track-piece:horizontal {
+  -webkit-border-radius: 6px;
+  border-radius: 6px;
+  background: rgba(0, 0, 0, .1)
+}
+
+[data-waline] pre::-webkit-scrollbar-thumb:horizontal {
+  width: 6px;
+  -webkit-border-radius: 6px;
+  border-radius: 6px;
+  background: var(--waline-theme-color)
+}
+
+[data-waline] pre code {
+  padding: 0;
+  background: rgba(0, 0, 0, 0);
+  color: var(--waline-color);
+  white-space: pre-wrap;
+  word-break: keep-all
+}
+
+[data-waline] blockquote {
+  margin: .5em 0;
+  padding: .5em 0 .5em 1em;
+  border-inline-start: 8px solid var(--waline-bq-color);
+  color: var(--waline-dark-grey)
+}
+
+[data-waline] blockquote>p {
+  margin: 0
+}
+
+[data-waline] ol,
+[data-waline] ul {
+  margin-inline-start: 1.25em;
+  padding: 0
+}
+
+[data-waline] input[type=checkbox],
+[data-waline] input[type=radio] {
+  display: inline-block;
+  vertical-align: middle;
+  margin-top: -2px
+}
+
+.wl-btn {
+  display: inline-block;
+  vertical-align: middle;
+  min-width: 2.5em;
+  margin-bottom: 0;
+  padding: .5em 1em;
+  border: 1px solid var(--waline-border-color);
+  border-radius: .5em;
+  background: rgba(0, 0, 0, 0);
+  color: var(--waline-color);
+  font-weight: 400;
+  font-size: .75em;
+  line-height: 1.5;
+  text-align: center;
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  transition-duration: .4s;
+  touch-action: manipulation
+}
+
+.wl-btn:hover,
+.wl-btn:active {
+  border-color: var(--waline-theme-color);
+  color: var(--waline-theme-color)
+}
+
+.wl-btn:disabled {
+  border-color: var(--waline-border-color);
+  background: var(--waline-disable-bgcolor);
+  color: var(--waline-disable-color);
+  cursor: not-allowed
+}
+
+.wl-btn.primary {
+  border-color: var(--waline-theme-color);
+  background: var(--waline-theme-color);
+  color: var(--waline-white)
+}
+
+.wl-btn.primary:hover,
+.wl-btn.primary:active {
+  border-color: var(--waline-active-color);
+  background: var(--waline-active-color);
+  color: var(--waline-white)
+}
+
+.wl-btn.primary:disabled {
+  border-color: var(--waline-border-color);
+  background: var(--waline-disable-bgcolor);
+  color: var(--waline-disable-color);
+  cursor: not-allowed
+}
+
+.wl-loading {
+  text-align: center
+}
+
+.wl-loading svg {
+  margin: 0 auto
+}
+
+.wl-comment {
+  position: relative;
+  display: flex;
+  margin-bottom: .75em
+}
+
+.wl-close {
+  position: absolute;
+  top: -4px;
+  inset-inline-end: -4px;
+  padding: 0;
+  border: none;
+  background: rgba(0, 0, 0, 0);
+  line-height: 1;
+  cursor: pointer
+}
+
+.wl-login-info {
+  max-width: 80px;
+  margin-top: .75em;
+  text-align: center
+}
+
+.wl-logout-btn {
+  position: absolute;
+  top: -10px;
+  inset-inline-end: -10px;
+  padding: 3px;
+  border: none;
+  background: rgba(0, 0, 0, 0);
+  line-height: 0;
+  cursor: pointer
+}
+
+.wl-avatar {
+  position: relative;
+  width: var(--waline-avatar-size);
+  height: var(--waline-avatar-size);
+  margin: 0 auto;
+  border: var(--waline-border);
+  border-radius: var(--waline-avatar-radius)
+}
+
+@media(max-width: 720px) {
+  .wl-avatar {
+    width: var(--waline-m-avatar-size);
+    height: var(--waline-m-avatar-size)
+  }
+}
+
+.wl-avatar img {
+  width: 100%;
+  height: 100%;
+  border-radius: var(--waline-avatar-radius)
+}
+
+.wl-login-nick {
+  display: block;
+  color: var(--waline-theme-color);
+  font-size: .75em;
+  word-break: break-all
+}
+
+.wl-panel {
+  position: relative;
+  flex-shrink: 1;
+  width: 100%;
+  margin: .5em;
+  border: var(--waline-border);
+  border-radius: .75em;
+  background: none;
+  box-shadow: var(--waline-box-shadow)
+}
+
+.wl-header {
+  display: flex;
+  overflow: hidden;
+  padding: 0 4px;
+  border-bottom: 2px dashed var(--waline-border-color);
+  border-top-left-radius: .75em;
+  border-top-right-radius: .75em
+}
+
+@media(max-width: 580px) {
+  .wl-header {
+    display: block
+  }
+}
+
+.wl-header label {
+  min-width: 40px;
+  padding: .75em .5em;
+  color: var(--waline-color);
+  font-size: .75em;
+  text-align: center
+}
+
+.wl-header input {
+  flex: 1;
+  width: 0;
+  padding: .5em;
+  background: rgba(0, 0, 0, 0);
+  font-size: .625em;
+  resize: none
+}
+
+.wl-header-item {
+  display: flex;
+  flex: 1
+}
+
+@media(max-width: 580px) {
+  .wl-header-item:not(:last-child) {
+    border-bottom: 2px dashed var(--waline-border-color)
+  }
+}
+
+.wl-header-1 .wl-header-item {
+  width: 100%
+}
+
+.wl-header-2 .wl-header-item {
+  width: 50%
+}
+
+@media(max-width: 580px) {
+  .wl-header-2 .wl-header-item {
+    flex: 0;
+    width: 100%
+  }
+}
+
+.wl-header-3 .wl-header-item {
+  width: 33.33%
+}
+
+@media(max-width: 580px) {
+  .wl-header-3 .wl-header-item {
+    width: 100%
+  }
+}
+
+.wl-editor {
+  position: relative;
+  width: calc(100% - 1em);
+  min-height: 8.75em;
+  margin: .75em .5em;
+  border-radius: .5em;
+  background: rgba(0, 0, 0, 0);
+  font-size: .875em;
+  resize: vertical
+}
+
+.wl-editor,
+.wl-input {
+  max-width: 100%;
+  border: none;
+  color: var(--waline-color);
+  outline: none;
+  transition: all .25s ease
+}
+
+.wl-editor:focus,
+.wl-input:focus {
+  background: var(--waline-bgcolor-light)
+}
+
+.wl-preview {
+  padding: 0 .5em .5em
+}
+
+.wl-preview h4 {
+  margin: .25em;
+  font-weight: bold;
+  font-size: .9375em
+}
+
+.wl-preview .wl-content {
+  min-height: 1.25em;
+  padding: .25em;
+  word-break: break-word;
+  hyphens: auto
+}
+
+.wl-preview .wl-content>*:first-child {
+  margin-top: 0
+}
+
+.wl-preview .wl-content>*:last-child {
+  margin-bottom: 0
+}
+
+.wl-footer {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  margin: .5em .75em
+}
+
+.wl-actions {
+  display: flex;
+  flex: 2;
+  align-items: center
+}
+
+.wl-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5em;
+  height: 1.5em;
+  margin: 2px;
+  padding: 0;
+  border: none;
+  background: rgba(0, 0, 0, 0);
+  color: var(--waline-color);
+  font-size: 16px;
+  cursor: pointer
+}
+
+.wl-action:hover {
+  color: var(--waline-theme-color)
+}
+
+.wl-action.active {
+  color: var(--waline-active-color)
+}
+
+#wl-image-upload {
+  display: none
+}
+
+#wl-image-upload:focus+label {
+  color: var(--waline-color)
+}
+
+#wl-image-upload:focus-visible+label {
+  outline: -webkit-focus-ring-color auto 1px
+}
+
+.wl-info {
+  display: flex;
+  flex: 3;
+  align-items: center;
+  justify-content: flex-end
+}
+
+.wl-info .wl-text-number {
+  color: var(--waline-info-color);
+  font-size: .75em
+}
+
+.wl-info .wl-text-number .illegal {
+  color: red
+}
+
+.wl-info button {
+  margin-inline-start: .75em
+}
+
+.wl-info button svg {
+  display: block;
+  margin: 0 auto;
+  line-height: 18px
+}
+
+.wl-emoji-popup {
+  position: absolute;
+  top: 100%;
+  inset-inline-start: 1.25em;
+  z-index: 10;
+  max-width: 526px;
+  border: var(--waline-border);
+  border-radius: 6px;
+  background: var(--waline-bgcolor);
+  box-shadow: var(--waline-box-shadow);
+  opacity: 0;
+  visibility: hidden;
+  transition: transform .2s ease-out, opacity .2s ease-out;
+  transform: scale(0.9, 0.9);
+  transform-origin: 0 0
+}
+
+.wl-emoji-popup.display {
+  opacity: 1;
+  visibility: visible;
+  transform: none
+}
+
+.wl-emoji-popup button {
+  display: inline-block;
+  vertical-align: middle;
+  width: 2em;
+  margin: .125em;
+  padding: 0;
+  border-width: 0;
+  background: rgba(0, 0, 0, 0);
+  font-size: inherit;
+  line-height: 2;
+  text-align: center;
+  cursor: pointer
+}
+
+.wl-emoji-popup button:hover {
+  background: var(--waline-bgcolor-hover)
+}
+
+.wl-emoji-popup .wl-emoji {
+  display: inline-block;
+  vertical-align: middle;
+  max-width: 1.5em;
+  max-height: 1.5em
+}
+
+.wl-emoji-popup .wl-tab-wrapper {
+  overflow-y: auto;
+  max-height: 145px;
+  padding: .5em
+}
+
+.wl-emoji-popup .wl-tab-wrapper::-webkit-scrollbar {
+  width: 6px;
+  height: 6px
+}
+
+.wl-emoji-popup .wl-tab-wrapper::-webkit-scrollbar-track-piece:vertical {
+  -webkit-border-radius: 6px;
+  border-radius: 6px;
+  background: rgba(0, 0, 0, .1)
+}
+
+.wl-emoji-popup .wl-tab-wrapper::-webkit-scrollbar-thumb:vertical {
+  width: 6px;
+  -webkit-border-radius: 6px;
+  border-radius: 6px;
+  background: var(--waline-theme-color)
+}
+
+.wl-emoji-popup .wl-tabs {
+  position: relative;
+  overflow-x: auto;
+  padding: 0 6px;
+  white-space: nowrap
+}
+
+.wl-emoji-popup .wl-tabs::before {
+  content: " ";
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 2;
+  height: 1px;
+  background: var(--waline-border-color)
+}
+
+.wl-emoji-popup .wl-tabs::-webkit-scrollbar {
+  width: 6px;
+  height: 6px
+}
+
+.wl-emoji-popup .wl-tabs::-webkit-scrollbar-track-piece:horizontal {
+  -webkit-border-radius: 6px;
+  border-radius: 6px;
+  background: rgba(0, 0, 0, .1)
+}
+
+.wl-emoji-popup .wl-tabs::-webkit-scrollbar-thumb:horizontal {
+  height: 6px;
+  -webkit-border-radius: 6px;
+  border-radius: 6px;
+  background: var(--waline-theme-color)
+}
+
+.wl-emoji-popup .wl-tab {
+  position: relative;
+  margin: 0;
+  padding: 0 .5em
+}
+
+.wl-emoji-popup .wl-tab.active {
+  z-index: 3;
+  border: 1px solid var(--waline-border-color);
+  border-top-width: 0;
+  border-bottom-right-radius: 6px;
+  border-bottom-left-radius: 6px;
+  background: var(--waline-bgcolor)
+}
+
+.wl-gif-popup {
+  position: absolute;
+  top: 100%;
+  inset-inline-start: 1.25em;
+  z-index: 10;
+  width: calc(100% - 3em);
+  padding: .75em .75em .25em;
+  border: var(--waline-border);
+  border-radius: 6px;
+  background: var(--waline-bgcolor);
+  box-shadow: var(--waline-box-shadow);
+  opacity: 0;
+  visibility: hidden;
+  transition: transform .2s ease-out, opacity .2s ease-out;
+  transform: scale(0.9, 0.9);
+  transform-origin: 0 0
+}
+
+.wl-gif-popup.display {
+  opacity: 1;
+  visibility: visible;
+  transform: none
+}
+
+.wl-gif-popup input {
+  box-sizing: border-box;
+  width: 100%;
+  margin-bottom: 10px;
+  padding: 3px 5px;
+  border: var(--waline-border)
+}
+
+.wl-gif-popup img {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  border-width: 2px;
+  border-style: solid;
+  border-color: #fff;
+  cursor: pointer
+}
+
+.wl-gif-popup img:hover {
+  border-color: var(--waline-theme-color);
+  border-radius: 2px
+}
+
+.wl-gallery {
+  display: flex;
+  overflow-y: auto;
+  max-height: 80vh
+}
+
+.wl-gallery-column {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  height: -webkit-max-content;
+  height: -moz-max-content;
+  height: max-content
+}
+
+.wl-cards .wl-user {
+  --avatar-size: var(--waline-avatar-size);
+  position: relative;
+  margin-inline-end: .75em
+}
+
+@media(max-width: 720px) {
+  .wl-cards .wl-user {
+    --avatar-size: var(--waline-m-avatar-size)
+  }
+}
+
+.wl-cards .wl-user img {
+  width: var(--avatar-size);
+  height: var(--avatar-size);
+  border-radius: var(--waline-avatar-radius);
+  box-shadow: var(--waline-box-shadow)
+}
+
+.wl-cards .wl-user .verified-icon {
+  position: absolute;
+  top: calc(var(--avatar-size)*3/4);
+  inset-inline-start: calc(var(--avatar-size)*3/4);
+  border-radius: 50%;
+  background: var(--waline-bgcolor);
+  box-shadow: var(--waline-box-shadow)
+}
+
+.wl-card-item {
+  position: relative;
+  display: flex;
+  padding: .5em
+}
+
+.wl-card-item .wl-card-item {
+  padding-inline-end: 0
+}
+
+.wl-card {
+  flex: 1;
+  width: 0;
+  padding-bottom: .5em;
+  border-bottom: 1px dashed var(--waline-border-color)
+}
+
+.wl-card:first-child {
+  margin-inline-start: 1em
+}
+
+.wl-card-item:last-child>.wl-card {
+  border-bottom: none
+}
+
+.wl-card .wl-nick svg {
+  position: relative;
+  bottom: -0.125em;
+  line-height: 1
+}
+
+.wl-card .wl-head {
+  overflow: hidden;
+  line-height: 1.5
+}
+
+.wl-card .wl-head .wl-nick {
+  position: relative;
+  display: inline-block;
+  margin-inline-end: .5em;
+  font-weight: bold;
+  font-size: .875em;
+  line-height: 1;
+  text-decoration: none
+}
+
+.wl-card span.wl-nick {
+  color: var(--waline-dark-grey)
+}
+
+.wl-card .wl-badge {
+  display: inline-block;
+  margin-inline-end: 1em;
+  padding: 0 .3em;
+  border: 1px solid var(--waline-badge-color);
+  border-radius: 4px;
+  color: var(--waline-badge-color);
+  font-size: var(--waline-badge-font-size)
+}
+
+.wl-card .wl-time {
+  margin-inline-end: .875em;
+  color: var(--waline-info-color);
+  font-size: .75em
+}
+
+.wl-card .wl-meta {
+  position: relative;
+  line-height: 1
+}
+
+.wl-card .wl-meta>span {
+  display: inline-block;
+  margin-inline-end: .25em;
+  padding: 2px 4px;
+  border-radius: .2em;
+  background: var(--waline-info-bgcolor);
+  color: var(--waline-info-color);
+  font-size: var(--waline-info-font-size);
+  line-height: 1.5
+}
+
+.wl-card .wl-meta>span:empty {
+  display: none
+}
+
+.wl-card .wl-comment-actions {
+  float: right;
+  line-height: 1
+}
+
+[dir=rtl] .wl-card .wl-comment-actions {
+  float: left
+}
+
+.wl-card .wl-delete,
+.wl-card .wl-like,
+.wl-card .wl-reply,
+.wl-card .wl-edit {
+  display: inline-flex;
+  align-items: center;
+  border: none;
+  background: rgba(0, 0, 0, 0);
+  color: var(--waline-color);
+  line-height: 1;
+  cursor: pointer;
+  transition: color .2s ease
+}
+
+.wl-card .wl-delete:hover,
+.wl-card .wl-like:hover,
+.wl-card .wl-reply:hover,
+.wl-card .wl-edit:hover {
+  color: var(--waline-theme-color)
+}
+
+.wl-card .wl-delete.active,
+.wl-card .wl-like.active,
+.wl-card .wl-reply.active,
+.wl-card .wl-edit.active {
+  color: var(--waline-active-color)
+}
+
+.wl-card .wl-content {
+  position: relative;
+  margin-bottom: .75em;
+  padding-top: .625em;
+  font-size: .875em;
+  line-height: 2;
+  word-wrap: break-word
+}
+
+.wl-card .wl-content.expand {
+  overflow: hidden;
+  max-height: 8em;
+  cursor: pointer
+}
+
+.wl-card .wl-content.expand::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 3.15em;
+  inset-inline-start: 0;
+  z-index: 999;
+  display: block;
+  width: 100%;
+  background: linear-gradient(180deg, #000, rgba(255, 255, 255, 0.9))
+}
+
+.wl-card .wl-content.expand::after {
+  content: attr(data-expand);
+  position: absolute;
+  bottom: 0;
+  inset-inline-start: 0;
+  z-index: 999;
+  display: block;
+  width: 100%;
+  height: 3.15em;
+  background: rgba(255, 255, 255, .9);
+  color: #828586;
+  line-height: 3.15em;
+  text-align: center
+}
+
+.wl-card .wl-content>*:first-child {
+  margin-top: 0
+}
+
+.wl-card .wl-content>*:last-child {
+  margin-bottom: 0
+}
+
+.wl-card .wl-admin-actions {
+  margin: 8px 0;
+  font-size: 12px;
+  text-align: right
+}
+
+.wl-card .wl-comment-status {
+  margin: 0 8px
+}
+
+.wl-card .wl-comment-status .wl-btn {
+  border-radius: 0
+}
+
+.wl-card .wl-comment-status .wl-btn:first-child {
+  border-inline-end: 0;
+  border-radius: .5em 0 0 .5em
+}
+
+.wl-card .wl-comment-status .wl-btn:last-child {
+  border-inline-start: 0;
+  border-radius: 0 .5em .5em 0
+}
+
+.wl-card .wl-quote {
+  border-inline-start: 1px dashed rgba(237, 237, 237, .5)
+}
+
+.wl-card .wl-quote .wl-user {
+  --avatar-size: var(--waline-m-avatar-size)
+}
+
+.wl-close-icon {
+  color: var(--waline-border-color)
+}
+
+.wl-content .vemoji,
+.wl-content .wl-emoji {
+  display: inline-block;
+  vertical-align: baseline;
+  height: 1.25em;
+  margin: -0.125em .25em
+}
+
+.wl-content .wl-tex {
+  background: var(--waline-info-bgcolor);
+  color: var(--waline-info-color)
+}
+
+.wl-content span.wl-tex {
+  display: inline-block;
+  margin-inline-end: .25em;
+  padding: 2px 4px;
+  border-radius: .2em;
+  font-size: var(--waline-info-font-size);
+  line-height: 1.5
+}
+
+.wl-content p.wl-tex {
+  text-align: center
+}
+
+.wl-content .katex-display {
+  overflow: auto hidden;
+  -webkit-overflow-scrolling: touch;
+  padding-top: .2em;
+  padding-bottom: .2em
+}
+
+.wl-content .katex-display::-webkit-scrollbar {
+  height: 3px
+}
+
+.wl-content .katex-error {
+  color: red
+}
+
+.wl-count {
+  flex: 1;
+  font-weight: bold;
+  font-size: 1.25em
+}
+
+.wl-empty {
+  overflow: auto;
+  padding: 1.25em;
+  color: var(--waline-color);
+  text-align: center
+}
+
+.wl-operation {
+  text-align: center
+}
+
+.wl-operation button {
+  margin: 1em 0
+}
+
+.wl-power {
+  padding: .5em 0;
+  color: var(--waline-light-grey);
+  font-size: var(--waline-info-font-size);
+  text-align: end
+}
+
+.wl-meta-head {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: .375em
+}
+
+.wl-sort {
+  margin: 0;
+  list-style-type: none
+}
+
+.wl-sort li {
+  display: inline-block;
+  color: var(--waline-info-color);
+  font-size: .75em;
+  cursor: pointer
+}
+
+.wl-sort li.active {
+  color: var(--waline-theme-color)
+}
+
+.wl-sort li+li {
+  margin-inline-start: 1em
+}
+
+.wl-reaction {
+  overflow: auto hidden;
+  margin-bottom: 1.75em;
+  text-align: center
+}
+
+.wl-reaction img {
+  width: 100%;
+  height: 100%;
+  transition: all 250ms ease-in-out
+}
+
+.wl-reaction-title {
+  margin: 16px auto;
+  font-weight: bold;
+  font-size: 18px
+}
+
+.wl-reaction-list {
+  display: flex;
+  flex-direction: row;
+  gap: 16px;
+  justify-content: center;
+  margin: 0;
+  padding: 8px;
+  list-style-type: none
+}
+
+@media(max-width: 580px) {
+  .wl-reaction-list {
+    gap: 12px
+  }
+}
+
+[data-waline] .wl-reaction-list {
+  margin-inline-start: 0
+}
+
+.wl-reaction-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer
+}
+
+.wl-reaction-item:hover img,
+.wl-reaction-item.active img {
+  transform: scale(1.15)
+}
+
+.wl-reaction-img {
+  position: relative;
+  width: 42px;
+  height: 42px
+}
+
+@media(max-width: 580px) {
+  .wl-reaction-img {
+    width: 32px;
+    height: 32px
+  }
+}
+
+.wl-reaction-loading {
+  position: absolute;
+  top: -4px;
+  inset-inline-end: -5px;
+  width: 18px;
+  height: 18px;
+  color: var(--waline-theme-color)
+}
+
+.wl-reaction-votes {
+  position: absolute;
+  top: -9px;
+  inset-inline-end: -9px;
+  min-width: 1em;
+  padding: 2px;
+  border: 1px solid var(--waline-theme-color);
+  border-radius: 1em;
+  background: var(--waline-bgcolor);
+  color: var(--waline-theme-color);
+  font-weight: 700;
+  font-size: .75em;
+  line-height: 1
+}
+
+.wl-reaction-item.active .wl-reaction-votes {
+  background: var(--waline-theme-color);
+  color: var(--waline-bgcolor)
+}
+
+.wl-reaction-text {
+  font-size: .875em
+}
+
+.wl-reaction-item.active .wl-reaction-text {
+  color: var(--waline-theme-color)
+}
+
+.wl-content pre,
+.wl-content pre[class*=language-] {
+  overflow: auto;
+  margin: .75rem 0;
+  padding: 1rem 1.25rem;
+  border-radius: 6px;
+  background: var(--waline-code-bgcolor);
+  line-height: 1.4
+}
+
+.wl-content pre code,
+.wl-content pre[class*=language-] code {
+  padding: 0;
+  border-radius: 0;
+  background: rgba(0, 0, 0, 0) !important;
+  color: #bbb;
+  direction: ltr
+}
+
+.wl-content code[class*=language-],
+.wl-content pre[class*=language-] {
+  background: none;
+  color: #ccc;
+  font-size: 1em;
+  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-wrap: normal;
+  word-break: normal;
+  tab-size: 4;
+  hyphens: none
+}
+
+.wl-content pre[class*=language-] {
+  overflow: auto
+}
+
+.wl-content :not(pre)>code[class*=language-],
+.wl-content pre[class*=language-] {
+  background: #2d2d2d
+}
+
+.wl-content :not(pre)>code[class*=language-] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal
+}
+
+.wl-content .token.comment,
+.wl-content .token.block-comment,
+.wl-content .token.prolog,
+.wl-content .token.doctype,
+.wl-content .token.cdata {
+  color: #999
+}
+
+.wl-content .token.punctuation {
+  color: #ccc
+}
+
+.wl-content .token.tag,
+.wl-content .token.attr-name,
+.wl-content .token.namespace,
+.wl-content .token.deleted {
+  color: #e2777a
+}
+
+.wl-content .token.function-name {
+  color: #6196cc
+}
+
+.wl-content .token.boolean,
+.wl-content .token.number,
+.wl-content .token.function {
+  color: #f08d49
+}
+
+.wl-content .token.property,
+.wl-content .token.class-name,
+.wl-content .token.constant,
+.wl-content .token.symbol {
+  color: #f8c555
+}
+
+.wl-content .token.selector,
+.wl-content .token.important,
+.wl-content .token.atrule,
+.wl-content .token.keyword,
+.wl-content .token.builtin {
+  color: #cc99cd
+}
+
+.wl-content .token.string,
+.wl-content .token.char,
+.wl-content .token.attr-value,
+.wl-content .token.regex,
+.wl-content .token.variable {
+  color: #7ec699
+}
+
+.wl-content .token.operator,
+.wl-content .token.entity,
+.wl-content .token.url {
+  color: #67cdcc
+}
+
+.wl-content .token.important,
+.wl-content .token.bold {
+  font-weight: bold
+}
+
+.wl-content .token.italic {
+  font-style: italic
+}
+
+.wl-content .token.entity {
+  cursor: help
+}
+
+.wl-content .token.inserted {
+  color: green
+}
+
+.wl-recent-item p {
+  display: inline
+}
+
+.wl-user-list {
+  padding: 0;
+  list-style: none
+}
+
+.wl-user-list a,
+.wl-user-list a:hover,
+.wl-user-list a:visited {
+  color: var(--waline-color);
+  text-decoration: none
+}
+
+.wl-user-list .wl-user-avatar {
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+  margin-inline-end: 10px;
+  border-radius: 4px;
+  line-height: 0
+}
+
+.wl-user-list .wl-user-avatar>img {
+  width: var(--waline-user-avatar-size, 48px);
+  height: var(--waline-user-avatar-size, 48px)
+}
+
+.wl-user-list .wl-user-badge {
+  position: absolute;
+  bottom: 0;
+  inset-inline-end: 0;
+  min-width: .7em;
+  height: 1.5em;
+  padding: 0 .4em;
+  border-radius: 4px;
+  background: var(--waline-info-bgcolor);
+  color: var(--waline-info-color);
+  font-weight: bold;
+  font-size: 10px;
+  line-height: 1.5em;
+  text-align: center
+}
+
+.wl-user-list .wl-user-item {
+  margin: 10px 0
+}
+
+.wl-user-list .wl-user-item:nth-child(1) .wl-user-badge {
+  background: var(--waline-rank-gold-bgcolor, #fa3939);
+  color: var(--waline-white);
+  font-weight: bold
+}
+
+.wl-user-list .wl-user-item:nth-child(2) .wl-user-badge {
+  background: var(--waline-rank-silver-bgcolor, #fb811c);
+  color: var(--waline-white);
+  font-weight: bold
+}
+
+.wl-user-list .wl-user-item:nth-child(3) .wl-user-badge {
+  background: var(--waline-rank-copper-bgcolor, #feb207);
+  color: var(--waline-white)
+}
+
+.wl-user-list .wl-user-meta {
+  display: inline-block;
+  vertical-align: top
+}
+
+.wl-user-list .wl-badge {
+  display: inline-block;
+  vertical-align: text-top;
+  margin-inline-start: .5em;
+  padding: 0 .3em;
+  border: 1px solid var(--waline-badge-color);
+  border-radius: 4px;
+  color: var(--waline-badge-color);
+  font-size: var(--waline-badge-font-size)
+}
+
+.wl-user-wall {
+  padding: 0;
+  list-style: none
+}
+
+.wl-user-wall .wl-user-badge,
+.wl-user-wall .wl-user-meta {
+  display: none
+}
+
+.wl-user-wall .wl-user-item {
+  position: relative;
+  display: inline-block;
+  transition: transform ease-in-out .2s
+}
+
+.wl-user-wall .wl-user-item::before,
+.wl-user-wall .wl-user-item::after {
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  z-index: 10;
+  opacity: 0;
+  pointer-events: none;
+  transition: all .18s ease-out .18s;
+  transform: translate(-50%, 4px);
+  transform-origin: top
+}
+
+.wl-user-wall .wl-user-item::before {
+  content: "";
+  width: 0;
+  height: 0;
+  border: 5px solid rgba(0, 0, 0, 0);
+  border-top-color: rgba(16, 16, 16, .95)
+}
+
+.wl-user-wall .wl-user-item::after {
+  content: attr(aria-label);
+  margin-bottom: 10px;
+  padding: .5em 1em;
+  border-radius: 2px;
+  background: rgba(16, 16, 16, .95);
+  color: #fff;
+  font-size: 12px;
+  white-space: nowrap
+}
+
+.wl-user-wall .wl-user-item:hover {
+  transform: scale(1.1)
+}
+
+.wl-user-wall .wl-user-item:hover::before,
+.wl-user-wall .wl-user-item:hover::after {
+  opacity: 1;
+  pointer-events: none;
+  transform: translate(-50%, 0)
+}
+
+.wl-user-wall .wl-user-item img {
+  width: var(--waline-user-avatar-size, 48px);
+  height: var(--waline-user-avatar-size, 48px)
+}
+
+/*# sourceMappingURL=waline.css.map */
diff --git a/config/_default/params.toml b/config/_default/params.toml
index db87dd3..5003758 100644
--- a/config/_default/params.toml
+++ b/config/_default/params.toml
@@ -152,9 +152,18 @@ enable = true
 serverURL = "https://waline-dharmx.vercel.app"
 pageview = true
 comment = true
-emoji = ['https://cdn.jsdelivr.net/gh/walinejs/emojis/weibo']
-meta = ['dharmx', 'dharmx.dev@gmail.com', 'https://dharmx.is-a.dev']
+emoji = [
+  "https://unpkg.com/@waline/emojis@1.1.0/tw-emoji",
+  "https://cdn.jsdelivr.net/gh/walinejs/emojis/weibo",
+  "https://unpkg.com/@waline/emojis@1.1.0/alus",
+  "https://unpkg.com/@waline/emojis@1.1.0/bmoji",
+  "https://unpkg.com/@waline/emojis@1.1.0/bilibili",
+  "https://unpkg.com/@waline/emojis@1.1.0/qq",
+  "https://unpkg.com/@waline/emojis@1.1.0/tieba"
+]
+meta = []
 requiredMeta = []
+reaction = true
 login = 'enable'
 wordLimit = 0
 pageSize = 10
diff --git a/layouts/partials/comment.html b/layouts/partials/comment.html
new file mode 100644
index 0000000..34c339d
--- /dev/null
+++ b/layouts/partials/comment.html
@@ -0,0 +1,372 @@
+{{- $cdn := .Scratch.Get "cdn" | default dict -}}
+{{- $fingerprint := .Scratch.Get "fingerprint" -}}
+{{- $comment := .Scratch.Get "comment" | default dict -}}
+{{- $commentConfig := dict -}}
+
+{{- if $comment.enable -}}
+    <div id="comments">
+        {{- /* Disqus Comment System */ -}}
+        {{- $disqus := $comment.disqus | default dict -}}
+        {{- if $disqus.enable -}}
+            <div id="disqus_thread" class="comment"></div>
+            {{- $source := printf "https://%v.disqus.com/embed.js" $disqus.shortname -}}
+            {{- dict "Source" $source "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/commentScript.html" -}}
+            <noscript>
+                Please enable JavaScript to view the comments powered by <a href="https://disqus.com/?ref_noscript">Disqus</a>.
+            </noscript>
+        {{- end -}}
+
+        {{- /* Gitalk Comment System */ -}}
+        {{- $gitalk := $comment.gitalk | default dict -}}
+        {{- if $gitalk.enable -}}
+            <div id="gitalk" class="comment"></div>
+            {{- $source := $cdn.gitalkCSS | default "lib/gitalk/gitalk.css" -}}
+            {{- dict "Source" $source "Minify" true "Fingerprint" $fingerprint | dict "Scratch" .Scratch "Data" | partial "scratch/style.html" -}}
+            {{- $source := $cdn.gitalkJS | default "lib/gitalk/gitalk.min.js" -}}
+            {{- dict "Source" $source "Fingerprint" $fingerprint | dict "Scratch" .Scratch "Data" | partial "scratch/commentScript.html" -}}
+            {{- $commentConfig = dict "id" .Date "title" .Title "clientID" $gitalk.clientId "clientSecret" $gitalk.clientSecret "repo" $gitalk.repo "owner" $gitalk.owner "admin" (slice $gitalk.owner) | dict "gitalk" | merge $commentConfig -}}
+            {{- with $gitalk.proxy -}}
+                {{- $commentConfig = dict "proxy" . | dict "gitalk" | merge $commentConfig -}}
+            {{- end -}}
+            {{- $options := dict "targetPath" "js/gitalk.min.js" "minify" true -}}
+            {{- $js := resources.Get "js/lib/gitalk.js" | js.Build $options -}}
+            {{- $_ := $js.RelPermalink -}}
+            {{- dict "Link" $js.RelPermalink "Fingerprint" $fingerprint "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/commentScript.html" -}}
+            <noscript>
+                Please enable JavaScript to view the comments powered by <a href="https://github.com/gitalk/gitalk"></a>Gitalk</a>.
+            </noscript>
+        {{- end -}}
+
+        {{- /* Valine Comment System */ -}}
+        {{- $valine := $comment.valine | default dict -}}
+        {{- if $valine.enable -}}
+            <div id="valine" class="comment"></div>
+            {{- $options := dict "targetPath" "lib/valine/valine.min.css" -}}
+            {{- dict "Source" "lib/valine/Valine.scss" "ToCSS" $options | dict "Scratch" .Scratch "Data" | partial "scratch/style.html" -}}
+            {{- $commentConfig = dict "el" "#valine" "appId" $valine.appId "appKey" $valine.appKey "lang" ($valine.lang | default (T "valineLang")) "visitor" $valine.visitor "recordIP" $valine.recordIP "placeholder" ($valine.placeholder | default (T "valinePlaceholder")) "highlight" (ne $valine.highlight false) "enableQQ" $valine.enableQQ | dict "valine" | merge $commentConfig -}}
+            {{- with $valine.avatar -}}
+                {{- $commentConfig = dict "avatar" . | dict "valine" | merge $commentConfig -}}
+            {{- end -}}
+            {{- with $valine.meta -}}
+                {{- $commentConfig = dict "meta" . | dict "valine" | merge $commentConfig -}}
+            {{- end -}}
+            {{- with $valine.pageSize -}}
+                {{- $commentConfig = dict "pageSize" . | dict "valine" | merge $commentConfig -}}
+            {{- end -}}
+            {{- with $valine.serverURLs -}}
+                {{- $commentConfig = dict "serverURLs" . | dict "valine" | merge $commentConfig -}}
+            {{- end -}}
+            {{- $commentConfig = $valine.emoji | default "google.yml" | printf "data/emoji/%v" | resources.Get | transform.Unmarshal | dict "valine" | merge $commentConfig -}}
+            {{- $shims := dict "valine" "js/shims/valine.js" -}}
+            {{- $options := dict -}}
+            {{- $source := $cdn.valineJS | default "lib/valine/Valine.min.js" -}}
+            {{- dict "Source" $source "Fingerprint" $fingerprint "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/commentScript.html" -}}
+            {{- $options = dict "shims" $shims | merge $options -}}
+            {{- $options = dict "targetPath" "js/valine.min.js" | merge $options -}}
+            {{- $options = dict "minify" true | merge $options -}}
+            {{- $js := resources.Get "js/lib/valine.js" | js.Build $options -}}
+            {{- $_ := $js.RelPermalink -}}
+            {{- dict "Link" $js.RelPermalink "Fingerprint" $fingerprint "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/commentScript.html" -}}
+            <noscript>
+                Please enable JavaScript to view the comments powered by <a href="https://valine.js.org/">Valine</a>.
+            </noscript>
+        {{- end -}}
+
+        {{- /* Waline Comment System */ -}}
+        {{- $waline := $comment.waline | default dict -}}
+        {{- if $waline.enable -}}
+            <div id="waline" class="comment"></div>
+            {{- $source := $cdn.walineCSS | default "lib/waline/waline.css" -}}
+            {{- dict "Source" $source "Minify" true "Fingerprint" $fingerprint | dict "Scratch" .Scratch "Data" | partial "scratch/style.html" -}}
+            {{- $commentConfig = dict "el" "#waline" "serverURL" $waline.serverURL "lang" .Lang "dark" "body[theme='dark'], body[theme='black']" "copyright" true | dict "waline" | merge $commentConfig -}}
+            {{- with $waline.pageview -}}
+                {{- $commentConfig = dict "pageview" . | dict "waline" | merge $commentConfig -}}
+            {{- end -}}
+            {{- with $waline.reaction -}}
+                {{- $commentConfig = dict "reaction" . | dict "waline" | merge $commentConfig -}}
+            {{- end -}}
+            {{- with $waline.comment -}}
+                {{- $commentConfig = dict "comment" . | dict "waline" | merge $commentConfig -}}
+            {{- end -}}
+            {{- with $waline.emoji -}}
+                {{- $commentConfig = dict "emoji" . | dict "waline" | merge $commentConfig -}}
+            {{- end -}}
+            {{- with $waline.meta -}}
+                {{- $commentConfig = dict "meta" . | dict "waline" | merge $commentConfig -}}
+            {{- end -}}
+            {{- with $waline.requiredMeta -}}
+                {{- $commentConfig = dict "requiredMeta" . | dict "waline" | merge $commentConfig -}}
+            {{- end -}}
+            {{- with $waline.login -}}
+                {{- $commentConfig = dict "login" . | dict "waline" | merge $commentConfig -}}
+            {{- end -}}
+            {{- with $waline.wordLimit -}}
+                {{- $commentConfig = dict "wordLimit" . | dict "waline" | merge $commentConfig -}}
+            {{- end -}}
+            {{- with $waline.pageSize -}}
+                {{- $commentConfig = dict "pageSize" . | dict "waline" | merge $commentConfig -}}
+            {{- end -}}
+            {{- if eq $waline.imageUploader false -}}
+                {{- $commentConfig = dict "imageUploader" false | dict "waline" | merge $commentConfig -}}
+            {{- end -}}
+            {{- if eq $waline.highlighter false -}}
+                {{- $commentConfig = dict "highlighter" false | dict "waline" | merge $commentConfig -}}
+            {{- end -}}
+            {{- if eq $waline.texRenderer false -}}
+                {{- $commentConfig = dict "texRenderer" false | dict "waline" | merge $commentConfig -}}
+            {{- end -}}
+            {{- $shims := dict "@waline/client" "js/shims/waline.js" -}}
+            {{- $options := dict -}}
+            {{- $source := $cdn.walineJS | default "lib/waline/waline.js" -}}
+            {{- dict "Source" $source "Fingerprint" $fingerprint "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/commentScript.html" -}}
+            {{- $options = dict "shims" $shims | merge $options -}}
+            {{- $options = dict "targetPath" "js/waline.min.js" | merge $options -}}
+            {{- $options = dict "minify" true | merge $options -}}
+            {{- $js := resources.Get "js/lib/waline.js" | js.Build $options -}}
+            {{- $_ := $js.RelPermalink -}}
+            {{- dict "Link" $js.RelPermalink "Fingerprint" $fingerprint "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/commentScript.html" -}}
+            <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 -}}
+            <div id="fb-root" class="comment"></div>
+            <div
+                class="fb-comments"
+                data-href="{{ .Permalink }}"
+                data-width="{{ $facebook.width }}"
+                data-numposts="{{ $facebook.numPosts }}"
+            ></div>
+            {{- $source := printf "https://connect.facebook.net/%v/sdk.js#xfbml=1&version=v5.0&appId=%v&autoLogAppEvents=1" ($facebook.languageCode | default (T "facebookLanguageCode")) $facebook.appId -}}
+            {{- dict "Source" $source "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/commentScript.html" -}}
+            <noscript>
+                Please enable JavaScript to view the comments powered by <a href="https://developers.facebook.com/docs/plugins/comments/"></a>Facebook</a>.
+            </noscript>
+        {{- end -}}
+
+        {{- /* Telegram Comments System */ -}}
+        {{- $telegram := $comment.telegram | default dict -}}
+        {{- if $telegram.enable -}}
+            <div id="telegram-comments" class="comment">
+            {{- $attr := printf `data-comments-app-website="%v"` $telegram.siteID -}}
+            {{- $attr = printf `%v data-limit="%v"` $attr ($telegram.limit | default 5) -}}
+            {{- with $telegram.height -}}
+                {{- $attr = printf `%v data-height="%v"` $attr . -}}
+            {{- end -}}
+            {{- with $telegram.color -}}
+                {{- $attr = printf `%v data-color="%v"` $attr . -}}
+            {{- end -}}
+            {{- if $telegram.colorful -}}
+                {{- $attr = printf `%v data-colorful="1"` $attr -}}
+            {{- end -}}
+            {{- if $telegram.dislikes -}}
+                {{- $attr = printf `%v data-dislikes="1"` $attr -}}
+            {{- end -}}
+            {{- if $telegram.outlined -}}
+                {{- $attr = printf `%v data-outlined="1"` $attr -}}
+            {{- end -}}
+            {{- if $telegram.dark -}}
+                {{- $attr = printf `%v data-dark="1"` $attr -}}
+            {{- end -}}
+            <script type="text/javascript" src="https://comments.app/js/widget.js?3" defer {{ with $attr }} {{ . | safeHTMLAttr }}{{ end }}></script>
+            <noscript>
+                Please enable JavaScript to view the comments powered by <a href="https://comments.app/">Telegram Comments</a>.
+            </noscript>
+            </div>
+        {{- end -}}
+
+        {{- /* Commento Comment System */ -}}
+        {{- $commento := $comment.commento | default dict -}}
+        {{- if $commento.enable -}}
+            <div id="commento"></div>
+            {{- dict "Source" "https://cdn.commento.io/js/commento.js" "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/commentScript.html" -}}
+            <noscript>
+                Please enable JavaScript to view the comments powered by <a href="https://commento.io/">Commento</a>.
+            </noscript>
+        {{- end -}}
+
+        {{- /* Utterances Comment System */ -}}
+        {{- $utterances := $comment.utterances | default dict -}}
+        {{- if $utterances.enable -}}
+            <div id="utterances"></div>
+            {{- $commentConfig = dict "repo" $utterances.repo | dict "utterances" | merge $commentConfig -}}
+            {{- $commentConfig = $utterances.issueTerm | default "pathname" | dict "issueTerm" | dict "utterances" | merge $commentConfig -}}
+            {{- $commentConfig = dict "label" $utterances.label | dict "utterances" | merge $commentConfig -}}
+            {{- $commentConfig = $utterances.lightTheme | default "github-light" | dict "lightTheme" | dict "utterances" | merge $commentConfig -}}
+            {{- $commentConfig = $utterances.darkTheme | default "github-dark" | dict "darkTheme" | dict "utterances" | merge $commentConfig -}}
+            {{- $options := dict "targetPath" "js/utterances.min.js" "minify" true -}}
+            {{- $js := resources.Get "js/lib/utterances.js" | js.Build $options -}}
+            {{- $_ := $js.RelPermalink -}}
+            {{- dict "Link" $js.RelPermalink "Fingerprint" $fingerprint "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/commentScript.html" -}}
+            <noscript>
+                Please enable JavaScript to view the comments powered by <a href="https://utteranc.es/">Utterances</a>.
+            </noscript>
+        {{- end -}}
+
+        {{- /* Twikoo Comment System */ -}}
+        {{- $twikoo := $comment.twikoo | default dict -}}
+        {{- if $twikoo.enable -}}
+            <div id="twikoo"></div>
+            {{- $shims := dict "twikoo" "js/shims/twikoo.js" -}}
+            {{- $options := dict -}}
+            {{- $options = dict "targetPath" "js/twikoo.min.js" | merge $options -}}
+            {{- $options = dict "minify" true | merge $options -}}
+            {{- if eq $twikoo.cloudbase false -}}
+                {{- $source := $cdn.twikooJS | default "lib/twikoo/twikoo.min.js" -}}
+                {{- dict "Source" $source "Fingerprint" $fingerprint "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/commentScript.html" -}}
+            {{- else -}}
+                {{- $source := $cdn.twikooAllJS | default "lib/twikoo/twikoo.all.min.js" -}}
+                {{- dict "Source" $source "Fingerprint" $fingerprint "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/commentScript.html" -}}
+            {{- end -}}
+            {{- $options = dict "shims" $shims | merge $options -}}
+            {{- $js := resources.Get "js/lib/twikoo.js" | js.Build $options -}}
+            {{- dict "Link" $js.RelPermalink "Fingerprint" $fingerprint "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/commentScript.html" -}}
+            {{- $commentConfig = dict "el" "#twikoo" "envId" $twikoo.envId | dict "twikoo" | merge $commentConfig -}}
+            {{- $commentConfig = dict "lang" .Lang | dict "twikoo" | merge $commentConfig -}}
+            {{- with $twikoo.region -}}
+                {{- $commentConfig = dict "region" . | dict "twikoo" | merge $commentConfig -}}
+            {{- end -}}
+            {{- with $twikoo.path -}}
+                {{- $commentConfig = dict "path" . | dict "twikoo" | merge $commentConfig -}}
+            {{- end -}}
+            {{- with $twikoo.commentCount -}}
+                {{- $commentConfig = dict "commentCount" . | dict "twikoo" | merge $commentConfig -}}
+            {{- end -}}
+            <noscript>
+                Please enable JavaScript to view the comments powered by <a href="https://twikoo.js.org/">Twikoo</a>.
+            </noscript>
+        {{- end -}}
+
+        {{- /* Vssue Comment System */ -}}
+        {{- $vssue := $comment.vssue | default dict -}}
+        {{- if $vssue.enable -}}
+            <div id="vssue"></div>
+                {{- $source := $cdn.vssueCSS | default "lib/vssue/vssue.min.css" -}}
+                {{- dict "Source" $source "Minify" true "Fingerprint" $fingerprint | dict "Scratch" .Scratch "Data" | partial "scratch/style.html" -}}
+                {{- $source := $cdn.vueRuntimeJS | default "lib/vue/vue.runtime.min.js" -}}
+                {{- dict "Source" $source "Fingerprint" $fingerprint | dict "Scratch" .Scratch "Data" | partial "scratch/commentScript.html" -}}
+                {{- if eq $vssue.platform "bitbucket" -}}
+                    {{- $source := $cdn.vssueBitbucketJS | default "lib/vssue/vssue.bitbucket.min.js" -}}
+                    {{- dict "Source" $source "Fingerprint" $fingerprint | dict "Scratch" .Scratch "Data" | partial "scratch/commentScript.html" -}}
+                {{- else if eq $vssue.platform "gitea" -}}
+                    {{- $source := $cdn.vssueGiteaJS | default "lib/vssue/vssue.gitea.min.js" -}}
+                    {{- dict "Source" $source "Fingerprint" $fingerprint | dict "Scratch" .Scratch "Data" | partial "scratch/commentScript.html" -}}
+                {{- else if eq $vssue.platform "gitee" -}}
+                    {{- $source := $cdn.vssueGiteeJS | default "lib/vssue/vssue.gitee.min.js" -}}
+                    {{- dict "Source" $source "Fingerprint" $fingerprint | dict "Scratch" .Scratch "Data" | partial "scratch/commentScript.html" -}}
+                {{- else if eq $vssue.platform "github" -}}
+                    {{- $source := $cdn.vssueGithubJS | default "lib/vssue/vssue.github.min.js" -}}
+                    {{- dict "Source" $source "Fingerprint" $fingerprint | dict "Scratch" .Scratch "Data" | partial "scratch/commentScript.html" -}}
+                {{- else if eq $vssue.platform "gitlab" -}}
+                    {{- $source := $cdn.vssueGitlabJS | default "lib/vssue/vssue.gitlab.min.js" -}}
+                    {{- dict "Source" $source "Fingerprint" $fingerprint | dict "Scratch" .Scratch "Data" | partial "scratch/commentScript.html" -}}
+                {{- end -}}
+                {{- $commentConfig = dict "el" "#vssue" "title" .Title | dict "vssue" | merge $commentConfig -}}
+                {{- with $vssue.owner -}}
+                    {{- $commentConfig = dict "owner" . | dict "vssue" | merge $commentConfig -}}
+                {{- end -}}
+                {{- with $vssue.repo -}}
+                    {{- $commentConfig = dict "repo" . | dict "vssue" | merge $commentConfig -}}
+                {{- end -}}
+                {{- with $vssue.clientId -}}
+                    {{- $commentConfig = dict "clientId" . | dict "vssue" | merge $commentConfig -}}
+                {{- end -}}
+                {{- with $vssue.clientSecret -}}
+                    {{- $commentConfig = dict "clientSecret" . | dict "vssue" | merge $commentConfig -}}
+                {{- end -}}
+                {{- $options := dict "targetPath" "js/vssue.min.js" "minify" true -}}
+                {{- $js := resources.Get "js/lib/vssue.js" | js.Build $options -}}
+                {{- $_ := $js.RelPermalink -}}
+                {{- dict "Link" $js.RelPermalink "Fingerprint" $fingerprint "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/commentScript.html" -}}
+            <noscript>
+                Please enable JavaScript to view the comments powered by <a href="https://vssue.js.org/">Vssue</a>.
+            </noscript>
+        {{- end -}}
+
+        {{- /* Remark42 Comment System */ -}}
+        {{- $remark42 := $comment.remark42 | default dict -}}
+        {{- if $remark42.enable -}}
+            <div id="remark42"></div>
+            {{- $commentConfig = dict "host" $remark42.host "site_id" $remark42.site_id "locale" .Lang  | dict "remark42" | merge $commentConfig -}}
+            {{- with $remark42.max_shown_comments -}}
+                {{- $commentConfig = dict "max_shown_comments" . | dict "remark42" | merge $commentConfig -}}
+            {{- end -}}
+            {{- with $remark42.show_email_subscription -}}
+                {{- $commentConfig = dict "show_email_subscription" . | dict "remark42" | merge $commentConfig -}}
+            {{- end -}}
+            {{- with $remark42.simple_view -}}
+                {{- $commentConfig = dict "simple_view" . | dict "remark42" | merge $commentConfig -}}
+            {{- end -}}
+            {{- $options := dict "targetPath" "js/remark42.min.js" "minify" true -}}
+            {{- $js := resources.Get "js/lib/remark42.js" | js.Build $options -}}
+            {{- $_ := $js.RelPermalink -}}
+            {{- dict "Link" $js.RelPermalink "Fingerprint" $fingerprint "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/commentScript.html" -}}
+            <noscript>
+                Please enable JavaScript to view the comments powered by <a href="https://remark42.com/">Remark42</a>.
+            </noscript>
+        {{- end -}}
+
+        {{- /* giscus Comment System */ -}}
+        {{- $giscus := $comment.giscus | default dict -}}
+        {{- if $giscus.enable -}}
+            <div id="giscus"></div>
+            {{- $commentConfig = dict "dataRepo" $giscus.dataRepo | dict "giscus" | merge $commentConfig -}}
+            {{- $commentConfig = dict "dataRepoId" $giscus.dataRepoId | dict "giscus" | merge $commentConfig -}}
+            {{- $commentConfig = dict "dataCategory" $giscus.dataCategory | dict "giscus" | merge $commentConfig -}}
+            {{- $commentConfig = dict "dataCategoryId" $giscus.dataCategoryId | dict "giscus" | merge $commentConfig -}}
+            {{- $commentConfig = $giscus.dataMapping | default "pathname" | dict "dataMapping" | dict "giscus" | merge $commentConfig -}}
+            {{- $commentConfig = $giscus.dataStrict | default "0" | dict "dataStrict" | dict "giscus" | merge $commentConfig -}}
+            {{- $commentConfig = $giscus.dataReactionsEnabled | default "1" | dict "dataReactionsEnabled" | dict "giscus" | merge $commentConfig -}}
+            {{- $commentConfig = $giscus.dataEmitMetadata | default "0" | dict "dataEmitMetadata" | dict "giscus" | merge $commentConfig -}}
+            {{- $commentConfig = $giscus.dataInputPosition | default "bottom" | dict "dataInputPosition" | dict "giscus" | merge $commentConfig -}}
+            {{- $commentConfig = $giscus.lightTheme | default "light" | dict "lightTheme" | dict "giscus" | merge $commentConfig -}}
+            {{- $commentConfig = $giscus.darkTheme | default "dark" | dict "darkTheme" | dict "giscus" | merge $commentConfig -}}
+            {{- $commentConfig = $giscus.dataLang | default "en" | dict "dataLang" | dict "giscus" | merge $commentConfig -}}
+            {{- $options := dict "targetPath" "js/giscus.min.js" "minify" true -}}
+            {{- $js := resources.Get "js/lib/giscus.js" | js.Build $options -}}
+            {{- $_ := $js.RelPermalink -}}
+            {{- dict "Link" $js.RelPermalink "Fingerprint" $fingerprint "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/commentScript.html" -}}
+            <noscript>
+                Please enable JavaScript to view the comments powered by <a href="https://giscus.app/">giscus</a>.
+            </noscript>
+        {{- end -}}
+
+        {{/*  Artalk Comment System  */}}
+        {{- $artalk := $comment.artalk | default dict -}}
+        {{- if $artalk.enable -}}
+            <div id="artalk"></div>
+            {{ if $artalk.lite }}
+                {{- $source := $cdn.artalkLiteJS | default "lib/artalk/ArtalkLite.js" -}}
+                {{- dict "Source" $source "Fingerprint" $fingerprint "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/commentScript.html" -}}
+                {{- $source := $cdn.artalkLiteCSS | default "lib/artalk/ArtalkLite.css" -}}
+                {{- dict "Source" $source "Minify" true "Fingerprint" $fingerprint | dict "Scratch" .Scratch "Data" | partial "scratch/style.html" -}}
+            {{ else }}
+                {{- $source := $cdn.artalkJS | default "lib/artalk/Artalk.js" -}}
+                {{- dict "Source" $source "Fingerprint" $fingerprint "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/commentScript.html" -}}
+                {{- $source := $cdn.artalkCSS | default "lib/artalk/Artalk.css" -}}
+                {{- dict "Source" $source "Minify" true "Fingerprint" $fingerprint | dict "Scratch" .Scratch "Data" | partial "scratch/style.html" -}}
+            {{ end }}
+            {{ if $artalk.katex }}
+                {{- $source := $cdn.artalkPluginKaTeXJS | default "lib/artalk/artalk-plugin-katex.js" -}}
+                {{- dict "Source" $source "Fingerprint" $fingerprint "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/commentScript.html" -}}
+            {{ end }}
+            {{- if $artalk.lightbox -}}
+                {{- $source := $cdn.artalkPluginLightboxJS | default "lib/artalk/artalk-plugin-lightbox.js" -}}
+                {{- dict "Source" $source "Fingerprint" $fingerprint "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/commentScript.html" -}}
+            {{- end -}}
+            {{- $commentConfig = dict "el" "#artalk" "server" $artalk.server "site" $artalk.site | dict "artalk" | merge $commentConfig -}}
+            {{- $shims := dict "artalk" "js/shims/artalk.js" -}}
+            {{- $options := dict -}}
+            {{- $options = dict "targetPath" "js/artalk.min.js" | merge $options -}}
+            {{- $options = dict "minify" true | merge $options -}}
+            {{- $options = dict "shims" $shims | merge $options -}}
+            {{- $js := resources.Get "js/lib/artalk.js" | js.Build $options -}}
+            {{- dict "Link" $js.RelPermalink "Fingerprint" $fingerprint "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/commentScript.html" -}}            
+        {{- end -}}
+    </div>
+{{- end -}}
+
+{{- dict "comment" $commentConfig | dict "config" | merge (.Scratch.Get "this") | .Scratch.Set "this" -}}