Typecho Joe主题 添加打赏码

Typecho Joe主题 添加打赏码

作者博客迁移到 Halo ，并使用从Joe 迁移过来的 halo-theme-joe2.0

1. 效果图如下

   

2. 在 functions.php 文件中加入赞赏码配置

   $JAdmires = new Typecho_Widget_Helper_Form_Element_Textarea(
       'JAdmires',
       NULL,
       NULL,
       '赞赏码（非必填）',
       '介绍：用于填写赞赏码 <br />
        格式：赞赏码名称 || 赞赏码图片地址 <br />
        其他：一行代表一个赞赏码，最多4个'
   );
   $JAdmires->setAttribute('class', 'joe_content joe_other');
   $form->addInput($JAdmires);
   

   效果图如下

   

3. 在 public/handle.php 文件中 div (class="agree" ) 后方加入相关代码

   <?php if ($this->options->JAdmires): ?>
       <?php $admires = explode("\r\n", $this->options->JAdmires); ?>
       <div class="admire" onclick="event.cancelBubble=true;">
           <div class="admire-icon" onclick="admireDisplay(this)">
               <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="28" height="28">
                   <path d="M723.07624 239.356169c-17.756912 16.022945-37.442863 37.825781-59.070497 65.381416h113.237117c-1.647269 19.47643-2.470904 37.56388-2.470904 54.246094 0 15.421475 0.823635 35.150775 2.470904 59.184289h-64.286849v-63.96715h-400.889703v73.809222H247.777652c1.649075-25.021514 2.463679-46.39989 2.463679-64.120678 0-19.147699-0.814604-38.857131-2.463679-59.14997h123.073771c-19.606478-20.578222-38.48505-42.816357-56.632105-66.716211 16.066294-10.606102 32.139812-21.204979 48.2043-31.811081 24.736132 24.736132 46.50465 52.795702 65.303749 84.171485-15.240853 10.485085-27.548411 15.26614-36.904611 14.355807h90.760562c0-29.154137-0.807379-61.97128-2.431167-98.447819h66.718017c-1.621982 31.930291-2.429361 64.747435-2.429361 98.447819h59.106621c26.036608-38.282754 42.1896-69.477915 48.439108-93.587291 25.464037 11.84336 49.497551 21.244716 72.089704 28.204068zM715.699653 533.60325a953.32637 953.32637 0 0 0-2.47271 69.024555c0 23.643371 0.823635 47.476395 2.47271 71.500877h-64.281431V583.100801H373.60229v100.882597H309.315441c1.649075-28.348564 2.47271-53.830664 2.47271-76.448104 0-22.56506-0.825441-47.207269-2.47271-73.930238l406.384212-0.001806z"
                         fill="#fff"></path>
                   <path d="M545.870168 609.536582c-18.797293 55.826533-38.492275 92.304877-59.070497 109.445869-20.580028 17.142799-46.338479 31.984478-77.289801 44.516006-30.942291 12.54056-76.924945 22.957009-137.924481 31.245736-4.000769-17.209629-15.222791-37.590973-33.658841-61.153065 48.197075-1.988644 86.671288-6.571015 115.435283-13.763368 28.762188-7.186935 54.896331-19.398763 78.382561-36.62826 23.493455-17.236722 37.910673-48.249455 43.248043-93.041812 23.627115 6.457223 47.252424 12.921671 70.877733 19.378894zM688.637115 511.713715H336.377979c1.649075-26.697683 2.47271-49.723328 2.47271-69.069711 0-19.216335-0.825441-39.760239-2.47271-61.615456h352.259136v130.685167z m-64.288656-47.026647v-34.206124H400.664829v34.206124h223.68363zM579.164152 649.228185c77.50474 30.306503 141.881901 62.533014 193.133288 96.684951-16.057263 14.615902-30.292053 30.06447-42.70979 46.356541-36.377196-26.777156-97.703657-57.585787-183.993833-92.443956 13.393094-19.899085 24.578991-36.76192 33.570335-50.597536z"
                         fill="#fff"></path>
               </svg>
           </div>
           <span>打赏</span>
           <joe-tabs>
           <span class="_content" style="display: block;">
               <div class="joe_tabs">
                   <div class="joe_tabs__body">
                       <?php for ($i = 0;$i < count($admires) && $i < 4;$i++) : ?>
                           <?php $item = explode("||", $admires[$i]); ?>
                           <div style="<?php if ($i === 0) {echo 'display: block;';} else {echo 'display: none;';} ?>"
                                class="joe_tabs__body-item"
                                label="<?php echo trim($item[0]); ?>">
                           <img alt="<?php echo trim($item[0]) ?>" src="<?php echo trim($item[1]); ?>">
                       </div>
                       <?php endfor; ?>
                   </div>
                   <div class="joe_tabs__head">
                       <?php for ($i = 0;$i < count($admires) && $i < 4;$i++) : ?>
                           <?php $item = explode("||", $admires[$i]); ?>
                           <div class="joe_tabs__head-item <?php if ($i === 0) {echo 'active';}?>"
                                label="<?php echo trim($item[0]); ?>"
                                onclick="singletonTab(this)"><?php echo trim($item[0]); ?></div>
                       <?php endfor; ?>
                   </div>
               </div>
           </span>
           </joe-tabs>
       </div>
       <script>
           const singletonTab = (that) => {
               const chickLabel = that.getAttribute("label");
               const joeTabs = that.parentElement.parentElement;
   
               const bodyChildren = joeTabs.firstElementChild.children;
               for (var body of bodyChildren) {
                   if (body.getAttribute("label") === chickLabel) {
                       body.setAttribute("style", "display: block;")
                   } else {
                       body.setAttribute("style", "display: none;")
                   }
               }
   
               const headChildren = joeTabs.lastElementChild.children;
               for (var head of headChildren) {
                   if (head.getAttribute("label") === chickLabel) {
                       head.classList.add("active");
                   } else {
                       head.classList.remove("active");
                   }
               }
           }
   
           const admireDisplay = (that) => {
               const joeTbs = that.parentElement.lastElementChild;
               if (that.classList.contains("active")) {
                   that.classList.remove("active");
                   joeTbs.classList.remove("active");
               } else {
                   that.classList.add("active");
                   joeTbs.classList.add("active");
   
                   window.onclick = () => {
                       that.classList.remove("active");
                       joeTbs.classList.remove("active");
                       window.onclick = null;
                   }
               }
           }
       </script>
   <?php endif; ?>
   

   第一个 JS 函数用于标签页（二维码图片）的切换

   第二个 JS 函数用于动态的展示赞赏码

4. 加入 SCSS 样式信息

   在 joe.global.min.scss 文件中的的关键词 .agree 下方加入以下SCSS样式信息并编译该文件

   .admire {
     margin-left: 20px;
     text-align: center;
     font-size: 12px;
     color: var(--minor);
     user-select: none;
   
     .admire-icon {
       position: relative;
       display: flex;
       align-items: center;
       justify-content: center;
       width: 42px;
       height: 42px;
       border-radius: 50%;
       background: #f2b968;
       cursor: pointer;
       margin-bottom: 8px;
       transition: transform 0.85s, opacity 0.85s;
   
       &.active {
         background: #409EFF;
       }
   
       svg {
         position: absolute;
         width: 28px;
         height: 28px;
         transform: scale(1);
         opacity: 1;
         transition: transform 0.85s, opacity 0.85s;
       }
     }
   
     joe-tabs {
       position: absolute;
       margin-top: -490px;
       margin-left: -100px;
       display: none;
   
       &.active {
         animation: showComment 1s;
         display: block !important;
       }
   
       .joe_tabs__body-item {
         width: 250px;
         height: 360px;
         line-height: 360px;
         padding: unset !important;
       }
   
       img {
         width: 220px;
       }
     }
   }