Typecho给你的博客添加一个自动生成海报按钮~

哦吼吼，又是从别人博客上看到的功能，自己想动手实现，发现有插件了，就跑去用插件了，但是这个插件有点小问题，就是生成的时候那几个文字有点难受，就改了改，然后也对 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>';