我們已經跑通了整個兒流程 但是 我們希望將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從入門到精通](http://www.hmoore.net/welkinvan/thinkcmf5)》 >