
醉书生
本文共有四种海报样式,原版的话,不太适合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,修改注释部分图标样式。
自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
下载地址:
密码: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']),
在合适的位置加入挂载点。
<?php ArticlePoster_Plugin::button($this->cid); ?>
海报插件后台——自定义按钮样式插入:
后台是否加载mdui,开启加载的:
<script src="https://cdn.jsdelivr.net/gh/cy-i/[email protected]/js/mdui.min.js"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/cy-i/[email protected]/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");
下载地址:
密码:
一蓑一笠一孤舟,万里江山独自游;有人问我红尘事,坐等回复不点头
在合适的位置加入挂载点。
<?php ArticlePoster_Plugin::button($this->cid); ?>
修改版3共有16种按钮样式,如图所示:且每一个按钮都有动画显示,纯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。
注:√ 适合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>
注:√ 适合Joe7.X.X及以上新版,√ 适合4.7.7及以下老版
下载地址:
密码:
一蓑一笠一孤舟,万里江山独自游;有人问我红尘事,坐等回复不点头
如果想加入一个同款样式打赏功能的话,看……
给你的网站增加赞赏支持功能
https://chenyu.me/1358.html
又一款漂亮的不要不要的打赏码
https://chenyu.me/1412.html
上面的ICON图标我是采用的阿里的,因为我有时候会加入或修改图标,因此CSS地址会变,当然你们可以用其他网站的图标地址,如果用我阿里的话,失效了就到这里看一下,我会即时更新,当然,一般我也不会去修改它。
如果安装海报后异常,比如点赞里的心不显示,或有些地方只显示白圆……请一定要注意以下设置:
Joe4.X.X老版:是否加载jquery 是
Joe7.X.X新版:是否加载jquery 否
修改后如没有生效请清空缓存或Ctrl+F5强制刷新一下!
感谢大佬分享
666666666666666
66666666
请问博主(部署天高云淡版)怎么做到你的这种点击弹出视频效果。
用的layui哦,代码可以直接从网站拿,只要引用layui的js和css即可
可以加您吗,有偿帮助下谢谢博主
加群吧,我新发的文章里的加群方式!互相学习,免费交流!
请问博主(部署天高云淡版)怎么才能做到你的点击弹窗出现视频播放器
XIEXIE
谢谢分享
枕上诗书闲处好,门前风景雨来佳。----《摊破浣溪沙·病起萧萧两鬓华》
看就看
看看
555
看看
请问博主(部署天高云淡版)出现海报生成失败,随后图标变成其他的图片,怎么解决呢
你可能有步骤错过了,仔细排查一下呢
岸岸
你好
你也好!
改了后 文章页打不开了。。。。。
你应该少改了东西!绝对的
感谢OωO
感谢