1. 程式人生 > >用phpcms如何將靜態頁面制作成企業網站(中)

用phpcms如何將靜態頁面制作成企業網站(中)

hit pre 判斷 value 博客 後臺 rom index lis

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

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

技術分享圖片

裏面的內容就可以在後臺管理那裏添加

再來看代碼部分

技術分享圖片
<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; ">
            友情鏈接:
            {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>
技術分享圖片

運行後

技術分享圖片

後臺的模塊友情鏈接一共有四個,其中這兩個是文字鏈接,其他兩個是logo鏈接,設置的是顯示文字連接,所以出來的是這兩個

這樣友情鏈接也操作完成了

用phpcms如何將靜態頁面制作成企業網站(中)