perf: built-in article encryption function

XPoet · Jul 3, 2024 · 54bf474 · 54bf474
1 parent 6e5aec1
commit 54bf474
Show file tree

Hide file tree

Showing 17 changed files with 345 additions and 97 deletions.
diff --git a/languages/en.yml b/languages/en.yml
@@ -106,3 +106,6 @@ comment:
 404:
   page_not_found: Page Not Found
   go_home: Take me home
+encryption:
+  excerpt: 🔒 The post has been encrypted, please enter the password to view it.
+  input_password: Please enter password ...
diff --git a/languages/zh-CN.yml b/languages/zh-CN.yml
@@ -106,3 +106,6 @@ comment:
 404:
   page_not_found: 页面找不到
   go_home: 前往首页
+encryption:
+  excerpt: 🔒 文章已加密，请在输入密码后查看。
+  input_password: 请输入密码...
diff --git a/languages/zh-TW.yml b/languages/zh-TW.yml
@@ -106,3 +106,6 @@ comment:
 404:
   page_not_found: 頁面缺失
   go_home: 前往首頁
+encryption:
+  excerpt: 🔒 文章已加密，請在輸入密碼後查看。
+  input_password: 請輸入密碼...
diff --git a/layout/_page/home.ejs b/layout/_page/home.ejs
@@ -40,10 +40,10 @@
                     </h3>
 
                     <div class="home-post-content keep-markdown-body">
