海洋CMS

 找回密码
 注册加入

海洋cms最新动态 关注跟踪研发进展,共创和谐未来 开源透明 完全免费 - 极致专注 精益求精

海洋CMS 6.x 正式版下载 永久免费并开源的影视建站程序 使用教程 - 模板标签 - 模板 - 播放器

火车头采集发布视频文章 - - 定时自动采集教程 迅雷下载展示插件及教程 - - 定时自动生成使用说明 原MaxCms模板转换教程 - - 原MaxCms数据转换工具

查看: 3303|回复: 20

【分享】模版修改方法及菜单标签联级筛选使用详解

[复制链接]

21

主题

175

帖子

5445

积分

论坛元老

Rank: 8Rank: 8

金币
4478
发表于 2017-5-9 21:57:13 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?注册加入

x
本帖最后由 nohacks 于 2017-5-10 20:20 编辑

引言:

   常说授人以鱼不如授人以渔,因此把我修改模版的过程记录下来,供大家参考,作者不是专业人员水平有限,可能存在描述错误的地方,欢迎批评指证,同时感谢海洋CMS开发者,让我们有如此好用的影视CMS程序,心怀感恩,乐于共享,与大家共勉!


目录:

引言

准备工作

第一章: 修改优化【非凡模块第三版

1.1   修改logo相关信息。
      - 1.1.1 修改logo
      - 1.1.2 修改二维码

  1.2.  首页菜单优化


  1.3 筛选及搜索页面优化

  1.4  修改优化评论插件

  1.5 添加下载列表

第二章: 修改优化【精仿360影视模板
   待续。。。

正文:

准备工作:

1. 按模版说明把相关文件上传到网站。

2. 后台切换模块,更新缓存,生成视频首页

第一章:修改优化 【非凡模块第三版 】

   原版链接:http://www.seacms.net/forum.php? ... =769&extra=page%3D1

看下效果图:

1.png


第一节: 修改logo相关

     自己用肯定要修改logo,这点无可厚非

   1. 修改logo
    检查logo调用,一般在head.html

      后台-模版- feifan123-html-head.html  编辑

  看到代码:

  1. <ul class="logo"><a href="http://{seacms:siteurl}"><i class="logobg"></i></a></ul>
复制代码

   很明显 ,这个就是了,调用了class  ,不用问为什么,class就在css文件里 ,css文件是什么,请百度。


   这个模块css文件在 /images/style.css ,可以下载到本地,搜索 logobg ,找到下面的代码:

  1. .logo .logobg{display:block;float;left;height:50px;width:100px;background: transparent url("../images/ico.png") no-repeat scroll -195px -300px;cursor: pointer;}
复制代码

调用了ico.png ,我们看看ico.png是什么样:


ico.png

涉及到很多图片呢,不能修改图片,我们就修改源码:
  1. .logo .logobg{display:block;float;left;height:50px;width:100px;background: transparent url("../images/logo.png") no-repeat scroll ;cursor: pointer;}
复制代码
让它调用 logo.png就好,注意 50px;width:100px  ,图片要保持这个大小。


保存,替换 logo.png更新缓存,重新生成首页即可!


2.  修改二维码调用


   方法其实和上面类似,在head.html 找到代码:

  1.   <li class="bb"><strong class="ma"><i class="mabg"></i>二维码</strong>
  2.       <div class="cc maw"><i class="ewmbg"></i><p>扫描二维码用手机观看</p></div>  
复制代码

  然后在style.css里搜索ewmbg,找到代码:

  1. .nav-qt .maw .ewmbg{display:block;height:150px;width:150px;background: transparent url("../images/ico.png") no-repeat scroll 0 -295px;}
复制代码


同样,我们修改为:


  1. .nav-qt .maw .ewmbg{display:block;height:150px;width:150px;background: transparent url("../images/ewm.png") no-repeat scroll;}
复制代码



保存,替换 ewm.png,更新缓存,重新生成首页即可!




  

第二节: 首页菜单优化


    1.png

     首页菜单,我们看到有些菜单有二级菜单,有些又没有,这点需要修改
先看头文件head.html ,看到菜单相关代码2处:

