首页 > Web开发 > 详细

用phpcms如何将静态页面制作成企业网站(中)

时间:2019-02-25 23:41:27      阅读:199      评论:0      收藏:0      [点我收藏+]

 

上篇博客中讲到了该修改网页的中间部分

中间的内容是这样的,有标题和内容,里面的内容被代码替代,运行起来就这样的

技术分享图片

里面的内容就可以在后台管理那里添加

再来看代码部分

技术分享图片
<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如何将静态页面制作成企业网站(中)

原文:https://www.cnblogs.com/daochong/p/10434595.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!