logo星之书笔记

WienDesign | 左手代码,右手诗词

avatar

网名:Oliver Wien | 奥利弗·韦恩

职业:Web前端设计师、网页设计

现居地:陕西省-西安市-雁塔区

Phone:+86 182 2052 3738

Email:oliverwien@126.com

Addthis页面分享ThinkCMF插件制作


效果图:

205983f09b48ee34be09ad33a25ffe1f.png

一、准备工作

首先想好,制作的这个插件你打算挂载在什么位置。

比如:我想把插件挂载在侧边栏的底部,默认是没有这个钩子的,那就需要我们来自定义一个钩子。

添加自定义钩子: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的样式,可根据个人喜好自己修改。如有什么问题,下方留言或者直接联系我!

Comments 0