建站初衷

文字平台数不胜数，我先后驻足过的就有lofter、点点、qing、简书、豆瓣日记、medium等等，作为文字分享它们都算是完成了任务，但是我隐隐约约还有个杂志梦，总想对自己写出来的东西掌控权甚至更多一点，lofter等轻博客有提供一些“主题”，有一些不错的——我没有在刻意标榜自己品味有多不凡——但是掌握力这个东西永远都是没有尽头的，看上的排版想再改一下边距改一下动画就毫无办法了。所以其实建站的最初动机只是想要把标题文字放大到一个夸张的程度，这是受一本初中时期深刻影响了我审美的一本杂志《文艺风赏》的启发，设计师hansey的排版让我久久不能忘怀：

我也想要我的文字用上这样的排版，写完《成都淹没》之后这种欲望开始疯狂膨胀，最开始只是用word排一下版导出到PDF以保证传阅时格式不会乱掉，但是等到分享时，PDF终究是低效且打扰的，我要一种非侵入式的、被动式的展示窗，文字平台不可以，我试了一堆，大多数自由度几乎是0。经过一些搜索，我最终我找到的方法就是利用Github提供的Pages功能托管静态的网络，免费、高自定义度、无监管。这篇文章就汇总一下在hexo的next主题基础上，我做了哪些调整以及其实现。

渐变色home按钮

博客的风格非常朴素，几乎只使用到了黑白灰，以防太多动效让读者分心，但是我还是希望有一个闷骚一点的跳脱一点的设计，于是借鉴了我很喜欢的zune的设计思路改造了单调的home按钮。

实现上很简单，使用CSS自带的渐变即可，在\themes\next\source\css\_custom\custom.styl的末尾添加：

.gradient:hover, .post-body p a:hover {
  color: hotPink;
}

@media (-webkit-min-device-pixel-ratio:0) {
  .gradient {
    background-color: blank;
    background-image: -webkit-linear-gradient(left, hotPink 0%, orange 50%, transparent 50%);
    background-position: 100% 0;
    background-size: 200% 200%;
    color: transparent;
    -webkit-transition: .1s .2s;
  }
  .gradient:hover {
    background-position: 0 0;
    color: transparent;
    transition: .2s 0;
  }
}

个人签名

在页面的右边，有一个侧边栏，现在点击蓝色的≡按钮即可唤出。一个动画是鼠标放在签名上会让签名变色，把签名的svg文件放到\img\目录下，然后在custom.styl中添加：

.signature-svg {
  display: inline-block;
  width: 120px;
  height: 120px;
  background-size: cover;
  background-image: url(/img/signature.svg);
}

.sidebar-signature {
  position: absolute;
  bottom: 40px;
  right: 40px;
  display: none;
}
.sidebar-signature:hover,
.sidebar-signature:focus  {
  filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
}

我本来想添加渐变效果，但是无奈CSS的pseudoclass无法模拟渐变的效果。

链接样式

链接自定义成和有点闷骚的主题类似的橙粉渐变，和home按钮呼应，依然是简单的CSS更改即可，在custom.styl中添加：

@media (-webkit-min-device-pixel-ratio:0) {
  .post-body p a, .post-category a, .post-tags a, .footer-custom a, .post-body li a {
    background-color: $black-light;
    background-image: -webkit-linear-gradient(left, hotPink 0%, orange 50%, transparent 50%);
    background-position: 100% 0;
    background-size: 200% 200%;
    color: transparent; 
    text-decoration:none;
    -webkit-transition: .1s .2s;
    -webkit-background-clip: text;
  }
  .post-body p a:hover, .post-category a:hover, .post-tags a:hover, .footer-custom a:hover, .post-body li a:hover {
    background-position: 0 0;
    color: transparent;
    transition: .4s 0;
  }
}

== to be update ==

风格化标题

评论区

广播

项目页面

分享按钮