红穆笔记
首頁 程序筆記 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); 會調用 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&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回覆按鈕,然後點擊回覆按鈕會自動向表單插入隱藏表單,同時輸入框會回到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 }?>

微信赞赏

微信

支付宝赞赏

支付寶

✍️ 作者: 紅穆

網站管理員 · 感謝閱讀,更多精彩內容敬請關注

作者主頁 查看主頁 →

相關文章

资源网站typecho001模板

資源網站typecho001模板 程序筆記 Typecho

typecho001模板板本請勿修改本模板文件夾名稱 文件夾名稱爲:typecho001 1.4修復文章頁面js輸出問題1.3修復未安裝插件時的報錯提示優化列表頁代碼輸出1.2修復評論功能增加自定義首頁標題1.1修復評論回覆不對稱功能添加首頁單獨的標題設置功能增加網站favicon.ico圖標增加一…
👁 197
typecho分页样式的修改

typecho分頁樣式的修改 程序筆記 Typecho

大人,時代變了!目前typecho最完美的解決方案了,因爲百度只能看到固定思維的代碼。實際生成的html代碼,乾淨到讓人窒息完全的自定義,包括給li元素加上class,給a元素加上class,給上一頁下一頁加上class,去除typecho自帶用於表示更多的li標籤。甚至裏面的內容我也能添加一些文字…
👁 516
Typecho 对数据库的增删改查操作方法 API

Typecho 對數據庫的增刪改查操作方法 API 程序筆記 Typecho

Typecho數據庫提供了非常易用的api,和原生SQL寫法沒有太大的差別,同時也很好地處理了SQL常見的安全問題,如sql注入。本文從實用角度出發,介紹了typecho操作數據庫的常用場景以及相關api用法。表創建和刪除在Typecho插件開發過程中,往往需要創建自己的表。上文提到Typecho_…
👁 551
Typecho调用热门评论文章和调用最新文章的方法总结

Typecho調用熱門評論文章和調用最新文章的方法總結 程序筆記 Typecho

Typecho文章調用Typecho程序在設計主題的時候,側欄有些時候需要調用熱評文章或者最新文章。我們可以在指定的位置通過腳本直接調用。在這篇文章整理這個調用文章的方法,以後在有需要的模板中可以直接調用使用。其實設計主題就那麼回事,靜態模板搞定後,就是直接調用。最新文章調用 &lt;?php $t…
👁 295
Typecho 调用分类文章列表

Typecho 調用分類文章列表 程序筆記 Typecho

其中pageSize後面的數字表示調用文章的數量;mid後面的數字表示調用的分類ID;提示:Typecho分類目錄ID的獲取方法是把鼠標移到某分類名稱上面,在瀏覽器狀態欄顯示的mid=後面的數字便是該分類目錄ID編輯當前typecho主題模板,在要調用某分類目錄的位置添加以下代碼方法一:widget…
👁 360
Typecho的Widget

Typecho的Widget 程序筆記 Typecho

通過Typecho的Widget_Options,可以方便地獲取Typecho的系統信息,或者方便地獲取相關配置、資源路徑等。這裏列出常用的Widget_Options函數和用法,方便各位筒子方便查閱。通過Widget_Options獲取路徑信息獲取內置URL通過這類api,可以獲取TE內置的一些特…
👁 193

推薦閱讀

PHP ob函数记录

PHP ob函數記錄 語言筆記 PHP

下面3個函數的用法 ob_get_contents(); ob_end_clean(); ob_start(); 可以藉助這幾個函數實現緩衝本地文件,以及執行本地腳本代碼。 使用ob_start()把輸出的代碼存到緩衝區,頁面不會顯示出來; 然後用ob_get_contents得到緩衝區的數據。 o…
👁 140
PHP preg

PHP preg 語言筆記 PHP

preg_match_all 函數用於執行一個全局正則表達式匹配。preg_match_all() 語法int preg_match_all ( string $pattern , string $subject [, array &amp;$matches [, int $flags = PREG…
👁 169
PHP 三元运算符与if的详解

PHP 三元運算符與if的詳解 語言筆記 PHP

三元運算符語條件 ? 結果1 : 結果2 說明:問號前面的位置是判斷的條件,如果滿足條件時結果1,不滿足時結果2。本文對三元運算符和if...else...進行對比詳解,希望對大家有所幫助。今天在改論文在線的時候遇到了一個語句看不懂:$if_summary = $row['IF_SUMMARY']=…
👁 187
PHP强制转换类型

PHP強制轉換類型 語言筆記 PHP PHP採集 PHP與mysql

獲取數據類型1.如果想查看某個表達式的值和類型,用var_dump()。 2.如果只是想得到一個易讀懂的類型的表達方式用於調試,用 gettype()。3.要查看某個類型,不要用 gettype(),而用is_type() 函數。字符串轉換爲數值當一個字符串被當作數字來求值時,根據以下規則來決定結果…
👁 231