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:后台登陆之后切换到前台无法直接回复评论(无管理员已登录提示)

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

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

下载地址:comment.zip

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


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

已有 10 条评论

  1. 子午 子午   Windows 10 Windows 10   Google Chrome  Google Chrome

    谢谢分享

添加新评论