前面一个:
  1. {seacms:menulist type=top}
  2.       {if:[menulist:typeid]>2}
  3.       <li><a href="[menulist:link]"{subif:"{seacms:currenttypeid}"=="[menulist:typeid]"} class="on"{end subif}>[menulist:typename]</a></li>
  4.       {else}
  5.       <li class="" _t_nav="topnav-[menulist:i]"><a href="[menulist:link]"{subif:"{seacms:currenttypeid}"=="[menulist:typeid]"} class="on"{end subif}>[menulist:typename]<i class="sjbgs"></i><i class="sjbgx"></i></a></li>
  6.       {end if}
  7.       {/seacms:menulist}
复制代码
后面一个:

  1. {seacms:menulist type=top}
  2.   {if:[menulist:typeid]<3}
  3.   <div id="topnav-[menulist:i]" class="nav-down-1" style="display:none;" _t_nav="topnav-[menulist:i]">
  4.     <div class="nav-down-2 clearfix">
  5.     <ul>
  6.       {seacms:smallmenulist type=[menulist:typeid]}     
  7.       <li><a href="[smallmenulist:link]"{subif:"{seacms:currenttypeid}"=="[smallmenulist:typeid]"} class="on"{end subif}>[smallmenulist:typename]</a></li>
  8.       {/seacms:smallmenulist}
复制代码


看到没有,2处都有个菜单ID的判断,只要修改这个就应该能达到这个目的。

我想显示二级分类的栏目有5个,因此把前面一个 修改为 {if:[menulist:typeid]>5} ,后面一个修改为 {if:[menulist:typeid]<6}


保存更新后,确实达到了我们的效果,但随之出现了另外一个问题,如图:


2.png

出现了错位,没关系,我们可以删除新闻这栏解决,反正用不到

head.html 找到  
  1. <li class="" _t_nav="topnav-news"><a href="{seacms:newslink}">新闻<i class="sjbgs"></i><i class="sjbgx"></i></a></li>
复制代码
修改为:
  1.     <!--  <li class="" _t_nav="topnav-news"><a href="{seacms:newslink}">新闻<i class="sjbgs"></i><i class="sjbgx"></i></a></li>  -->
复制代码


到这里,问题解决,本节完。







评分

参与人数 1金币 +60 收起 理由
admin + 60 感谢贡献

查看全部评分

21

主题

175

帖子

5445

积分

论坛元老

Rank: 8Rank: 8

金币
4478
 楼主| 发表于 2017-5-9 23:18:42 | 显示全部楼层
本帖最后由 nohacks 于 2017-5-10 20:26 编辑


第三节: 筛选及 搜索优化

   原来的筛选界面是这样的,分类会列出全部分类,看着非常不爽
3.png

我们需要一级分类和二级分类分别显示,并能联级互动,简单说就是点击一级分类,二级分类会对应显示等,效果大家应该懂的。
如何实现?经过研究官方标签说明,发现完全可以实现:

首先看分类页模板channel.html

  1. <dl class="clearfix"><dt><span>按分类</span></dt>
  2. {seacms:typecaslist}
  3. <dd><a href="[typecaslist:link]"{if:{channelpage:typename}==[typecaslist:value]} class="on"{end if}>[typecaslist:value]</a></dd>{/seacms:typecaslist}
  4. </dl>
复制代码
修改为:
  1. <!--  频道代码  开始       -->
  2. <dl class="clearfix"><dt><span>按频道</span></dt>
  3. <dd> <a href="/search.php?searchtype=5&tid=0" {if:{channelpage:typename}==全部} class="on"{end if} >全部</a></dd>
  4. {seacms:menulist type=top}
  5. <dd><a href="[menulist:link]" {if:{channelpage:typeid}==[menulist:typeid] } class="on"{end if} {seacms:smallmenulist type=[menulist:typeid]} {if:{channelpage:typeid}==[smallmenulist:typeid]} class="on" {end if} {/seacms:smallmenulist}> [menulist:typename]</a></dd>
  6. {/seacms:menulist}
  7. </dl>
  8. <!--  频道代码 结束       -->

  9. <!--  类型代码  开始       -->
  10. <dl class="clearfix" {if:{channelpage:typename}==全部}style="display:none;" {end if} ><dt><span>按类型</span></dt>
  11. {seacms:menulist type=son}
  12. {if:{channelpage:typeid}==[menulist:typeid]} <dd> <a href="/list/?[menulist:upid].html" class="active"> 全部</a></dd> {end if}
  13. {/seacms:menulist}
  14. {seacms:menulist type=son}
  15. <dd><a href="[menulist:link]"{if:{channelpage:typeid}==[menulist:typeid]} class="on"{end if}>[menulist:typename]</a></dd>
  16. {/seacms:menulist}
  17. </dl>
  18. <!--  类型代码  结束       -->
