需求
使用 typecho 進行模板開發的時候,默認評論樣式很難看。
因此需要評論需要重新輸出或進行樣式設定。
默認的評論模板文件路徑是:comments.php
主要使用的相關變量
<?php $comments->gravatar('40', ''); ?> //頭像,有兩個參數,大小、默認頭像?
<?php $comments->author(); ?> //評論作者
<?php $comments->permalink(); ?> //當前評論的連接地址
<?php $comments->date('Y-m-d H:i'); ?>//評論時間,可在括號裏設置格式
<?php $comments->reply(); ?> //回覆按鈕,可在括號裏自定義評論按鈕的文字
<?php $comments->content(); ?> //評論內容自定義評論輸出
1、threadedComments 方法
如果要自定義評論輸出內容,則需要重寫 threadedComments($comments, $options) 方法,這個方法需要放在模板文件中 <?php $this->comments()->to($comments); ?> 的前面,因爲實際上 $this->comments()->to($comments); 會調用 threadedComment 模板。
2、我自己寫的一個代碼
<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
<?php function threadedComments($comments, $options) {?>
<div class="comment-list-item" >
<div class="item">
<img class="avatar" src="https://thirdqq.qlogo.cn/g?b=qq&nk=<?php echo empty($comments->mail)?'16':$comments->mail; ?>&s=100" alt="頭像">
<div class="comment-content">
<div class="user">
<span class="author">
<?php $comments->author(); ?>
<time class="date"><?php $comments->date('Y-m-d H:i'); ?></time>
</span>
<div class="handlebox">
<?php ob_start();
$comments->reply();
$content = ob_get_contents();
ob_end_clean();
$content = preg_replace("/<a href=\"(.*?)\" rel=\"nofollow\" onclick=\"(.*?)\"+>(.*?)<\/a>/sm", '<a onclick="$2" class="revertcomment">$3</a>', $content);
echo $content;
?>
</div>
</div>
<div class="substance">
<div id="<?php $comments->theId(); ?>" ></div>
<?php $comments->content(); ?><label id="AjaxComment<?php $comments->theId(); ?>"></label>
<?php if ($comments->children) { ?>
<div class="item-level">
<?php $comments->threadedComments($options); ?>
</div>
<?php } ?>
</div>
</div>
</div>
</div>
<?php } ?>
<div id="comments" class="page-comment">
<?php $this->comments()->to($comments); ?>
<div class="title"><?php $this->commentsNum(_t('評論'), _t('已有1條評論'), _t('已有 %d 條評論')); ?></div>
<?php if($this->allow('comment')): ?>
<div id="<?php $this->respondId(); ?>" class="page-comment-box reply-frm">
<form id="frmSumbit" method="post" action="<?php $this->commentUrl() ?>" id="comment-form" role="form">
<div class="page-comment-head" style="">
<?php if($this->user->hasLogin()): ?>
<?php else: ?>
<input type="text" name="author" id="author" class="text" placeholder="* 怎麼稱呼" value="<?php $this->remember('author'); ?>" required />
<input type="email" name="mail" id="mail" lay-verify="email" class="text" placeholder="<?php if ($this->options->commentsRequireMail): ?>* <?php endif; ?>郵箱(放心~會保密~.~)" value="<?php $this->remember('mail'); ?>" <?php if ($this->options->commentsRequireMail): ?>required<?php endif; ?> />
<input type="url" name="url" id="url" lay-verify="url" class="text" placeholder="<?php if ($this->options->commentsRequireURL): ?>* <?php endif; ?><?php _e('http://您的主頁'); ?>" value="<?php $this->remember('url'); ?>" <?php if ($this->options->commentsRequireURL): ?>required<?php endif; ?> />
<?php endif; ?>
</div>
<div class="page-comment-body">
<textarea name="text" id="txaArticle" placeholder="難道不說點什麼?"></textarea>
</div>
<div class="page-comment-foot">
<div class="meta">
<a href="javascript:;" id="daka" onclick="javascript:SIMPALED.Editor.daka();"><i class="icon-pencil-square"></i></a>
</div>
<div class="submit">
<?php $comments->cancelReply(); ?>
<button type="submit"><?php _e('發表評論'); ?></button>
</div>
</div>
<div class="page-comment-verify">
</div>
</form>
</div>
<?php else: ?>
<div class="commentmsg">已關閉評論!</div>
<?php endif; ?>
<div class="page-comment-list">
<label id="AjaxCommentBegin"></label>
<?php if ($comments->have()): ?>
<div class="page-comment-list">
<label id="AjaxCommentBegin"></label>
<?php $comments->listComments(); ?>
<label id="AjaxCommentEnd"></label>
</div>
<?php endif; ?>
</div>
</div>首頁是threadedComments($comments, $options)方法的重寫,重寫主要是輸出樣式的自定義寫法,寫完後,判斷是否是允許評論,然後在進行評論相關的輸出。
3、評論js回覆功能的使用
因爲我不懂js代碼,所以我就直接將就默認給出的js代碼進行書寫。
首先是comments->reply(); 代碼輸出默認js回覆按鈕,然後點擊回覆按鈕會自動向表單插入隱藏表單,同時輸入框會回到id爲<?php $this->respondId(); ?>的div盒子下面
判斷是否是作者本人的評論或者回復
如果要顯示是否是本人發表的評論,則需要進行一次判斷。
typecho 官方文檔給的方式通過設置 class 的方式,如下:
$commentClass = '';
if ($comments->authorId) {
if ($comments->authorId == $comments->ownerId) {
$commentClass .= ' comment-by-author';
} else {
$commentClass .= ' comment-by-user';
}
}但是我在使用的時候,並不是很好用,反而會經常出現問題,樣式控制也不好控制,於是我直接在作者名字上進行判斷:
判斷的代碼放在作者輸出之前或者之後都可以。
首先判斷是否有 authorId 屬性,如果有,則判斷 authorId 和 ownerId 是否一致即可。
<?php $comments->author(); ?>
<?php if ($comments->authorId) {
if ($comments->authorId == $comments->ownerId) {
echo "<span class='author-after-text'>[作者]</span>";
}?>
<?php }?>