typecho简约主题Ying轻改

更换了一个极简风的主题，主题链接：Ying：https://github.com/Siozeonhang/Ying

原主题有几点瑕疵：

1.代码块样式略显严肃

2.没有评论模块

第一个问题修改：

main.css文件，定位到这个位置：

code {
    font-size: 15px;
    border: 1px solid #e8e8e8;
    border-radius: 3px;
    background-color: #3a3a3a;
    color: #EEEEEE
}

pre,
code {
    font-size: 15px;
    border: 1px solid #e8e8e8;
    border-radius: 3px;
    background-color: #3a3a3a;
    color: #EEEEEE
}

把3个颜色修改为下面的：

pre,
code {
    font-size: 15px;
    border: 1px solid #DDE2E5;
    border-radius: 3px;
    background-color: #EBF0F1;
    color: #5199D5
}

pre,
code {
    font-size: 15px;
    border: 1px solid #DDE2E5;
    border-radius: 3px;
    background-color: #EBF0F1;
    color: #5199D5
}

修改后的效果：

第二个问题修改：

从其他主题移植评论模块，将下面代码保存为comments.php放在主题根目录：

<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
<div id="comments">
    <?php $this->comments()->to($comments); ?>

    <?php if($this->allow('comment')): ?>
        <?php if ($this->is('attachment')) : ?>
        <?php _e(''); ?>
        <?php else: ?>
    <div id="<?php $this->respondId(); ?>" class="respond">
        <div class="cancel-comment-reply">
        <?php $comments->cancelReply(); ?>
        </div>
    
        <h2><?php _e('发表评论'); ?></h2>
        <form method="post" action="<?php $this->commentUrl() ?>" id="comment-form" role="form">
            <?php if($this->user->hasLogin()): ?>
            <p><?php _e('登录身份: '); ?><a href="<?php $this->options->profileUrl(); ?>"><?php $this->user->screenName(); ?></a>. <a href="<?php $this->options->logoutUrl(); ?>" title="Logout"><?php _e('退出'); ?> &raquo;</a></p>
            <?php else: ?>
            <p>
                <input placeholder="称呼 *" type="text" name="author" id="author" class="text" value="" required />
            </p>
            <p>
                <input placeholder="邮箱<?php if ($this->options->commentsRequireMail): ?> *<?php endif; ?>" type="email" name="mail" id="mail" class="text" value=""<?php if ($this->options->commentsRequireMail): ?> required<?php endif; ?> />
            </p>
            <p>
                <input type="url" name="url" id="url" class="text" placeholder="http(s)://<?php if ($this->options->commentsRequireURL): ?> *<?php endif; ?>" value=""<?php if ($this->options->commentsRequireURL): ?> required<?php endif; ?> />
            </p>
        <p>
                <nocompress><?php spam_protection_math();?></nocompress>
        </p>
            <?php endif; ?>
            <p>
                <textarea rows="8" cols="50" name="text" id="textarea" class="textarea" onkeydown="if(event.ctrlKey&&event.keyCode==13){document.getElementById('misubmit').click();return false};" placeholder="<?php _e('评论审核后显示，请勿重复提交...'); ?>" required ><?php $this->remember('text'); ?></textarea>
            </p>
            <p>
                <button type="submit" class="submit" id="misubmit"><?php _e('提交评论（Ctrl+Enter）'); ?></button>
            </p>
        </form>
    </div>
    <?php endif; ?>
    <?php else: ?>
    <?php _e(''); ?>
    <?php endif; ?>
    
    <?php if ($comments->have()): ?>
    <div class="respondtitle"><h2><?php $this->commentsNum(_t('暂无评论'), _t('仅有 1 条评论'), _t('已有 %d 条评论')); ?></h2></div>
    
    <?php $comments->listComments(); ?>

    <?php $comments->pageNav('&laquo; 前一页', '后一页 &raquo;'); ?>
    
    <?php endif; ?>
</div>

修改page.php中判断条件，使评论模块仅在留言板comments和友链links两个页面加载，下面是修改后的完整代码：

<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
<?php $this->need('header.php'); ?>

<nav class="nav">
    <ul class="flat">
        <li class="active"><a href="<?php $this->options->siteUrl(); ?>">首页</a></li>
        <?php $this->widget('Widget_Contents_Page_List')->parse('<li class="active"><a href="{permalink}">{title}</a></li>'); ?>
    </ul>
</nav>

<div class="post">
    <h1 class="post-title" itemprop="name headline">
        <?php $this->title() ?>
    </h1>
    <div class="post-content" itemprop="articleBody">
        <?php $this->content(); ?>

        <?php if ($this->is('page', 'comments') || $this->is('page', 'links')): ?>
            <?php $this->need('comments.php'); ?>
        <?php endif; ?>
    </div>
</div>

<?php $this->need('footer.php'); ?>

在functions.php中加入评论验证码功能的函数：

function spam_protection_math(){
    $num1=rand(1,9);
    $num2=rand(1,9);
    echo '<input type="text" id="code" required name="sum" value="" placeholder="'.$num1.' + '.$num2. ' = ? *" />';
    echo '<input type="hidden" name="num1" value="'.$num1.'" />';
    echo '<input type="hidden" name="num2" value="'.$num2.'" />';
}

function spam_protection_pre($comment, $post, $result){
    $sum=$_POST['sum'];
    switch($sum){
        case $_POST['num1']+$_POST['num2']:
            break;
        case null:
            throw new Typecho_Widget_Exception(_t('对不起: 请输入验证码。<a href="javascript:history.back(-1)">返回上一页</a>','评论失败'));
            break;
        default:
            throw new Typecho_Widget_Exception(_t('对不起: 验证码错误，请<a href="javascript:history.back(-1)">返回重试</a>。','评论失败'));
    }
    return $comment;
}

在main.css中加入评论模块样式：

#comments h2,
#response {
    margin-top: 15px;
    font-size: 16px;
    font-weight: 700;
    padding: 0;
}

#comments {
    margin-top: 10px;
}

.comment-content {
    font-size: 0.9375em;
    line-height: 1.6em;
}

.cancel-comment-reply a,
.comment-reply a {
    margin-top: 1.5em;
    padding: .25em .5em;
    border-radius: .25em;
    background-color: #27ae60;
    color: #fff;
    font-size: .75em;
}

.comment-reply {
    text-align: right;
}

.comment-list,
.comment-list ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

.comment-children {
    padding-left: 2em;
}

.comment-list li {
    margin: .5em 0;
}

.comment-meta {
    margin-top: -10px;
}

.comment-meta a {
    color: #999;
    font-size: .75em;
}

.comment-author {
    display: block;
    margin-top: 1em;
    border-top: 1px solid #eaeaea;
    padding-top: 1em;
    color: #444;
}

.comment-author .avatar {
    float: left;
    margin-right: 10px;
}

.comment-author cite {
    font-weight: 700;
    font-size: .875em;
}

.comment-list .respond {
    border-top: 1px solid #eaeaea;
    margin-top: 15px;
}

.respond .cancel-comment-reply {
    float: right;
    font-size: .9375em;
    margin-top: 1em;
}

#comment-form button {
    width: 100%;
    height: 30px;
    border-radius: 2px;
    padding: 0 6px;
    color: #fff;
    background: #27ae60;
    border: 0;
}