网站使用的主题是基于 Typecho 1.0 正式版默认主题二次开发的，此方法仅测试了默认主题，其他主题未测试，可照葫芦画瓢参考修改 CSS 以及评论框架。

之前修改了整体UI样式，简约风格一直是我所喜欢的，主题也不便开源，因为有些实现的功能是修改了 Typecho 程序源码的，一旦分享，当你安装之后有可能出现未知 BUG，除非你动手能力强，否则别轻易找我要，虽然我很乐意分享。

本来想把功能都集成在主题里，开源也方便，但是我也忘记修改了哪些具体的源码，这个网站修改的时间前前后后大概有两三个月，毕竟上班族，只能抽出闲时时间慢慢修改，就这样吧，如果想要此主题的人比较多了，我再抽出时间慢慢集成在主题里并开源。

新评论框架：

看上去是不是比默认主题的评论框架更顺眼呢？

修改方法：

进入后台编辑 style.css 主题文件，在最后添加以下 CSS 代码；

#comment-form {
padding-top: 5px;
}
.col1 {
margin-right: -210px;
height: auto;
float: left;
width: 100%;
position: relative;
background-position: 0 0;
}
.col2 {
width: 194px;
float: right;
position: relative;
overflow: hidden;
background-position: right top;
}
.clear {
clear: both;
}
.col2 p, .col1 p {
margin: 9px 0;
}
#comment-form label {
display: block;
color: #888;
position: absolute;
margin: 8px;
}
#comment-form input {
padding: 5px 6px;
line-height: 16px;
height: 32px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
border: solid 1px #D4D4D4;
background: #fdfdfd;
font: 14px;
padding-left: 50px;
}
button.submit {
border: 1px solid #ddd;
display: block;
line-height: 32px;
width: 100%;
outline: none;
background: #e8e8e8;
}
button.submit {
color: #6E7173;
text-decoration: none;
-webkit-transition: all .1s ease-in;
-moz-transition: all .1s ease-in;
-o-transition: all .1s ease-in;
transition: all .1s ease-in;
border: 1px solid #ddd;
display: block;
line-height: 32px;
width: 100%;
outline: none;
background: #e8e8e8;
}
button.submit:hover {
background: #dfdfdf;
}
.col1 p {
margin-right: 210px;
}
textarea.textarea {
line-height: 1.8;
padding: 5px 10px 5px 10px;
width: 100%;
height: 162px;
padding: 10px;
overflow: auto;
margin: 0;
line-height: 1.8;
color: #222;
font-size: 14px;
background: #fdfdfd!important;
font-family:"Microsoft Yahei";
}
input[type="text"], input[type="email"], input[type="url"], input[type="password"], textarea {
padding: 5px;
border: 1px solid #ddd;
width: 100%;
border-radius: 2px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
outline: none;
}

点击保存.

进入后台编辑 comments.php 主题文件定位到以下标签；

<form method="post" action="<?php $this->commentUrl() ?>" id="comment-form" role="form">

在定位到以上代码之后，删除此代码之后</form>标签之前的所有代码，并添加以下代码；

 <div class="col1">
  <p><textarea rows="8" cols="50" name="text" id="textarea" class="textarea" required><?php $this->remember('text'); ?></textarea></p>
 </div>
 <div class="col2">
  <p><label for="author" class="required">称呼</label><input type="text" name="author" id="author" class="text" value="<?php $this->remember('author'); ?>" required=""></p>
  <p><label for="mail" <?php if ($this->options->commentsRequireMail): ?> class="required"<?php endif; ?> >邮箱</label><input type="email" name="mail" id="mail" class="text" value="<?php $this->remember('mail'); ?>" <?php if ($this->options->commentsRequireMail): ?> required <?php endif; ?>></p>
  <p><label for="url"<?php if ($this->options->commentsRequireURL): ?> class="required"<?php endif; ?>>网站</label><input type="url" name="url" id="url" class="text" placeholder="https://example.com" value="<?php $this->remember('url'); ?>" <?php if ($this->options->commentsRequireURL): ?> required<?php endif; ?>></p>
  <p><button type="submit" class="submit">提交评论</button></p>
 </div>
 <div class="clear"></div>

点击保存.

Bug：后台登陆之后切换到前台无法直接回复评论（无管理员已登录提示）

无管理员已登录提示修复方法：

找到以下代码；

<form method="post" action="<?php $this->commentUrl() ?>" id="comment-form" role="form">

将以上代码修改成以下代码即可；

<form method="post" action="<?php $this->commentUrl() ?>" id="comment-form"<?php if(!$this->user->hasLogin()): ?> class="comment-form clearfix"<?php endif; ?>>
<?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 endif; ?>
<p <?php if(!$this->user->hasLogin()): ?>class="textarea"<?php endif; ?>>

现在清空一下 cookie 缓存或者浏览器无痕模式刷新一下，即可看到新的评论框。

如果您怕修改出错，可使用我已经修改好的两个主题文件，直接上传覆盖即可；

下载地址：comment.zip

技术支持：https://vircloud.net