紅穆ノート
レコメンド プログラムノート Typecho記事ページのコメントスタイルの変更
プログラムノート Typecho

Typecho記事ページのコメントスタイルの変更

Typecho記事ページのコメントスタイルの変更

要件

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&amp;nk=<?php echo empty($comments->mail)?'16':$comments->mail; ?>&amp;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 }?>
微信赞赏

WeChat

支付宝赞赏

Alipay

✍️ クリエイター: 紅穆

ウェブサイト管理者 · ご覧いただきありがとうございます!さらに多くの魅力的なコンテンツをお楽しみいただけますよう、引き続きご支援をお願いいたします。

著者プロフィール プロフィールを見る →

関連記事

リソースサイト – Typecho001テンプレート

リソースサイト – Typecho001テンプレート プログラムノート Typecho

typecho001テンプレート:このテンプレートファイルフォルダ名を変更しないでください。フォルダ名:typecho001。1.4:記事ページにおけるJS出力に関する問題を修正。1.3:プラグイン未インストール時のエラーメッセージを修正。リストページのコード出力を最適化。1.2:コメント機能を修正。カスタムホームページタイトルの追加。1.1:コメント返信機能の不具合を修正。ホームページに個別のタイトル設定機能を追加。ウェブサイト用 favicon.ico アイコンの追加。その他…
👁 207
Typechoのページ分割スタイルの変更

Typechoのページ分割スタイルの変更 プログラムノート Typecho

大人の皆様、時代は変わりました!現在、Typechoにとって最も理想的な解決策となっています。というのも、Baiduは固定された思考方式に基づいたコードしか検出できませんからです。実際に生成されるHTMLコードは非常にシンプルで、圧倒的な自由度を備えています。完全なカスタマイズが可能で、li要素にクラスを付与したり、a要素にクラスを付与したり、「前へ」「次へ」要素にクラスを付与したり、Typechoが標準で提供する「more」用liタグを削除したりもできます。さらには、内部のコンテンツに任意のテキストを追加することも可能です…
👁 531
Typechoにおけるデータベースの「挿入・削除・更新・検索」操作用API

Typechoにおけるデータベースの「挿入・削除・更新・検索」操作用API プログラムノート Typecho

Typechoのデータベースは、非常に使いやすいAPIを提供しており、ネイティブSQL記法とほとんど違いありません。また、SQL注入などの一般的なSQL関連のセキュリティ問題も適切に処理しています。本記事では、実用的な視点から、Typechoでデータベースを操作する際のよくあるシナリオおよび関連するAPIの使い方を紹介します。テーブルの作成と削除:Typechoのプラグイン開発においては、自作のテーブルを作成することがよくあります。前述の通り、Typecho_…
👁 564
Typechoで人気のコメント記事や最新記事を取得する方法のまとめ

Typechoで人気のコメント記事や最新記事を取得する方法のまとめ プログラムノート Typecho

Typecho記事を呼び出す:Themeを設計する際、サイドバーで「人気記事」または「最新記事」を表示する必要がある場合があります。このような場合、指定された位置でスクリプトを用いて直接記事を呼び出せます。本記事では、この記事呼び出し方法を整理しており、今後、必要に応じたテンプレートで直接使用できるようにしています。実際、Themeの設計はそれほど複雑ではありません。静的テンプレートで構成を終えれば、そのまま記事を呼び出せます。「最新記事を呼び出す」<?php $t…
👁 307
Typechoで分類された記事リストを呼び出します

Typechoで分類された記事リストを呼び出します プログラムノート Typecho

`pageSize` の後ろの数字は呼び出される記事数を表します;`mid` の後ろの数字は呼び出されるカテゴリIDを表します。ヒント:TypechoのカテゴリディレクトリIDを取得する方法は、マウスを該当のカテゴリ名の上に移動させることで、ブラウザのステータスバーに表示される `mid=` の後ろの数字がそのカテゴリディレクトリIDとなります。現在のTypechoテーマテンプレートを編集し、呼び出したいカテゴリディレクトリの位置に以下のコードを追加してください。方法1:`widget`…
👁 368
Typechoのウィジェット

