Joe主题新增海报功能——配合插件

chen'mo

2021-06-10 / 0 评论 / 4,422 阅读 / 正在检测是否收录...

06/10

温馨提示：

本文最后更新于2021年06月10日，已超过1256天没有更新，若内容或图片失效，请留言反馈。

效果见本站。
0.成品图

1.将插件文件放在 usr/plugins目录下，并进行激活，下载链接在文章底部
2.修改handle.php文件，新增代码，文件路径：usr/themes/Joe-master/public

{tabs-pane label="代码"}

第一段，底部新增
<div style="<?php if(Helper::options()->Haibao !== 'on') echo 'display:none;' ?>">
    <div class="article-poster-button" style="text-align: center; margin-left:30px;">
        <div class="haibao">
            <svg t="1623158793415" class="icon-haibao" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2237" width="100%" height="100%"><path d="M512 0C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512-230.4-512-512-512zM403.2 704L256 851.2c-12.8 12.8-32 12.8-44.8 0s-12.8-32 0-44.8l147.2-147.2c12.8-12.8 32-12.8 44.8 0s12.8 32 0 44.8z m460.8-44.8h-192c-12.8 19.2-76.8 102.4-115.2 153.6-19.2 25.6-51.2 25.6-70.4-12.8-25.6-70.4-64-172.8-64-172.8S307.2 576 236.8 544c-25.6-12.8-32-44.8 0-64C294.4 435.2 384 364.8 384 364.8s6.4-128 6.4-204.8c0-44.8 12.8-51.2 19.2-51.2 6.4 0 19.2 0 44.8 19.2 64 44.8 166.4 115.2 166.4 115.2s108.8-32 172.8-51.2c32-12.8 57.6 12.8 51.2 38.4l-51.2 204.8s64 89.6 102.4 153.6c19.2 38.4 6.4 70.4-32 70.4z" fill="#FF9256" p-id="2238"></path></svg>
        </div>
        <p style="margin-top:5px; color:#909399; font-size:12px">海报</p>
    </div>
    <div class="haibao-shade">
        <div class="ball-spin-fade-loader_title">正在生成.....</div>
        <div class="ball-spin-fade-loader">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    <div data-id="<?php echo $this->cid ?>" class="article-poster action action-poster" style="display:none;">
        <div class="poster-popover-mask" data-event="poster-close">
        </div>
        <div class="poster-popover-box">
            <a class="poster-download" data-event="poster-download" data-url="">下载海报</a>
            <img class="article-poster-images"/>
        </div>
    </div>
</div>

第二段，底部新增
<style>
.haibao-shade {
    background: grey;
    z-index: 20;
    opacity: 0.6;
    position: fixed;
    pointer-events: auto;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    transition: opacity .25s linear;
}
@-webkit-keyframes ball-spin-fade-loader {
  50% {
    opacity: 0.3;
    -webkit-transform: scale(0.4);
            transform: scale(0.4); }

  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1); } }

@keyframes ball-spin-fade-loader {
  50% {
    opacity: 0.3;
    -webkit-transform: scale(0.4);
            transform: scale(0.4); }

  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1); } }
.ball-spin-fade-loader {
  position: relative;
  left: calc(50% - 25px);
  top: calc(50% - 25px);
}
.ball-spin-fade-loader_title {
  position: relative;
  left: calc(50% - 50px);
  top: calc(55% - 15px);
}
.ball-spin-fade-loader > div:nth-child(1) {
  top: 25px;
  left: 0;
  -webkit-animation: ball-spin-fade-loader 1s 0s infinite linear;
          animation: ball-spin-fade-loader 1s 0s infinite linear;
}
.ball-spin-fade-loader > div:nth-child(2) {
  top: 17.04545px;
  left: 17.04545px;
  -webkit-animation: ball-spin-fade-loader 1s 0.12s infinite linear;
          animation: ball-spin-fade-loader 1s 0.12s infinite linear;
}
.ball-spin-fade-loader > div:nth-child(3) {
  top: 0;
  left: 25px;
  -webkit-animation: ball-spin-fade-loader 1s 0.24s infinite linear;
          animation: ball-spin-fade-loader 1s 0.24s infinite linear;
}
.ball-spin-fade-loader > div:nth-child(4) {
  top: -17.04545px;
  left: 17.04545px;
  -webkit-animation: ball-spin-fade-loader 1s 0.36s infinite linear;
          animation: ball-spin-fade-loader 1s 0.36s infinite linear;
}
.ball-spin-fade-loader > div:nth-child(5) {
  top: -25px;
  left: 0;
  -webkit-animation: ball-spin-fade-loader 1s 0.48s infinite linear;
          animation: ball-spin-fade-loader 1s 0.48s infinite linear;
}
.ball-spin-fade-loader > div:nth-child(6) {
  top: -17.04545px;
  left: -17.04545px;
  -webkit-animation: ball-spin-fade-loader 1s 0.6s infinite linear;
          animation: ball-spin-fade-loader 1s 0.6s infinite linear;
}
.ball-spin-fade-loader > div:nth-child(7) {
  top: 0;
  left: -25px;
  -webkit-animation: ball-spin-fade-loader 1s 0.72s infinite linear;
          animation: ball-spin-fade-loader 1s 0.72s infinite linear;
}
.ball-spin-fade-loader > div:nth-child(8) {
  top: 17.04545px;
  left: -17.04545px;
  -webkit-animation: ball-spin-fade-loader 1s 0.84s infinite linear;
          animation: ball-spin-fade-loader 1s 0.84s infinite linear;
}
.ball-spin-fade-loader > div {
  background-color: #fff;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  margin: 2px;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  position: absolute;
}
.haibao {
    width: 42px;
    height: 42px;
    background-color: #f56c6c;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    color:#909399;
    font-size:12px
}
.haibao:hover {
    background-color: #409eff;
}
.article-poster {
    position:absolute;z-index:999;
}
</style>

{/tabs-pane}
{tabs-pane label="代码对应图片"}
title=
title=

{/tabs-pane}

2.修改functions.php文件，底部新增，文件路径：usr/themes/Joe-master

{tabs-pane label="代码"}

// 海报
$Haibao = new Typecho_Widget_Helper_Form_Element_Select(
    'Haibao',
    array('off' => '关闭（默认）', 'on' => '开启'),
    'off',
    '是否开启底部海报功能',
    '介绍：开启后，文章底部展示生成海报按钮'
);
$Haibao->setAttribute('class', 'joe_content joe_custom'); // 如果后台无法展示开关，则将joe_custom替换为joe_other
$form->addInput($Haibao);

{/tabs-pane}
{tabs-pane label="代码图片"}
title=
{/tabs-pane}