Skip to content
Permalink
Browse files

美化评论列表

  • Loading branch information...
hongweipeng committed Mar 24, 2017
1 parent 134fd82 commit ff59239e8fc7e9341f8d32dfaf91c78de1b2f455
Showing with 100 additions and 44 deletions.
  1. +1 −1 comments.php
  2. +41 −37 css/main.css
  3. +58 −6 functions.php
@@ -1,7 +1,7 @@
<?php $this->comments()->to($comments); ?>
<div id="comments">
<div class="comments-block">
<p class="ui <?php $this->options->singleColor() ?> ribbon label comments"><?php $this->commentsNum(_t('还不快抢沙发'), _t('只有地板了'), _t('已有 %d 人抢先你了')); ?></p>
<p class="ui <?php $this->options->singleColor() ?> ribbon label comments"><?php $this->commentsNum(_t('还不快抢沙发'), _t('只有地板了'), _t('<span class="comment-highlight">%d</span> 条评论')); ?></p>
<?php $comments->listComments(); ?>

<?php $comments->pageNav('&laquo; 前一页', '后一页 &raquo;'); ?>
@@ -157,6 +157,7 @@ blockquote{overflow:hidden;border:0;padding:8px 12px;margin:5px 0 15px;backgroun
margin-bottom: 20px;
padding: 15px;
position: relative;
border: 1px solid #ddd;
}


@@ -213,13 +214,17 @@ blockquote{overflow:hidden;border:0;padding:8px 12px;margin:5px 0 15px;backgroun

.ui.ribbon.label {
position: relative;
left: -2rem;
padding-left: 2rem;
border-radius: 0 4px 4px 0;
/*left: -2rem;*/
/*padding-left: 2rem;*/
border-radius: 4px;
border-color: rgba(0, 0, 0, 0.15);
font-size: 1em;
}

.ui.ribbon.label .comment-highlight {
color: #d32 !important;
}

.block {
position: relative;
background: #fff;
@@ -243,23 +248,20 @@ blockquote{overflow:hidden;border:0;padding:8px 12px;margin:5px 0 15px;backgroun

/* 侧边栏友情链接和回复列表中的头像 */
img.avatar {
float: left;
height: 40px;
width: 40px;
margin-right: 10px;
background-color: #fff;
border-radius: 50px;

box-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
float: left;
position: relative;
height: 50px;
width: 50px;
margin-top: 10px;
transition: 500ms;
-o-transition: 500ms;
-moz-transition: 500ms;
-webkit-transition: 500ms;
}
img.avatar:hover {
-moz-box-shadow: 0px 2px 8px 2px rgba(0, 0, 0, 0.1),1px 1px 30px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0px 2px 8px 2px rgba(0, 0, 0, 0.1),1px 1px 30px 5px rgba(0, 0, 0, 0.2);

opacity: .8;
}
.comment-list .comment-author img.avatar:hover {
transform: rotate(360deg);
-o-transform: rotate(360deg);
@@ -271,42 +273,44 @@ img.avatar:hover {
/* 评论列表样式 */
.comment-list {
padding-left: 0;
}
.comment-list, .comment-children {
list-style: none;
}
.comment-list .comment-author {
float: left;
}
.comment-list .comment-content {
.comment-list .comment-li {
border-top: 1px solid rgba(0, 0, 0, 0.13);
clear: both;
color:#555;
margin-left: 50px;
font-size: 15px;
list-style: outside none none;
margin: 0;
overflow: hidden;
width: 100%;
}
.comment-list .comment-meta a {
color: rgba(0, 0, 0, 0.4);
font-size: 15px;

.comment-list .comment-body {
padding: 10px 0 10px 60px;
}
.comment-list .comment-meta {
float: right;
.comment-list .comment-body cite.fn {
color: #555555;
font-style: normal;
}
.comment-list .comment-body a {
font-style: normal;
}
.comment-list .comment-reply {

font-size: 13px;
margin-bottom: 10px;
margin-left: 50px;

transition: opacity 0.1s ease-out;
-o-transition: opacity 0.1s ease-out;
-moz-transition: opacity 0.1s ease-out;
-webkit-transition: opacity 0.1s ease-out;
.comment-list .comment-content p {
margin: 0.5em 0;
}
.comment-list .comment-footer {
line-height: 1.5em;
}
.comment-list .comment-footer time {
color: #999;
font-size: 12px;
margin-right: 8px;
}

.comment-parent>.comment-children {
margin-left: 30px;
padding-left: 30px;
border-left: 1px dotted rgba(0, 0, 0, 0.35);
/*border-left: 1px dotted rgba(0, 0, 0, 0.35);*/

}

@@ -1,10 +1,4 @@
<?php
/**
* Created by PhpStorm.
* User: Administrator
* Date: 2016/10/8
* Time: 16:10
*/
/**
* 随机文章
@@ -48,4 +42,62 @@ function themeConfig($form) {
'ShowPostBottomBar' => _t('文章页显示上一篇和下一篇')),
array('ShowPostBottomBar'), _t('显示设置'));
$form->addInput($showBlock->multiMode());
}
/**
* 重写评论显示函数
*/
function threadedComments($comments, $options){
$singleCommentOptions = $options;
$commentClass = '';
if ($comments->authorId) {
if ($comments->authorId == $comments->ownerId) {
$commentClass .= ' comment-by-author';
} else {
$commentClass .= ' comment-by-user';
}
}
$commentLevelClass = $comments->levels > 0 ? ' comment-child' : ' comment-parent';
?>
<li itemscope itemtype="http://schema.org/UserComments" id="<?php $comments->theId(); ?>" class="comment-li<?php
if ($comments->levels > 0) {
echo ' comment-child';
$comments->levelsAlt(' comment-level-odd', ' comment-level-even');
} else {
echo ' comment-parent';
}
$comments->alt(' comment-odd', ' comment-even');
echo $commentClass;
?>">

<div class="comment-author" itemprop="creator" itemscope itemtype="http://schema.org/Person">
<span itemprop="image"><?php $comments->gravatar($singleCommentOptions->avatarSize, $singleCommentOptions->defaultAvatar); ?></span>

</div>
<div class="comment-body">
<cite class="fn" itemprop="name"><?php $singleCommentOptions->beforeAuthor();
$comments->author();
$singleCommentOptions->afterAuthor(); ?></cite>
<div class="comment-content" itemprop="commentText">
<?php $comments->content(); ?>
</div>
<div class="comment-footer">
<time itemprop="commentTime" datetime="<?php $comments->date('c'); ?>"><?php $singleCommentOptions->beforeDate();
$comments->date($singleCommentOptions->dateFormat);
$singleCommentOptions->afterDate(); ?></time>
<?php $comments->reply($singleCommentOptions->replyWord); ?>
</div>
</div>
<?php if ($comments->children) { ?>
<div class="comment-children" itemprop="discusses">
<?php $comments->threadedComments(); ?>
</div>
<?php } ?>


</li>
<?php
}

0 comments on commit ff59239

Please sign in to comment.
You can’t perform that action at this time.