自定义自己的评论系统

作者: 禹子歆 | 来源:发表于2017-01-07 16:41 被阅读355次

    今天逛本博客主题的编写者的博客的时候,看到了他的评论系统效果十分的好看,于是好奇心起,也打算自己弄一个一样的。

    1. 已经做好的文件

    在多说设置里用的css文件
    样式的ejs文件
    本地修改的ejs文件

    2. 把embed.js传到云端

    把刚才下载的样式的ejs文件上传到一个任意的地方

    比如我是复制到本地blog/themes/yelee/source/js/下边,上传到git后访问的地址就是https://xianwx.github.io/js/embed.js)
    

    3. 浏览器、系统标识

    • 使用上边的本地修改的ejs文件,把内容整个拷贝粘贴到yelee/layout/_partial/comments/duoshuo.ejs(注:使用跟我一样主题的人用)
    • 其它主题的人:找到多说的ejs,给其控件的src赋值为你的embed.ejs的地址
    var duoshuoQuery = {short_name:"<%=theme.duoshuo.domain%>"};
    (function() {
        var ds = document.createElement('script');
        ds.type = 'text/javascript';ds.async = true;
    
        `ds.src = 'http://moxfive.xyz/resources/embed.js'`;
        /*上面是我自己的 embed.js 链接,请改为你自己的地址*/
    
        ds.charset = 'UTF-8';
        (document.getElementsByTagName('head')[0] 
         || document.getElementsByTagName('body')[0]).appendChild(ds);
    })();
    

    4. 引入 Font Awesome

    打开theme/你的主题/layout/_partial/head.ejs
    输入

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    

    如果已经有了就不需要加了

    5. 添加css

    打开http://你的多说域名.duoshuo.com/admin/settings/
    拷贝样式的ejs文件的内容
    按照后台添加css里的步骤,添加自定义css

    ① 博主标志

    在评论里,点自己的头像,进入http://duoshuo.com/settings/avatar/页面,点自己名字,进入http://duoshuo.com/profile/你的uid/界面,复制你的uid
    打开刚才的embed.js文件,把你的uid复制到里边“你的uid”位置

    function sskadmin(e) {
        var ssk = '';
        if (e.user_id == 你的uid) {
            if (checkMobile()) {
                ssk = '<span class="ua"><span class="sskadmin">博主</span></span><br><br>';
            } else {
                ssk = '<span class="ua"><span class="sskadmin">博主</span></span>';
            }
        } else {
            if (checkMobile()) {
                ssk = '<br><br>';
            }
        }
        return ssk;
    }
    

    并确保刚才添加到后台的css里有以下代码(刚才下的已经自带了):

    /*博主标记 CSS*/
    .sskadmin {
        background-color: #00a67c!important;
        border-color: #01B171!important;
        border-radius: 4px;
        padding: 0 5px!important;
        opacity: .4;
    }
    .sskadmin:hover {
        opacity: 1;
    }
    

    以下内容上文提供的下载的css都已经有了,只是讲解其功能,不喜欢可以删掉

    ② 鼠标悬停旋转头像

    /*头像样式*/
    #ds-reset .ds-avatar{background:none !important; box-shadow:none !important;}
    #ds-reset .ds-avatar img , #ds-thread #ds-reset ul.ds-children .ds-avatar img{width:50px !important;height: 50px !important;-webkit-transition: .9s;-moz-transition: .9s;-o-transition: .9s;-ms-transition: .9s;padding: 2px;border: 1px solid #ddd;background: #fff;}
    /*鼠标悬停旋转头像*/
    .ds-post:hover .ds-avatar img{transform:rotate(360deg);-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);border-radius:30px !important;}
    #ds-reset .ds-avatar img:hover{transform:rotate(360deg);-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);border-radius:30px !important;}
    

    ③ 通用样式

    #ds-thread #ds-reset .ds-comment-body, #ds-thread #ds-reset ul.ds-children .ds-comment-body{padding-left:70px !important;}
    #ds-thread #ds-reset .ds-comment-body, #ds-thread #ds-reset ul.ds-children .ds-comment-body{padding-left:70px !important;}
    .ds-post:hover{background:#eee !important;}
    #ds-thread #ds-reset ul.ds-children .ds-avatar{width:50px !important;}
    #ds-thread #ds-reset .ds-replybox{padding: 0 0 0 80px !important;}
    #ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-body{margin-left: 68px !important;}
    #ds-recent-comments li.ds-comment:nth-of-type(1){border:none !important;}
    #ds-thread{ 
        border-radius: 3px;
    }
    /** 多说最近留言样式 **/
    #ds-recent-comments .ds-avatar img{   
        width:54px;height:54px; 
        border-radius: 50%; 
        -webkit-border-radius: 50%; 
        -moz-border-radius:50%;   
        box-shadow: inset 0 -1px 0 #3333sf;/*设置图像阴影效果*/  
        -webkit-box-shadow: inset 0 -1px 0 #3333sf;   
        -webkit-transition: 0.4s;      
        -webkit-transition: -webkit-transform 0.4s ease-out;   
        transition: transform 0.4s ease-out;
        -moz-transition: -moz-transform 0.4s ease-out;   
    }    
    #ds-recent-comments .ds-avatar img:hover{  
        box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);   
        -webkit-box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);   
        transform: rotateZ(360deg);
        -webkit-transform: rotateZ(360deg);   
        -moz-transform: rotateZ(360deg);   
    }
    

    ④ 按钮样式

    修改了透明度、背景、边框样式

    .ds-meta {
        opacity: .5;
        }
    .ds-meta:hover {
        opacity: 1;
        }
    #ds-thread #ds-reset a.ds-like-thread-button {
        background-image: none;
        background-color: #fee2d3;
        border: none;
        text-shadow: none;
        font-family: inherit;
        }
    

    ⑤ 剩余自定义样式查看参考资料

    多说样式折腾记录 — 添加 UA 浏览器标识、旋转头像等

    参考资料

    多说样式折腾记录 — 添加 UA 浏览器标识、旋转头像等
    多说后台自定义css

    相关文章

      网友评论

        本文标题:自定义自己的评论系统

        本文链接:https://www.haomeiwen.com/subject/fgufbttx.html