仿京东 左侧帮助中心

2016-07-07 16:07 来源：www.chinab4c.com 作者：ecshop专家

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

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

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

  2. .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}
  3. .left_qiji h2{ background:#f60 url(http://www.360buy.com/help/images/helpcenter.jpg) no-repeat;height:29px;line-height:300px;overflow:hidden}
  4. .help_side{border-left:1px solid #959595;border-right:1px solid #959595}
  5. .help_side h4{ background:#faf4d1;border-bottom:1px solid #d6d0b1;height:26px;line-height:26px;padding-left:25px;color:#4a4a4a}
  6. .help_side ul{padding-top:15px;padding-bottom:15px}
  7. .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;
以适应你的模板！

回答：
又有好心人，正需要，试试！

楼主能把底部的换成图片吗？ help.jpg

看我的!
www.5i5net.cn

楼主写的很详细了。可是我想问一下如何加在底部呀？你的第四步代码加在什么地方呀？我不是很懂？

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

加在模板文件.dwt里面

收藏。。。。。。



加一个帮助中心的分类树是不难 难的有两点 一个是分类输做的漂亮 第二是帮助文章内容和其他文章内容的页面不一样 一个新闻的文章内容左边也来个帮助分类树 你觉得尴尬不、？

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

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

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

按照你的理论 默认还是所有页面都显示了帮助文档额！！



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

A1.jpg A2.jpg
A.jpg

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

A3.jpg

谁可以帮帮我呀~

不错 你知道怎么调用帮助中心吗？？？？？？？？？？？？？

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

呵呵,不错,多谢共享

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


这位老兄的帮助中心 才是大家想要的