Typecho 默认主题评论框架样式修改方法

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

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

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

新评论框架:

20181206230457.png

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

修改方法:

进入后台编辑 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


标签: typecho主题评论框架, typecho评论框架


Ad:本站同款香港服务器 2H 1G 20G 400G 2M 最低只需要 ¥40 一月,地址: Pzea(xsx.net)

已有 14 条评论

  1. ccbird ccbird   Windows 10 Windows 10   Google Chrome  Google Chrome

    我用您的文件上传之后,头像变得特别巨大,这似乎是一个BUG

    1. Cyclists站长 Cyclists   Windows 7 Windows 7   Google Chrome  Google Chrome

      所以只适合自己用,哈哈

  2. ccbird ccbird   Windows 10 Windows 10   Google Chrome  Google Chrome

    太棒了!

  3. Wgh Blog Wgh Blog   Windows 10 Windows 10   Google Chrome  Google Chrome

    不错不错,很喜欢,已经启用了。。。

添加新评论