前言

在几周前逛了一下Heo的博客，看到Heo博客的样式又有了新的变化，不得不说，Heo真的太棒了，设计灵感层出不穷，仿佛没有瓶颈似的创作，让我每次都是怀着期待进入他的博客站点。

在看完一篇博文后，我滑到底部，惊讶的发现，底部的页脚尽然有了变化，而且这个样式很棒，不仅可以点击跳转到首页简化读者的操作，还能给人一种专业高大上的感觉！

效果预览

个性化页脚

编写个性化页脚的元素结构

新建 themes\butterfly\layout\includes\footer_shine.pug 文件，在里面写入如下代码：

#shine-footer-bar
  .footer-logo
    svg.icon.iconfont.icon-Shine(style="width: 2.5em; height: 1.5em; margin-right: 4px;")
      use(xlink:href="#icon-Shine")
  .footer-bar-description 来自 Shine - 热爱生活点滴，分享时刻精彩的文章
  a.footer-bar-link(data-pjax-state="" href="/") 了解更多

引入个性化页脚到文章页中

找到 themes\butterfly\layout\includes\layout.pug 文件，在文件中找到对应的位置添加个性化页脚的代码块，如下：

//- 省略上面多余的代码......

footer#footer(style=footer_bg)
+  if (is_post())
+    !=partial('includes/footer_shine', {}, {cache: true})
  !=partial('includes/footer', {}, {cache: true})

//- 省略下面多余的代码......

添加个性化页脚的css样式

新建 source\css\footer_shine.css 文件，写入如下css代码：

div#shine-footer-bar {
    display: none;
}

.post div#shine-footer-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 16px;
}

div#shine-footer-bar a.footer-bar-link {
    padding: 4px 16px;
    background: #f7f7f9;
    border-radius: 20px;
    margin-top: 8px;
    font-size: 14px;
    cursor: pointer;
    border: 1px solid #e3e8f7;
    color: #363636;
}

div#shine-footer-bar a.footer-bar-link:hover {
    background: #047db9 !important;
    color: #fff;
    transform: scale(1.1);
    border-color: #047db9 !important;
}

div#shine-footer-bar .footer-logo {
    font-size: 24px;
    line-height: 0;
}

div#shine-footer-bar .footer-bar-description {
    color: rgba(60, 60, 67, 0.8);
    font-weight: 700;
}