hexo-next 主题优化

这里收集了一些 hexo-next 主题优化的方法

文章显示摘要图片

重点参考了：打造个性超赞博客 Hexo + NexT + GitHub Pages 的超深度优化，在此感谢原作者的分享！

先在主题配置中找到下面的代码，并修改：

# Automatically excerpt description in homepage as preamble text.
# 将每篇文章 Front-matter 里 description 的文字作为页面显示的文章摘要
excerpt_description: false

# Automatically Excerpt. Not recommend.
# Please use <!-- more --> in the post to control excerpt accurately.
# 按字数自动加入 [Read More]，不建议！
# 建议在文章中加入 <!-- more -->
# 自定义 [Read More] 按钮之前要显示的内容！
auto_excerpt:
  enable: false
  length: 150

之后在 ~/blog/themes/next/layout/_macro/post.swig 特定位置添加下面的代码：

{% if post.image %}
<div class="out-img-topic">
   <img src={{ post.image }} class="img-topic" />
 </div>
 {% endif %}

为了防止有的图片宽度不够导致风格不够统一，页面不美观，需要在
~/blog/themes/next/source/css/_custom/custom.styl中加入：

// 自定义的文章摘要图片样式
img.img-topic {
    width: 100%;
}

最后编辑有这需求的相关文章时，在Front-matter（文件最上方以---分隔的区域）加上一行： image: url 即可。
最终得到的效果如下，~~emmmm 其实还是挺丑的…（不管那么多了，能用就行！~~

让页脚的心跳动起来

重点参考了：打造个性超赞博客 Hexo + NexT + GitHub Pages 的超深度优化，在此感谢原作者的分享！

首先编辑主题配置文件（~/themes/next/_config.yml），将icon: user 改为 icon: heart

然后编辑页脚样式（~/themes/next/layout/_partials/footer.swig），将其中的<span class="with-love"> 改为 <span class="with-love" id="heart">

接着编辑~/themes/next/source/css/_custom/custom.styl，加入：

// 自定义页脚跳动的心样式
@keyframes heartAnimate {
    0%,100%{transform:scale(1);}
    10%,30%{transform:scale(0.9);}
    20%,40%,60%,80%{transform:scale(1.1);}
    50%,70%{transform:scale(1.1);}
}
#heart {
    animation: heartAnimate 1.33s ease-in-out infinite;
}
.with-love {
    color: rgb(255, 113, 168);
}