搜索到
1
篇与
海报
的结果
-
![Joe主题新增海报功能——配合插件]()
Joe主题新增海报功能——配合插件 0.成品图{tabs}{tabs-pane label="后台设置"}{/tabs-pane}{tabs-pane label="文章底部"}{/tabs-pane}{tabs-pane label="海报样式"}{/tabs-pane}{/tabs}{message type="warning" content="使用手册：激活插件后打开主题的开关设置即可"/}1.将插件文件放在 usr/plugins目录下，并进行激活，下载链接在文章底部2.修改handle.php文件，新增代码，文件路径：usr/themes/Joe-master/public{tabs}{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="代码对应图片"}{/tabs-pane}{/tabs}2.修改functions.php文件，底部新增，文件路径：usr/themes/Joe-master隐藏内容，请前往内页查看详情3.主题文件和插件下载路径：https://zhinianboke.com/archives/993/
