# Hashnode主页优化

这篇文章纯属个人喜好。
## 来源

Hashnode的默认首页，文章摘要的文字特别常长，主要问题还是对中文的支持不好。

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1665567044925/G534wp0Ux.png align="left")

## 参考

参考来源，就是Ghost的主题，摘要是固定的3行（后面的版本有有一些调整，但是都是固定的行数，这样的版面就非常整齐）


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1665567513353/KkwRN2qtc.png align="left")

## 修改

我觉得，首页第一篇文章的摘要太长，有点不美观，那么可以通过Hashnode的Custom CSS模块进行修改。

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1665567601901/BiYIYf-El.png align="left")

点击Edit Custom Stylesheet，进入编辑器，找到Home，进行如下修改即可：

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1665567688232/Arm125DX6.png align="left")

```
a{
display: -webkit-box;
overflow-y: hidden;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
word-break: break-word;
}
```
在-webkit-line-clamp: 这个参数里，3表示只显示 3行，有需要调整为其他数字就可以了。

## 效果

下面就是实现效果，我觉得还不错。

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1665567845252/zJnEbVPsK.png align="left")

## 延申

这个参数对于Hashnode的杂志版面倒没有什么太大的影响，如果是其他的版面，就非常有用。因为，试试就知道了。