复制代码


同样,cascade.htmlsearch.html  修改为:

  1.       <!--  频道代码  开始       -->
  2.      <dl class="clearfix"  ><dt><span>按频道</span></dt>
  3.      <dd> <a href="/search.php?searchtype=5&tid=0" {if:{searchpage:typename}==全部} class="on"{end if}  >全部</a></dd>
  4.       {seacms:menulist type=top}
  5.      <dd><a href="[menulist:link]"   {if:{searchpage:type}==[menulist:typeid] } class="on"{end if}   {seacms:smallmenulist type=[menulist:typeid]}   {if:{searchpage:type}==[smallmenulist:typeid]} class="on" {end if}  {/seacms:smallmenulist}> [menulist:typename]</a></dd>
  6.       {/seacms:menulist}
  7.      </dl>
  8.      <!--  频道代码  结束       -->

  9.     <!--  类型代码  开始       -->
  10.   <dl class="clearfix"  {if:{searchpage:typename}==全部}style="display:none;" {end if}  ><dt><span>按类型</span></dt>
  11.   {seacms:menulist type=son} {if:{searchpage:type}==[menulist:typeid]}  <dd> <a href="/list/?[menulist:upid].html"   class="active"> 全部</a></dd> {end if} {/seacms:menulist}
  12. {seacms:menulist type=son} <dd><a href="[menulist:link]"{if:{searchpage:type}==[menulist:typeid]} class="on"{end if}>[menulist:typename]</a></dd>{/seacms:menulist}
  13.   </dl>
  14. <!--  类型代码  结束       -->
复制代码

频道源码解析:

源码:
  1. <dl class="clearfix"><dt><span>按频道</span></dt>
  2. <dd> <a href="/search.php?searchtype=5&tid=0" {if:{channelpage:typename}==全部} class="on"{end if} >全部</a></dd>
  3. {seacms:menulist type=top}

  4. <dd><a href="[menulist:link]" {if:{channelpage:typename}==[menulist:typename] } class="on"{end if} {seacms:smallmenulist type=[menulist:typeid]} {if:{channelpage:typeid}==[smallmenulist:typeid]} class="on" {end if} {/seacms:smallmenulist}> [menulist:typename]</a></dd>

  5. {/seacms:menulist}

  6. </dl>
复制代码

菜单标签{seacms:menulist}和{seacms:typecaslist}不同,没有"全部"链接,因此我们需要手动添加。
  1. <dd> <a href="/search.php?searchtype=5&tid=0" {if:{channelpage:typename}==全部} class="on"{end if} >全部</a></dd>
复制代码
只显示一级分类 :


  1. {seacms:menulist type=top}
复制代码



如果当前选择项ID与菜单项ID相同则高亮选定:


  1. {if:{channelpage:typeid}==[menulist:typeid] } class="on"{end if}
复制代码



如果当前选择项ID与一级菜单项ID的关联的二级菜单项ID相同则高亮选定:

  1. {seacms:smallmenulist type=[menulist:typeid]} {if:{channelpage:typeid}==[smallmenulist:typeid]} class="on" {end if} {/seacms:smallmenulist}
复制代码

类型源码解析:

