搜狐旗下有一款评论插件，畅言，PC端与WAP端均适配，目前提供微信、微博、QQ、手机号四种登录方式。为了给博客添加评论功能，趁晚上的空研究了代码插入方式以及CSS美化。本文没什么技术含量，主要提供可以抄的代码，WTFPL。

本来这事儿应该是这周末的安排，不过也是赶巧，下午闲着的时候畅言客服给我来了个电话，闲着也是闲着就写了一半。也是我的风格了，服务器是云服务器客服一个电话我顺带配好的，备案是备案机构一个电话我顺带备好的。随意是一方面吧，这类事儿总体完成的效率还真不低。于是晚上回家就把剩下的一半写掉了，这篇文章没什么理论，主要是简单的配置代码，复制过去有空的时候慢慢看好了。

代码插入

官网有自适应的代码安装方式：

1
2
3
4
5
6
7
8
<div id="SOHUCS" ></div> 
<script type="text/javascript"> 
(function(){ 
var appid = '这里填写自己的appid'; 
var conf = '这里填写自己的conf'; 
var width = window.innerWidth || document.documentElement.clientWidth; 
if (width < 960) { 
window.document.write('<script id="changyan_mobile_js" charset="utf-8" type="text/javascript" src="https://changyan.sohu.com/upload/mobile/wap-js/changyan_mobile.js?client_id=' + appid + '&conf=' + conf + '"><\/script>'); } else { var loadJs=function(d,a){var c=document.getElementsByTagName("head")[0]||document.head||document.documentElement;var b=document.createElement("script");b.setAttribute("type","text/javascript");b.setAttribute("charset","UTF-8");b.setAttribute("src",d);if(typeof a==="function"){if(window.attachEvent){b.onreadystatechange=function(){var e=b.readyState;if(e==="loaded"||e==="complete"){b.onreadystatechange=null;a()}}}else{b.onload=a}}c.appendChild(b)};loadJs("https://changyan.sohu.com/upload/changyan.js",function(){window.changyan.api.config({appid:appid,conf:conf})}); } })(); </script>

把提供的appid和conf填好，尝试访问就可以用了。

使用的时候发现畅言是可以http访问的，如果你对于全站HTTPS有特别的要求，可以通过返回HTTP请求的时候添加如下内容：

1
Content-Security-Policy: default-src https:

不过因为牵扯到Web版本和PC版本的CSS存在区别，这里的JS代码还需要做一些小的改动。
这类就简单的添加了两个不同的CSS。

