本章记录本博客对于 Shoka 主题的美化魔改之加载动画修改

加载动画

概要

shoka 主题自带的旋转猫🐱，感觉不好看，所以我们换一个加载动画

加载动画修改步骤

xxxxxxxxxx // hexo-safago Waline 评论区链接处理 - 内联脚本 script. (function() { // 从配置中读取白名单 var whitelist = !{JSON.stringify(config.hexo_safego.whitelist.domain_whitelist)}; function isInWhitelist(url) { return whitelist.some(function(domain) { return url.indexOf(domain) !== -1; }); } function convertLink(link) { var href = link.getAttribute('href'); if (!href || href.startsWith('/') || href.startsWith('mailto:') || href.startsWith('tel:')) { return; } // 检查白名单 if (isInWhitelist(href)) { return; } if (link.dataset.safagoProcessed) { return; } try { var encodedUrl = btoa(href); var newHref = '/go.html?u=' + encodedUrl; link.setAttribute('href', newHref); link.setAttribute('target', '_blank'); link.dataset.safagoProcessed = 'true'; } catch(e) { console.error('[safago-inline] Error:', e); } } function processWalineLinks() { var links = document.querySelectorAll('.wl-nick a[href], .wl-card a[href]'); links.forEach(convertLink); } // 初始处理 if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', processWalineLinks); } else { processWalineLinks(); } // 延迟处理（备用） setTimeout(processWalineLinks, 2000); // 事件委托：在链接被点击时进行转换（最重要） document.addEventListener('click', function(e) { var link = e.target.closest('a[href]'); if (link && (link.classList.contains('wl-nick') || link.closest('.wl-card'))) { convertLink(link); } }, true); // PJAX 支持 document.addEventListener('pjax
', processWalineLinks); })();pug

打开主题根目录: themes\shoka\layout\_partials\
打开 layout.njk 文件
页面查找 Ctrl+F 找 loading ，动画部分是

  <div id="loading">
  //这个div就是我的动画，原来的是class="cat"，我的是col-sm-2
    <div class="col-sm-2">
				<div id="wave1">
				</div>
				
			</div>
    </div>

修改 stylus

找到 themes\shoka\source\css\_common\components\third-party\loading.styl
修改 loading 中的 css
找不到就页面查找 Ctrl+F 找 loading

#loading {
  @extend $fix-fullscreen;
  background-color: var(--grey-1);
  if(!hexo-config('loader.start')) {
    display: none;
  }
//这是我的样式参考，当然了你可以根据你自己的来修改
#wave1 {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  height: 50px;
  width: 50px;
  margin: -25px 0 0 -25px;
  border-radius: 50%;
}

#wave1:before, #wave1:after {
  content: '';
  border: 2px solid #008744;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  position: absolute;
  left: 0px;
}

#wave1:before {
  -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
          transform: scale(1, 1);
  opacity: 1;
  -webkit-animation: spWaveBe 0.6s infinite linear;
          animation: spWaveBe 0.6s infinite linear;
}

#wave1:after {
  -webkit-transform: scale(0, 0);
      -ms-transform: scale(0, 0);
          transform: scale(0, 0);
  opacity: 0;
  -webkit-animation: spWaveAf 0.6s infinite linear;
          animation: spWaveAf 0.6s infinite linear;
}

@-webkit-keyframes spWaveAf {
  from {
    -webkit-transform: scale(0.5, 0.5);
            transform: scale(0.5, 0.5);
    opacity: 0;
  }
  to {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
    opacity: 1;
  }
}
@keyframes spWaveAf {
  from {
    -webkit-transform: scale(0.5, 0.5);
            transform: scale(0.5, 0.5);
    -webkit-transform: scale(0.5, 0.5);
            transform: scale(0.5, 0.5);
    opacity: 0;
  }
  to {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
    opacity: 1;
  }
}
@-webkit-keyframes spWaveBe {
  from {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
    opacity: 1;
  }
  to {
    -webkit-transform: scale(1.5, 1.5);
            transform: scale(1.5, 1.5);
    opacity: 0;
  }
}
@keyframes spWaveBe {
  from {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
    opacity: 1;
  }
  to {
    -webkit-transform: scale(1.5, 1.5);
            transform: scale(1.5, 1.5);
    opacity: 0;
  }
}
}

偏移修复

打开themes\shoka\source\css\_common\outline\outline.styl
页面查找 Ctrl+F 找 .cat
按照.cat 的写法在下面加上你的,比如我的是.col-sm-2,所以写成下面这样

  .cat {
    margin-top: 10rem;
    margin-top: 20rem;
  }
//这是我的，因为我的class就是col-sm-2
  .col-sm-2 {
    margin-top: 20rem;
    margin-left: 15rem;
  }

END

[:heavy_check_mark

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

Shoka折腾美化魔改之加载动画

加载动画

概要

加载动画修改步骤

修改 stylus

偏移修复

END