用phpcms如何將靜態頁面制作成企業網站（中） @ 互聯網

文章出處

上篇博客中講到了該修改網頁的中間部分

中間的內容是這樣的，有標題和內容，里面的內容被代碼替代,運行起來就這樣的

里面的內容就可以在后臺管理那里添加

再來看代碼部分

<div class="dt-double" style="left: 18.5%;">
                <!--標題-->
                <div class="dt-title">
                    <span class="dt-sp1">行業動態</span>
                    <a href="{$CATEGORYS[14]['url']}"><span class="dt-sp2" style="color: white;">更多>></span></a>
                </div>
                <!--展示項-->
                {pc:content  action="lists" catid="14" order="id DESC" num="4"}
                 {loop $data $val}
                 <div class="dt-item">
                    <a href="{$val[url]}">
                        <div class="dt-item-title">{$val[title]}</div>
                    </a>
                    <div class="dt-item-context">
                        {$val[description]}
                    </div>
                </div>
                 {/loop}
                {/pc}
            </div>

這是行業動態的，資料庫和行業動態一樣，改個catid根據phpcms后臺管理的id來寫

 <!--資料庫-->
            <div class="dt-double" style="right: 18.5%;">

                <!--標題-->
                <div class="dt-title">
                    <span class="dt-sp1">漢企一一資料庫</span>
                    <a href="{$CATEGORYS[8]['url']}"><span class="dt-sp2" style="color: white;">更多>></span></a>
                </div>
                <!--展示項-->
                {pc:content  action="lists" catid="8" order="id DESC" num="4"}
                 {loop $data $val}
                 <div class="dt-item">
                    <a href="{$val[url]}">
                        <div class="dt-item-title">{$val[title]}</div>
                    </a>
                    <div class="dt-item-context">
                        {$val[description]}
                    </div>
                </div>
                 {/loop}
                {/pc}
                
            </div>

然后從后臺管理修改試試

在后臺中加了這兩項

更新緩存，看一下站點首頁

從后臺添加的內容已在首頁顯示

再給資料庫加內容

更新緩存看一下首頁

資料庫的內容也被添加上

再來操作這方面的內容

先在header頁面改個數

原先是5，現在改成6

然后在后臺多加一欄目

然后再往里面添加上三項內容先

然后再來看代碼部分

先審查元素，找到其中的一項內容，保留一項的代碼，其他的都刪掉

 <!--優秀產品展示  開始-->
        <div class="yxxm">
            <div class="yxxm-title">優秀產品展示</div>
            <!--展示項-->
            {pc:content  action="lists" catid="16" order="id DESC" num="6" moreinfo="1"}
                 {loop $data $val}
                 <div class="yxxm-item">
                <a href="{$val['url']}">
                    <img src="{$val['thumb']}" /></a>
                <div class="yxxm-name">
                    項目名稱：
                    <span>{$val['title']}</span>
                </div>
                <div class="yxxm-user">
                    客　　戶：
                    <span>{$val['keywords']}</span>
                </div>
                <div class="yxxm-context">
                    功　　能：
                    <span style="width: 77%;">{$val['description']}</span>
                </div>
                <div class="yxxm-context">
                    開發人員：
                    <span>
                    {php list($copyfrom) = explode('|', $val['copyfrom'])}
                    {$copyfrom}</span>
                </div>
                </div>

                 {/loop}
            {/pc}
            <!--占位勿刪-->
            <div style="clear: both"></div>
        </div>
        <!--優秀產品展示  結束-->

刷新頁面

這樣剛改的內容就顯示在了首頁上

接下來是公司承接

和上面的操作一樣，只保留一個，然后更改代碼

     <!--公司業務承接 開始-->
        <div class="yw">
            <div class="yw-title">公司業務承接</div>
            <div class="yw-items">
                {pc:content  action="lists" catid="13" order="id DESC" num="8" moreinfo="1"}
                 {loop $data $val}
                
                <div class="yw-item">
                    <img src="{$val['thumb']}" />
                    <div class="yw-item-title">
                    {php list($copyfrom) = explode('|', $val['copyfrom'])}
                    {$copyfrom}
                    </div>
                    <div class="yw-item-context">
                        {$val['description']}
                    </div>
                    <div class="yw-item-price">
                        <span class="price-sp">{$val['title']}</span>
                        <span class="price-sp1">價格：
                            <span class="price-sp2">{$val['keywords']}</span>
                            元</span>
                    </div>
                    <a href="{$val['url']}"><input class="btn_buy" type="button" value="點擊訂購" /></a>
                </div>
                {/loop}
            {/pc}
               
            </div>
            <img src="{IMG_PATH}/images/bk2.png" />
        </div>
        <!--公司業務承接 結束-->

