网站建设

ArticlePoster海报四版齐发任君选

醉书生站长

2021年04月08日

75 评论

2,329 阅读

检测收录...

04/08

本文最后更新于2021年06月20日，已超过343天没有更新，若内容或图片失效，请留言反馈。

本文共有四种海报样式，原版的话，不太适合Joe主题，很多地方要修改。其他三种样式是针对Joe主题所做的优化，可以直接使用，无需修改，Joe有两个版本，一个是4.7.7及以下老版本，作者已经不更新，一个是7.x.x及以上新版，作者一直在更新。本站海报样式具体适配请看说明。

具体说明：
原版：不太适合Joe主题，很多地方要修改。
明月清风版：√ 适合Joe7.X.X及以上新版， √ 适合4.7.7及以下老版
百花齐放版：√ 适合Joe7.X.X及以上新版， √ 适合4.7.7及以下老版
天高云淡版：√ 适合Joe7.X.X及以上新版， × 不适合4.7.7及以下老版(需自己修改，本站未提供)

原版

安装说明：

1、将插件上传到**/usr/plugins/，如果从Github下载的，要重命名为ArticlePoster。
2、修改post.php，在合适的位置加入挂载点。

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

3、在后台插件设置填写好信息，一定要填自定义分享按钮样式，并且在class里面加入article-poster-button 。
4、如果你的模板没有引入jquery或者上述过程都设置好了点击按钮无响应，可以开启加载jquery。
5、修改图标部分可以找到/usr/plugins/ArticlePoster/js/core.js，修改注释部分图标样式。

pjax适配

自1.0.6之后重新调整对于pjax的适配方案，如果主题有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();
});

原版下载：

下载地址：https://github.com/MoLeft/ArticlePoster
下载地址：https://share.weiyun.com/jbSXapmg
密码：jpjscw

修改图片源

原版的海报调用的是必应的每日图片,但同一天生成的都是一样的。
ArticlePoster/service/api.php第179行：

'stream' => get_curl('https://api.btstu.cn/sjbz/api.php?lx=dongman'.json_decode(get_curl("https://api.btstu.cn/sjbz/api.php?lx=dongman&format=json"),true)['images'][0]['url']),

下面再提供一个源：
lx=分类名，如meizi，dongman，fengjing，suiji，为空随机输出！
ArticlePoster/service/api.php第179行：

'stream' => get_curl('https://api.btstu.cn/sjbz/api.php?lx=fengjing'.json_decode(get_curl("https://api.btstu.cn/sjbz/api.php?lx=fengjing&format=json"),true)['images'][0]['url']),

以下修改版是针对Joe主题所做的修改！

明月清风版

修改post.php

在合适的位置加入挂载点。

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

修改插件后台

海报插件后台——自定义按钮样式插入：
后台是否加载mdui，开启加载的：

<script src="https://cdn.jsdelivr.net/gh/cy-j/blog@5.0.0/js/mdui.min.js"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/cy-j/blog@5.0.0/js/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>

后台是否加载mdui，未开启加载的：

<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>

明月清风版下载

注：√ 适合Joe7.X.X及以上新版，√ 适合4.7.7及以下老版
如果想要显示图标，如图2，具体效果可以见本站。在usr/plugins/ArticlePoster/css 目录下core.css文件最上面插入如下CSS代码：

@import url("//at.alicdn.com/t/font_2454184_21fnyig2i9d.css");

下载地址：https://share.weiyun.com/WsPf3Ul7
密码：

一蓑一笠一孤舟，万里江山独自游；有人问我红尘事，坐等回复不点头

百花齐放版

修改post.php

在合适的位置加入挂载点。

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

修改版3共有16种按钮样式，如图所示：且每一个按钮都有动画显示，纯CSS实现。

使用方法：

修改CSS样式

一蓑一笠一孤舟，万里江山独自游；有人问我红尘事，坐等回复不点头

修改插件后台

<button class="custom-btn btn-16"><span class="article-poster-button">海报</span></button>

共有16种按钮样式，custom-btn btn-1，custom-btn btn-2，custom-btn btn-3……到custom-btn btn-16。

天高云淡版

修改handle.php

注：√ 适合Joe7.X.X及以上新版，× 不适合4.7.7及以下老版（老版要在post.fabulous.php中修改）

一蓑一笠一孤舟，万里江山独自游；有人问我红尘事，坐等回复不点头

修改插件后台

海报插件后台——自定义按钮样式插入：

  <div class="icon ysnihb">
  <div class="tooltip">海报</div>
<span class="article-poster-button"><i class="iconfont iconhaibaofenxiang"></i></span>
  </div>