自定义css与js

找到butterfly下面的source文件夹（hexo目录下的source文件夹也一样）

这是一个静态目录里面可以自定义自己的css与js文件，其实不光是css与js，你的图片与下载好的字体都可以放在这里面

尝试修改自己主题的样式吧

如果你还不会css与js，建议前往学习哦！！这里站长就给你提供简单的一个例子
在你自定义的css文件下添加一下代码

/* 侧边栏个人信息卡片动态渐变色 */
#aside-content > .card-widget.card-info {
    background: linear-gradient(
      -45deg,
      #e8d8b9,
      #eccec5,
      #a3e9eb,
      #bdbdf0,
      #eec1ea
    );
    box-shadow: 0 0 5px rgb(66, 68, 68);
    position: relative;
    background-size: 400% 400%;
    -webkit-animation: Gradient 10s ease infinite;
    -moz-animation: Gradient 10s ease infinite;
    animation: Gradient 10s ease infinite !important;
  }
  @-webkit-keyframes Gradient {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
  @-moz-keyframes Gradient {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
  @keyframes Gradient {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
  
  /* 黑夜模式适配 */
  [data-theme="dark"] #aside-content > .card-widget.card-info {
    background: #191919ee;
  }
  
  /* 个人信息Follow me按钮 */
  #aside-content > .card-widget.card-info > #card-info-btn {
    background-color: #3eb8be;
    border-radius: 8px;
  }

引入css文件

1. 这里虽然是引入字体的地方，也是可以引入css文件的(最好字体的引入与主要的css文件分开)

   blog_title_font:
     font_link: css/custom.css

2. 主要在这里引入

   inject:
     head:
       # - <link rel="stylesheet" type="text/css" href="css/custom.css">

   赶快去试试看自己有没有成功吧！！！

引入js文件

提供一下js的简单代码，用于测试有没有成功引入

console.log('欢迎访问lazychild')

开始引入:

inject:
  bottom:
    - <script src="js/custom.js"></script>

成功后重启服务器，打开页面后，按下F12打开console，看看有没有’欢迎访问lazychild’这句话吧，如果有，你就成功了

需要注意

小伙伴有没有注意到我这里的引入都是本地引入呢，会出现许多的问题，比如我在引入本地css文件时，只有在首页才有效果，其他页面的没有生效，这就是相对路径引入的问题了，更换引入路径（外网）：

#这是我自己的字体的css文件
@font-face {
    /* 为载入的字体取名字(随意) */
    font-family: 'YSHST';    
    /* 字体文件地址(相对或者绝对路径都可以) */
    src: url(https://xiao-zhe-is-not-lazy.gitee.io/hexo/font/%E9%9C%9E%E9%B6%A9%E6%96%87%E6%A5%B7TC%20Bold_mianfeiziti.com.woff2);
    /* 定义加粗样式(加粗多少) */
    font-weight: normal;
    /* 定义字体样式(斜体/非斜体) */
    font-style: normal;
    /* 定义显示样式 */
    font-display: block;
  }

然后在修改butterfly下的_config.yml

blog_title_font:
  font_link: https://xiao-zhe-is-not-lazy.gitee.io/hexo/css/custom/font.css

inject:
  head:
    - <link rel="stylesheet" type="text/css" href="https://xiao-zhe-is-not-lazy.gitee.io/hexo/css/custom/main.css">
  bottom:
    - <script src="https://xiao-zhe-is-not-lazy.gitee.io/hexo/js/custom.js"></script>

或者(省略掉前面的域名)：

inject:
  head:
    - <link rel="stylesheet" type="text/css" href="/hexo/css/custom/main.css">
  bottom:
    - <script src="/hexo/js/custom.js"></script>

在本地运行的问题

主要就是同源策略的问题，关于什么是同源策略(不同域名，不同端口下就会发生)，就是一个约定，它是浏览器最核心也最基本的安全功能，注意同源策略只会发生在浏览器之间，如果没有同源策略，那么就可以请求任意网站的数据了,直接推送到远程就行，同源策略这个问题就会消失了哦！