我们已经跑通了整个儿流程 但是 我们希望将css和js分离出来，放到单独的文件中 这样可以使我们的文件更加独立，代码也更清爽 我们利用钩子来达到目的 * * * * * 树结构为 │ config.php │ css.html（新文件） │ GuestbookPlugin.php（修改） │ js.html（新文件） │ ├─assets │ └─css │ sy.guestbook.css（新文件） │ ├─controller │ IndexController.php │ ├─data │ config.php │ guestbook.sql │ ├─model │ PluginSyGuestbookModel.php │ ├─validate └─view widget.html（修改） * * * * * js.html ~~~ <!-- Plugins Guestbook JS --> <script src="__STATIC__/js/layer/layer.js"></script> <script src="__STATIC__/js/ajaxForm.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#guestbook-submit').click(function () { $('#guestbook-form').ajaxSubmit({ url: "{:cmf_plugin_url('guestbook://Index/addMsg')}", type: "post", success: function (data) { if (data.code == 0) { layer.msg(data.msg); } else { $('#MessageSent').removeClass("hidden"); layer.msg(data.msg, function () { setTimeout(function () { parent.location.reload(); }, 300); }); } } }); return false; }); }); </script> ~~~ css.html ~~~ <link rel="stylesheet" href="__PLUGIN_ROOT__/assets/css/sy.guestbook.css"> ~~~ * __PLUGIN_ROOT__是插件根路径 不能用__PLUGIN_TMPL__，这样会出现路径错误 sy.guestbook.css ~~~ .section-guestbook { background: #c2c9cd; } ~~~ widget.html ~~~ <div class="section section-guestbook"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <p class="lead">{$desc}</p> <div class="alert alert-success hidden" id="MessageSent"> {$messagesent} </div> <div class="contact-form"> <form id="guestbook-form" class="no-mar" role="form"> <div class="form-group sy-guestbook"> <label for="name">姓名<span class="require-item">*</span></label> <input type="text" class="form-control" id="name" name="name" placeholder=""> <i class="fa fa-user form-control-guestbook"></i> </div> <input id="guestbook-submit" value="提交" class="submit-button btn btn-default"> </form> </div> </div> </div> </div> <!--将js移动到js.html中--> ~~~ GuestbookPlugin.php 完整代码 重点在这里 ~~~ <?php namespace plugins\guestbook; use cmf\lib\Plugin; use think\Db; class GuestbookPlugin extends Plugin { public $info = array( 'name' => 'Guestbook', 'title' => '留言板', 'description' => '留言板描述', 'status' => 1, 'author' => 'duann', 'version' => '1.0' ); public $hasAdmin = 1;//插件是否有后台管理界面 // 插件安装 public function install() { $dbConfig = Config('database'); $dbSql = cmf_split_sql(PLUGINS_PATH . 'guestbook/data/guestbook.sql', $dbConfig['prefix'], $dbConfig['charset']); if (empty($dbConfig) || empty($dbSql)) { $this->error("非法安装"); } $db = Db::connect($dbConfig); foreach ($dbSql as $key => $sql) { $db->execute($sql); } return true;//安装成功返回true，失败false } // 插件卸载 public function uninstall() { $dbConfig = Config('database'); $sql = "DROP TABLE IF EXISTS " . $dbConfig['prefix'] . "plugin_sy_guestbook"; if (empty($dbConfig) || empty($sql)) { $this->error("非法安装"); } $db = Db::connect($dbConfig); try { $db->execute($sql); } catch (\Exception $e) { return false; } return true;//卸载成功返回true，失败false } // 实现的footer钩子方法 public function guestbook($param) { $config = $this->getConfig(); $this->assign($config); echo $this->fetch('widget'); } public function beforeBodyEnd($param) { echo $this->fetch('css'); } public function beforeHeadEnd($param) { echo $this->fetch('js'); } } ~~~ 写完钩子方法后需要点击“更新”插件使用 在需要的地方应用 ~~~ <hook name="guestbook"/> <!--<hook name="before_head_end"/>--> <!--头部已引入before_head_end钩子 这里就不需要了--> <hook name="before_body_end"/> ~~~ 这样就把css js html分离并引入了 #### 需要严重注意的有两点 * 所有的代码中都不能带 <!-- Plugins XXXXXXX --> 这样的代码，因为thinkcmf钩子引入的代码块是先引入放在<!-- -->中，在插入到具体位置，如果你的代码本身带有 <!-- -->，代码运行将会有问题 * 在GuestbookPlugin.php中加入新钩子方法时，一定要更新插件，这样钩子才能生效。 源码生成如图  > 首先感谢WelkinVan 他写的《ThinkCMF5从入门到精通》给了我很多帮助 > 点击去《[ThinkCMF5从入门到精通](https://ihavenolimitations.xyz/welkinvan/thinkcmf5)》 >