原文地址 http://blog.csdn.net/tianpeiwen/article/details/8331668
<!-- 首先說明一下網站模板主要放在根目錄\phpcms\templates\default下,各文件夾按功能放置相應模板,content文件夾下主要放置全站的頁頭、頁尾等模板 --> <!-- 另外一個要說明一下的就是標籤,標籤的做用就是把數據庫裏的數據調用出來顯示。平時咱們發佈文章,文章信息都是寫入數據庫,頁面須要顯示那條數據而後從數據庫調用,調用數據的程序繁瑣。標籤好處是,你說明一下你要哪一個欄目、什 <!-- 下面開始學習頁頭 header.html --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- 上面一行主要看文件編碼方式爲utf-8--> <meta http-equiv="X-UA-Compatible" content="IE=7" /> <title>{if isset($SEO['title']) && !empty($SEO['title'])}{$SEO['title']}{/if}{$SEO['site_title']}</title> <!-- 上一行,判斷語句 翻譯:若是設置了標題而且標題不爲空,則顯示標題,不然顯示網站名稱 --> <meta name="keywords" content="{$SEO['keyword']}"> <meta name="description" content="{$SEO['description']}"> <!-- 上面兩行主要是頁面的關鍵詞和描述 --> <link href="{CSS_PATH}reset.css" rel="stylesheet" type="text/css" /> <link href="{CSS_PATH}default_blue.css" rel="stylesheet" type="text/css" /> <!-- 上面兩行調用網站根目錄下\statics\css下兩個css樣式文件 --> <!-- 上面三行調用網站根目錄下\statics\js下三個js文件,前面兩個jquery打頭的js文件是jquery的功能文件,不用管,我如今也不清楚詳細功能,可是不能丟了。下面凡是沒有定義的函數均可以在search_common.js文件中找到如何定義的--> </head> <body> <div class="body-top"> <div class="content"> {pc:content action="position" posid="9" order="id" num="10" cache="3600"} <!--{pc標籤:內容模板標籤 動做=「內容推薦位列表」 推薦位id=「9」 排序方式=「id序號」 調用條數=「10條」 緩存時間=「3600」--> <div id="announ"> <ul> {loop $data $k $v} <!-- 這裏是用loop調出數據,因爲使用pc標籤把數據調用出來後,結果是個數組,沒法直接顯示,loop把數組裏的數據逐個調用出來 若是不知道數組是什麼,百度一下看看,簡單解釋就是數組相似魔方 每一個小方塊就是一條信息。 --> <li><a href="{$v[url]}">{$v[title]}</a></li> {/loop} </ul> </div> {/pc} <script type="text/javascript"> $(function(){ startmarquee('announ',22,1,500,3000); }) </script> <!-- 上面startmarquee函數主要是實現字幕的滾動。看模板主頁最上面有個喇叭,後面應該就是滾動字幕。 --> <div class="login lh24 blue"> <a href="{APP_PATH}index.php?m=content&c=rss&siteid={get_siteid()}" class="rss ib">rss</a> <span class="rt"></span></div> </div> </div> <div class="header"> <div class="logo"><a href="/"><img src="{IMG_PATH}v9/logo.jpg" /></a></div> <!-- 上面div 網站標誌 --> <div class="search"> <div class="tab" id="search"> {php $j=0} <!-- 定義一個變量j,初始值爲0 --> {php $search_model = getcache('search_model_'.$siteid, 'search');}。 <!-- 上一行使用函數getcache,功能是讀取緩存文件,其中函數括號裏是參數,前面一個參數--'search_model_'.$siteid,表示文件名,後面參數--'search'表示路徑。變量$siteid是網站id,能夠在網站後臺《站點管理》裏看到siteid幾?通常一個網站siteid就是1。這樣咱們能夠知道他讀取的是那個文件了,就是根目錄下\caches\caches_search\caches_data\search_model_1.cache文件,我把這個文件代碼貼出來: <?php return array ( 1 => array ( 'typeid' => '1', 'name' => '新聞', 'sort' => '1', ), 3 => array ( 'typeid' => '3', 'name' => '圖片', 'sort' => '2', ), 2 => array ( 'typeid' => '2', 'name' => '下載', 'sort' => '3', ), 'special' => array ( 'typeid' => '52', 'name' => '專題', ), ); ?> 因此返回結果$search_model是個數組,你們對照主頁看看網站標誌logo旁邊,搜索框上面的「新聞」、「圖片」、「下載」、「專題」滑動按鈕怎麼來的吧。可是因爲是個數組,還須要逐條讀取。 同時指出:getcache函數位於根目錄\phpcms\libs\functions\global.func.php文件中。--> {loop $search_model $k=>$v} <!-- 上面又是loop,從剛纔解釋知道$search_model是個數組,仍然須要loop一個一個的取出來 --> {php $j++;} <!-- 這裏定義每次讀取一個數組元素變量 j就加1--> <a href="javascript:;" onclick="setmodel({$v['typeid']}, $(this));" style="outline:medium none;" hidefocus="true" {if $j==1 && $typeid=$v['typeid']} class="on" {/if}>{$v['name']}</a>{if $j != count($search_model)}<span> | </span>{/if} <!-- 上面這部分,看上去複雜,其實是對剛上面「新聞」、「圖片」、「下載」、「專題」四個連接的樣式應用的判斷。有興趣的繼續看,講起來比較麻煩,主要是超連接a裏面的內容,慢慢說吧。 首先,你先去主頁看看,分別點「新聞」、「圖片」、「下載」、「專題」有什麼區別,對了就是點那個,那個就加粗了。實際上就是那個加了class=「on」樣式。咱們能夠打開最上面調用的css樣式文件驗證,位置根目錄\statics\css\default_blue.css找到on的定義: .header .search .tab a.on{ font-weight:700} 文字加粗到700 下面咱們再來看看超連接裏面的各項參數: href="javascript:;" --表示不作任何操做 onclick="setmodel({$v['typeid']}, $(this));"--表示點擊的時候執行函數setmodel style="outline:medium none;" 表示超連接外輪廓樣式 hidefocus="true"--表示超連接在點擊的時候不聚焦,就是點擊的時候超連接沒有外框的虛線框 上面這些都不難理解。 下面來看判斷,把A超連接裏的不重要的參數先取掉。咱們來理解一下 讀取第一條數據 {loop $search_model $k=>$v} 此時$v['typeid']=1, $v['name']=新聞,$v['sort']=1, {php $j++;} 這裏j=0+1=1 <a {if $j==1 && $typeid=$v['typeid']} class="on" {/if}>{$v['name']}</a> 翻譯代碼:若是j=1而且變量$tyeid賦值=1,給超連接加樣式class="on"。由上面知道j確實爲1,因此給變量$tyeid賦值=1,給此時的$v['name'],即「新聞」超連接加上樣式class="on" {if $j != count($search_model)}<span> | </span>{/if} 上面一行count($search_model)}是統計$search_model數組元素個數,咱們知道看上面的緩存文件知道爲4。此時j任然爲1因此,判斷j不等於4,因此在「新聞」超連接後面顯示一個「| 」 {/loop} 讀取第二條數據 {loop $search_model $k=>$v} 此時$v['typeid']=3, $v['name']=圖片,$v['sort']=2, {php $j++;} 這裏j=1+1=2 <a {if $j==1 && $typeid=$v['typeid']} class="on" {/if}>{$v['name']}</a> 此時j爲2,不等於1,因此$typeid不賦值。「圖片」超連接不加樣式class="on" {if $j != count($search_model)}<span> | </span>{/if} 判斷j不等於4,因此在「新聞」超連接後面顯示一個「| 」 loop} 讀取第三條數據,判斷和第二條同樣。 讀取第四條數據,最後,j=4了,因此因此在「專題」超連接後面不顯示「| 」 這裏這個判斷就講完了。這個判斷只在加載頁面的時候執行。 我有一點不理解的就是這句--if $j==1 && $typeid=$v['typeid'],&&先後一個是邏輯操做符==,一個是賦值運算符=。有高手給指定一下。 下面還須要講一下,當點擊「新聞」、「圖片」、「下載」、「專題」四個連接時候,樣式的改變。主要是經過調用函數setmodel實現。 setmodel函數位於statics\js\search_common.js中。咱們來看看函數 function setmodel(value, id, siteid, q) { $("#typeid").val(value); $("#search a").removeClass(); id.addClass('on'); if(q!=null && q!='') { window.location='?m=search&c=index&a=init&siteid='+siteid+'&typeid='+value+'&q='+q; } } 當頁面第一次加載完成後,你如今能夠用瀏覽器瀏覽主頁,用上面的【查看】-【查看源文件】能夠看到,「圖片」超連接裏onclick的代碼--onclick="setmodel(3, $(this));",這裏的變量$(this)指的是你當前點擊的這個超連接a。好比你點」圖片「時候, 函數執行以下: function setmodel(3,圖片超連接) { $("#typeid").val(3); 對下面的Form搜索框中id=typeid的input的value賦值爲3 $("#search a").removeClass(); 移除search層內所說有超連接的class樣式 id.addClass('on'); 給"圖片超連接"加上class=on的樣式 if(q!=null && q!='') { 這個是搜索的參數傳遞 window.location='?m=search&c=index&a=init&siteid='+siteid+'&typeid='+value+'&q='+q; } } --> {/loop} {php unset($j);} <!--循環讀取完了,unset撤銷掉變量j--> </div> <div class="bd"> <form action="{APP_PATH}index.php" method="get" target="_blank"> <!-- 這裏注意action,事件提交給了index.php文件處理。這裏{APP_PATH}的定義看了一下函數沒有看明白。高手解釋一下。 --> <input type="hidden" name="m" value="search"/> <input type="hidden" name="c" value="index"/> <input type="hidden" name="a" value="init"/> <input type="hidden" name="typeid" value="{$typeid}" id="typeid"/> <input type="hidden" name="siteid" value="{$siteid}" id="siteid"/> <!-- 這裏注意變量{$typeid}和{$siteid},$typeid我上面已經講過了,在加載頁面和點擊那四個超連接的時候會改變。$siteid變量就是1 --> <input type="text" class="text" name="q" id="q"/><input type="submit" value="搜 索" class="button" /> </form> <!-- 上面是搜索框代碼,主要的地方我講解了。 --> </div> </div> 複製代碼 <head> <meta http-equiv=」Content-Type」 content=」text/html; charset={CHARSET}」 />{CHARSET}」 =字符集 (gbk或者utf-8) <meta http-equiv=」X-UA-Compatible」 content=」IE=7″ /> <title>{if isset($SEO['title']) && !empty($SEO['title'])}{$SEO['title']}{/if}{$SEO['site_title']}</title> 判斷語句 翻譯:若是設置了標題而且標題不爲空,則顯示標題,不然顯示網站名稱 <meta name=」keywords」 content=」{$SEO['keyword']}」> <meta name=」description」 content=」{$SEO['description']}」> <link href=」{CSS_PATH}reset.css」 rel=」stylesheet」 type=」text/css」 /> <link href=」{CSS_PATH}default_blue.css」 rel=」stylesheet」 type=」text/css」 /> 上面2行是外部css的調用{CSS_PATH} 上面3行是網頁的js調用 </head> <body> <div> <div> {pc:content action=」position」 posid=」9″ order=」id」 num=」10″ cache=」3600″} <div id=」announ」> <ul> {loop $data $k $v} <li><a href=」{$v[url]}」>{$v[title]}</a></li> {/loop} </ul> </div> {/pc} <script type=」text/javascript」> $(function(){ startmarquee(‘announ’,22,1,500,3000); }) </script> <div><a href=」{APP_PATH}index.php?m=content&c=rss&siteid={get_siteid()}」>rss</a><span></span></div> </div> </div> <div> <div><a href=」/」><img src=」{IMG_PATH}v9/logo.jpg」 /></a></div> 下面是搜索部分 <div> <div id=」search」> {php $j=0} {php $search_model = getcache(‘search_model_’.$siteid, ‘search’);} {loop $search_model $k=>$v} {php $j++;} <a href=」javascript:;」 style=」outline:medium none;」 hidefocus=」true」 {if $j==1 && $typeid=$v['typeid']} {/if}>{$v['name']}</a>{if $j != count($search_model)}<span> | </span>{/if} {/loop} {php unset($j);} </div> <div> <form action=」{APP_PATH}index.php」 method=」get」 target=」_blank」> <input type=」hidden」 name=」m」 value=」search」/> <input type=」hidden」 name=」c」 value=」index」/> <input type=」hidden」 name=」a」 value=」init」/> <input type=」hidden」 name=」typeid」 value=」{$typeid}」 id=」typeid」/> <input type=」hidden」 name=」siteid」 value=」{$siteid}」 id=」siteid」/> <input type=」text」 name=」q」 id=」q」/><input type=」submit」 value=」搜 索」 /> </form> </div> </div> 搜索部分結束 <div></div> <div></div> <div> <map> {pc:content action=」category」 catid=」0″ num=」25″ siteid=」$siteid」 order=」listorder ASC」} <ul> <li><a href=」{siteurl($siteid)}」><span>首頁</span></a></li> {loop $data $r} <li>|</li> <li><a href=」{$r[url]}」><span>{$r[catname]}</span></a></li> {/loop} </ul> {/pc} </map> </div> {if $top_parentid} <div> {pc:content action=」category」 catid=」$top_parentid」 num=」15″ siteid=」$siteid」 order=」listorder ASC」} {loop $data $r} <a href=」{$r[url]}」>{$r[catname]}</a><span> | </span> {/loop} {/pc} {if $modelid}<a href=」{APP_PATH}index.php?m=content&c=search&catid={$catid}」>搜索</a>{/if} </div> {/if} </div>