权那他

BLOGGER

C7sky评论样式转Typecho(修复错误)

理由

  最近多说这个很好的评论,宣布关闭了,不知多少人在欲言又止。
  最开始我也是用的多说评论,但是typecho多说插件,同步有问题,加上第一次接触typecho,就用原生typecho的conmments.php评论。用着用着就懒得换成第三方来支持。
  但是啊,原生的不好看,想自己写一个的,想不出来怎么写。今天就看见了c7sky.com的站点,发现他的评论页面不错,高大上。那个评论页面很配各种样式的主题。
  又发现问题,c7sky.com 的主题不开源。所以直接偷了。改成了typecho的评论样式。
  很多合不上typecho的结构所以,花了点时间来修改。然后就用上了,随便发一篇文章

  注:若有侵犯你权利,亲联系我删除相关信息。

1.修改当前你的主题里的 comment.php

直接覆盖

<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>

<?php
function threadedComments($comments, $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';
    $depth = $comments->levels +1;
    if ($comments->url) {
        $author = '<a href="' . $comments->url . '"target="_blank"' . ' rel="external nofollow">' . $comments->author . '</a>';
    } else {
        $author = $comments->author;
    }
?>

<li id="li-<?php $comments->theId(); ?>" class="comment even thread-even depth-<?php echo $depth ?> <?php $comments->alt(' comment-odd', 'comment-even');?>">
    
    <article id="<?php $comments->theId(); ?>" class="comment-body">
        <footer class="comment-meta">
            <div class="comment-author vcard">
                <?php $comments->gravatar(40); ?>
                <b class="fn <?php echo $commentClass; ?>" itemprop="author">
                <?php echo $author; ?>
                </b>
            </div>
            <!-- .comment-author -->

            <div class="comment-metadata">
                <a href="" itemprop="url">
                    <time datetime="2017-05-14T17:25:49+08:00" itemprop="datePublished"><?php $comments->date('M j, Y'); ?></time>
                </a>
            </div>
            <!-- .comment-metadata -->

        </footer>
        <!-- .comment-meta -->

        <div class="comment-content" itemprop="text">
            <p><?php $comments->content(); ?></p>
        </div>
        <!-- .comment-content -->

        <div class="comment-actions">
            <?php $comments->reply('回复'); ?>
        <!-- .comment-actions -->
    </article>
    

    <?php if ($comments->children) { ?>
        <div class="children">
            <?php $comments->threadedComments($options); ?>
        </div>
    <?php } ?>
</li>
<?php } ?>


<div id="<?php $this->respondId(); ?>" class="comment-respond">
    <?php $this->comments()->to($comments); ?>
    <?php if($this->allow('comment')): ?>

    <h3 id="reply-title" class="comment-reply-title">
        <span>发表评论</span>
        <small><?php $this->commentsNum(_t('暂无评论'), _t('仅有 1 条评论'), _t('已有 %d 条评论')); ?></small>
        <?php $comments->cancelReply('取消回复'); ?>
    </h3>
    
    <form action="<?php $this->commentUrl() ?>" method="post" id="commentform" class="comment-form">
        <div class="author-info guest"><img src="//gravatar.com/avatar/?d=mm&s=100" width="100" class="avatar"></div>
        <div class="comment-form-main">
            <div class="comment-textarea-wrapper">
                <p class="comment-form-comment"><label for="comment">评论</label> 
                    <textarea id="comment" name="text" onclick='document.getElementById("comment-form-do").style.display="block";' cols="45" rows="8" aria-required="true" required="required" placeholder="发泄你的牢骚,留下你的笔言!"><?php $this->remember('text',false); ?></textarea>
                </p>
                <div class="comment-form-toolbar">
                    <i class="icon-smilies" title="表情" data-track="CommentForm,Click,Smilies"></i>
                    <div class="comment-smilies">

                    </div>
                </div>
            </div>

            <?php if(!$this->user->hasLogin()): ?>
            <div class="comment-form-fields" id="comment-form-do">
                <p class="comment-form-author">
                    <label for="author">昵称</label> <span class="required">*</span>
                    
                    <input type="text" name="author" maxlength="12" id="author" placeholder="昵称" value="" required>
                    
                </p>
                <p class="comment-form-email">
                    <label for="email">邮箱</label> <span class="required">*</span>
                    
                    <input type="email" name="mail" id="mail" placeholder="邮箱" value="" <?php if ($this->options->commentsRequireMail): ?> required<?php endif; ?>>
                </p>
                <p class="comment-form-url">
                    <label for="url">网站</label> 
                    
                    <input type="url" name="url" id="url" placeholder="网站" value="" <?php if ($this->options->commentsRequireURL): ?> required<?php endif; ?>>
                    
                </p>
            </div>
            <?php endif; ?>

            <p class="form-submit">
                <button name="submit" type="submit" id="submit" class="submit" title="发表评论"><i class="fa fa-send fa-2x"></i></button> 
                <?php $security = $this->widget('Widget_Security'); ?>
                <input type="hidden" name="_" value="<?php echo $security->getToken($this->request->getReferer())?>">
            </p>
        </div>
        <div class="comment-form-extra">
            <span class="response"><?php if($this->user->hasLogin()): ?> You are <a href="<?php $this->options->profileUrl(); ?>" data-no-instant><?php $this->user->screenName(); ?></a> here, do you want to <a href="<?php $this->options->logoutUrl(); ?>" title="Logout" data-no-instant>logout</a> ?<?php endif; ?></span>
            
        </div>
    </form>
        <?php else : ?>
            <span class="response">Comments are closed.</span>
        <?php endif; ?>

        <?php if ($comments->have()): ?>

        <?php $comments->listComments(); ?>

        <div class="lists-navigator clearfix">
            <?php $comments->pageNav('←','→','2','...'); ?>
        </div>

        <?php endif; ?>
    
</div>

<script type="text/javascript">
    
    <?php if(!$this->user->hasLogin()){ ?>

    function getCookie(name) {
        var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
        if (arr = document.cookie.match(reg))
            return unescape(decodeURI(arr[2]));
        else
            return null;
    }

    function adduser() {
        document.getElementById('author').value = getCookie('<?php echo md5($this->request->getUrlPrefix()); ?>__typecho_remember_author');
        document.getElementById('mail').value = getCookie('<?php echo md5($this->request->getUrlPrefix()); ?>__typecho_remember_mail');
        document.getElementById('url').value = getCookie('<?php echo md5($this->request->getUrlPrefix()); ?>__typecho_remember_url');
    }
    adduser();
    <?php } ?>
</script>

2.添加评论的样式,在适当的加入css,太大的数据了,就给一个链接,压缩过的。

点击下载:c7sky.css

效果:

  • 20170529175401462.jpg

注:若有侵犯你权利,亲联系我删除相关信息。
参考源码: https://github.com/chakhsu/pinghsu/blob/master/comments.php
参考样式: http://c7sky.com

已有 3 条评论

发表评论 你是访客

选择表情

*

  1. descriptive words for essay writing application essays writing a personal essay for college essays

  2. 评论懒得自己写,直接拿了权那他分享的C7sky评论样式。还有代码高亮我好像没有测试- -,发出来的时候才想到。

加载中...

加载中...

收款记录 打赏无悔,概不退款