自定义样式魔改

Butterfly主题魔改教程，自定义样式魔改。

我的博客主题版本为：hexo5.4、Butterfly3.6.2

如果与我的版本不一样可能会有略微差别，届时请自行百度。

1.自定义样式魔改引入

引入魔改样式的方法很简单，自建一个 css 文件，然后引入即可。
以 butterfly 主题为例：可以在 [Blogroot]\themes\butterfly\source\css\ 目录下新建 custom.css 文件，然后在 [Blogroot]\_config.butterfly.yml 的 inject 配置项中引入自定义样式文件。

inject:
  head:
    - <link rel="stylesheet" href="/css/custom.css"  media="defer" onload="this.media='all'">

其中 media="defer" onload="this.media='all'" 是异步加载配置项，确保自定义样式会在页面加载完成后才继续渲染。如果没有需求或效果不好可以不加这个。

2.站点动态 title

站点动态 title 是通过 js 监测是否聚焦于当前页面，从而替换标签显示内容。

在 [Blogroot]\themes\butterfly\source\js\ 目录下新建 diytitle.js:

//动态标题
var OriginTitile = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
    if (document.hidden) {
        //离开当前页面时标签显示内容
        document.title = 'w(ﾟДﾟ)w 不要走！再看看嘛！';
        clearTimeout(titleTime);
    }
    else {
        //返回当前页面时标签显示内容
        document.title = '♪(^∇^*)欢迎回来！' + OriginTitile;
        //两秒后变回正常标题
        titleTime = setTimeout(function () {
            document.title = OriginTitile;
        }, 2000);
    }
});

在 [Blogroot]\_config.butterfly.yml 的 inject 配置项添加引入，此处因为这是个独立的 js，而且体量极小，所以可以添加 async 异步加载标签：

  inject:
    head:
      # - <link rel="stylesheet" href="/xxx.css">
    bottom:
      # - <script src="xxxx"></script>
+     - <script async src="/js/diytitle.js"></script>

3.夜间模式或阅读模式修改

Butterfly 主题使用 [data-theme='dark'] 来界定夜间模式和日间模式。使用.read-mode 的类来界定阅读模式。
可以简单的认为，当切换为夜间模式或者阅读模式时，会给页面整体套上一个壳，而我们要做的就是对这个壳底下的元素重新定义样式。此处以对文字页和侧栏的设置为例：
修改 [Blogroot]\themes\butterfly\source\css\custom.css。

夜间模式：

[data-theme="dark"]
  #aside-content .card-widget{
      background: rgba(0, 0, 0, 0.5)!important;
    }
[data-theme="dark"]
  div#post{
    background: rgba(0, 0, 0, 0.5)!important;
    }

阅读模式：

.read-mode #aside-content .card-widget{
      background: rgba(158, 204, 171, 0.5)!important;
    }
.read-mode div#post{
    background: rgba(158, 204, 171, 0.5)!important;
    }

夜间模式下的阅读模式：

[data-theme="dark"]
  .read-mode #aside-content .card-widget{
        background: rgba(0, 0, 0, 0.5)!important;
        color: #ffffff;
      }
[data-theme="dark"]  
  .read-mode div#post{
      background: rgba(0, 0, 0, 0.5)!important;
      color: #ffffff;
      }

4.友链卡片样式魔改