艺灵设计

全部文章
×

优化帝国cms前台页面的评论功能

作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2016-05-06 21:45:55 - 阅: - 评:0 - 积分:0

摘要:
  帝国cms网站管理系统在用户体验这方面还存在很多问题。这篇文章将继续去优化帝国cms的评论功能......

昨天我们给帝国cms文章内容页添加了展示评论及回复功能,详情见文章→→帝国cms文章内容页展示评论及优化回复功能

今天,我们继续来讲关于帝国cms评论方面的小bug,然后我们进行修复与优化。

一、问题重现

还拿昨天的文章来说,在评论那里我们可以看到有用户名、密码、验证码等待填项。配图: 讲到这里,我们很自然能联想到回复时需要验证用户名及密码是否正确,正确了才能进行评论。

好,那我们先来进行登陆吧。默认的帝国cms前面页面的登陆入口在最顶部,配图: 我们输入自己的账号进行登陆。

登陆后我们来进行评论,此时你会发现评论这里的用户名、密码仍然存在!

艺灵和大多数看官一样,看到这里时的第一反应就是:仍要写上自己的用户名和密码后才能进行回复

实际上,看官这里空着不写,直接填写验证后然后输入评论内容点击提交也可以进行评论成功!!!

啊?什么?这样也行?

那我在这里的用户名及密码中随便输入内容或者输入别的账号他也能成功进行评论了???

没错!不信请自行在本地测试。

那这不行啊!既然此处可以随便填写内容,那干嘛还要在这里进行显示呢?干嘛不直接去掉?这样放着起不但起不到作用还会给需要评论的看官带来一些误会......

怎么说呢,艺灵猜测帝国cms官方是这样想的:“由于需要评论的看官可能并没有登陆,想评论的话可以直接在这里输入用户名及密码,填好验证码及评论内容,直接提交就行了。”

至于究竟是怎么想的,只有帝国cms官方最清楚。我们还是来说如何进行优化吧。

二、优化方案分析

上面已经简单的说过:当看官已经登陆后,这里的用户名和密码实际上只是一个摆设。所以,我们需要去判断用户的登陆状态,然后根据状态来控制这里的用户名及密码框是否显示即可

那如何判断呢?

当然是要修改代码喽......

三、修改源码

3.1、修改登陆代码思路

我们首先要修改登陆后的源码。因为登陆前和登陆后,登陆处显示的内容是不一样的。为了便于看官理解,艺灵上一张登陆前后的对比图。配图: 

好,既然看官已经知道了区别,那我们就去修改源码吧。最简单的方案就是:给登陆前或后的代码加一个ID,至于用途,看官读完文章后就知道了。

3.2、修改登陆后代码

步骤:登陆帝国cms网站管理后台--点击模板--点击公共模板--点击JS调用登陆模板--给用户名添加一个ID选择器(例如:id="ylsj-islogin")--点击修改即可。配图: 此时我们刷新前台页面看下刚添加的id="ylsj-islogin"有没有生效。配图: 从图中可以看出已经生效了。

虽然这里的生效了,可评论那里的用户名及密码还存在啊!

这不废话吗?下面的还没有修改,要是不存在就真是奇了怪了!

3.3、修改评论代码

评论代码的话我们也采用上面添加ID选择器的方法。

步骤:登陆帝国cms网站管理后台--点击模板--点击公共模板变量--管理模板变量--修改评论表单--给用户名的父级tr添加一个ID选择器(例如:id="ylsj-islogin_pl")--点击提交。配图: 此时我们刷新前台页面看下刚添加的id="ylsj-islogin_pl"有没有生效。配图: 奇怪!怎么没有生效呢?

难道看官忘记数据更新这一重要步骤了???

接着前面的步骤:数据更新--勾选全部刷新--点击刷新所有信息内容页面。配图: 此时再看前台源码则可看到刚添加的ID选择器了。配图: 

好了,现在万事俱备,只欠javascript代码了。其实,jsjq都能实现,但艺灵更习惯于jq。下面将献上代码。

四、js通过id来实现最终功能

4.1、id是用来干吗的?

前面我们做了这么多工作,其实说白了,只做了一件事情:添加ID选择器

可能很多看官不明白为什么要添加ID选择器,那是因为:我们要通过ID选择器来查找元素节点会更加高效、快捷、方便!

4.2、js版本代码

js版

  1. <script>
  2. <!--功能:当用户登陆后,自动隐藏或删除掉评论区中的用户名及密码框-->
  3. var is_dl=document.getElementById("ylsj-islogin"),
  4. is_pl=document.getElementById("ylsj-islogin_pl");
  5. try{
  6. if(is_dl){
  7. /*方法一:隐藏*/
  8. is_pl.style.display="none";
  9. /*方法二:删除(如果使用这个方法,把下面代码的注释去掉,同时,上面的方法一要添加注释。)*/
  10. /*is_pl.remove();*/
  11. }
  12. }catch(e){}
  13. </script>

如何使用呢?我们直接放到一个公共模板里面即可。此处将代码放到页面尾部,看官可根据自己的需求进行存放代码。

步骤:登陆帝国cms网站管理后台--点击模板--点击公共模板变量--管理模板变量--修改页面尾部--最下面粘贴代码--提交--数据更新--勾选全部--刷新所有信息内容页面。配图:将js代码粘贴到页面尾部模板中

我们在登陆状态下刷新前面的文章内容页,此时已经没有了用户名和密码这两个框了,用户只需要输入验证码,填写评价内容就可以提交了。接下来说下jquery版本的代码。

4.3、jq版本代码

jquery版

  1. <!--引入jquery库,建议1.8版本以上,如果页面中已引入,可忽略此库-->
  2. <script type="text/javascript" src="http://www.yilingsj.com/skin/yilingsj/js/jquery-1.8.3.min.js"></script>
  3. <script>
  4. <!--功能:当用户登陆后,自动隐藏或删除掉评论区中的用户名及密码框-->
  5. var is_dl=$('#ylsj-islogin'),
  6. is_pl=$('#ylsj-islogin_pl');
  7. try{
  8. if(is_dl.length){
  9. /*方法一:隐藏*/
  10. is_pl.hide();
  11. /*方法二:删除(如果使用这个方法,把下面代码的注释去掉,同时,上面的方法一要添加注释。)*/
  12. /*is_pl.remove();*/
  13. }
  14. }catch(e){}
  15. </script>

步骤跟上面4.2步骤是完全一样的,只是将之前的4.2中的js代码替换成4.3的jquery代码即可。

好了,大功告成!真的完了吗???

No!并没有完!

为何???

难道看官忘记了评论列表页了?已忘记的看官请点击上面的“共有n条评论”一看究竟。

至于解决方法,请参照步骤3.3

----------完----------

转载声明:
  若亲想转载本文到其它平台,请务必保留本文出处!
本文链接:http://www.yilingsj.com/xwzj/2016-05-06/394.html

若亲不想直保留地址,含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载,随便修改,但请尊重艺灵的劳动成果!谢谢理解。

亲,扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助,您可以用支付宝打赏下艺灵哦!

Tag: 帝国cms教程 网站管理系统 优化功能 评论功能

上一篇: 帝国cms文章内容页展示评论及优化回复功能   下一篇: 用户体验篇之表单验证问卷小调查

评论区