Blog-调整NexT主题Mist外观侧边栏在左

发表于 更新于 分类于

在NexT主题的Mist外观下，侧边栏默认在右，而打开主题配置文件_config.yml查看，只有在Pisces，Gemini这两种外观下才可以通过_config.yml直接修改选择左侧或是右侧。而本人习惯把音乐播放器以及输入法放置于桌面右下角，故侧边栏在右并不方便 。于是在寻找了一些教程后 ，做出了修改，并做此记录和分享。

在此过程中需要修改如下几个文件： * sidebar.styl * sidebar-toggle.styl * back-to-top.styl * motion.js

2019.3.25 更新 增加bug修正部分

sidebar.styl

路径：.\themes\next\source\css\_common\components\sidebar\ 将此文件的第3行right改为left

1
2
3
4
5
.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;

sidebar-toggle.styl

路径：.\themes\next\source\css\_common\components\sidebar\ 同样将第3行冒号前的right改为left

1
left: $b2t-position-right;

back-to-top.styl

路径：.\themes\next\source\css\_common\components\ 将第5行冒号前的right改为left

1
left: $b2t-position-right;

motion.js

路径：.\themes\next\source\js\src\motion.js 利用搜索功能找到改文档中的paddingRight字段，将paddingRight改为paddingLeft(共两处)。

重新部署

重新部署即可完成侧边栏在左的设置。

修正缩小窗口时的bug

自己没注意过这个问题，感谢评论区Jode_He指出和分享。仅使用上面的方案情况下，如果侧边栏的设置是展开状态，在浏览器窗口缩小时会导致侧边栏仍然存在且占据相当大的位置。做以下调整。

找到./themes/source/js/src/motion.js文件，在$(document).ready(function (){})内添加内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(document).ready(function () {

	window.onload=function(){
	    var bwol=document.body.offsetWidth;
	    if(bwol < 975){
		$('aside#sidebar').css("display","none");
		$('body').css("paddingLeft","0px");
	    }
	}
	window.onresize = function(){
	    var bwos=document.body.offsetWidth;
	    bwos < 975 && $('body').velocity('stop').velocity({paddingLeft: 0},0);
	    if($('aside#sidebar').css('display') != 'none' && $('aside#sidebar').css('width')!='0px')
		$('body').velocity('stop').velocity({paddingLeft: 350},0);
	}

	   NexT.motion = {};
	   
	   ...

参考资料