源码:
  1. <dl class="clearfix" {if:{channelpage:typename}==全部}style="display:none;" {end if} ><dt><span>按类型</span></dt>

  2. {seacms:menulist type=son}

  3. {if:{channelpage:typeid}==[menulist:typeid]} <dd> <a href="/list/?[menulist:upid].html" class="active"> 全部</a></dd> {end if}

  4. {/seacms:menulist}

  5. {seacms:menulist type=son}
  6. <dd><a href="[menulist:link]"{if:{channelpage:typeid}==[menulist:typeid]} class="on"{end if}>[menulist:typename]</a></dd>
  7. {/seacms:menulist}
  8. </dl>
复制代码


      
和频道不同,这里的链接是不固定的,需要取父分类ID,查询官方标签说明,只有[menulist:upid] 可以取得父分类ID,要使用必须使用{seacms:menulist} 。
       循环判断二级分类,如果现行选择分类与二级分类相同,则显示"全部"并链接其父分类。

  1. {seacms:menulist type=son}    //显示二级菜单

  2. {if:{channelpage:typeid}==[menulist:typeid]} <dd> <a href="/list/?[menulist:upid].html" class="active"> 全部</a></dd> {end if}

  3. {/seacms:menulist}
复制代码
接下来显示二级菜单,与上面类似:

  1. {/seacms:menulist}

  2. {seacms:menulist type=son}
  3. <dd><a href="[menulist:link]"{if:{channelpage:typeid}==[menulist:typeid]} class="on"{end if}>[menulist:typename]</a></dd>
  4. {/seacms:menulist}
复制代码

  需要注意的是: {channelpage}  相关标签 只能用于 分类页模板channel.html,因此

   cascade.htmlsearch.html  要用{searchpage:typename}替换{channelpage:typename},用{searchpage:type} 替换{channelpage:typeid}


对了,还有 高亮导航显示,如下图:

1.png


因为 频道是我们新加的,肯定没有代码显示

编辑  cascade.html ,查找相关代码,在上面找到下面这些代码:
  1. {if:{searchpage:typename}<>全部}<span class="type">{searchpage:typename}</span>{end if}
  2. {if:{searchpage:jq}<>全部}<span class="type">{searchpage:jq}</span>{end if}
  3.       {if:{searchpage:year}<>全部}<span class="type">{searchpage:year}</span>{end if}
  4.       {if:{searchpage:area}<>全部}<span class="type">{searchpage:area}</span>{end if}
复制代码

我们在上面添加下面代码:
  1. {seacms:menulist type=top}  {seacms:smallmenulist type=[menulist:typeid]}
  2. {if:[smallmenulist:typeid]=={searchpage:type}}<span class="type">[menulist:typename] </span>{end if}
  3. {/seacms:smallmenulist}
  4. {/seacms:menulist}
复制代码
源码解析:

   循环获取一级菜单,在循环里循环获取二级菜单,检查二级菜单ID,如果与现行选择项ID相同则显示一级菜单名称。

同样,在channel.html里找到下面的代码,

  1.      <span class="type">{channelpage:typename}</span>
复制代码

在上面添加:

  1. {seacms:menulist type=top}  {seacms:smallmenulist type=[menulist:typeid]}{if:[smallmenulist:typeid]=={channelpage:typeid}}<span class="type">[menulist:typename] </span>{end if} {/seacms:smallmenulist}{/seacms:menulist}
复制代码

效果如下图:

12.png

本节完。


回复

使用道具 举报

21

主题

175

帖子

5445

积分

论坛元老

Rank: 8Rank: 8

金币
4478
 楼主| 发表于 2017-5-10 06:43:46 | 显示全部楼层
本帖最后由 nohacks 于 2017-5-10 06:45 编辑

第四节:  修改评论插件

1.png

模块默认使用的是多说评论插件,这本没有什么,但悲剧的是多说将于2017年6月1日正式关停服务
只能换了,我们有两种选择:
1. 用海洋自带评论替换
2. 用 畅言或其他插件代替。


我们发现评论在内容页和播放页都会出现,因此需要修改content.html和play.html

