comment

layout/includes/_partials/post_list/post_list.pug

@@ -2,7 +2,7 @@ include post_item.pug
 
 .post-list
   - const posts = page.posts
-  - const MAX_SUMMARY_LENGTH = 64
+  - const MAX_SUMMARY_LENGTH = 45
   - posts.each(function(post) {
       - const post_date = date(post.date, 'MM/DD/YYYY')
       - const post_time = date(post.time === undefined ? post.date : post.time, 'HH:mm:ss')

layout/includes/layout.pug

@@ -21,6 +21,9 @@ html(lang=config.language)
         link(rel='stylesheet', href=url)
     if is_post() || is_page()
       link(rel="stylesheet", href="/css/highlight.css")
+      link(rel="stylesheet", href="https://unpkg.com/@waline/client@v2/dist/waline.css")
+      script.
+        
   body
     #container.container
       header#header.header 

layout/page.pug

@@ -2,15 +2,19 @@ extends includes/layout.pug
 include includes/_partials/information_card.pug
 
 block content
+  
   .markdown-container
     include includes/_partials/left_declaration.pug
     
     .article-container
       .article-header
         - const has_cover = (page.cover !== undefined && page.cover !== null && page.cover != '')
-        img.post-cover(src=has_cover ? page.cover : "/img/no_image.svg")
+        a(
-
+          data-fancybox 
-        .v-line
+          href=has_cover ? page.cover : undefined 
+          data-caption="Single image" 
+        )
+          img.post-cover(src=has_cover ? page.cover : "/img/no_image.svg")
 
         .article-info
           span.article-title= page.title
@@ -22,14 +26,30 @@ block content
           .h-line
           .info-box
             span.time-info.
-              发表于 #{publishTime}，更新于 #{updateTime}
+              发表于 [#{publishTime}]，更新于 [#{updateTime}]
             br
             span.stat-info.
-              总字数 #{word_count}， 阅读时长 约#{read_cost}分钟， 阅读量 100
+              总字数 [#{word_count}]， 阅读时长 [约#{read_cost}分钟]， 阅读量 [
+              #[span.stat-info.waline-pageview-count(data-src=url_for(page.path)) 未知]
+              ]
             br
             span.big publish by 
             span.author #{author}
 
       hr
       .main-content
-        != page.content
+        != page.content
+
+      hr
+
+      h2 想说点什么？
+      #waline-container
+        script(type="module").
+          import { init } from 'https://unpkg.com/@waline/client@v2/dist/waline.mjs';
+          init({
+            el: '#waline-container',
+            serverURL: 'https://comment-api.ciduid.top',
+            pageview: true,
+            path: document.location.pathname,
+          });
+        

layout/post.pug

@@ -2,15 +2,19 @@ extends includes/layout.pug
 include includes/_partials/information_card.pug
 
 block content
+  
   .markdown-container
     include includes/_partials/left_declaration.pug
     
     .article-container
       .article-header
         - const has_cover = (page.cover !== undefined && page.cover !== null && page.cover != '')
-        img.post-cover(src=has_cover ? page.cover : "/img/no_image.svg")
+        a(
-
+          data-fancybox 
-        .v-line
+          href=has_cover ? page.cover : undefined 
+          data-caption="Single image" 
+        )
+          img.post-cover(src=has_cover ? page.cover : "/img/no_image.svg")
 
         .article-info
           span.article-title= page.title
@@ -22,14 +26,30 @@ block content
           .h-line
           .info-box
             span.time-info.
-              发表于 #{publishTime}，更新于 #{updateTime}
+              发表于 [#{publishTime}]，更新于 [#{updateTime}]
             br
             span.stat-info.
-              总字数 #{word_count}， 阅读时长 约#{read_cost}分钟， 阅读量 100
+              总字数 [#{word_count}]， 阅读时长 [约#{read_cost}分钟]， 阅读量 [
+              #[span.stat-info.waline-pageview-count(data-src=url_for(page.path)) 未知]
+              ]
             br
             span.big publish by 
             span.author #{author}
 
       hr
       .main-content
-        != page.content
+        != page.content
+
+      hr
+
+      h2 想说点什么？
+      #waline-container
+        script(type="module").
+          import { init } from 'https://unpkg.com/@waline/client@v2/dist/waline.mjs';
+          init({
+            el: '#waline-container',
+            serverURL: 'https://comment-api.ciduid.top',
+            pageview: true,
+            path: document.location.pathname,
+          });
+        

scripts/fancybox.js

@@ -0,0 +1,4 @@
+// hexo.extend.filter.register('after_post_render', data => {
+//   data.content = data.content.replaceAll(/<img (.*?)>/ig, `<img data-fancybox $1>`)
+//   return data
+// })

source/css/_partials/post_list/post_item.styl

@@ -1,15 +1,16 @@
 
 .post-item
-  & > *
-    user-select: none
   display: flex
   flex-direction: row
-  gap: 16px
+  justify-content: center
+  gap: 20px
   height: fit-content
   transition: all 0.2s linear 0s
   padding: 20px 20px
   margin: 6px 4px
   min-height: 144px;
+  & > *
+    user-select: none
   &:hover
     background-color: $light
     filter: drop-shadow(0px 0px 2px rgb(74, 71, 62));
@@ -29,7 +30,7 @@
   .post-info
     display: flex
     flex-direction: column
-    width:100%
+    width: 70%
 
   .post-title-box
     display: flex
@@ -75,14 +76,14 @@
     display: flex
     flex-direction: row
     justify-content: space-between
-    padding: 6px 6px 0 32px
+    padding: 6px 6px 0 8px
     .post-summary
       max-width: 61.8%
       line-height: 2em
       overflow: hidden
       display: -webkit-box
-      -webkit-line-clamp: 4
+      -webkit-line-clamp: 3
       -webkit-box-orient: vertical;
     .post-summary, .post-time
       color: $dark
-      font-size: 16px
+      font-size: 18px

source/css/_partials/post_page/markdown_content.styl

@@ -2,7 +2,7 @@
   word-wrap: break-word
   overflow-wrap: break-word
   color: #4a473e
-  
+  margin-bottom: 3em
   h1
     margin-top: 0.4em
     font-size: 2.25em

source/css/_partials/post_page/post_page.styl

@@ -24,20 +24,21 @@
     display: flex
     flex-direction: row
     margin: 1em 0 1em
-    gap: 2em
+    gap: 3em
+    align-items: flex-start
 
     $post-width = 384px
     $post-heigth = 216px
     img.post-cover
       width: $post-width
-      height $post-heigth
       min-width: $post-width
-      min-height $post-heigth
       max-width: $post-width
-      max-height $post-heigth
       object-fit: cover
       transition: all 0.2s linear 0s
-
+      /* filter: drop-shadow(1px 1px 2px #4a473e); */
+      border-color: #4a473e91;
+      border-style: solid;
+      border-width: 2px;
     .article-info
       display: flex
       flex-direction: column
@@ -45,6 +46,7 @@
       width: 100%
       .h-line
         margin-left: -2%
+        width: 104%
       .article-title
         font-size: 2.5em
         font-weight: bold
@@ -69,3 +71,6 @@
     position: sticky
     top: 16px
     align-self: flex-start
+
+  .wl-panel
+    border-radius: 0

source/css/_partials/waline_custom.styl

@@ -0,0 +1,51 @@
+#waline-container 
+    --waline-font-size: 1rem
+    --waline-white: #fff
+    --waline-light-grey: #999
+    --waline-dark-grey: #666
+    --waline-theme-color: #4a473e
+    --waline-active-color: #757161
+    --waline-color: #4a473e
+    --waline-bgcolor: #b1ab8f
+    --waline-bgcolor-light: #f3f0e3
+    --waline-bgcolor-hover: #f0f0f0
+    --waline-border-color: #4a473e
+    --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: #b4af9a
+    --waline-info-color: #25241f
+    --waline-info-font-size: 0.625em
+    --waline-border: 1px solid var(--waline-border-color)
+    --waline-avatar-radius: 50%
+    --waline-box-shadow: none
+
+#waline-container
+  // margin-top: 1em
+  .wl-panel
+    border-radius: 0
+    padding: 8px
+    background-color: unset
+    border-width: 2px
+  .wl-header
+    border-top-left-radius: 0
+    border-top-right-radius: 0
+    padding-bottom: 0.8em
+    label
+      font-size: 0.85em
+      font-weight: bold
+  .wl-editor, .wl-input
+    border: solid
+    border-width: 2px
+    border-radius: 0
+    font-size: 0.85em
+    font-family: 'Consolas', sans-serif
+  .wl-input
+    font-weight: bold
+  .wl-btn
+    border-radius: 0

source/js/util.js

@@ -0,0 +1,10 @@
+const utils = {
+  wrap: (selector, eleType, options) => {
+    const creatEle = document.createElement(eleType)
+    for (const [key, value] of Object.entries(options)) {
+      creatEle.setAttribute(key, value)
+    }
+    selector.parentNode.insertBefore(creatEle, selector)
+    creatEle.appendChild(selector)
+  },
+}