挽风逐梦

Wait For You

网站优化日志(Hexo优化)

发表于 更新于

优化内容

  1. 背景图片改为加载完成后显示，采用JavaScript的onload函数，并通过原生js的setTimeout函数实现背景透明度渐变，优化体验。真的有那么丝滑~
  2. 对网页缓存进行配置，解决一部分网页闪白的问题（Catch-Control ：max-age=…)。

碎碎念

  啊啊啊都要被我的网站榨干了，反复测试，调节，找问题，找代码，还要使劲瞪那些没学过的语言，代码，甚至现学。上一秒还想着先放一放，数学建模竞赛要紧，下一秒就在我小如芥子的知识框架内搜寻如何实现网页的种种优化，黔驴技穷….
  近期发现原来疲劳与兴奋是可以共存的，难道是精神分裂了?! 😧
  有时候觉得自己蛮厉害的，有时候又觉得自己好菜，啥也不会，没有一个完整牢固的知识框架，解决问题无从下手，百度搜的东西都看不懂那种😥，同时又略显急躁。哎，学无止境啊~
  下一个目标：学会PHP注入，建立一个较好的知识体系！学习是厚积薄发的过程。掌握一个知识点可能要很久，也可能就在明天！加油！早日拿下学校服务器！
  不对，应该是先全力以赴完成数模竞赛…😅




贴出我的部分优化代码


文件路径：/themes/next/source/css/_custom/style.styl

一些细碎的优化

@import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap'); //字体设置
.header{
opacity: 0.8;}

.footer{
opacity: 0.8;}

  .post-block {
    border-radius: $border-radius;
    // Rewrite shadows & borders because all blocks have offsets.
    box-shadow: $box-shadow;
    // Inside posts blocks content padding (default 40px).
    padding: ($content-tablet-padding * 2);
  }
.post-title-link {
font-size: 20px;}
.vpanel{
background-color: white;
border-radius:20px;
border-radius-inner:20px}
.vpower.txt-right{
display:none;}
.vcards{
background-color: white;
border-radius:20px;
border-radius-inner:20px}
.vhead{
margin:15px;}
.vmeta{
margin:15px;}
.vcontent{
margin:17px;}
.post-meta-item.leancloud_visitors{
display:none;}

文件路径: source/_data/footer.swig

实现网页背景的蛛网效果,图片加载完成后淡入显示

<script color="0,0,0" opacity="0.5" zIndex="-1" count="35" src="https://cdn.jsdelivr.net/npm/canvas-nest.js@1/dist/canvas-nest.js"></script>

<script>
function setOpacity(elem, opacity) {
    /*
     * elem : The id of the element;
     * opacity: The value of alpha, which is a decimals.
     */
    if(elem.style.filter) {   //IE
        elem.style.filter = 'alpha(opacity:' + opacity * 100 + ')';
    } else {
        elem.style.opacity = opacity;
    }
}
function fadeTo(elem, speed, opacity){
    /* elem, the id of the element;
     * speed, the speed to of the fadeTo.(The value lower, the less time needs)
     * opacity, the opacity of the final result;
     */
     var tempOpacity = 0.4;
     elem.style.display = "block";
     (function(){
     elem.style.display = "block";
     (function(){
         setOpacity(elem, tempOpacity);
         tempOpacity += 0.02;
         if(tempOpacity <= opacity) {
             setTimeout(arguments.callee, speed);
         }
     })();}
var background = new Image();
 background.src = '/images/background2.png';
//background.src='https://w.wallhaven.cc/full/72/wallhaven-72w5pv.png';
//background.src='https://w.wallhaven.cc/full/96/wallhaven-96w8e8.png';
background.onload = function () {
    var loadbackground = document.body;
    loadbackground.style.background = 'url(' + background.src +')';
    loadbackground.style['background-repeat'] = 'no-repeat';
    loadbackground.style['background-attachment'] = 'fixed';
    loadbackground.style['background-position'] = '50% 50%';
    loadbackground.style['background-size'] = 'cover';
    fadeTo(loadbackground,25,0.6);
    //loadbackground.style.opacity = '0.8';

var post=document.getElementsByClassName("post-block");
var i;
for (i = 0; i < post.length; i++) {

    post[i].style.backgroundColor = "white";
    post[i].style['box-shadow'] = "none";
}
}
</script>

文件路径: source/_data/variables.styl

贴文周围的圆角

$border-radius-inner     = 20px 20px 20px 20px;
$border-radius           = 20px;
$box-shadow              = 0px 0px 5px rgba(202, 203, 203, .5);

主要就是这三个自定义文件啦。