知识

Twikoo评论系统输入框高度设置

| 原作者：晓空ag | 改写者：无奈的程序员 |

1”

前言

伴随着时代发展，越来越多的人开始对计算机编程感兴趣了，有很多人都有了属于自己的博客或网站。

之所以想要做网站或博客，无非就是想要记录一些生活，发表一些自己的看法，让更多的人评价。

目前最常用的就是”Twikoo 评论系统”，当大家已经把”Twikoo 评论系统”嵌入到自己的网站或博客，设置好内容时，会惊奇的发现有一个问题！

疑问：发现输入框的宽度是够了，但高度怎么看怎么别扭{如图所示}

2

如果想要达到下图效果，不妨试一试下面的教学方法。

3

步骤

首先，打开你的网站或博客存放的文件夹。

第一步上：如果你的是博客{拿hexo butterfly主题为例}依次打开：themes\butterfly\source\css

第一步下：如果你的是自建网站，找到你专门存放css文件的文件夹打开或者在“head”标签里输入代码{代码教程在本网站的最后}

第二步：在这个文件夹里创建一个名为pinglun.css的文件。

复制以下代码到打开创建好的名为 pinglun.css 的文件中去，注意其中的 150 为输入框的高度，可以随意更改！

1
2
3
4
/*评论框的高度 */
.twikoo .tk-submit .el-textarea__inner {
min-height: 150px !important;
}

然后返回到博客文件的主目录，找到_config.butterfly.yml 文件打开，在里面找到 inject 这个单词底下的 head，将下列代码按相对应的格式引入。

1
2
3
inject:
  head:
    - <link rel="stylesheet" href="/css/pinglun.css" media="defer" onload="this.media='all'">

如果你是自己编写的网站，第一种方法：同样在你存放 css 文件夹里创建一个名为 pinglun.css 的文件。
同样复制以下代码到打开创建好的名为 pinglun.css 的文件中去，注意其中的 150 为输入框的高度，可以随意更改，text-decoration: none;表示去掉 a 标签下划线，color: rgb(113, 125, 163);初始颜色，a:hover {color: #507bf9;}鼠标移动在文字上的颜色。

1
2
3
4
5
6
7
8
9
10
11
/*评论框的高度 */
.twikoo .tk-submit .el-textarea__inner {
min-height: 150px !important;
}
a {
   text-decoration: none;
   color: rgb(113, 125, 163);
}
a:hover {
   color: #507bf9;
}

{假如你存放 css 的文件夹为 css}然后打开你的网站评论的文件，将下列代码引入到 head 标签内。

1
<link rel="stylesheet" href="css/pinglun.css" />

第二种方法较为简单，在你的评论文件的 head 标签里嵌入以下代码即可，注意其中的 150 为输入框的高度，可以随意更改，text-decoration: none;表示去掉 a 标签下划线，color: rgb(113, 125, 163);初始颜色，a:hover {color: #507bf9;}鼠标移动在文字上的颜色。

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
      /*评论框的高度 */
      .twikoo .tk-submit .el-textarea__inner {
        min-height: 150px !important;
      }
      a {
        text-decoration: none;
        color: rgb(113, 125, 163);
      }
      a:hover {
        color: #507bf9;
      }
</style>