在本教程中,我们将看到如何在自定义网站上添加带有附加内容的Disqus评论系统 客制化
Disqus评论系统
Disqus帮助发布者增加参与度并建立忠实的受众,并且帮助而不是为您的网站构建整个评论系统。由于此功能可用于许多平台,请在 这里!
第一件事是在Disqus上创建帐户以获取一个链接,该链接将用于评论插件。
我们有两种选择来实现disqus插件。
静态页面的Disqus
静态页面的Disqus非常简单,我们只需要在变量中分配网站链接即可。 这个。page.url 和 这个。页面标识符
争议配置
var 争议_config = function () {
// Assigning static page url
// Replace PAGE_URL with your page URL
this.page.url = "//demo.io/exmaple/post/article.php";
// Replace PAGE_IDENTIFIER with your page's unique identifier
this.page.identifier = "//demo.io/exmaple/post/article.php";
};
实施此位置后,将给定或生成的代码放在应张贴评论的页面上。
Disqus为动态页面
动态页面的Disqus也得到了简化,我们只需要在变量中分配网站链接即可,即 这个。page.url 和 这个。页面标识符 使用PHP功能。我们要做的是,将当前页面的URL放入那些变量中
争议配置
var 争议_config = function () {
// 的PHP function to get the current url
// Replace PAGE_URL with your page's canonical URL variable
this.page.url = "<?php echo 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; ?>";
// Replace PAGE_IDENTIFIER with your page's unique identifier variable
this.page.identifier = "<?php echo 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; ?>";
};
对于动态页面 这个。页面标识符 分配的变量将用作唯一ID,因为在网站和页面上将没有类似的链接 这个。page.url 将在每个页面上添加不同的评论部分。
自定义Disqus评论系统
- 使用自定义设计添加最近的评论部分:
使用disqus插件可以立即显示网站上的所有最新评论
最近评论插件
<?php
$_disqusName = "demo"; // Your 争议 assign site name
$_totalComments = "6"; // total comments to be viewed
$_commentLength = "100"; // length of the comment content
// Comments Shows 通过 script File : Place where you needed
echo '<script type="text/javascript" src="http://"'.$_disqusName.'".disqus.com/recent_comments_widget.js?num_items="'.$_totalComments.'"&hide_avatars=0&avatar_size=40&excerpt_length="'.$_commentLength.'""></script>';
?>
应用自定义CSS设计评论视图,您可以设置自己的自定义设计,因为它已经被自定义,但是我们也可以进行更改。
最近评论CSS
/* Recent Comment Style */
.dsq-widget-user {
text-decoration: none;
display: block;
font-family: calibri;
color: #006378;
}
.dsq-widget-comment {
font-family: calibri;
display: block;
}
.dsq-widget-meta a {
text-decoration: none;
font-family: calibri;
}
.dsq-widget-item {
border-left: 3px solid #00809a;
padding-left: 10px;
transition-property: background-color, color;
transition-duration: 1s;
transition-timing-function: ease-out;
}
.dsq-widget-item p a {
text-decoration: none;
color: #337ab7;
font-size: 13px;
}
.dsq-widget-item:hover {
border-left: 3px solid #00809a;
padding-left: 10px;
background-color: #ecedee;
}
.dsq-widget-avatar {
border-radius: 100px;
}
.dsq-widget ul.dsq-widget-list {
padding: 0;
margin: 0;
text-align: left;
}
img.dsq-widget-avatar {
width: 32px;
height: 32px;
border: 0px;
margin: 5px;
padding: 0px 3px 3px 0px;
float: left;
}
a.dsq-widget-user {
font-weight: bold;
}
a.dsq-widget-thread {
font-weight: bold;
}
p.dsq-widget-meta {
clear: both;
font-size: 80%;
padding: 0;
margin: 0;
}
li.dsq-widget-item {
margin: 15px 0;
list-style-type: none;
clear: both;
background: #fefff8;
}
span.dsq-widget-clout {
padding: 0 2px;
background-color: #ff7300;
color: #fff;
}
table.dsq-widget-horiz td {
padding-right: 15px;
}
.dsq-widget-comment p {
display: inline;
}
/* Recent Comment Style */

可以删除此部分,但我的观点是不应删除它。不过,我们可以应用CSS隐藏页脚部分
隐藏页脚CSS
/* Hide The Disqus Footer */
#disqus_thread {
position: relative;
}
#disqus_thread:after{
content: "";
display: block;
height: 55px;
width: 100%;
position: absolute;
bottom: 0px;
background: white;
}
/* ---Hide The Disqus Footer */