Typechoのウィジェット プログラムノート Typecho

通过Typecho的Widget_Options,可以方便地获取Typecho的系统信息,或者方便地获取相关配置、资源路径等。这里列出常用的Widget_Options函数和用法,方便各位筒子方便查阅。通过Widget_Options获取路径信息获取内置URL通过这类api,可以获取TE内置的一些特…
👁 196

おすすめ読書

nginx:当本サイトの画像で404エラーが発生した場合、自動的にバックアップサイトの画像にアクセスします。

nginx:当本サイトの画像で404エラーが発生した場合、自動的にバックアップサイトの画像にアクセスします。 落とし穴のまとめ

以下の Nginx 配置を使用することで、当サイトの画像が 404 で返された場合に、自動的にバックアップサイトから画像を取得できるようにできます:http { upstream backup_images { server backup.example.com; } server { listen 80; server_name example.com; r…
👁 128
PHPでPS画像を処理する方法

PHPでPS画像を処理する方法 言語ノート PHP

PHPでPS形式の画像を使用するには、GDライブラリを使用できます。これはPHPで画像処理を行うために一般的に用いられるライブラリです。以下に簡単な例を示します:GDライブラリがインストールされ、有効になっているかを確認してください。php.iniファイルで「gd」を検索することで、このライブラリが有効になっているかどうかを確認できます。有効でない場合は、有効にしてからWebサーバーを再起動してください。ファイルから画像オブジェクトを作成します。以下の関数を使用してファイルから画像オブジェクトを作成します:$imag…
👁 160
EmpireCMS – 記事内容を出力するためのAPIコード

EmpireCMS – 記事内容を出力するためのAPIコード プログラムノート EmpireCMS

自分の EmpireCMS ウェブサイトを API インターフェースを通じて他のウェブサイトからアクセス可能にしたい場合、e ディレクトリ下に「api」フォルダを作成し、その中で index.php ファイルを作成してコードを記述してください。アクセスすると、自分の記事が表示されるようになります!シンプルなコードデモ:`<?php require('../class/connect.php'); /…`
👁 475
(PC+WAP)大気医療機器向けPBootCMSウェブサイトテンプレート – 藍色医療機器ウェブサイトのソースコードダウンロード(0030)

(PC+WAP)大気医療機器向けPBootCMSウェブサイトテンプレート – 藍色医療機器ウェブサイトのソースコードダウンロード(0030) 実用収集 pbootcmsテンプレート

本テンプレートは、高級感と専門性を兼ね備えた青色の医療機器向けウェブサイトテンプレートです。医療機器やヘルスケアテクノロジー関連の企業に最適で、PCおよびスマートフォンでの利用に対応しています。シンプルで明るいデザインが特徴で、医療分野の特性に適しており、CT機、超音波検査機などの医療機器製品を効果的に紹介できます。企業がブランド公式ウェブサイトを構築し、専門性のあるイメージを高めるための効率的なソリューションです。テンプレート表示・インストール手順:ウェブサイト管理コンソール:/admin.php|ユーザー名:admin|パスワード:…
👁 64
(スマートフォン向け適応型)セキュリティロック・ロック芯・ロック具関連ウェブサイト用PBootCMSテンプレート – 智能防犯ロックウェブサイトのソースコードダウンロード:0334

(スマートフォン向け適応型)セキュリティロック・ロック芯・ロック具関連ウェブサイト用PBootCMSテンプレート – 智能防犯ロックウェブサイトのソースコードダウンロード:0334 実用収集 pbootcmsテンプレート

本セットは、モバイル端末向け適応型セキュリティロックのロック芯と、スマート防犯ロック用のPbootCMSウェブサイトのテンプレートです。デザインはテクノロジーとセキュリティを融合させたスタイルで、ロック製品やスマートセキュリティシステム、技術的強みを効果的に展示するのに最適です。ロック製造企業がオンラインでブランドをアピールし、不動産業界や一般家庭のユーザーを惹きつけるのに役立ちます。テンプレート、設置手順、およびウェブサイト管理画面:/admin.php、アカウント:admin、パスワード:admin、展開用パスワード:www.4s5.cn…
👁 42