评论组件畅言主题样式修改

随着多说、网易云跟帖的停止服务,要找一个合适的博客评论系统还真不容易,目前稍微好点的可能就畅言友言了,实话说这两个的体验真不是很满意,所以就有了这篇文章,看看能不能想办法去自定义样式。

畅言官方提供了一些样式定制 http://changyan.sohu.com/help/a-custom-css-setting.html 不是太好改,整体上还是感觉不好,特别是侧边栏天天弹广告。

在浏览畅言官网的时候发现官网用的评论框和我们的不太一样,官网的效果明显更清新简洁 , 但是后台并没有提供配置这个主题的方法啊!!

# 官网样式:

# 目前样式:

经过一番分析发现初始化的 JS 代码是一样的,但是加载的样式结构和代码都完全不一样

# 官网结构:

# 目前结构:

经过分析,一个获取配置的接口引起了我的注意:

https://changyan.sohu.com/api/2/config/get/cyqARl5Jo?callback=changyan523657214  

返回的内容如下:

changyan523657214({"data":{"isv":{"id":"889","auditMode":"1","isvLogoUrl":"http://0d077ef9e74d8.cdn.sohucs.com/d92768c2d35701f36e2a0853e6773dc2_1463120884232_cyqARl5Jo","status":"1","name":"畅言博客","url":"http://changyan.kuaizhan.com/static/help/"},"main":{"mobile_login_external_platform":"2,3,13,15","domain_whitelist":"itc.cn,kuaizhan.com,sohu.com","extensions":"extensions","comment_url_regular_to":"","code_version":"v4","topic_day_limit":"0","mobile_ad_ico":"false","sso_loginstyle_open_only":"false","mobile_allow_upload_img":"0","mobile_code_version":"v3","copyright":"0","audit_type_before_closed":"0","comment_url_regular":"0","mobile_trigger_animate_face":"undefined","user_portrait":"0","title_pattern":"","custom_css_type":"11","comment_remind_mail":"","allow_show_level":"1","language":"Chinese","cyan_title":"评论","origin_cmt_person_num":"1","comment_page_num":"30","forum_redirect_layer":"2","comment_share":"{user_comment} -- 评论{page_title} {short_link}","simple_cbox":"0","wap_collection_open":"false","flood_num":"1","cyan_skin":"0","comment_less_show":"暂无评论","style_list_width_value":"0","mobile_extensions_key":"wap-prop","comment_operation_ding":"顶","myusq":"true","comment_operation":"2","custom_css_url":"http://changyan.sohu.com/static/css/2014-11-04/889/1c839083-f47d-452a-9dd7-4d7be7593e75.css","comment_url_parameter":"qq-pf-to","style_list_width":"0","mobile_hot_news_topic":"false","hot_topic_mode":"text","mobile_allow_barrage":"undefined","isv_scale":"mini","comment_user_emoji_wap":"0","union_num":"1","comment_recom_image":"0","auto_sourceid":"false","force_promotion":"0","comment_operation_cai":"踩","login_external_platform":"2,3,13","comment_allow_share":"1","sso":"false","comment_allow_like":"1","origin_cmt_num":"1","show_participation":"true","mobile_latest_page_num":"30","weibo_since_id":"3684790672395888","disable_user_photo":"false","sso_type":"2","trigger_animate_face":"true","footer_fix_cbox_width":"1000","cmt_total":"1","v3_hack":"true","order_by":"time_desc","mobile_float_bar":"false","mobile_isv_type":"beta","mobile_use_default_accesstoken":"false","allow_phoneuser":"1","comment_url_regular_from":"","allow_upload_img":"0","pc_float_style":"null","isv_type":"stable","comment_notice":"有疑问加群:410131466,欢迎测试","extensions_key":"prop-v3.2","hot_topic_wicket":"0","comment_remind_type":"never","mobile_hot_page_num":"5","hot_topic_list":"1","anonymous_comment_support":"1","is_iframe":"true","portrait_types":"1,2,3","comment_reply_show":"2","quality_exchange":"false","is_new_cdn":"false","footer_fix_cbox":"1","scs_iframe":"1","user_portrait_url":"http://assets.changyan.sohu.com/upload/asset/scs/images/pic/pic42_null.gif","plan_a":"false","use_user_level":"true","hot_topic_position":"off","latest_page_num":"30","pc_collection_open":"false","comment_user_emoji":"0","hot_page_num":"5","gold_coin_cbox":"0","display_location":"1","indent_style":"false","only_app":"false","allow_unlogin":"0","forum_redirect_open":"0"}}});  

对比下两个版本,发现有个code_version字段是不一样的,官网返回的是v4,正常使用返回的v3,原来官网已经用上了新版本

想尝鲜的话怎么办呢?很简单啊,把服务器返回的code_version 改成 v4就好了。我做了一个配置的版本,只要替换一个 JS 文件就可以达到上面的目的了。

<script charset="utf-8" type="text/javascript" src="http://qn.apkfuns.com/changyan/changyan.js"></script>  
    <script type="text/javascript">
        window.changyan.api.config({
            appid: '####',
            conf: '####'
        });
    </script>

把官方提供的 js 从https://changyan.sohu.com/upload/changyan.js 改成 http://qn.apkfuns.com/changyan/changyan.js 就好了。

V4版本变化还是挺大的,首先去掉了右下角的各种弹窗,评论的样式也更好看了。
想换又不想折腾的同学可以再观望下,我想官方应该不久后就会发布 V4版本了