1
2
3
4
5
6
7
8
<div id="SOHUCS" ></div> 
<script type="text/javascript"> 
(function(){ 
var appid = '这里填写自己的appid'; 
var conf = '这里填写自己的conf'; 
var width = window.innerWidth || document.documentElement.clientWidth; 
if (width < 960) { 
window.document.write('<link rel="stylesheet" type="text/css" href="/changyan-mobile.css">');window.document.write('<script id="changyan_mobile_js" charset="utf-8" type="text/javascript" src="https://changyan.sohu.com/upload/mobile/wap-js/changyan_mobile.js?client_id='+appid+'&conf='+conf+'"><\/script>')}else{window.document.write('<link rel="stylesheet" type="text/css" href="/changyan.css">');var loadJs=function(d,a){var c=document.getElementsByTagName("head")[0]||document.head||document.documentElement;var b=document.createElement("script");b.setAttribute("type","text/javascript");b.setAttribute("charset","UTF-8");b.setAttribute("src",d);if(typeof a==="function"){if(window.attachEvent){b.onreadystatechange=function(){var e=b.readyState;if(e==="loaded"||e==="complete"){b.onreadystatechange=null;a()}}}else{b.onload=a}}c.appendChild(b)};loadJs("https://changyan.sohu.com/upload/changyan.js",function(){window.changyan.api.config({appid:appid,conf:conf})})}}

这段代码使用的两个CSS分别是changyan-mobile.css和changyan.css。

CSS美化

畅言默认的样式偏圆，也不是扁平的风格，我大致网上找了找现有的样式做了个修改。

这段代码是changyan.css：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
.module-cmt-box {
    padding: 10px 0!important;
    margin-top: -10px!important;
    overflow: visible!important;
}

.header-login {
    left: 90px!important;
    border: 0!important;
    border-radius: 0!important;
    margin-top: 88px!important;
    border-radius: 21px!important;
}

.post-wrap-border-l,.post-wrap-border-r,.post-wrap-border-t-l,.post-wrap-border-t-r {
    display: none;
}

.post-wrap-main {
    border: 0!important;
}

.post-wrap-w {
    background: #f0f0f0;
}

.btn-fw {
    background: #5fb878 url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTgxNy42NTcgNzc1Ljc1OEw0NTQuNzEgNjY0LjA4bDM2Mi45NS00MTguNzg4TDM0My4wMzIgNjY0LjA4IDYzLjgzNyA1NTIuNDAzIDk1Ny4yNTYgNzcuNzc1IDgxNy42NTcgNzc1Ljc1OHpNNDU0LjcxIDk0My4yNzVWNzQ3Ljg0bDExMS42NzQgNTUuODRMNDU0LjcxIDk0My4yNzR6IiBmaWxsPSIjZmZmIi8+PC9zdmc+) center no-repeat!important;
    width: 60px!important;
    height: 60px!important;
    border-radius: 30px;
    margin-top: -5px!important;
    margin-right: 40px!important;
    background-size: 30px!important;
    box-shadow: 5px 5px 10px rgba(0,0,0,.2);
    -webkit-transition: .3s;
    transition: .3s;
    outline: none;
}

.btn-fw:hover {
    box-shadow: 4px 4px 10px rgba(0,0,0,.2);
}

.block-head-w,.cmt-list-type {
    height: 0px!important;
}

.section-service-w {
    height: 0;
    opacity: 0;
}

.head-img-w {
    margin: 0!important;
}

.head-img-wimg {
    width: 25px!important;
    height: 25px!important;
}

.head-img-w {
    top: 118px!important;
    left: 95px!important;
}

.wrap-action-gw {
    border-bottom: 1px solid #dee4e9!important;
    padding-top: 30px!important;
    padding-bottom: 1pc!important;
}

.cmt-list-number,.title-name-gw-tag,.type-lists,.wrap-name-w {
    display: none!important;
}

.cmt-list-type {
    margin: 0!important;
}

.build-floor-gw {
    background: #f0f0f0!important;
}

.block-cont-gw {
    padding: 20px 0!important;
    border: 0!important;
}

.section-list-w {
    width: 95%!important;
    margin-left: 2%!important;
}

.build-floor-gw {
    background: #f9f9f9!important;
}

.user-name-gw>a {
    text-decoration: none!important;
}

这段代码是changyan-mobile.css。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
.module-mobile-cmt-header {
    height: 150px!important
}

.comment-number-tri {
    border-left: 0!important
}

.comment-number {
    margin-top: 1px!important
}

.comment-number, .comment-text {
    background-color: transparent!important;
    font-size: 16px!important;
    color: black!important;
    font-weight: 500!important;
    padding: 0!important
}

.header-right {
    float: left!important
}

.header-login {
    display: inline-block!important;
    margin-top: -12px!important;
    font-family: sans-serif!important;
    font-size: 14px!important
}

.header-pho {
    width: 2em!important;
    height: 2em!important;
    background-size: 2em!important
}

.mobile-header-head {
    margin: 85px 0 0 0!important;
    height: 0!important
}

.comment-textarea {
    height: 0!important;
    float: left!important;
    margin-top: -150px!important
}

.header-comment-number {
    margin: -6px 0 0 10px!important
}

.comment-input {
    border: 0!important;
    background-color: transparent!important;
    font-family: sans-serif!important;
    font-size: 14px!important;
    border-radius: 0!important;
    height: 90px!important;
    margin-top: 15px!important
}

.box-footer-button {
    background: #b1b1b1 url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTgxNy42NTcgNzc1Ljc1OEw0NTQuNzEgNjY0LjA4bDM2Mi45NS00MTguNzg4TDM0My4wMzIgNjY0LjA4IDYzLjgzNyA1NTIuNDAzIDk1Ny4yNTYgNzcuNzc1IDgxNy42NTcgNzc1Ljc1OHpNNDU0LjcxIDk0My4yNzVWNzQ3Ljg0bDExMS42NzQgNTUuODRMNDU0LjcxIDk0My4yNzR6IiBmaWxsPSIjZmZmIi8+PC9zdmc+) center no-repeat!important;
    background-size: 30px 30px!important;
    width: 100px!important;
    height: 50px!important;
    border-radius: 10px!important;
    margin-right: 10px!important
}

.list-footer-wrapper-wap {
    display: none
}

下面那个评论就是已经设置好了的畅言插件了。

之后根据博客的类型将这个CSS文件压缩好每次载入即可。