Joe主题海报插件美化
侧边栏壁纸
博主昵称
小黑

成年人的生活里,没有容易二字。

  • 累计撰写 155 篇文章
  • 累计收到 921 条评论
  • 博主 5小时前 在线

Joe主题海报插件美化

罗小黑
2021-04-05 / 28 评论 / 2,278 阅读 / 正在检测是否收录...
广告
温馨提示:
本文最后更新于2021年04月08日,已超过1509天没有更新,若内容或图片失效,请留言反馈。

插件下载及介绍

插件介绍:

1.整个过程使用 GD库 来生成海报,所以不需要担心排版混乱。
2.生成海报后,将它们保存在插件目录下的海报文件夹中,从而节省第二次生成时间。
3.支持用户 自定义 按钮样式,方便相同的主题样式,不会突兀。

插件安装:

1.将插件上传到 /usr/plugins/ 并将其重命名为 ArticlePoster
2.在适当的位置添加挂载点代码,我是在handle.php添加
代码
php文章海报_插件:按钮article-poster-button

<?php ArticlePoster_Plugin::button($this->cid); ?>

3.在后台插件设置中填写信息,确保填写自定义共享按钮样式,并在类中添加文章-海报-按钮
4.如果没有将jquery引入到您的模板中,或者设置了上述过程,并且没有通过单击按钮得到响应,您可以开始加载jquery
5.修改图标部分以查找/usr/plugins/ArticlePoster/js/core.js,,并修改注释部分中的图标样式

这一段代码可以添加到 usr/plugins/ArticlePoster/css/core.css 文件最顶部即可或者在后台自定义css添加一样

.haibaodiv{width:100%;margin-top: 16px;margin-bottom: 16px;text-align: center;}
.haibaodiv button{color: white;background-color: #4e7cf2;width: 170px;height: 36px;border: 0px;border-radius: 22px;}

pjax 适配

如果主题有 pjax 回调可以直接填下以下代码(如果是joe就不需要这一步直接跳过!表情)

$('.article-poster-button').on('click',function(){
    create_poster();
});
$('[data-event=\'poster-close\']').on('click', function(){
    $('.article-poster, .poster-popover-mask, .poster-popover-box').fadeOut()
});
$('[data-event=\'poster-download\']').on('click', function(){
    download_poster();
});

按钮样式

第一个

<script src="https://zn.ax/usr/plugins/ZFonts/libs/mdui/mdui.min.js'"></script><link rel="stylesheet" href="https://zn.ax/usr/plugins/ZFonts/libs/mdui/mdui.min.css"/><div class="haibaodiv" style="width:100%;margin-top: 16px;margin-bottom: 16px;text-align: center;">
<button class="article-poster-button mdui-btn mdui-btn-raised mdui-btn-dense mdui-color-theme-accent mdui-ripple">生成海报</button>
</div>
第二个

<script src="https://zn.ax/usr/plugins/ZFonts/libs/mdui/mdui.min.js'"></script><link rel="stylesheet" href="https://zn.ax/usr/plugins/ZFonts/libs/mdui/mdui.min.css"/>
<a style="text-align:center;background:#40E0D0;text-decoration:none;" class="article-poster-button mdui-btn  mdui-ripple">按钮</a >

插件下载
{abtn icon="Font Awesome图标" color="#00BFFF" href="https://wws.lanzous.com/i1pXFlk2xhi" radius="17.5px"}罗小黑{/abtn}

此处内容作者设置了 回复 可见

14

打赏


评论 (28)

OωO
  • ::(呵呵)
  • ::(哈哈)
  • ::(吐舌)
  • ::(太开心)
  • ::(笑眼)
  • ::(花心)
  • ::(小乖)
  • ::(乖)
  • ::(捂嘴笑)
  • ::(滑稽)
  • ::(你懂的)
  • ::(不高兴)
  • ::(怒)
  • ::(汗)
  • ::(黑线)
  • ::(泪)
  • ::(真棒)
  • ::(喷)
  • ::(惊哭)
  • ::(阴险)
  • ::(鄙视)
  • ::(酷)
  • ::(啊)
  • ::(狂汗)
  • ::(what)
  • ::(疑问)
  • ::(酸爽)
  • ::(呀咩爹)
  • ::(委屈)
  • ::(惊讶)
  • ::(睡觉)
  • ::(笑尿)
  • ::(挖鼻)
  • ::(吐)
  • ::(犀利)
  • ::(小红脸)
  • ::(懒得理)
  • ::(勉强)
  • ::(爱心)
  • ::(心碎)
  • ::(玫瑰)
  • ::(礼物)
  • ::(彩虹)
  • ::(太阳)
  • ::(星星月亮)
  • ::(钱币)
  • ::(茶杯)
  • ::(蛋糕)
  • ::(大拇指)
  • ::(胜利)
  • ::(haha)
  • ::(OK)
  • ::(沙发)
  • ::(手纸)
  • ::(香蕉)
  • ::(便便)
  • ::(药丸)
  • ::(红领巾)
  • ::(蜡烛)
  • ::(音乐)
  • ::(灯泡)
  • ::(开心)
  • ::(钱)
  • ::(咦)
  • ::(呼)
  • ::(冷)
  • ::(生气)
  • ::(弱)
  • ::(狗头)
泡泡
阿鲁
颜文字
取消
  1. 头像
    Windows 10 · Google Chrome
    沙发

    看看海报~

    回复
  2. 头像
    小杰
    Android · Google Chrome
    板凳

    看看

    回复
  3. 头像
    ty
    Windows 10 · Google Chrome
    地毯

    画图

    回复
  4. 头像
    沙盒
    Android · Google Chrome
    第4楼

    多谢请问头像呼吸灯咋弄的啊

    回复
    1. 头像
      罗小黑 作者
      Windows 10 · Google Chrome
      @ 沙盒

      /头像呼吸光环和鼠标悬停旋转放大/
      .avatar{border-radius: 50%; animation: light 4s ease-in-out infinite; transition: 0.5s;}.avatar:hover{transform: scale(1.15) rotate(720deg);}@keyframes light{0%{box-shadow: 0 0 4px #f00;} 25%{box-shadow: 0 0 16px #0f0;} 50%{box-shadow: 0 0 4px #00f;} 75%{box-shadow: 0 0 16px #0f0;} 100%{box-shadow: 0 0 4px #f00;}}

      回复
  5. 头像
    啊淦
    Windows 10 · Google Chrome
    第5楼

    表情

    回复
  6. 头像
    博纳
    Linux · Google Chrome
    第6楼

    来看看

    回复
  7. 头像
    大会实践活动
    Windows 10 · Google Chrome
    第7楼

    看一下

    回复
暂无访问权限,请完成网站配置后刷新重试前往千帆AppBuilder