效果图:

一、准备工作
首先想好,制作的这个插件你打算挂载在什么位置。
比如:我想把插件挂载在侧边栏的底部,默认是没有这个钩子的,那就需要我们来自定义一个钩子。
添加自定义钩子:sidebar_end
文件地址:.\ThinkCMFX\app\portal\hooks.php
< php return [ 'sidebar_end' => [ "type" => 3,//钩子类型(默认为应用钩子;2:应用钩子;3:模板钩子;4:后台模板钩子) "name" => '侧边栏结束', // 钩子名称 "description" => "侧边栏结束", //钩子描述 "once" => 0 // 是否只执行一次 ], ];
模板中添加钩子:
<hook?name="sidebar_end"/>
注1:“type”=>3,模板钩子
注2:网站后台->钩子管理->同步钩子
二、制作插件
目录结构:
share_addthis ├─view │ └─widget.html └─ShareAddthisPlugin.php
ShareAddthisPlugin.php 文件
< php
namespace plugins\share_addthis;
use cmf\lib\Plugin;
class ShareAddthisPlugin extends Plugin
{
public $info = [
'name' =>'ShareAddthis',
'title' =>'Addthis分享',
'description' =>'页面分享效果插件',
'status' =>1,
'author' => 'Wien Designs',
'version' => '1.0',
'demo_url' => 'https://www.wien.ren',
'author_url' => 'https://www.wien.ren'
];
// 插件安装
public function install()
{
return true;//安装成功返回true,失败false
}
// 插件卸载
public function uninstall()
{
return true;//卸载成功返回true,失败false
}
//自定义sidebarEnd钩子方法
public function sidebarEnd($param)
{
echo $this->fetch('widget');
}
}
widget.html 文件
<style type="text/css">
.addthis_toolbox a span{width:42px!important;height:42px!important;}/* 修改默认图标大小 */
.addthis_toolbox a span svg{width: inherit!important;height: inherit!important;}
.addthis-top{display: flex;justify-content: space-around;}
</style>
<div class="addthis_toolbox addthis_default_style">
<div class="addthis-top">
<a class="addthis_button_linkedin"></a>
<a class="addthis_button_wechat"></a>
<a class="addthis_button_qzone"></a>
<!--<a class="addthis_button_twitter"></a>
<a class="addthis_button_facebook"></a>
<a class="addthis_button_google_plusone_share"></a>-->
<a class="addthis_button_sinaweibo"></a>
<a class="addthis_button_compact"></a><div style="clear:both"></div>
</div>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":false};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-55754f584f46a708" async="async"></script>
这个插件非常的简单,就增加个自定义钩子,创建两个文件,js文件引用的是网络路径。
css的样式,可根据个人喜好自己修改。如有什么问题,下方留言或者直接联系我!
星之书笔记