hexo next首页文章加框

发表于 更新于 分类于 阅读次数： 本文字数： 1.1k 阅读时长 ≈ 1 分钟

  我的博客首页的文章列表一直是连起来的，看起来不爽。因而一直在搜索如何加边框，搜出来的是如何添加文章边框阴影效果。看起来也对。于是就开始照猫画虎。

例如这位大仙说要在themes/next/source/css/_custom/custom.styl里面加入：

1
2
3
4
5
6
7
8
.post {
   margin-top: 0px;
   margin-bottom: 60px;
   padding: 25px;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}

  可是我没有custom.styl啊，连_custom文件夹都没有啊。咋办呢？直接建一个呗。建了以后也不行。我还一度怀疑自己的next版本不对，用不了custom.styl。

  后来又搜到这位神仙。是这个样子干的。

  在themes/next/source/css/_common/components/post/post.styl中找到.post-block
然后改成这个样子：

1
2
3
4
5
6
7
8
9
10
if xxxxx
.post-block {
  opacity: 0;
  margin-top: 60px;
  margin-bottom: 60px;
  padding: 25px;
  -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
  -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
 }
 .pgaination, xxxx

  谁知我用的是copy，也没仔细看那个神仙的脚本里面可能估计将post-block中的短横线敲作了下划线。我拷贝过来试了，没用。一度以为这个边框是永远加不上了。谁知今天鬼使神差的对比了一下神仙贴出的图，发现了问题。于是改了过来，结果就可以了。我估计神仙是故意打错了，让我们这些小白出错了长记性。只可惜自己不懂css啊，懂的话就没那么麻烦了。

边框

  这个边框效果还凑合吧。