从源码级别高度定制与优化Hexo NexT主题

图片来自google搜索

玩转了几天Hexo静态博客之后，发现可配置的东西基本上都已经配置过了，那还有什么地方可以优化呢？突然之间，灵机一动，发现了另一个可以高度定制与优化Hexo主题的方法：从源码级别优化。

Hexo NexT主题的文档结构

/languages   #用来配置国际化语言版本，里边包含各种个配置像的文本翻译。
/layout      #以swig文件来定义各种含有配置信息调用的布局
/scripts     #一些JS脚本
/source    
   /css      #用来修改自定义样式，需要掌握一定的css语法。
   /fonts    #定义字体文件，可以修改博客字体
   /images   #一些svg图片
   /js       #一些js脚本
   /vendors  
   /404.html #自定义的公益404页面
/test        #用于测试

CSS级别优化

通过修改主题中的CSS样式来进行优化，以下列出一些举例：

1.改变主页中博文标题的对齐方式

//themes/next/source/css/_variables/Mist.styl
//default is left,改变主页博文标题的对齐方式
$site-meta-text-align    = left 

2.显示配置过的网站副标题（针对Mist模式）

//themes/next/source/css/_schemes/Mist/_logo.styl
.site-subtitle { display: none; }  //改变none为自己想要的值

3.改变菜单按钮的样式

//themes/next/source/css/_schemes/Mist/_menu.styl
  .menu-item a {
    //...
    &:hover { 
        background: #003366; 
        color: white;
        border-radius: 2px;
    }
  }

4.改变网站头部样式

//themes/next/source/css/_schemes/Mist/_header.styl

Swig级别优化

1.改变底部Footer相关描述

修改布局 ： themes/next/layout/_partials/footer.swig

---

如果你想问一些基本的配置，请访问Next 主题 Github 仓库。
如果你更牛逼，可以直接自定义新的或者修改原有的JS特效。

欢迎访问本人的优化结果： 小卢同学