[TOC] #基礎 ## 1、全局變量 NewThink封裝了前臺模板開發時常用的一些變量，這些變量是全局的，你在前臺模板任何時候都能直接調用： ``` {$site_name} //站點名稱 {$site_host} //站點域名 {$site_root} //安裝目錄 {$site_icp} //備案信息 {$site_police} //公安局備案信息 {$site_company_address} //公司地址 {$site_admin_email} //管理員郵箱 {$site_copyright} //版權信息 {$site_tongji} //頁面統計代碼 {$site_seo_title} //SEO標題 {$site_seo_keywords} //SEO關鍵字 {$site_seo_description} //SEO描述 ``` ## 2、模板注釋 js注釋： ```html <script> /* js注釋*/ </script> ``` css注釋 ```html <style> /*css注釋*/ </style> ``` html注釋 ```html <div> <!--html注釋--> </div> ``` php標簽里的注釋 ```html <php> /*一定要用這個方法，用//會在debug關時出問題*/ </php> ``` ## 3、模板常量 ``` __ROOT__ //網站根目錄，不帶/ __TMPL__ //模板根目錄，帶/ //如:前臺 simplebootx 模板根目錄是/themes/simplebootx/ //后臺 simplebootx模板根目錄是/admin/themes/simplebootx/ __PUBLIC__ //public目錄,不帶/ ``` ## 4、變量輸出 請參考：http://www.hmoore.net/manual/thinkphp/1794 ## 5、使用函數 請參考：http://www.hmoore.net/manual/thinkphp/1796 ## 6、模板結構 NewThink模板目錄結構如下： ``` |--themes |--simplebootx |--Portal |--index.html ``` 模板開發時我們僅需要在`themes`目錄下創建一個模板文件夾，假設為`simplebootx`，`simplebootx`文件夾下我們需要創建一個應用名稱的文件夾，比如`Portal`。一般情況下我們還會創建一個`Public`文件夾用來存放公共的css，js等資源文件。 ``` |--themes |--simplebootx //模板目錄 |--Comment |--comment.html //評論模板，{:Comments()}中會調用 |--index.html //用戶中心評論模板（鏈接:comment/comment/index） |--Portal |--404.html //錯誤模板 |--article.html //默認文章頁模板 |--contact.html //聯系我們頁面模板，可以后臺頁面編輯里更改，只需寫文件名contact |--index.html //首頁模板 |--list_masonry.html //文章列表頁瀑布流模板 |--list.html //文章列表頁模板 |--page.html //默認頁面模板 |--product.html //產品列表頁模板，可以在后臺分類編輯里設置列表頁模板，只需寫文件名product |--search.html //文章搜索頁模板 |--Public //模板公共資源目錄 |--User |--Profile |--avatar.html //頭像編輯界面 |--bang.html //第三方賬號綁定界面 |--edit.html //資料編輯界面 |--password.html //密碼修改界面 |--active.html //用戶激活模板 |--center.html //用戶中心模板 |--disable.html //用戶未激活，重發激活郵件模板 |--favorite.html //我的收藏模板 |--forgot_password.html //忘記密碼模板 |--index.html //用戶主頁，公開主頁 |--login.html //用戶登錄模板 |--password_reset.html //密碼重置模板 |--register.html //用戶注冊模板 |--config.html //模板配置文件 |--jump.html //系統跳轉頁模板 |--error.html //系統action錯誤模板 |--success.html //系統action操作成功模板 ``` ## 7、模板資源文件引入 引入css文件： ```html <!-- 引入simpleboot庫,此文件必須引入--> <link href="__TMPL__Public/simpleboot/themes/simplebootx/theme.min.css" rel="stylesheet"> <!-- 引入simpleboot responsive庫,此文件可選擇引入，用于支持多屏幕響應--> <link href="__TMPL__Public/simpleboot/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet"> <!-- 引入奧森圖標庫,此文件可選擇引入，用于支持字體圖標，用法見http://www.thinkcmf.com/font--> <link href="__TMPL__Public/simpleboot/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"> <!-- 引入奧森圖標ie7支持庫,此文件可選擇引入，用于支持IE7字體圖標，用法見http://www.thinkcmf.com/font--> <!--[if IE 7]> <link rel="stylesheet" href="__TMPL__Public/simpleboot/font-awesome/4.4.0/css/font-awesome-ie7.min.css"> <![endif]--> <!-- 引入自定義css庫，用戶可加入自己的css組件--> <link href="__TMPL__Public/css/style.css" rel="stylesheet"> ``` 以上內容加在</head>標簽以前 引入js文件： ```html <script type="text/javascript"> //全局變量,必須加入 var GV = { DIMAUB: "__ROOT__/", JS_ROOT: "public/js/" }; </script> <!-- 引入jquery--> <script src="__PUBLIC__/js/jquery.js"></script> <!-- 引入wind庫，用于js異步加載--> <script src="__PUBLIC__/js/wind.js"></script> <!-- 引入bootstrap庫，包含bootstrap各種組件--> <script src="__TMPL__Public/simpleboot/bootstrap/js/bootstrap.min.js"></script> <!-- 引入NewThink前端庫，包含NewThink各種組件，方法，如評論，贊等--> <script src="__PUBLIC__/js/frontend.js"></script> ``` 以上內容加在`</body>`標簽以前