插件展示
使用教程
1.将插件文件放在 usr/plugins目录下，并解压，下载链接在文章底部
2.修改handle.php文件，新增代码，文件路径：usr/themes/Joe-master/public
{/tabs-pane}
{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}
3.修改functions.php文件，底部新增，文件路径：usr/themes/Joe-master
// 海报
$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="代码位置图片"}
{/tabs-pane}
插件下载
