jQuery + Php 实现类似 Medium 的文章页内容批注评论功能

还没时间做 WordPress 插件…

背景

偶然的机会，在准备做小半谈否 API 的时候，正在寻找用户人群时看到了利器 (liqi.io) 网站

他们使用了一款 2015年(貌似是)由一个国外开发者做的句子标记插件，实现了文章中点击句子即可标记并评论的功能

同样的 Medium 也有句子标记功能，还是蛮有用的

增加了互动，访客也能参与其中…

代码

没有来得及整理，先贴代码

//内容数据都保存在当前文章自定义字段
$stream_ids = get_post_meta($post->ID,'stream_ids',true);
$stream_contents = get_post_meta($post->ID,'stream_contents',true);
$stream_users = get_post_meta($post->ID,'stream_users',true);

$stream_users = explode('######',$stream_users);
$stream_ids = explode('######',$stream_ids);
$stream_contents = explode('######',$stream_contents);

$count1 = count($stream_ids);
$count2 = count($stream_contents);
$count3 = count($stream_users);

↑ 文章页头部获取标记内容

 ID;
 if(empty($user_id)){
     $login = 0;
 }else{
     $login = 1;
 }

?>

        
        
        
        

    确定
    取消
    
    

 



        
120,'height'=>120,'rating'=>'X','class'=>array('new-single-comment-img'),'extra_attr'=>'title="user-avatar"','scheme'=>'https') ); ?>display_name; ?>
        
    
    



    

↑ 文章页展示评论区块

↑ 文章页核心功能 jQuery 代码

↑ 文章页处理标记内容 jQuery 代码

function send_post_mark_comment() {
 
 if(!empty($_POST['content']) && !empty($_POST['post_id']) && !empty($_POST['user_id']) && !empty($_POST['stream_id'])) {
 $content = addslashes($_POST['content']);
 $post_id = (int)$_POST['post_id'];
 $user_id = (int)$_POST['user_id'];
 $stream_id = (int)$_POST['stream_id'];
 
 if(get_post_status($post_id) !== false){
     $old_ids = get_post_meta($post_id,'stream_ids',true);
     $old_contents = get_post_meta($post_id,'stream_contents',true);
     $old_users = get_post_meta($post_id,'stream_users',true);
     if(!empty($old_ids) && !empty($old_contents)){
        $status = update_post_meta($post_id,'stream_ids',$old_ids.'######'.$stream_id);
        $status = update_post_meta($post_id,'stream_users',$old_users.'######'.$user_id);
        $status = update_post_meta($post_id,'stream_contents',$old_contents.'######'.$content);
     }else{
        $status = update_post_meta($post_id,'stream_ids',$stream_id);
        $status = update_post_meta($post_id,'stream_users',$user_id);
        $status = update_post_meta($post_id,'stream_contents',$content);
     }
     if($status !== false){
         echo json_encode(array('stats'=>'1'));
     }else{
         echo json_encode(array('stats'=>'0'));
     }
 }else{
     echo json_encode(array('stats'=>'0'));
 }
 
 
 die();
 }
}
// 将接口加到 init 中
add_action('init', 'send_post_mark_comment');

↑ 提交评论 action 函数

.new-single-comment-btn{
    float: right !important;
    border: 2px solid #959da5 !important;
    background-color: #fff !important;
    box-shadow: none !important;
    border-radius: 5px !important;
    padding: 12px 12px 11px 15px !important;
    text-align: center !important;
    text-shadow: none !important;
    color: #959da5 !important;
    margin: 0px !important;
    margin-top: -5px !important;
}


.new-single-comment-avatar{
    width: 40px;
    height: 40px;
    margin-left: -2px;
    margin-right: 13px;
    border-radius: 50%;
}

.new-single-div-author{
    position: absolute;
    right: 0px;
    top: -54px;
    padding: 6px 20px;
    font-family: sans-serif;
    font-size: 1.8rem;
    border-radius: 50px;
    box-shadow: 0 0.125rem 0.75rem 0 rgba(0,0,0,.08);
}

.new-p-under{
    text-decoration: underline dashed rgb(253, 188, 1) !important;
}

.new-p-undered{
    text-decoration: underline dashed rgb(253, 188, 1) !important;
}

.new-single-comment-fixed{
    display: none;
    position: fixed;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
    border: none;
    transform: translateX(820px);
    margin-top: 22.1vh;
    width: 35vh;
    top: 0px;
    background: rgb(255, 255, 255);
}

.new-single-comment-fixed input{
    border: none;font-size: 1.4rem;font-weight: 400;font-family: sans-serif;color: #666;height: 55px;padding-left: 20px;    border-left: 5px solid rgb(253, 188, 1);
}

.new-single-comment-p{
    font-size: 1.2rem !important;
    margin: 5px 0 !important;
    color: #888;
    text-decoration: none !important;
}

.new-single-comment-img{
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    margin: 0px !important;
    display: inline-block !important;
    border-radius: 50% !important;
    margin-right: 7px !important;
    margin-left: -5px !important;
    margin-top: -4px !important;
}

.underline-ps{
    background: rgb(252, 188, 1);
    color: rgb(255, 255, 255);
    font-style: normal;
    font-size: 1rem;
    padding: 1px 10px;
    font-weight: 600;
    border-radius: 5px;
    margin-left: 5px;
}

.new-single-comment-div{
    padding: 0px 20px 0px 20px;
    border-left: 5px solid rgb(238, 238, 238);
    transition: ease-in-out .2s;
}

.new-single-comment-div h4{
    font-weight: 600;
    font-size: 1.9rem;
    color: #666;
    margin-bottom: 3px;
}


.new-single-comment-div-list{
    padding: 10px 0px;
    padding-left: 0px;
    border-top: 1px solid #eee;
    max-height: 50vh;
    overflow: hidden;
    overflow-y: auto;
    transition: ease-in-out .2s;
}

.new-cap-tags{
    margin-top: -20px;
}

.new-cap-tags a{
    position: relative;
    display: inline-block;
    height: 30px;
    padding: 0 15px;
    font-size: 1.7rem;
    line-height: 30px;
    color: rgb(0, 132, 255) !important;
    vertical-align: top;
    border-radius: 100px;
    background: rgba(0, 132, 255, 0.1);
}

.new-single-comment-fixed-cap{
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
    border: none;
    background: rgb(255, 255, 255);
    transform: none !important;
    display: block !important;
    margin-top: 30px !important;
    margin-left: 44px !important;
    width: 100%;
    position: relative;
}

↑ CSS部分

截图

后记

大概还不准备放在 Tony 主题 里 (感觉没啥必要)
之后可能会做成 WordPress 插件2333