✨ 增加海报支持

Licoy · Nov 24, 2022 · 381c12e · 381c12e
1 parent 5fe9665
commit 381c12e
Show file tree

Hide file tree

Showing 12 changed files with 226 additions and 44 deletions.
diff --git a/assets/dist/js/puock.min.js b/assets/dist/js/puock.min.js
diff --git a/assets/dist/style/common.min.css b/assets/dist/style/common.min.css
diff --git a/assets/dist/style/style.min.css b/assets/dist/style/style.min.css
diff --git a/assets/js/puock.js b/assets/js/puock.js
@@ -841,6 +841,10 @@ class Puock {
             const el = $(this.ct(e));
             let id = el.attr("data-id");
             const temp = el.attr("data-temp") ? el.attr("data-temp") === 'true' : false;
+            let classStr = '';
+            classStr += el.attr("data-no-title") !== undefined ? ' modal-no-title' : '';
+            classStr += el.attr("data-no-padding") !== undefined ? ' modal-no-padding' : '';
+            classStr += el.attr("data-transparent") !== undefined ? ' modal-transparent' : '';
             if (temp) {
                 id += Math.ceil(Math.random() * 10000);
             }
@@ -849,7 +853,7 @@ class Puock {
                 const title = el.attr("title") || el.attr("data-title") || '提示';
                 const url = el.attr("data-url");
                 let html = `
-                <div class="modal fade" id="${id}" tabindex="-1" role="dialog" aria-hidden="true">
+                <div class="modal fade ${classStr}" id="${id}" tabindex="-1" role="dialog" aria-hidden="true">
                     <div class="modal-dialog modal-dialog-centered" role="document">
                         <div class="modal-content">
                             <div class="modal-header">

diff --git a/assets/libs/html2canvas.min.js b/assets/libs/html2canvas.min.js
diff --git a/assets/style/common.less b/assets/style/common.less
@@ -326,6 +326,12 @@ a {
   }
 }
 
+.p-flex-center{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .p-flex-sk-0 {
   flex-shrink: 0;
 }

diff --git a/assets/style/style.less b/assets/style/style.less
@@ -515,44 +515,68 @@ body.pre-mac pre {
   min-height: 70vh;
 }
 
-.modal-content {
-  border: none;
-  border-radius: 5px;
+.modal {
+  &.modal-no-title {
+    .modal-header {
+      display: none;
+    }
+  }
 
-  .modal-header {
-    .close {
-      i {
-        display: inline-block;
-        .ta3-fun();
+  &.modal-no-padding {
+    .modal-body {
+      padding: 0 !important;
+    }
 
-        &:hover {
-          transform: rotate(180deg);
+    .modal-content {
+      width: auto !important;
+    }
+  }
+
+  &.modal-transparent{
+    .modal-content {
+      background-color: rgb(255 255 255 / 0%);
+    }
+  }
+
+  .modal-content {
+    border: none;
+    border-radius: 5px;
+
+    .modal-header {
+      .modal-title {
+        .fs16;
+      }
+
+      .close {
+        i {
+          display: inline-block;
+          .ta3-fun();
+
+          &:hover {
+            transform: rotate(180deg);
+          }
         }
       }
     }
   }
-}
 
-.modal-body {
-  padding: .3rem 1rem 1rem 1rem;
-}
+  .modal-body {
+    padding: .3rem 1rem 1rem 1rem;
+  }
 
-.modal-header, .modal-footer {
-  border: none;
-}
+  .modal-header, .modal-footer {
+    border: none;
+  }
 
-.modal-backdrop, .mobile-menu-backdrop {
-  backdrop-filter: blur(2px);
-  -webkit-backdrop-filter: blur(2px);
-  opacity: 1 !important;
-  background-color: rgba(0, 0, 0, 0.53);
-}
+  .modal-backdrop, .mobile-menu-backdrop {
+    backdrop-filter: blur(2px);
+    -webkit-backdrop-filter: blur(2px);
+    opacity: 1 !important;
+    background-color: rgba(0, 0, 0, 0.53);
+  }
 
-.modal-title {
-  .fs16();
 }
 
-
 a:hover {
   text-decoration: none;
 }
@@ -961,12 +985,13 @@ a:hover {
       &.p-indent > p {
         text-indent: 2rem;
       }
-      a:not(.btn,.fancybox){
+
+      a:not(.btn,.fancybox) {
         &:before {
           content: "\f0c1";
-          font-family: var(--fa-style-family,"Font Awesome 6 Free");
+          font-family: var(--fa-style-family, "Font Awesome 6 Free");
           margin-right: 3px;
-          font-weight: var(--fa-style,900);
+          font-weight: var(--fa-style, 900);
           font-size: 12px;
         }
       }
@@ -984,7 +1009,7 @@ a:hover {
       line-height: 1.8;
     }
 
-    video{
+    video {
       max-width: 100%;
     }
 
@@ -2041,5 +2066,51 @@ a:hover {
   }
 }
 
+.post-poster {
+  display: flex;
+  justify-content: center;
+
+  .post-poster-main {
+    width: 300px;
+    overflow-x: hidden;
+    position: relative;
+    background-color: #fff;
+    color: var(--pk-c-dark);
+    border-radius: var(--pk-g-box-radius);
+
+    .cover {
+      width: 100%;
+      height: 240px;
+      background-size: cover;
+      position: relative;
+    }
+
+    .result{
+      width: 100%;
+    }
+
+    .content {
+      padding: 10px;
+
+      .info {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .qrcode {
+          @wh: 120px;
+          width: @wh;
+          height: @wh;
+        }
+
+        .logo {
+          width: 130px;
+          height: auto;
+        }
+      }
+    }
+  }
+}
+
 
 @import "screen";
diff --git a/inc/ajax/index.php b/inc/ajax/index.php
@@ -2,3 +2,4 @@
 
 require_once __DIR__ . '/page-oauth-login.php';
 require_once __DIR__ . '/page-front-login.php';
+require_once __DIR__ . '/page-poster.php';
diff --git a/inc/ajax/page-poster.php b/inc/ajax/page-poster.php
@@ -0,0 +1,61 @@
+<?php
+
+if (pk_is_checked('post_poster_open')) {
+    pk_ajax_register('pk_poster', 'pk_poster_page_callback', true);
+}
+function pk_poster_page_callback()
+{
+    $id = $_REQUEST['id'];
+    if (empty($id)) {
+        wp_die('无效的文章ID: ' . $id);
+    }
+    $post = get_post($id);
+    if (empty($post)) {
+        wp_die('无效的文章ID: ' . $id);
+    }
+    setup_postdata($post);
+    $title = get_the_title($post);
+    $qrcode_url = PUOCK_ABS_URI . pk_post_qrcode(get_permalink($post));
+    $el_id = 'post-poster-main-' . $post->ID;
+    ?>
+
+    <div class="post-poster">
+        <div class="post-poster-main" id="<?php echo $el_id; ?>">
+            <div class="cover" style="background-image: url('<?php echo pkmp_get_post_images($post); ?>')"></div>
+            <div class="content">
+                <p class="title mt20 fs16"><?php echo $title ?></p>
+                <p class="excerpt fs14 mt20 c-sub"><?php echo get_the_excerpt() ?></p>
+                <div class="info mt20">
+                    <img class="qrcode" src="<?php echo $qrcode_url ?>" alt="<?php echo $title ?>">
+                    <?php if (!pk_is_checked('on_txt_logo') || empty(pk_get_option('light_logo'))): ?>
+                        <img class="logo" src="<?php echo pk_get_option('light_logo') ?>" alt="logo">
+                    <?php else: ?>
+                        <p class="tip c-sub fs14">@<?php echo pk_get_web_title() ?></p>
+                    <?php endif; ?>
+                </div>
+                <p class="tip c-sub fs12 mt20 p-flex-center"><i class="fa-solid fa-qrcode"></i> 长按识别二维码查看文章内容</p>
+            </div>
+        </div>
+    </div>
+    <!--    <div class="mt20 d-flex justify-content-center">-->
+    <!--        <div class="btn btn-primary btn-sm"><i class="fa fa-download"></i> 下载海报</div>-->
+    <!--    </div>-->
+    <script>
+        $(function () {
+            html2canvas(document.querySelector("#<?php echo $el_id; ?>"), {
+                allowTaint: true,
+                useCORS: true
+            }).then(canvas => {
+                const el = $("#<?php echo $el_id; ?>");
+                el.show();
+                el.html("<img class='result' src='" + canvas.toDataURL("image/png") + "' alt='<?php echo $title ?>'>");
+            }).catch(err => {
+                console.error(err)
+                window.Puock.toast("生成海报失败，请到Console查看错误信息", TYPE_DANGER);
+            });
+        })
+    </script>
+    <?php
+
+    wp_die();
+}
diff --git a/inc/init.php b/inc/init.php
@@ -163,7 +163,10 @@ function pk_env_check()
 
 function pk_init_register_assets()
 {
-    if (!is_admin()) {
+    if (is_admin()) {
+        wp_enqueue_style('puock-strawberry-icon-admin', pk_get_static_url() . '/assets/libs/strawberry-icon.css', [], PUOCK_CUR_VER_STR);
+        wp_enqueue_script('puock-admin', pk_get_static_url() . '/assets/dist/js/admin.min.js', [], PUOCK_CUR_VER_STR, true);
+    } else {
         wp_enqueue_style('puock-libs', pk_get_static_url() . '/assets/dist/style/libs.min.css', [], PUOCK_CUR_VER_STR);
         wp_enqueue_style('puock', pk_get_static_url() . '/assets/dist/style/style.min.css', ['puock-libs'], PUOCK_CUR_VER_STR);
         wp_enqueue_script('puock-jquery', pk_get_static_url() . '/assets/libs/jquery.min.js', [], PUOCK_CUR_VER_STR);
@@ -175,10 +178,8 @@ function pk_init_register_assets()
             wp_enqueue_style('puock-dplayer', pk_get_static_url() . '/assets/libs/dplayer/DPlayer.min.css', ['puock'], PUOCK_CUR_VER_STR);
             wp_enqueue_script('puock-dplayer', pk_get_static_url() . '/assets/libs/dplayer/DPlayer.min.js', ['puock-libs'], PUOCK_CUR_VER_STR, true);
         }
+        wp_enqueue_script('puock-html2canvas', pk_get_static_url() . '/assets/libs/html2canvas.min.js', [], PUOCK_CUR_VER_STR, true);
         wp_enqueue_script('puock', pk_get_static_url() . '/assets/dist/js/puock.min.js', array('puock-libs'), PUOCK_CUR_VER_STR, true);
-    } else {
-        wp_enqueue_style('puock-strawberry-icon-admin', pk_get_static_url() . '/assets/libs/strawberry-icon.css', [], PUOCK_CUR_VER_STR);
-        wp_enqueue_script('puock-admin', pk_get_static_url() . '/assets/dist/js/admin.min.js', [], PUOCK_CUR_VER_STR, true);
     }
 }
 

diff --git a/inc/setting/options/OptionBasic.php b/inc/setting/options/OptionBasic.php
@@ -93,6 +93,13 @@ function get_fields(): array
                     'type' => 'switch',
                     'sdt' => 'false',
                 ],
+                [
+                    'id' => 'post_poster_open',
+                    'label' => '文章海报生成',
+                    'tips' => '使用此功能如果出现图片无法生成，请检查图片是否符合跨域要求',
+                    'type' => 'switch',
+                    'sdt' => false,
+                ],
                 [
                     'id' => 'page_copy_right',
                     'label' => '显示正文版权说明',

diff --git a/templates/post-actions.php b/templates/post-actions.php
@@ -1,15 +1,26 @@
 <div class="mt15 post-action-panel">
     <div class="post-action-content">
         <div class="d-flex justify-content-center w-100 c-sub">
-            <div class="circle-button puock-bg text-center <?php if(puock_post_is_like()): ?>bg-primary text-light<?php endif; ?>"
+            <div class="circle-button puock-bg text-center <?php if (puock_post_is_like()): ?>bg-primary text-light<?php endif; ?>"
                  id="post-like" data-id="<?php the_ID() ?>">
-                <i class="fa-regular fa-thumbs-up t-md"></i>&nbsp;<span class="t-sm"><?php echo get_post_meta($post->ID,'puock_like',true) ?></span></div>
-            <?php if(pk_is_checked('post_reward')): ?>
-                <div class="circle-button puock-bg text-center" data-toggle="modal" data-target="#rewardModal"><span>赏</span></div>
+                <i class="fa-regular fa-thumbs-up t-md"></i>&nbsp;<span
+                        class="t-sm"><?php echo get_post_meta($post->ID, 'puock_like', true) ?></span></div>
+            <?php if (pk_is_checked('post_reward')): ?>
+                <div class="circle-button puock-bg text-center" data-toggle="modal" data-target="#rewardModal">
+                    <span>赏</span></div>
+            <?php endif; ?>
+            <div class="circle-button puock-bg text-center" data-toggle="modal" data-target="#shareModal"><i
+                        class="fa fa-share-from-square t-md"></i></div>
+            <?php if(pk_is_checked('post_poster_open')):?>
+            <div class="circle-button puock-bg text-center pk-modal-toggle"
+                 data-id="post-poster-<?php echo $post->ID ?>"
+                 title="海报" data-no-title data-transparent
+                 data-url="<?php echo pk_ajax_url('pk_poster', ['id' => $post->ID]) ?>"
+            ><i class="fa-regular fa-images"></i></div>
             <?php endif; ?>
-            <div class="circle-button puock-bg text-center" data-toggle="modal" data-target="#shareModal"><i class="fa fa-share-from-square t-md"></i></div>
             <div class="ls">
-                <div class="circle-button puock-bg text-center post-menu-toggle post-menus-box"><i class="fa fa-bars t-md"></i></div>
+                <div class="circle-button puock-bg text-center post-menu-toggle post-menus-box"><i
+                            class="fa fa-bars t-md"></i></div>
             </div>
         </div>
     </div>