然后給承接欄目添加內容

更新緩存，然后查看首頁

下一項是人才

和上面的承接產品一樣

 <!--優秀人才推薦 開始-->
        <div class="rc">
            <div class="rc-title">優秀人才推薦</div>

            <div class="rc-items">
                <!--人才項-->
                {pc:content  action="lists" catid="11" order="id DESC" num="8" moreinfo="1"}
                 {loop $data $val}
                <div class="rc-item">
                    <a href="{$val['url']}">
                        <img src="{$val['thumb']}" />
                        <div class="rc-item-title">{$val['title']}</div>
                    </a>
                    <div class="rc-item-context">{$val['description']}</div>
                </div>
                {/loop}
            {/pc}
                <!--占位勿刪-->
                <div style="clear: both"></div>
            </div>
        </div>
        <!--優秀人才推薦 結束-->

然后在后臺管理那里添加內容，運行后

操作成功

加上上篇博客，這樣首頁就已經替換完了，由靜態頁面變成動態頁面了

再做它的子頁面

在靜態頁面中，它的子頁面應該是這個

在靜態頁面中是這個文件

現在把它復制到phpcms里面，和index路徑一樣

還要改一下文件名，如果是內容頁，名字是list

然后再打開站點首頁，點擊導航欄就會打到子網頁

是這個樣子的

打開list文件，把頭部分的代碼刪掉，引入header文件，如圖

再把頁腳部分代碼替換一下

再來運行看一下

頭部有了

頁腳也有了

然后圖片替換，只有一個

刷新運行一下

導航欄的背景圖就出來了

但是還缺樣式

在list代碼中，再加上一個list樣式

這樣樣式就出來了

再來替換里面的內容

把一側的內容，替換成導航欄

 <!--二級導航 開始-->
        <div class="left">
            <div style="width: 100%; height: 50px; text-align: center; line-height: 50px; font-size: 18px; font-weight: bold;">導航</div>
            
                 <a href="{siteurl($siteid)}">
                    <div class="left-item">首頁</div>
                 </a>
                 {pc:content  action="category" catid="0" order="listorder ASC" num="10" siteid="$siteid"}

                 {loop $data $v}
                      {if $catid==$v[catid] || $top_parentid==$v[catid]}<!--判斷顯示的catid，如果是顯示的catid--> 
                    <a href="{$v[url]}"><div class="left-item xuanzhong">{$v[catname]}</div></a>
                    {else}
                     <a href="{$v[url]}"><div class="left-item">{$v[catname]}</div></a>
                     {/if}
                    
                 {/loop}
                  {/pc}

        </div>
        <!--二級導航 結束-->

運行一下

操作成功

 <!--列表區 開始-->
        <div class="right">
            <div class="list-title">&nbsp;&nbsp;&nbsp;&nbsp;{$CATEGORYS[$catid][catname]}列表</div>

點測導航欄的人才

上面的導航欄會有選中的狀態

點擊側導航承接，列表名，會出現對應的名字

再來替換一下列表項的內容

 <!--列表項-->
             
            {pc:content  action="lists" catid="$catid" order="id DESC" num="10" page="$page"}
             {loop $data $val}
                <div class="right-item">
                    <a href="{$val['url']}">
                        <div class="item-context">{$val['title']}</div>
                    </a>
                    <div class="item-time">{date('Y-m-d H:i:s',$val[inputtime])}</div>
                </div>
             {/loop}
            {/pc}

運行一下

運行成功

這個頁面還有一個友情鏈接，把友情鏈接替換一下

在后臺管理中

這里可以添加友情鏈接，可以添加幾個

然后代碼部分再改一下

  <!--友情鏈接 分割區-->
        <div style="width: 100%; height: 40px; line-height: 40px; text-align: center; background-color: #e0e0e0;">
            友情鏈接：
            {pc:link  action="type_list" typeid="0" siteid="1" linktype="0" order="listorder DESC" num="4" return="pic_link"}<!---linktype="0"  是文字連接，linktype="1" 是logo鏈接-->
             {loop $pic_link $v}
             <a href="{$v['url']}">{$v['name']}</a>&nbsp;&nbsp;
             {/loop}
             {/pc}
            
           
        </div>