玩转了几天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特效。
欢迎访问本人的优化结果: 小卢同学