引言

最近在摸鱼的时间里突发奇想，干脆给自己做个博客吧，顺便也能留个记笔记的地方。
鉴于自己贫穷的物质条件，最后选择了github page搭建hexo博客框架的方式（free！！！）
网上的教程已经很多了，这里就不再说太多。
但是要找到一个自己喜欢的博客主题实在是太不容易了，虽说我们不应该太注重博客的外形而应注重内容，但是没个自己想要的主题实在是很不爽啊！那干脆就自己在现有主题的模板上进行修改吧。
于是乎找到了和自己理想最为接近的云游君的主题。
云游君！yyds！！！

START

我们的目标是什么：

  1. 一个好康的首页动画
  2. 一个不会打扰到阅读的侧边栏
  3. 美观简洁的文章卡片
  4. 可爱的老板娘
    ……

好家伙，这主题不都给包办完了吗？
那么，唯一能做的，就是修改修改主页的动画效果了……
提供主页动画效果的文件是在主题source里面的banner.js和banner.styl里
经过几天的突击学习js和css，我终于读懂了代码，迫不及待地开始上手进行更改

首先是js

javascript

/**
 * @file 生成首页标语动画
 * @author YunYouJun <me@yunyoujun.cn>
 * @description https://github.com/YunYouJun/hexo-theme-yun
 */
//魔改by VcollX

/**
 * 生成介于 min 与 max 之间的随机数
 * @param {number} min
 * @param {number} max
 * @returns
 */
/*function random(min, max) {
  return Math.random() * (max - min) + min;
}*/

/**
 * 生成标语
 * @param {string} title
 */
function generateBanner(title) {
  let sumH = 0;
  let lineTop = document.querySelector(".vertical-line-top");
  let lineBottom = document.querySelector(".vertical-line-bottom");
  for (let i = 0; i < title.length; i++) {
    const char = title[i];
    let charBox = document.createElement("div");
    //let rn = random(1.5, 3.5); 取消随机大小
	let rn = 5;
    charBox.innerHTML = "<span class='char'>" + char + "</span>";
    let charSize = rn + "rem";
    banner.insertBefore(charBox, lineBottom);
    charBox.classList.add("char-box");
    if (i % 2 === 0) {
      charBox.classList.add("char-left");
      charBox.style.animationName = "char-move-left";
    } else {
      charBox.classList.add("char-right");
      charBox.style.animationName = "char-move-right";
    }
    charBox.style.setProperty("--banner-char-size", charSize);

    const height = window
      .getComputedStyle(document.getElementsByClassName("char-box")[i])
      .getPropertyValue("height");
    charBox.style.setProperty("--banner-empty-border-size", height);
      
    sumH += 0;
  }
  let center = "calc(50vw - " + sumH / 2 + "rem)";
  lineTop.style.setProperty("--banner-line-height", center);
  lineBottom.style.setProperty("--banner-line-height", center);

  // set animation name
  lineTop.style.animationName = "extend-line";
  lineBottom.style.animationName = "extend-line";
  // set subtitle 加了个副标题，（话说云游君的副标题为什么要加在侧边栏啊？）
  let subBox = document.createElement("div");
  subBox.innerHTML = "<span class='subtitle'>" + "客人，要进来喝杯咖啡吗？(๑¯∀¯๑)" + "</span>";
  subBox.classList.add("subtitle-move");
  subBox.style.animationName = "wula";
  subBox.style.position = "absolute";
  subBox.style.right = "26vw";
  subBox.style.bottom = "40vh";
  banner.insertBefore(subBox, lineBottom);
  
}

/**
 * 初始化 banner
 */
function initBanner() {
  if (window.banner) {
    setTimeout(() => {
      generateBanner(CONFIG.title);
    }, 100);
  }
}

document.addEventListener("DOMContentLoaded", initBanner);

其实里面的函数名也应该修改，但是由于之前出了一点小问题让我误认为是函数名没对上，所以还是进行了保留
然后是css的动画

css

#banner {
  position: relative;
  display: flex;
  flex-direction: row;    //行显示弹性项目
  align-items: center;
  height: 100vh;
}

.vertical-line {        //将竖直线动画改为行的线动画
  &-top, &-bottom {
    display: flex;
    background-color: var(--banner-line-color);
    width: 0;
    height: 2px;
    // animation-name: extend-line;
    animation-duration: $line-animation-duration;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in;
  }

  &-bottom {
    position: absolute;
    right: 0;
  }
}

@keyframes extend-line {
  from {
    width: 0;
  }

  to {
    width: var(--banner-line-height);
  }
}

.char {
  font-family: $font-family-serif;
  font-size: var(--banner-char-size, 1rem);
  font-weight: $font-family-serif-weight;
  background-color: rgba($banner-char-bg-color, 0.5);
  line-height: 1;
  the-transition();

  &:hover {
    color: $banner-char-bg-color;
    background-color: var(--banner-char-color);
  }

  &-left, &-right {
    display: flex;
    color: var(--banner-char-color);
    opacity: 0;
  }

  &-left {        //改为从下往上冒出来的效果
    border-top: $char-border-width solid var(--banner-line-color);
    border-bottom: 0px solid rgba($colors.primary, 0);     //取消
    border-bottom-width: 0px;
    // animation-name: char-move-left;
    animation-duration: $char-animation-duration;
    animation-delay: $line-animation-duration;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
  }

  &-right {
    border-bottom: 0px solid rgba($colors.primary, 0);
    border-top: $char-border-width solid var(--banner-line-color);
    border-top-width: 0px;
    // animation-name: char-move-right;
    animation-duration: $char-animation-duration;
    animation-delay: $line-animation-duration;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
  }
}

@keyframes char-move-left {
  from {
    opacity: 0;
    border-bottom-width: 0;
  }

  to {
    opacity: 1;
    border-bottom-width: var(--banner-empty-border-size, var(--banner-char-size));
  }
}

@keyframes char-move-right {
  from {
    opacity: 0;
    border-top-width: 0;
  }

  to {
    opacity: 1;
    border-top-width: var(--banner-empty-border-size, var(--banner-char-size));
  }
}

.subtitle {                        //新加的副标题
  font-family: $font-family-serif;
  font-size: 150%;
  font-weight: normal;
  background-color: rgba($banner-char-bg-color, 0);
  line-height: 1;
  display: flex;
  
  color: var(--banner-char-color);
  the-transition();
  &-move {
	opacity: 0;
    animation-duration: $char-animation-duration;
    animation-delay: $line-animation-duration;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
  }
}

@keyframes wula {
	from {
		opacity: 0;
	}
	
	to {
		opacity: 1;
	}
}

css也只是进行了一些微小的变动
最后当然是形成了现在的主页效果啦~

写在最后

这是该网站的第一篇博客，也是一个用于划水的博客，没啥干货也没啥技术含量，纯粹是为自己这几天的瞎搞做个记录。
目前的状态还是比较满意啦，至少在pc端浏览起来还不戳，但是问题也不少，自己想要的一些功能也还没加上去
比如移动端的主页自适应，老板娘的live2d，以及其他的好玩的功能。（以后再做，以后再做.jpg）
咕咕咕
就这样吧，over！

2021.6.13更新

最近又看了一遍文档，发现主题创立之初就给了方便开发的自定义拓展方式
直接在源码上修改的我像个傻逼一样orz