哦吼吼,又是从别人博客上看到的功能,自己想动手实现,发现有插件了,就跑去用插件了,但是这个插件有点小问题,就是生成的时候那几个文字有点难受,就改了改,然后也对handsome进行了适配~具体效果查看本博客哦~

一、安装插件

github:https://github.com/MoLeft/ArticlePoster (原作者:MoLeft
注明:本人增加了图片压缩,必应换成了随机api图片,并没有涉及到任何侵权,如有侵权,请作者本文下留言,将立即删除。

本人修改版:

此处内容需要评论回复后(审核通过)方可阅读。

下载好插件之后,上传安装插件即可。

二、设置插件

插件设置很简单,我这里教一下handsome自定义按钮样式,直接复制下列代码到插件设置里的自定义按钮样式里即可
<button class="article-poster-button btn btn-pay btn-danger btn-rounded"><i class="article-poster-button fontello fontello-wallet"></i>生成海报</button>

是否加载jQuery和mdui看你自己的博客主题吧,handsome是两个都不需要加载的。

设置完毕之后直接保存即可,然后我们找到主题目录下的post.php文件,找到合适的位置,这边handsome我放的位置是标题正下面,具体位置在44-49行,代码:<?php ArticlePoster_Plugin::button($this->cid); ?>放到下面一样的位置就可以了。

    <!--标题下的一排功能信息图标:作者/时间/浏览次数/评论数/分类-->
      <?php echo Content::exportPostPageHeader($this,$this->user->hasLogin()); ?>
      <?php ArticlePoster_Plugin::button($this->cid);//生成海报按钮 ?>
       <!--文章标题下面的小部件-->

然后打开handsome的外观设置,找到pjax回调函数,加入下列函数

$('.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();
});
就此,handsome的设置就完成了,前提是下载的是我修改后的插件,如果不是就继续往下看

三、修改插件

你从github下的文件的话呢,就需要修改了,不然的话,生成的时候挺丑的。u1s1
首先打开插件根目录,找到js目录,打开core.js,修改11-16行,具体修改后如下

    //下载图标
    var download_icon = '<i class="mdui-icon mdui-icon-left material-icons"></i>';
    //错误图标
    var error_icon = '<i class="mdui-icon mdui-icon-left material-icons"></i>';
    //等待图标
    var wait_icon = '<i class="mdui-icon mdui-icon-left material-icons"></i>';
其实就是把<i></i>标签中间的文字给删除了,然后刷新一下cdn缓存即可,然后这样子就好了~想怎么改怎么改吧,刚刚看了一下github,最后一次更新了,提示可以魔改~
提醒:生成的图片在插件目录下的poster文件夹中。一张图片很大,700kb左右哦~记得定期清理哦~

最后修改:2021 年 04 月 13 日 11 : 14 AM
┭┮﹏┭┮感谢您的一份赞助,博主会继续加油的ヾ(◍°∇°◍)ノ゙