您现在的位置是：首页 > cms教程 > shopxo教程shopxo教程

shopxo插件开发钩子引入静态css/js的方法

阿森2025-07-25shopxo教程已有人查阅

导读如果一些小插件，没有控制器，但是页面显示的内容可能需要css或者js，我们也可以在config.json里面定义 plugins_css 或 plugins_js 钩子

如果一些小插件，没有控制器，但是页面显示的内容可能需要css或者js，我们也可以在config.json里面定义 plugins_css 或 plugins_js 钩子

{
"base":{
"plugins":"test_xxx",
"name":"测试插件",
"logo":"\/static\/upload\/images\/plugins_test_xxx\/2025\/04\/21\/1745219584289850.jpg",
"author":"Devil",
"author_url":"https:\/\/shopxo.net\/",
"version":"1.0.0",
"desc":"测试插件的开发",
"apply_terminal":[
"pc",
"h5"
],
"apply_version":[
"6.5.0"
],
"is_home":false
},
"extend":"",
"hook":{
"plugins_css":[
"app\\plugins\\test_xxx\\Hook"
],
"plugins_js":[
"app\\plugins\\test_xxx\\Hook"
]
}
}

Hook.php里面使用指定自己随便创建的css或js文件，路径位置都没要求，如下：
public/static/plugins/text_xxx/css/index/public/style.css
public/static/plugins/text_xxx/js/index/public/style.js
public/static/plugins/text_xxx/js/index/public/style2.js
public/static/plugins/text_xxx/js/index/public/style3.js

<?php
namespace app\plugins\test_xxx;
// 测试插件 - 钩子入口
class Hook
{
// 应用响应入口
public function handle($params = [])
{
// 钩子名称
if(!empty($params['hook_name']))
{
// 走钩子
$ret = '';
switch($params['hook_name'])
{
case 'plugins_css' :
$ret = 'static/plugins/text_xxx/css/index/public/style.css';
break;
case 'plugins_js' :
// 我们也可以自己通过一些条件限制，哪些页面需要引入在这里做判断即可
// 单个文件引入
$ret = 'static/plugins/text_xxx/js/index/public/style.js';
// 如果要同时引入多个文件也可以使用数组的方式，如：
$ret = [
'static/plugins/text_xxx/js/index/public/style.js',
'static/plugins/text_xxx/js/index/public/style2.js',
'static/plugins/text_xxx/js/index/public/style3.js',
];
break;
}
return $ret;
}
}
}
?>

如果静态的代码太少，您觉得引入文件太麻烦了，也可以直接写css或者js，直接使用头尾钩子 plugins_common_header 和 plugins_common_page_bottom 参考如下：
config.json 文件

{
"base":{
"plugins":"test_xxx",
"name":"测试插件",
"logo":"\/static\/upload\/images\/plugins_test_xxx\/2025\/04\/21\/1745219584289850.jpg",
"author":"Devil",
"author_url":"https:\/\/shopxo.net\/",
"version":"1.0.0",
"desc":"测试插件的开发",
"apply_terminal":[
"pc",
"h5"
],
"apply_version":[
"6.5.0"
],
"is_home":false
},
"extend":"",
"hook":{
"plugins_common_header":[
"app\\plugins\\test_xxx\\Hook"
],
"plugins_common_page_bottom":[
"app\\plugins\\test_xxx\\Hook"
]
}
}

Hook.php 文件

<?php
namespace app\plugins\test_xxx;
// 测试插件 - 钩子入口
class Hook
{
// 应用响应入口
public function handle($params = [])
{
// 钩子名称
if(!empty($params['hook_name']))
{
// 走钩子
$ret = '';
switch($params['hook_name'])
{
// 网站head内 插入css代码
case 'plugins_common_header' :
$ret = '<style type="text/css">
.name {
font-size: 200px;
color: #f00;
}
</style>';
break;
// 网站底部插入js代码
case 'plugins_common_page_bottom' :
$ret = '<script type="text/javascript">
alert("test_xxx js");
</script>';
break;
}
return $ret;
}
}
}
?>

PS：config.json 文件增加或移除钩子后，需要在后台左侧应用 -> 应用管理里面重启插件