先修改content.html,在底部找到代码:

  1. <script type="text/javascript">
  2. var duoshuoQuery = {short_name:"feifan123"};
  3.         (function() {
  4.                 var ds = document.createElement('script');
  5.                 ds.type = 'text/javascript';ds.async = true;
  6.                 ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
  7.                 ds.charset = 'UTF-8';
  8.                 (document.getElementsByTagName('head')[0]
  9.                  || document.getElementsByTagName('body')[0]).appendChild(ds);
  10.         })();
  11.         </script>
复制代码


这个很明显就是多说的评论插件,现在用官方评论或畅言插件代码替换即可。


官方评论代码我们可以从默认模块中的同名文件里获取(default/html/content.html),找到代码:

  1. <div class="page-header">
  2.             <a name="vod_content"></a>
  3.       <h4><span class="glyphicon glyphicon-edit sea-text"></span> 影片评论</h4>
  4.     </div>
  5.     <p class="lead vod-content">
  6.             {playpage:comment}
  7.     </p>
  8.   </div><!-- -->
复制代码


替换看下效果:

2.png

成功!用同样方法修改play.html 即可,畅言的替换方法和上面一样,这里不在重复。


本节完


回复

使用道具 举报

21

主题

175

帖子

5445

积分

论坛元老

Rank: 8Rank: 8

金币
4478
 楼主| 发表于 2017-5-10 06:58:50 | 显示全部楼层
本帖最后由 nohacks 于 2017-5-10 09:23 编辑

第5节: 添加下载列表

    非凡免费模版是没有显示下载列表的,即使在后台添加也是没有的,需要修改源码。

  如何添加,添加到那里?我们先看下内容页界面:


3.png

需要编辑内容页模板文件content.html,找相关代码:
  1. <div class="tab-title tab mb clearfix">
  2.     <ul>
  3.             <li id="tab1" class="on" onclick="setTab('tab','stab',1,3)">播放列表</li>
  4.             <li id="tab2" onclick="setTab('tab','stab',2,3)">内容介绍</li>
  5.             <li id="tab3" onclick="setTab('tab','stab',3,3)">相关影片</li>
  6.     </ul>
  7.   </div>
复制代码

嗯,这个就是列表显示代码,按原代码规则,添加一个先:

  1. <div class="tab-title tab mb clearfix">
  2.     <ul>
  3.             <li id="tab1" class="on" onclick="setTab('tab','stab',1,4)">播放列表</li>
  4.         <li id="tab4" onclick="setTab('tab','stab',4,4)">下载列表</li>
  5.             <li id="tab2" onclick="setTab('tab','stab',2,4)">内容介绍</li>
  6.             <li id="tab3" onclick="setTab('tab','stab',3,4)">相关影片</li>
  7.     </ul>
  8. </div>
复制代码


看看效果:



4.png



