加载动画

概要

加载动画修改步骤

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

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

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

修改 stylus

1. 找到 themes\shoka\source\css\_common\components\third-party\loading.styl
2. 修改 loading 中的 css
3. 找不到就页面查找 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;
  }
}
}

偏移修复

1. 打开themes\shoka\source\css\_common\outline\outline.styl
2. 页面查找 Ctrl+F 找 .cat
3. 按照.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