首页 编程杂谈 技术分享 HEXO+NEXT 主题个性化配置

本博客所用主题为 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 则是用户鼠标滑入划出时的触发事件区域。
    
 更新于   阅读次数  次