显示出来了,说明思路没错,继续往下看代码:
  1. <div id="stab1" class="tab-down mb clearfix">
  2.           <div class="playfrom tab8 clearfix">
  3.     <ul>
  4.         {playpage:playlist}
  5.     <li id="tab8[playlist:i]" onclick="setTab('tab8','stab8',[playlist:i],{playpage:playlistlen})" class="{if:[playlist:i]==1}on{end if}"><i class="playerico ico-[playlist:ename]"></i>[playlist:from]</li>
  6.         {/playpage:playlist}
  7.     </ul>
  8.   </div>
  9.   {playpage:playlist}
  10.   <div id="stab8[playlist:i]" class="playlist clearfix"{if:[playlist:i]<>1} style="display:none"{end if}>
  11.           <div class="h1 clearfix">
  12.                   <p class="intro">[playlist:intro]</p>
  13.                   <p class="jj"><span id="vlink_[playlist:i]_s1"><em onclick="Order(1,'vlink_[playlist:i]',[playlist:i])">倒序↓</em></span><span id="vlink_[playlist:i]_s2"><em onclick="Order(0,'vlink_[playlist:i]',[playlist:i])" class="over">顺序↑</em></span></p>
  14.           </div>
  15.     {if:[playlist:ename]==kankan}
  16.     <div id="vlink_[playlist:i]" class="videourl-down clearfix">
  17.         <ul>[playlist:nolinkurl]</ul>
  18.     </div>{else}
  19.           <div id="vlink_[playlist:i]" class="videourl clearfix"><ul>[playlist:link target=_self]</ul></div>
  20.     {end if}
  21.   </div>
  22.   {/playpage:playlist}
  23.   </div>
  24.   <div id="stab2" class="tab-down mb clearfix" style="display:none;">
  25.   <div class="tab-jq">{playpage:des}</div>
  26.   </div>
  27.   <div id="stab3" class="tab-down mb clearfix" style="display:none;">

  28. <div class="index-area clearfix">
  29.     <ul>
  30.     {seacms:videolist num=6 order=time type=current}
  31.     <li class="p1 m1{if:[videolist:i]% 3==0} mmr0{end if}{if:[videolist:i]% 6==0} pmr0{end if}"><a class="link-hover" href="[videolist:link]" title="[videolist:name]"><img src="[videolist:pic]" alt="[videolist:name]"><span class="video-bg"></span><span class="lzbz"><p class="name">[videolist:name]</p><p class="actor">[videolist:nolinkactor]</p><p class="actor">[videolist:typename]{if:"[videolist:nolinkjqtype]"<>""},{end if}[videolist:nolinkjqtype]</p><p class="actor">[videolist:publishtime]/[videolist:publisharea]</p></span><p class="other">{if:[videolist:note]<>""}<i>[videolist:note]</i>{elseif:[videolist:state]<>""}<i>[videolist:state]{subif:[videolist:state]>999}期{end subif}{subif:[videolist:state]<1000}集{end subif}</i>{else}{end if}</p></a>
  32.     </li>
  33.     {/seacms:videolist}
  34.     </ul>
  35.     </div>
  36.   </div>
复制代码


因此,根据上面的代码规律,我们只需要套上面的代码,在stab段开始前或结束后添加下面的代码即可:


  1. <div id="stab4" class="tab-down mb clearfix" style="display:none;">
  2. 下载列表代码
  3. </div>
复制代码


现在问题是下载代码那里找?别忘记默认模版,我们找找看,找啊找找到下面代码:

  1. <div class="clearfix sea-clearfix"></div>
  2.         {seacms:load block_tab_playlist.html}
  3.     <div class="clearfix sea-clearfix"></div>
  4.         {playpage:downlist}
  5.         <div class="page-header">
  6.       <h4><span class="glyphicon glyphicon-link sea-text"></span>[downlist:from]</h4>
  7.     </div>
  8.         <ul class="download-group fn-clear downurl"><script type="text/javascript">
  9.         var GvodUrls[downlist:i] = "[downlist:linkstr]";echoDown(GvodUrls[downlist:i],[downlist:i]);
  10.                 </script>
  11.         </ul>
  12.         {/playpage:downlist}
复制代码


结合上下文,代码组合为:

  1. <!-- 下载列表 代码开始 -->

  2. <div id="stab4" class="tab-down mb clearfix" style="display:none;">

  3. <div class="clearfix sea-clearfix">
  4.         {playpage:downlist}
  5.        <div class="page-header">
  6.       <h4><span class="glyphicon glyphicon-link sea-text"></span>[downlist:from]</h4>
  7.       </div>
  8.        <ul class="download-group fn-clear downurl"><script type="text/javascript">
  9.         var GvodUrls[downlist:i] = "[downlist:linkstr]";echoDown(GvodUrls[downlist:i],[downlist:i]);
  10.                 </script>
  11.         </ul>
  12.         {/playpage:downlist}

  13. </div>

  14. </div>

  15. <!-- 下载列表 代码结束-->
复制代码


添加在下面的代码后面即可:



  1. <div class="tab-title tab mb clearfix">
  2.     <ul>
  3.             <li id="tab1" class="on" onclick="setTab('tab','stab',1,4)">播放列表</li>
  4.         <li id="tab4" onclick="setTab('tab','stab',4,4)">下载列表</li>
  5.             <li id="tab2" onclick="setTab('tab','stab',2,4)">内容介绍</li>
  6.             <li id="tab3" onclick="setTab('tab','stab',3,4)">相关影片</li>
  7.     </ul>
  8. </div>
复制代码

另外,因为代码涉及到JS和css需要把对应的js和css复制过来,还需要修改加载文件代码:

