本博客所用主题为 shoka,此博文是之前旧版 HEXO 博客的配置记录!
此文章所用 NEXT 版本可能过老,部分代码不具有参考性,请酌情享用!
此文章用来记录本网站个性化的设置更改,以便备用,或者供人参考。
提醒一下:博主 next 主题风格用的是 Mist,若主题风格不一样,有些地方需酌情修改。
在其他地方能找到的教程这里就不重复赘述,文章结尾会给出一些更为详尽的其他参考链接。
# 修改 Mist 风格下的侧边栏位置为左边
此设置为修改 next 主题 Mist 风格下侧边栏的位置为左边(默认为右边)以及侧边栏变化后页面变化的方向,具体操作如下:
- 更改页面变化方向:
首先,打开next/source/js/src
文件夹下的motion.js
文件Ctrl+F
查找paddingRight
;把所有(2 个)PaddingRight
更改为paddingLeft
即可。
代码样式如下:
{paddingLeft: SIDEBAR_WIDTH}, | |
NexT.utils.isDesktop() && $('body').velocity('stop').velocity({paddingLeft: 0}); |
- 更改所有和 sidebar 相关的元素:
(1) 更改 sidebar:
打开 next/source/css/_common/components/sidebar
文件夹下的 sidebar.styl
文件,将 .sidebar{}
内的 right: 0;
改为 left: 0;
,形式如下:
.sidebar { | |
position: fixed; | |
left: 0; |
(2) 打开相同路径下的 sidebar-toggle.styl
文件,将 .sidebar-toggle{}
内的 right: $b2t-position-right;
改为 left: $b2t-position-right;
,形式如下:
.sidebar-toggle { | |
position: fixed; | |
left: $b2t-position-right; |
(3) 返回上一个文件夹,打开 back-to-top.styl
文件,将 .back-to-top {}
内的 right: $b2t-position-right;
改为 left: $b2t-position-right;
,形式如下:
.back-to-top { | |
box-sizing: border-box; | |
position: fixed; | |
bottom: $b2t-position-bottom; | |
left: $b2t-position-right; |
修正侧边栏在左边时的小BUG
(前提:在 Mist 风格下侧边栏按本文设置为左边显示时)
BUG 描述:在更改浏览器大小的时候,顶部栏和底部栏未和侧边栏同步。
解决方法:在 themes/next/layout/source/js/src
文件夹下打开 motion.js
文件,在 $(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); | |
} |
# 更改侧边栏控制按钮的样式
在 themes/next/layout/source/js/src
文件夹下打开 motion.js
文件,在顶部其中更改代码。找到以下代码的位置:
var sidebarToggleLine1st = new SidebarToggleLine(); | |
var sidebarToggleLine2st = new SidebarToggleLine(); | |
var sidebarToggleLine3st = new SidebarToggleLine(); |
将其内部内容更改为以下内容:
var sidebarToggleLine1st = new SidebarToggleLine({ | |
el: '.sidebar-toggle-line-first', | |
status: { | |
arrow: {width: '50%', rotateZ: '45deg', top: '2px', left: '6px'}, | |
//close: {width: '100%', rotateZ: '-45deg', top: '5px', left: '0px'} // 叉字形 | |
close: {width: '50%', rotateZ: '-45deg', top: '2px', left: '0px'} // 箭头形 | |
} | |
}); | |
var sidebarToggleLine2nd = new SidebarToggleLine({ | |
el: '.sidebar-toggle-line-middle', | |
status: { | |
arrow: {width: '90%'}, | |
//close: {opacity: 0} // 箭头形 | |
close: {width: '90%'} | |
} | |
}); | |
var sidebarToggleLine3rd = new SidebarToggleLine({ | |
el: '.sidebar-toggle-line-last', | |
status: { | |
arrow: {width: '50%', rotateZ: '-45deg', top: '-2px', left: '6px'}, | |
//close: {width: '100%', rotateZ: '45deg', top: '-5px', left: '0px'} // 叉字形 | |
close: {width: '50%', rotateZ: '45deg', top: '-2px', left: '0px'} // 箭头形 | |
} | |
}); |
若要更改开启 sidebar 后 toggle 的显示样式为叉字形,将注释有箭头形的代码行删去或者注释掉,并取消有叉字形的代码注释即可。
# 添加侧边栏头像的链接
描述:当把鼠标移到侧边栏里的头像上时,鼠标样式变为 pointer,点击头像将把页面转向指定链接。
- 修改鼠标样式:
在themes/next/layout/source/css/_common/componets/sidebar
文件夹下打开sidebar-author.styl
文件,在.site-author-image{}
内添加cursor: pointer;
形如:
.site-author-image { | |
display: block; | |
margin: 0 auto; | |
padding: $site-author-image-padding; | |
max-width: $site-author-image-width; | |
height: $site-author-image-height; | |
border: $site-author-image-border-width solid $site-author-image-border-color; | |
cursor: pointer; | |
} |
- 添加链接:
在themes/next/layout/source/js/src
文件夹下打开motion.js
文件,在顶部其中添加代码:
$('.site-author-image').click(function(){ | |
window.location.href="自定义链接"; | |
}); |
# 设置鼠标划入侧边栏才显示站点信息:
- 设置自定义 div
在theme/next/layout/_macro
文件夹下打开sidebar.swig
文件,找到以下代码行的位置:
<nav class="site-state motion-element"> |
在其上添加以下代码:
<!--my custom code begin--> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js"></script> | |
<script type="text/javascript"> | |
$("#sidebar").hover(function(){ | |
$("#mydivshow").velocity('stop').velocity({opacity: 1}); | |
},function(){ | |
$("#mydivshow").velocity('stop').velocity({opacity: 0}); | |
}); | |
</script> | |
<div id="mydivshow" class="mydivshow"> | |
<!--my custom code end--> |
然后找到代码行:
</section> | |
{ % if display_toc and toc(page.content).length > 1 % } | |
<!--noindex--> | |
<section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active"> |
在此 </section>
的上方添加一个 </div>
,如下所示:
<!--my custom code begin--> | |
</div> | |
<!--my custom code end--> | |
</section> | |
{ % if display_toc and toc(page.content).length > 1 % } | |
<!--noindex--> | |
<section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active"> | |
<div class="post-toc"> |
- 自定义区域的初始化设置
在theme/next/source/css/_custom
文件夹下打开custom.styl
文件,向里面增添下列代码:
#mydivshow{opacity: 0;} |
注:具体代码添加位置以及代码里的 section.site-overview
可以自己修改, <div id="mydivshow" class="mydivshow">
和末尾的 </div>
是控制显示区域, section.site-overview
则是用户鼠标滑入划出时的触发事件区域。