本博客所用主题为 shoka,此博文是之前旧版 HEXO 博客的配置记录!
此文章所用 NEXT 版本可能过老,部分代码不具有参考性,请酌情享用!

此文章用来记录本网站个性化的设置更改,以便备用,或者供人参考。
提醒一下:博主 next 主题风格用的是 Mist,若主题风格不一样,有些地方需酌情修改
在其他地方能找到的教程这里就不重复赘述,文章结尾会给出一些更为详尽的其他参考链接。

# 修改 Mist 风格下的侧边栏位置为左边

此设置为修改 next 主题 Mist 风格下侧边栏的位置为左边(默认为右边)以及侧边栏变化后页面变化的方向,具体操作如下:

  1. 更改页面变化方向:
    首先,打开 next/source/js/src 文件夹下的 motion.js 文件 Ctrl+F 查找 paddingRight ;把所有(2 个) PaddingRight 更改为 paddingLeft 即可。

    代码样式如下:
{paddingLeft: SIDEBAR_WIDTH},
NexT.utils.isDesktop() && $('body').velocity('stop').velocity({paddingLeft: 0});
  1. 更改所有和 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,点击头像将把页面转向指定链接。

  1. 修改鼠标样式:
    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;
}
  1. 添加链接:
    themes/next/layout/source/js/src 文件夹下打开 motion.js 文件,在顶部其中添加代码:
$('.site-author-image').click(function(){
      window.location.href="自定义链接";
});

# 设置鼠标划入侧边栏才显示站点信息:

  1. 设置自定义 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">
  1. 自定义区域的初始化设置
    theme/next/source/css/_custom 文件夹下打开 custom.styl 文件,向里面增添下列代码:
#mydivshow{opacity: 0;}

:具体代码添加位置以及代码里的 section.site-overview 可以自己修改, <div id="mydivshow" class="mydivshow"> 和末尾的 </div> 是控制显示区域, section.site-overview 则是用户鼠标滑入划出时的触发事件区域。

更新于 阅读次数