-                        <% if (post.excerpt) { %>
-                            <%- post.excerpt %>
+                        <% if (post?.password) { %>
+                            <%= __('encryption.excerpt') %>
                         <% } else { %>
-                            <%- truncate(strip_html(post.content), { length: 128 }) %>
+                            <%- post?.excerpt || truncate(strip_html(post.content), { length: 128 }) %>
                         <% } %>
                     </div>
 

diff --git a/layout/_page/post.ejs b/layout/_page/post.ejs
@@ -4,7 +4,7 @@ const post_avatar = page?.avatar || theme?.base_info?.avatar
 const is_code_block_unshrink = page?.code_block_shrink === false
 %>
 <div class="fade-in-down-animation">
-    <div class="post-page-container border-box">
+    <div class="post-page-container border-box<%= page?.password ? ' encrypt' : '' %>">
         <div class="post-content-container border-box">
             <% if (page?.post_cover || page?.home_cover) { %>
                 <div class="post-content-top border-box"
@@ -61,8 +61,21 @@ const is_code_block_unshrink = page?.code_block_shrink === false
                         </div>
                     <% } %>
 
-                    <%- page.content %>
+                    <% if (page?.password) { %>
+                        <div class="post-encrypt-box border-box"
+                             data-secret="<%= page.secretKey %>"
+                             data-iv="<%= page.iv %>"
+                             data-ep="<%= page.encryptedPassword %>"
+                             data-content="<%= page.encryptedContent %>"
+                        >
+                            <input type="password" class="password-input border-box" placeholder="<%- __('encryption.input_password') %>">
+                        </div>
+                        <div class="post"></div>
+                    <% } else { %>
+                         <%- page.content %>
+                    <% } %>
                 </div>
+
                 <% if (
                         (
                           theme?.post?.copyright_info === true

diff --git a/layout/_partial/post/post-tools.ejs b/layout/_partial/post/post-tools.ejs
@@ -1,5 +1,13 @@
 <div class="post-tools-container border-box">
-    <ul class="tools-list border-box">
+    <ul class="post-tools-list border-box">
+        <!-- PC encrypt again -->
+        <% if (page?.password) { %>
+            <li class="tools-item flex-center post-lock">
+                <i class="fa-solid fa-lock"></i>
+                <i class="fa-solid fa-lock-open"></i>
+            </li>
+        <% } %>
+
         <!-- PC TOC show toggle -->
         <% if (page?.toc !== false && theme?.toc?.enable === true) { %>
             <li class="tools-item flex-center toggle-show-toc">

diff --git a/layout/_partial/toc.ejs b/layout/_partial/toc.ejs
@@ -1,8 +1,7 @@
 <div class="post-toc-wrap border-box">
     <div class="post-toc border-box">
-        <!-- use hexo-blog-encrypt -->
         <%- toc(
-            page?.encrypt === true ? page.origin : page.content,
+            page.content,
             {
                 class: 'nav',
                 list_number: theme?.toc?.number || false

diff --git a/scripts/filters/encrypt-handle.js b/scripts/filters/encrypt-handle.js
@@ -0,0 +1,30 @@
+/* global hexo */
+
+'use strict'
+
+const crypto = require('crypto')
+
+function encrypt(text, key, iv) {
+  const algorithm = 'aes-256-cbc'
+  const cipher = crypto.createCipheriv(algorithm, Buffer.from(key, 'hex'), Buffer.from(iv, 'hex'))
+  let encrypted = cipher.update(text, 'utf8', 'hex')
+  encrypted += cipher.final('hex')
+  return encrypted
+}
+
+hexo.extend.filter.register(
+  'after_post_render',
+  function (data) {
+    let { password } = data
+    password = String(password).trim()
+    if (password) {
+      const secretKey = crypto.randomBytes(32).toString('hex') // 256-bit
+      const iv = crypto.randomBytes(16).toString('hex') // 128-bit
+      data.secretKey = secretKey
+      data.iv = iv
+      data.encryptedPassword = encrypt(password, secretKey, iv)
+      data.encryptedContent = encrypt(data.content, secretKey, iv)
+    }
+  },
+  1
+)
diff --git a/source/css/common/markdown.styl b/source/css/common/markdown.styl
@@ -1,4 +1,5 @@
-.keep-markdown-body {
+.keep-markdown-body
+.keep-markdown-body > .post {
   font-size 1rem
 
   blockquote {

diff --git a/source/css/layout/_page/post.styl b/source/css/layout/_page/post.styl
@@ -25,6 +25,13 @@ $spacer-padding = 2rem
   }
 
 
+  &.encrypt {
+    .post-aging-tips {
+      display none !important
+    }
+  }
+
+
   +keep-tablet() {
     .pc-post-toc {
       display none !important
@@ -266,6 +273,40 @@ $spacer-padding = 2rem
         }
 
 
+        .post-encrypt-box {
+          margin-left $avatar-width + 0.8rem
+          padding 1rem 0
+
+          .password-input {
+            width 20rem
+            margin 0
+            padding 0.8rem 1.2rem
+            color var(--text-color-3)
+            font-weight 400 !important
+            font-size 1.2rem
+            letter-spacing 2px
+            background none
+            border none
+            border-bottom 0.2rem solid var(--border-color)
+            outline none
+
+            &.error {
+              border 0.2rem solid var(--keep-danger-color)
+            }
+
+            &::placeholder {
+              color var(--text-color-4)
+              font-size 1.1rem
+              letter-spacing 1px
+            }
+
+            &:hover
+            &:focus {
+              background var(--background-color-2)
+            }
+          }
+        }
+
         if (hexo-config('post') && hexo-config('post.copyright_info') == true) {
           border-bottom 2px dashed var(--border-color)
         }
@@ -402,33 +443,4 @@ $spacer-padding = 2rem
       max-height calc(100vh - calc(var(--header-shrink-height) + var(--component-gap)))
     }
   }
-
-
-  .hbe-container {
-
-    .hbe-input-field {
-      color var(--text-color-3) !important
-      background var(--background-color-3) !important
-    }
-
-
-    .hbe-input-label {
-      &::before {
-        display none !important
-      }
-
-      &::after {
-        background var(--text-color-4) !important
-      }
-
-      .hbe-input-label-content {
-        color var(--text-color-4) !important
-      }
-    }
-
-
-    .hbe-button {
-      margin-top 2rem
-    }
-  }
 }
diff --git a/source/css/layout/_partial/post/post-tools.styl b/source/css/layout/_partial/post/post-tools.styl
@@ -4,7 +4,7 @@ $post-tool-button-width = 2.5rem
 .post-tools-container {
   padding-top var(--component-gap)
 
-  .tools-list {
+  .post-tools-list {
 
     li {
       position relative
@@ -33,7 +33,7 @@ $post-tool-button-width = 2.5rem
         background var(--primary-color)
 
         i {
-          color var(--background-color-1)
+          color var(--background-color-1) !important
         }
       }
 
@@ -70,6 +70,31 @@ $post-tool-button-width = 2.5rem
           }
         }
       }
+
+      &.post-lock {
+        cursor default
+
+        .fa-lock-open {
+          display none
+          color var(--keep-success-color)
+        }
+
+        .fa-lock {
+          color var(--keep-warning-color)
+        }
+
+        &.decrypt {
+          cursor pointer
+
+          .fa-lock-open {
+            display block
+          }
+
+          .fa-lock {
+            display none
+          }
+        }
+      }
     }
   }
 }
diff --git a/source/js/lazyload.js b/source/js/lazyload.js
@@ -1,6 +1,10 @@
 /* global KEEP */
 
 KEEP.initLazyLoad = () => {
+  if (KEEP?.theme_config?.lazyload?.enable !== true) {
+    return
+  }
+
   const imgs = document.querySelectorAll('img')
   let now = Date.now()
   let needLoad = true

diff --git a/source/js/main.js b/source/js/main.js
@@ -1,13 +1,14 @@
 /* global KEEP */
 
 window.addEventListener('DOMContentLoaded', () => {
-  const { version, local_search, lazyload } = KEEP.theme_config
+  const { version, local_search } = KEEP.theme_config
 
   KEEP.themeInfo = {
     theme: `Keep v${version}`,
     author: 'XPoet',
     repository: 'https://github.com/XPoet/hexo-theme-keep',
     localStorageKey: 'KEEP-THEME-STATUS',
+    encryptKey: 'KEEP-ENCRYPT',
     styleStatus: {
       isDark: false,
       fontSizeLevel: 0,
@@ -67,14 +68,11 @@ window.addEventListener('DOMContentLoaded', () => {
     KEEP.initBack2Top()
     KEEP.initCodeBlock()
     KEEP.setFooterVersion()
+    KEEP.initLazyLoad()
 
     if (local_search?.enable === true) {
       KEEP.initLocalSearch()
     }
-
-    if (lazyload?.enable === true) {
-      KEEP.initLazyLoad()
-    }
   }
   KEEP.initExecute()
 })