15-1 套用佈景

一、免費佈景：

1. https://startbootstrap.com/template-categories/all/
2. 搜尋：「bootstrap template」

二、套用佈景

1. 下載佈景 至 ugm_show/templates/ 下解壓縮(Bootstrap v4.0.0-beta.2)，所以我們後台使用 Bootstrap v3.3.7，前台使用 Bootstrap v4.0.0-beta.2
2. 更改資料夾名稱為「creative」
3. 更改 index.php 的佈景目錄

   #佈景目錄
   $WEB['theme_name'] = "creative";

    

4. 將 「creative/index.html」更改為 「creative/theme.tpl」

三、修正路徑的錯誤

1. 「"vendor/」=> 「"<{$xoImgUrl}>vendor/」(錯誤剩10個)
2. 「"css/」 => 「"<{$xoImgUrl}>css/」(錯誤剩8個)
3. 「"js/」=> 「"<{$xoImgUrl}>js/」(錯誤剩7個)
4. 「"img/」=> 「"<{$xoImgUrl}>img/」(錯誤剩1個 找不到favicon.ico) 

四、修正favicon.ico

五、開始拆解佈景

1. 導航列：需要「網站名稱」
   網站名稱：在head.php 增加一個 「$WEB['siteName']」的變數

   
   #網站名稱
   $WEB['siteName'] = "台南社區大學10602";

   將「Start Bootstrap」換成 「<{$WEB.siteName}>」
    
2. 導航列：需要選單
   這裡只有在前台的佈景需要「導航列」，可以在程式中取得選單管理，導航列在所有的前台都需要，因此可以在 head.php or foot.php，取得並送至樣板。
   選單的關鍵字：「menuTop」層數：「1」，請至 「admin_nav.php」修改
   請至選單管理建立選單
   建立好後，在程式取得，這邊我們自己定義一下，後台全部都的變數在「head.php」，前台全部都要的變數在「foot.php」
   foot.php

   
   #前台
   if($WEB['theme_name'] != "admin"){
   
     # ----得到上方選單 ----------------------------  	
   	#引入類別物件
   	include_once WEB_PATH . "/class/ugmKind.php";
   	#實體化 類別物件
   	$tblKey = "{$WEB['moduleName']}_kind";     //選單資料表
   	$kindKey = "menuTop";											 //選單關鍵字	
   	$stopLevel = 1;                            //層數
   	$moduleName = $WEB['moduleName'];          //專案名稱
   	//(資料表,分類，層數，父層)
   	$ugmKind = new ugmKind($tblKey, $kindKey, $stopLevel,$moduleName);//
   	#---------------------------------
   	$enable = true;
     $menuTop = $ugmKind->get_listArr(0,1,$enable);
   	$smarty->assign("menuTop", $menuTop);
   	#-----------------------------------------------
   }

    

3. theme.tpl

   
               <{foreach from=$menuTop item=row key=k}>
                 <li class="nav-item">
                   <a class="nav-link js-scroll-trigger" href="<{$row.url}>" <{if $row.target}>target="_blank"<{/if}>><{$row.title}></a>
                 </li>
               <{/foreach}>

    

4.