Board logo

标题: [共享] 仿京东 左侧帮助中心 [打印本页]

作者: 齐迹    时间: 2010-1-24 18:19     标题: 仿京东 左侧帮助中心

看到有人要 就弄了一下
其实把帮助做到左侧其实也很不错
现在就分享给大家
第一步 建立一个
help_left.lbi
代码

  1. <!--{if $helps}-->
  2. <meta http-equiv="Content-Type" content="text/html; charset=GBK">
  3. <div class="left_qiji">
  4.     <h2>帮助中心</h2>
  5.     <div class="help_side">
  6.         <!-- {foreach from=$helps item=help_cat} -->
  7.         <h4>{$help_cat.cat_name}</h4>
  8.         <ul>
  9.             <!-- {foreach from=$help_cat.article item=item} -->
  10.             <li><a href="{$item.url}">{$item.short_title}</a></li>
  11.             <!-- {/foreach} -->
  12.         </ul>
  13.         <!-- {/foreach} -->
  14.     </div>
  15. </div>
  16. <!--{/if}-->
复制代码

第二步
加入以下css代码到你的style.css文件任意位置
注意图片我难得上传了就直接用的京东的 可以自己下载

  1. .left_qiji{width:165px;overflow:hidden;margin-right:10px;float:left; background:url(http://www.360buy.com/help/images/helpcenter_01.gif) no-repeat 0 100%;padding-bottom:5px}
  2. .left_qiji h2{ background:#f60 url(http://www.360buy.com/help/images/helpcenter.jpg) no-repeat;height:29px;line-height:300px;overflow:hidden}
  3. .help_side{border-left:1px solid #959595;border-right:1px solid #959595}
  4. .help_side h4{ background:#faf4d1;border-bottom:1px solid #d6d0b1;height:26px;line-height:26px;padding-left:25px;color:#4a4a4a}
  5. .help_side ul{padding-top:15px;padding-bottom:15px}
  6. .help_side ul li{ background:url(http://www.360buy.com/help/images/helpcenter_icon.gif) no-repeat 20px 5px;padding-left:32px;height:20px;line-height:20px;overflow:hidden}
复制代码


第四步
在需要显示的地方加入
<!-- #BeginLibraryItem "/library/help_left.lbi" --><!-- #EndLibraryItem -->

由于各个模板中 左侧宽度不一样 所以请自行修改
.left_qiji{width:165px;
以适应你的模板!
作者: 1s98    时间: 2010-1-24 18:37

又有好心人,正需要,试试!
作者: 1s98    时间: 2010-1-24 18:48

楼主能把底部的换成图片吗?
help.jpg
2010-1-24 18:48


图片附件: help.jpg (2010-1-24 18:48, 11.14 KB) / 下载次数 132
http://bbs.ecshop.com/attachment.php?aid=33081&k=c45ea43b1d056663a0785529b8dbcdcc&t=1606148856&sid=wWSV3c


作者: flyhome    时间: 2010-1-24 22:38

看我的!
www.5i5net.cn
作者: 3rdshop    时间: 2010-1-25 12:35

楼主写的很详细了。可是我想问一下如何加在底部呀?你的第四步代码加在什么地方呀?我不是很懂?
作者: 园丁    时间: 2010-1-25 13:20

楼主写的很详细了。可是我想问一下如何加在底部呀?你的第四步代码加在什么地方呀?我不是很懂?
3rdshop 发表于 2010-1-25 12:35

加在模板文件.dwt里面
作者: nojay    时间: 2010-1-25 13:51

收藏。。。。。。
作者: muyixin    时间: 2010-1-26 23:39

本帖最后由 muyixin 于 2010-1-26 23:40 编辑

加一个帮助中心的分类树是不难 难的有两点 一个是分类输做的漂亮 第二是帮助文章内容和其他文章内容的页面不一样 一个新闻的文章内容左边也来个帮助分类树 你觉得尴尬不、?
作者: 齐迹    时间: 2010-1-27 09:51

加一个帮助中心的分类树是不难 难的有两点 一个是分类输做的漂亮 第二是帮助文章内容和其他文章内容的页面不一样 一个新闻的文章内容左边也来个帮助分类树 你觉得尴尬不、?
muyixin 发表于 2010-1-26 23:39

我说的是在需要的地方加入

这个很适合在 购物流程页面加入

按照你的理论 默认还是所有页面都显示了帮助文档额!!
作者: leiyunjn    时间: 2010-3-5 02:48

本帖最后由 leiyunjn 于 2010-3-5 02:52 编辑

非常感谢楼主的分享,我照着做了一个。可是出现一个问题:
我的帮助中心列表中多出了好多的空格,撑大了版面,非常难看,请问这些空格是从什么地方出来的?
我换了默认模板以及另外几个模板试过,结果都一样的。

A1.jpg
2010-3-5 02:47
      
A2.jpg
2010-3-5 02:47

A.jpg
2010-3-5 02:47


下方横向的帮助中心是正常的

A3.jpg
2010-3-5 02:52


图片附件: A1.jpg (2010-3-5 02:47, 24.32 KB) / 下载次数 136
http://bbs.ecshop.com/attachment.php?aid=33861&k=f21f800b05d9d7d6296c6645790512d0&t=1606148856&sid=wWSV3c



图片附件: A2.jpg (2010-3-5 02:47, 32.7 KB) / 下载次数 140
http://bbs.ecshop.com/attachment.php?aid=33862&k=60edba2e309ed626ce7f383c33ce700e&t=1606148856&sid=wWSV3c



图片附件: A.jpg (2010-3-5 02:47, 133.11 KB) / 下载次数 143
http://bbs.ecshop.com/attachment.php?aid=33863&k=1dc7fac1868e422041b1d13d8ccc5001&t=1606148856&sid=wWSV3c



图片附件: A3.jpg (2010-3-5 02:52, 29 KB) / 下载次数 131
http://bbs.ecshop.com/attachment.php?aid=33864&k=9f5b21c4fa77fd6389e4d1d3ec5639a2&t=1606148856&sid=wWSV3c


作者: yiyun    时间: 2010-3-8 11:29

谁可以帮帮我呀~
作者: ruohan    时间: 2010-3-8 13:21

不错 你知道怎么调用帮助中心吗?????????????
作者: showgx    时间: 2010-3-21 03:22

楼主,象4楼这样加在这个页面:http://www.5i5net.cn/help-16.html,应该在什么文件的哪个位置加<!-- #BeginLibraryItem "/library/help_left.lbi" --><!-- #EndLibraryItem -->,我在article.dwt内试了很多都不行,望指教。
作者: hao111    时间: 2010-3-21 08:18

呵呵,不错,多谢共享
作者: zslucy    时间: 2010-5-21 23:38

看我的!
www.5i5net.cn
flyhome 发表于 2010-1-24 22:38


这位老兄的帮助中心 才是大家想要的
作者: Aiving    时间: 2010-9-16 10:53

我用在2.72为什么不显示?
作者: leflower    时间: 2010-10-1 16:28

我也要这个,可实现不了呀
作者: mylita    时间: 2010-10-2 15:19

不错,好样的!
作者: hflwm    时间: 2011-4-30 11:26

又有好心人,正需要,试试!




欢迎光临 ECShop电商系统交流论坛 (http://bbs.ecshop.com/) Powered by Discuz! 7.2