给hexo NexT主题增加月份分类

　　身为一个生理时差者今天醒的挺早，于是又起来折腾了一堆事情，先开篇文章把网站维护方面的笔记做了，日常一会过了0点再开一篇记好了xd
　　今日成果↓

• 左侧按钮透明背景√
• 联系方式按钮动画√
• 给分类页面添加年份√
• 给归档页面添加月份√
• 时间轴年份标签曲线动画√
• 删除线文字鼠标悬停可见√【其实默认也可见，我就是设成白色了看不太清楚而已x
• 自定义光标×【但是你们应该可以在这篇文章的界面看见一个甜甜圈光标qaq
  • 老规矩谷歌外链翻墙可见，还有我只在文字部分设置了自定义光标，你移出去就看不见了！
• 彩色标签云×

　　曲线动画内容比较少先记了吧。
　　代码：

.posts-collapse .collection-title h2 {
	margin-left: -20px;
	margin-right: 400px;
	padding: 5px 20px 5px 0;
	text-align: right;
	background: rgba(255,255,255,.3);
	border-radius: 0 50px 50px 0;
	box-shadow: 0 8px 20px -8px rgba(0,0,0,.3);
	transition: all 1s cubic-bezier(.17,.08,.04,.99);
}
.posts-collapse .collection-title h2:hover {
	margin-right: 100px;
	background: rgba(255,255,255,.5);

　　【点我前往本站归档页面查看效果示例】
　　其实重点只有一句，就是CSS3的动画标签:
transition: all 1s cubic-bezier(.17,.08,.04,.99);
　　普通平滑过渡动画只要写成all 1s linear（+1s线性渐变）即可，因为这个标签的运动轨迹比较长，匀速运动不太好看，所以我加了一个运动曲线。
　　运动曲线可以用这个在线小工具完成：http://cubic-bezier.com/
　　可以在线可视化调整运动曲线，点击GO!之后，红色的方框会按你左边调整的曲线运动，绿色的方框会按照右边数据库里的曲线运动。调试完毕之后点击标题右边的SAVE按钮就可以复制曲线数据了，然后粘贴到CSS代码里即可。

　　然后吐槽一下自定义光标，如果不出错的话本篇文章的文字区域已经出现甜甜圈光标了。代码很简单，图我也画好了，为什么最后没用，是因为效果实在太差了……
　　不知道是我电脑的问题还是怎么样，反正浏览器一定要缩放我的光标文件，本来我画的好好的像素图，缩放就会出现不规则透明区域，然后浏览器又不支持除了0和1以外的透明度数值，就会出现狗啃一样的黑边……
　　火狐的黑边好歹均匀一点。chrome的黑边真是nmsl！！！！
　　试图导出gif，照样给我缩出黑边，因此绝望放弃了。
　　这甜甜圈像素图画了我半个多小时呢！可恶(╯‵□′)╯︵┻━┻

　　大头来了，接下来是增加按年月分类！(๑•̀ㅂ•́)ﻭ✧
　　先是给分类页面添加年分类卡，找到next主题下的\layout\category.swig文件，查找for post in page.posts可以看到如下代码：

{% for post in page.posts %}
  {{ post_template.render(post) }}
{% endfor %}

插入一个小笔记，在句中代码标签里插入{ % % }标签会导致渲染器报错OTL
错误提示：Template render error: (unknown path)
感谢谷歌出来的文章解决了问题
　　选中这三行，修改为：

{% for post in page.posts %}

{# Show year #}
{% set year %}
{% set post.year = date(post.date, 'YYYY') %}

{% if post.year !== year %}
  {% set year = post.year %}
  <div class="collection-title">
    <h2 class="archive-year motion-element" id="archive-year-{{ year }}">{{ year }}</h2>
  </div>
{% endif %}
{# endshow #}

  {{ post_template.render(post) }}
{% endfor %}

　　然后在文件末尾加上如下代码：

{% block script_extra %}
  {% if theme.use_motion %}
    <script type="text/javascript" id="motion.page.archive">
      $('.archive-year').velocity('transition.slideLeftIn');
    </script>
  {% endif %}
{% endblock %}

　　刷新一下本地的hexo预览，应该就可以看到分类（categories）界面出现年分类卡了ヾ(＊´∀｀＊)ﾉ

　　然后是给归档（Archives）界面添加按月分类。
　　为什么要这样分类呢，因为我话太多了，每天都能写两三篇，这要是按年分类岂不是跟没分一样了吗_ (:з」∠) _
　　还有你们用这个git pages写日记的应该也很需要这个功能！来呀！薅流氓企业微软爸爸的羊毛！【？
　　这次需要修改的是next主题文件夹下的\layout\archive.swig文件，查找for post in page.posts，会看到如下代码：

{% for post in page.posts %}

  {# Show year #}
  {% set year %}
  {% set post.year = date(post.date, 'YYYY') %}

  {% if post.year !== year %}
    {% set year = post.year %}
    <div class="collection-title">
      <{% if theme.seo %}h2{% else %}h1{% endif %} class="archive-year" id="archive-year-{{ year }}">{{ year }}</{% if theme.seo %}h2{% else %}h1{% endif %}>
    </div>
  {% endif %}
  {# endshow #}

  {{ post_template.render(post) }}

{% endfor %}

　　解释一下，这里的设置是把归档（Archives）界面的年份标签设定成了h1，但是分类（categories）界面的【XX分类】这个标题也是h1，在更改css样式的时候会造成混乱。
　　因此我需要把它也改成h2，月份标签则设置成h3。
　　连着原主题内的show year标签一起替换成如下代码：

 {% for post in page.posts %}

 {# Show year #}
 {% set year %}
 {% set post.year = date(post.date, 'YYYY') %}

 {% if post.year !== year %}
   {% set year = post.year %}
   <div class="collection-title">
     <h2 class="archive-year motion-element" id="archive-year-{{ year }}">{{ year }}</h2>
   </div>
 {% endif %}
 {# endshow #}

 {# Show month #}
 {% set month %}
 {% set post.month = date(post.date, 'MMM') %}

{% if post.month !== month %}
   {% set month = post.month %}
   <div class="collection-title">
     <h3 class="archive-year motion-element" id="archive-year-{{ year }}">{{ month }}</h3>
   </div>
{% endif %}
 {# endshow #}

　　实测这样是可以正常显示月份分类标签的，千万不要因为强迫症把show month里的那一段全部替换成month，否则你只能看见时间轴左边那个点点，月份标签是不会显示的。
　　然后还有月份的格式，就是set post.month = date(post.date, 'MMM')这一句中，中文环境下MMMM显示为汉字的“六月”，MMM显示为数字+汉字的“6月”，MM则显示为纯数字的“06”。附上插件的官网：http://momentjs.com/

　　那么今天的笔记就分享到这里~因为中途出了标签插入bug，加上来回谷歌debug的时间这篇文章大概写了我3个小时_ (:з」∠) _希望能帮助到大家xd