默认模块下涉及的文件是:xunlei.js和xunlei.css,复制到本模块images目录

再修改加载文件head_include.html,在前面添加下面的代码:
  1. <link href="images/xunlei.css" rel="stylesheet">
  2. <script src="images/xunlei.js"></script>
复制代码


完工,看下效果图:

123.png


本节完
回复

使用道具 举报

21

主题

175

帖子

5445

积分

论坛元老

Rank: 8Rank: 8

金币
4478
 楼主| 发表于 2017-5-10 20:45:16 | 显示全部楼层
本帖最后由 nohacks 于 2017-5-12 16:59 编辑

本章小节:

懂得分享才会有收获。

修改自【非凡模块第三版】

原版链接:http://www.seacms.net/forum.php? ... =769&extra=page%3D1

我们主要修改优化如下:

  1. 首页logo,二维码调用修改,现在可以直接替换对应图片(logo.png,ewm.png);

  2. 首页菜单优化,现在可以显示所有ID数小于6的的二级菜单;

  3. 筛选及搜索页面优化,添加频道列表,和类型列表联级互动,不会一下显示所有分类;

  4. 修改优化评论插件,用官方评论替换了原来的第三方评论插件;

  5. 添加下载列表,免费版现在也可以显示下载列表。



【优化版】非凡模板第三版.rar (213.81 KB, 下载次数: 26, 售价: 10 金币)
回复

使用道具 举报

21

主题

175

帖子

5445

积分

论坛元老

Rank: 8Rank: 8

金币
4478
 楼主| 发表于 2017-5-10 21:06:37 | 显示全部楼层
本帖最后由 nohacks 于 2017-5-12 22:08 编辑

第二章: 修改优化【精仿360影视模板


   最近 发现一个很好的模版 :精仿360影视模板  ,还有很大的提升空间






360看看 原版是这样的:

2.png

     筛选页并没有100%模仿 ,没有频道和类型 联级互动,这点经过第一章的试练后,对我们来说小菜一碟。


  首页效果图:
1.png

2.png


2.1  修改站点信息
      2.1.1  修改logo

   先修改logo,后台-模版-360-html-head.html  编辑


相关代码摘录如下:
  1.    <a href="/" class="eb-head-logo" target="_self">

  2.             <img src="http://oss.yuhengkj-33.top/static/187/img/logo1.png" style="width: 200px;margin-top: 8px;height:auto;margin-left: 50px;">

  3.         </a>
复制代码


这个调用很明显,修改比较简单,把图片地址替换就OK了,可以使用相对目录,例如:"images/logo.png",我们只需把logo放到模块images目录即可。


最后修改代码为:


  1. <a href="/" class="eb-head-logo" target="_self">
  2. <img src="images/logo.png" style="width: 200px;margin-top: 8px;height:auto;margin-left: 50px;">
  3. </a>
复制代码

2.1.2  修改尾部版权信息

         方法:后台-模版-360-html-foot.html  编辑

