butterfly文章页美化教程-小N同学

前言

今天添加了我们矩阵安卓大佬的友链，然后就看到了大佬的文章页一页到底：

那么怎么样修改才能做到这一点呢？

安装教程

适用范围:butterfly3.3.0-3.5.1。更低版本以及更高有没有效果不能保证。

新建Styl文件

在ROOT\themes\butterfly\source\css\page目录新建topimg.styl

page目录为_page，因为markdown的渲染问题会导致\无法显示

// 顶部图
#page-header, #page-header:before
  background-color: transparent !important
  background-image: unset !important

.top-img
  height: 12.5rem
  display: block
  margin: -50px -40px 50px -40px
  border-top-left-radius: inherit
  border-top-right-radius: inherit
  background-position: center center
  -webkit-background-size: cover
  -moz-background-size: cover
  background-size: cover
  background-repeat: no-repeat
  transition: all 0.3s

  .read-mode
    display: none

  @media screen and (max-width: 768px)
    margin: -1.8rem -0.7rem 1.8rem -0.7rem

  [data-theme='dark'] &
    filter: brightness(0.8)

修改post.pug

然后前往ROOT\themes\butterfly\layout目录，打开post.pug。

此前出问题的同学们是因为我这里PUG缩进的问题，已经修复~

block content
  #post
    if top_img === false
      include includes/header/post-info.pug
+   .top-img.gist(style=`background-image: url(${url_for(top_img)})`)
    article#article-container.post-content!=page.content

然后一键hexo三连即可看到效果。