要件
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);` は `threadedComments` テンプレートを呼び出しているからです。
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 Reply」ボタンが表示されます。このボタンをクリックすると、自動的に隠蔽形式のフォームがフォーム内に挿入され、入力欄は「<?php $this->respondId();?>」というidを持つ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 }?>