相关代码摘录如下:

  1. <style>.eb-foot { text-align: center; font-size: 15px; padding-bottom: 20px; padding-top: 20px; color: #666; height:100px;}.eb-foot a { padding: 0 9px; color: #666}.eb-foot a:hover { color: #46c832}.eb-foot p { padding-top: 12px}.eb-foot p a { margin-left: 10px}.eb-foot-index { }</style><div id="footer" class="eb-foot eb-foot-index"><div></div><p>187影视提供的最新电视剧和电影资源均系收集于各大视频网站,187影视只提供web页面服务,并不提供影片资源存储,也不参与录制、上传</p><p>若187影视收录的节目无意侵犯了贵司版权,请联系[email protected],我们会及时处理和回复,谢谢</p><p>{seacms:copyright}   </p>
  2. {seacms:sitevisitjs}</div>
复制代码

可修改为:

  1. <style>.eb-foot { text-align: center; font-size: 15px; padding-bottom: 20px; padding-top: 20px; color: #666; height:100px;}.eb-foot a { padding: 0 9px; color: #666}.eb-foot a:hover { color: #46c832}.eb-foot p { padding-top: 12px}.eb-foot p a { margin-left: 10px}.eb-foot-index { }</style><div id="footer" class="eb-foot eb-foot-index"><div></div><p>本网站提供的最新电视剧和电影资源均系收集于各大视频网站,本网站只提供web页面服务,并不提供影片资源存储,也不参与录制、上传</p><p>若本站收录的节目无意侵犯了贵司版权,请给网页底部邮箱地址来信,我们会及时处理和回复,谢谢</p><p>{seacms:copyright}   </p>
  2. {seacms:sitevisitjs}</div>
复制代码


2.2 优化代码
      主要是硬编码优化,使模块具有通用性,做到不修改源码可适合任何场景。


  2.2.1 首页代码优化  index.html


      先看头部:



  1. <!DOCTYPE html>
  2. <html class="" lang="zh-cn">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <meta name="baidu-site-verification" content="zfRDeZKLuD"/>
  6. <meta charset="utf-8">
  7. <title>{seacms:sitename}-更新更全更受欢迎的影视网站-在线观看</title>
  8. <meta name="keywords" content="{seacms:sitename},BT天堂,lol电影天堂,yy6080新视觉影院,{seacms:videolist num=20 order=hit},[videolist:name]{/seacms:videolist},2016最新影视在线观看,2016最新美剧在线下载观看,最新动漫在线观看下载">
  9. <meta name="description" content="{seacms:des}">
  10. <link rel="stylesheet" href="/templets/360/css/style.css">
  11. <script src="/{seacms:sitepath}js/common.js"></script>
  12. <script src="/{seacms:sitepath}js/function.js"></script>
  13. <script> var sitePath = '{seacms:sitepath}'</script>
  14. </head>
  15. <body>
  16. {seacms:top}
复制代码


出现硬编码: <link rel="stylesheet" href="/templets/360/css/style.css">


如果模块名称不是“360”就会出现异常,应使用相对目录 ,修改为:



  1. <link rel="stylesheet" href="css/style.css">
复制代码

其他部分也可根据需要修改,比如2016 换成 2017等等,重点说下这个代码:

  1. <meta name="keywords" content="{seacms:sitename},BT天堂,lol电影天堂,yy6080新视觉影院,{seacms:videolist num=20 order=hit},[videolist:name]{/seacms:videolist},2016最新影视在线观看,2016最新美剧在线下载观看,最新动漫在线观看下载">
复制代码


这段代码是SEO优化代码,非常不错,自动调用最热门的20个影片名称,值得一赞。

测试一下,发现出现错位,css 没加载成功,考虑到css目录不是模块标准目录,可能没有注册,复制style.css到images目录试试,同时修改代码为:
  1. <link rel="stylesheet" href="images/style.css">
复制代码

更新缓存,重新生成首页,成功!





待续。。。











回复

使用道具 举报

11

主题

75

帖子

762

积分

高级会员

Rank: 4

金币
22
发表于 2017-5-9 22:58:52 | 显示全部楼层
很厉害 沙发是我的了

管理给加分不?
回复

使用道具 举报

21

主题

175

帖子

5445

积分

论坛元老

Rank: 8Rank: 8

金币
4478
 楼主| 发表于 2017-5-10 03:34:54 | 显示全部楼层
本帖最后由 nohacks 于 2017-5-10 20:12 编辑

占楼。。。。。。。。
回复

使用道具 举报

1

主题

19

帖子

446

积分

中级会员

Rank: 3Rank: 3

金币
171
发表于 2017-5-10 03:46:03 | 显示全部楼层
板凳~~~强势插入~~~~
回复

使用道具 举报

1

主题

13

帖子

249

积分

中级会员

Rank: 3Rank: 3

金币
77
发表于 2017-5-10 21:24:41 | 显示全部楼层
这个是真心该赞!!有的不良商贩还把这些技术在群里贩卖@
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册加入

本版积分规则

小黑屋|海洋CMS

GMT+8, 2018-9-25 18:04 , Processed in 0.064205 second(s), 27 queries .

Powered by SeaCMS .Net

© 2018 All Rights Reserved

快速回复 返回顶部 返回列表