Ghost 博客多说评论插件样式

刚刚为博客添加了一个多说插件,用起来挺方便的,主要是集成比较方便。下面这篇文章就主要说明一下如何为 Ghost 博客集成多说插件。

首先需要一个申请一个多说帐号,在多说的官网即可申请到 http://duoshuo.com/

选择 “ 我要安装 ” 然后填入相关信息即可。

接下来是集成到博客上。

在多说后台上面获取代码。 下面是组件代码,将其加入 /{ghost目录}/content/themes/{你的主题}/post.hbs 中的 main.article.footer 项目最后。

<section class="post-comments">  
    <div class="ds-thread" data-thread-key="{{slug}}" data-title="{{{title}}}" data-url="{{url absolute="true"}}"></div>
</section>  

然后在模版的最后加上脚本代码,记得将多说帐号替换一下。

<script type="text/javascript">  
    var duoshuoQuery = { short_name: "你申请的多说帐号" };
    (function () {
        var ds = document.createElement('script');
        ds.type = 'text/javascript'; ds.async = true;
        ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
        ds.charset = 'UTF-8';
        (document.getElementsByTagName('head')[0]
         || document.getElementsByTagName('body')[0]).appendChild(ds);
    })();
</script>  

这样就完成了插件的集成,那么接下来就是修改样式了,多说的原版样式风格和 Ghost 主题风格不一样,我们可以在多说的后台设置,设置相关的CSS,达到更改主题的效果。

首先将 “ 附近功能-开启喜欢功能 ” 去掉。

然后在 “ 自定义CSS ” 中加入相关的主题 CSS:

.ds-highlight {
  color: #999!important
}

.ds-comments-info {
  padding: 0!important
}

.ds-comments {
  border-bottom: none!important
}

.ds-comments-tab-duoshuo {
  border: none!important;
  background: none!important
}

#ds-reset .ds-comments-tab-duoshuo .ds-highlight,.ds-comments-tab-duoshuo:hover {
  color: #999!important
}

.ds-avatar img {
  width: 40px!important;
  height: 40px!important;
  border-radius: 50%!important
}

.ds-replybox .ds-avatar {
  margin: 0!important
}

.ds-post {
  border-top: 1px solid #ddd!important
}

.ds-post-self {
  padding-left: 0!important
}

.ds-comment-body {
  padding-left: 50px!important
}

.ds-comment-body:hover .ds-post-likes,.ds-comment-body:hover .ds-post-reply {
  display: inline-block!important
}

.ds-children .ds-avatar img {
  width: 30px!important;
  height: 30px!important;
  border-radius: 50%!important
}

.ds-children .ds-comment-body {
  padding-left: 40px!important
}

.ds-login-buttons {
  max-width: 100%!important;
  width: 60%!important;
  padding-left: 56px!important
}

.ds-social-links {
  width: 68px!important;
  height: 24px!important
}

.ds-service-list li {
  width: 28px!important
}

.ds-service-list li a {
  padding: 0!important;
  background: none!important
}

.ds-inline-replybox {
  margin-top: 4px!important
}

.ds-replybox form textarea {
  font-size: 16px!important
}

.ds-textarea-wrapper {
  border-radius: 4px!important;
  border-bottom: 1px solid #ccc!important
}

.ds-post-toolbar {
  margin-top: 10px!important
}

.ds-post-options {
  border: none!important;
  background: none!important
}

.ds-post-button {
  border: 1px solid #ccc!important;
  border-radius: 18px!important;
  line-height: 30px!important;
  background-color: #fff!important;
  color: #999!important
}

.ds-post-button:hover {
  border-color: #999!important;
  color: #333!important
}

.duoshuo #ds-thread .ds-no-transition#ds-reset .ds-post-button,.duoshuo #ds-thread .ds-no-transition#ds-reset .ds-post-button:hover {
  background-color: #fff!important
}

#ds-share,.ds-login-buttons,.ds-comments-tab-weibo,.ds-douban,.ds-more-services,.ds-post-likes,.ds-post-reply,.ds-post-report,.ds-post-repost,.ds-powered-by,.ds-renren,.ds-sort,.ds-sync,.ds-toolbar {
  display: none!important
}

这样就可以获得比较好看的评论插件了。

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章