本章记录本博客对于 Shoka 主题的美化魔改之下拉小箭头

下拉小箭头

美化步骤

global.js

打开目录：themes\shoka\source\js\_app
找到global.js 中的#search ,在它下面 var 一个函数
找不到就Ctrl+F 搜索 #search

   var siteSearch = $('#search');
   var angleBtn = $('#angle');  //新增这个下拉小箭头

pjax.js

还在themes\shoka\source\js\_app 目录下
找打 pjax.js 中第一个 toolBtn ,在它下面仿照格式新增下列代码
找不到就Ctrl+F 搜索 toolBtn 第一个出现的就是

  if(!toolBtn) {
    toolBtn = siteHeader.createChild('div', {
      id: 'tool',
      innerHTML: '<div class="item player"></div><div class="item contents"><i class="ic i-list-ol"></i></div><div class="item chat"><i class="ic i-comments"></i></div><div class="item back-to-top"><i class="ic i-arrow-up"></i><span>0%</span></div>'
    });
  }
  
  //新增下拉小箭头如下
  if(!angleBtn) {
    angleBtn = siteHeader.createChild('div', {
      id: 'angle',
      innerHTML: '<span><i class="ic i-angle-down" aria-hidden="true"></i></span>'
    });
 }

添加完后在第三个 toolBtn 位置下面添加下列代码

  angleBtn.addEventListener('click',headertopdown);//下拉小箭头监听

sidebar.js

还在themes\shoka\source\js\_app 目录下
找到 sidebar.js 中的 comments
找不到就Ctrl+F 搜索 comments
仿照它写一段代码，如下：

const goToCommentHandle = function () {
  pageScroll($('#comments'));
}

//新增下拉小箭头
const headertopdown = function () {
  pageScroll($('#main'));
}

header.styl

打开目录：themes\shoka\source\css\_common\outline\header
找到 header.styl ，就在里面的 #header 下面继续新增下列代码：

#header {
  margin: 0 auto;
  position: relative;
  width: 100%;
  height: 100vh;
  text-shadow: 0rem .2rem .3rem alpha(#000, .5);
  color: var(--header-text-color);

  a:hover {
    color: currentColor;
  }
}

//新增下拉小箭头
#angle {
    position: absolute;
    bottom: 10vh;
    left: 50%;
    cursor: pointer;
    z-index: 5;
    transform: translateX(-50%);
}


@media (max-width: 860px) {
#angle {
        bottom: 8vh;
    }
}

#angle i {
    font-size: 45px;
    color: #fff;
    @extend .up-down;
}

注意事项

在最后一步 css 样式添加时，有可能会遇到比如云层特效偏移到顶部或者底部，再加一个 angle 如图所示，或者自行调整。最主要就是 position: absolute 没生效，你可以再加一个块，或者强制调整它的位置，绝对定位

有可能你直接成功哈哈哈哈

LIKE THAT:

END

[:heavy_check_mark

，如果你配置有问题可以评论，我会帮助你]{.label .success}

Shoka折腾美化魔改之下拉小箭头