疯疯's Blog-魔改ChangeLog

This is 疯疯Blogの魔改ChangeLog~

---

ChangeLog 2022-8-24

由于工作原因和种种不可抗力因素下，搁置已久的Hexo重启计划，在今天正式启动。

目前使用的Blog框架为Hexo，以ButterFly主题为底板进行修改。

目前由CloudFlare+Freenom+Aliyun OSS+Github提供整套底层基础服务。

目前施工完毕项目：

• 网站资料
• 顶部导航栏
• 代码
• 社交图标
• 主页文章节选(自动节选和文章页description)
• 顶部图
• 文章meta显示
• 文章版权
• 文章打赏
• TOC
• 相关文章
• 文章锚点
• 文章分页按钮
• 头像
• 复制相关配置
• Footer 设置
• 右下角按钮
• 侧边栏设置

目前已经使用Git实现版本控制。

ChangeLog 2022-8-28

最近高强度的出差实在让人难顶，周日忙里偷闲慢慢的完善了以下以下内容。

目前施工完毕项目：

• 分享-目前使用Sharejs
• 背景特效-目前使用动态彩带
• 鼠标点击效果-目前使用烟花
• 网站副标题-目前使用-一言网的一句话
• 字数统计

ChangeLog 2022-8-29

熬夜完善了以下内容。

• Snackbar 弹窗
• 页面加载动画preloader
• 重启使用Aliyun OSS对象存储用于图床，使用vscode Picgo插件支持上传实测好用

  文档内链接
  建议使用如下两种上传命名规则设置类型
  ${fileName}-${date}${extName} -> picName-2016-07-25.jpg
  或
  ${mdFileName}-${dateTime}${extName} -> markdownName-2017-04-12-22-28-10.jpg
  注意第二种对于mdFileName携带符号的支持不太好，会导致渲染器识别错误

• 音乐-音乐界面使用了插件hexo-tag-aplayer

  #   疯疯の2022年收藏歌单
  {% meting "7244443608" "netease" "playlist" "mutex:false" "listmaxheight:400px" "preload:auto" "theme:#ad7a86"%}

• 电影-电影界面使用了插件hexo-butterfly-douban
• 添加全局吸底Aplayer-目前音乐来源为网易云
• Pjax-全局开启->true

  pjax:
    enable: true
    exclude:
      # - xxxx
      # - xxxx

• Inject-为全局吸底Aplayer增加div

  inject:
    head:
      # - <link rel="stylesheet" href="/xxx.css">
    bottom:
      - <div class="aplayer no-destroy" data-id="7244443608" data-server="netease" data-type="playlist" data-fixed="true" data-autoplay="true"> </div>

• 视频-视频界面使用了bilibili的外嵌代码，并修改了CSS以适配界面显示,示例：

  ##  【燃向】守望此生，一世无悔
  <div style="position: relative; width: 100%; height: 0; padding-bottom: 75%;">
      <iframe src="//player.bilibili.com/player.html?aid=35519745&bvid=BV1Vb411c7tF&cid=62274377&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="position:absolute; height: 100%; width: 100%;"> </iframe>
  </div>

• 增加hexo-admin，实现可视化后台管理实际体验不佳

  注意hexo server测试环境中
  若出现Function yaml.safeLoad is removed in js-yaml 4. Use yaml.load instead
  直接跟随路径找到这行代码
  将yaml.safeLoad->yaml.load
  新版的Hexo检验更为严格

• 套用樱花飘落JS于前端页面

  inject:
    head:
      # - <link rel="stylesheet" href="/xxx.css">
    bottom:
      - <div class="aplayer no-destroy" data-id="7244443608" data-server="netease" data-type="playlist" data-fixed="true" data-autoplay="true"> </div>
      - <div><script src="./js/sakuraPlus.js"></script></div>

ChangeLog 2022-8-29

由于同事反馈樱花飘落动态效果于整体页面前端，导致十分影响阅读专注度，遂寻找调整办法。

经过资料查询和多次调试后，定位问题解决办法于SakuraPlus.js中position设置

原：
canvas.setAttribute('style', 'position: fixed;left: 0;top: 0;pointer-events: none;');
--->
canvas.setAttribute('style', 'position: fixed;left: 0;top: 0;pointer-events: none;z-index:-1;');

解释：

z-index无效的情况，一共有三种：
1、父标签 position属性为relative；
2、问题标签无position属性（不包括static）；
3、问题标签含有浮动(float)属性。

这样也很好理解为什么parent设置了position和z-index之后insert的z-index就会失效的问题了，他的解决办法有是三个：
1、position:relative改为position:absolute；
2、浮动元素添加position属性（如relative，absolute等）；
3、去除浮动。

其实一开始也闹了个笑话，将position: fixed修改为position:absolute,导致开屏头图显示正常叠层效果，而文章页面由于叠层框范围导致文章头半截在飘樱花（笑）。

目前施工完毕项目：

• 樱花飘落效果已下放至底层成为背景效果
• 已将原Typecho框架下全部文章改写格式并同步至当前博客。

ChangeLog 2022-9-01

已经将主题作者的使用手册完整镜像至本地博客，且全局替换完毕所有图片为阿里云OSS图床，持久化保证图片显示的速度和稳定。

主题大体施工应该告一段落了，接下来就是实质性丰满博客内容。

目前施工完毕项目：

• Butterfly-安装文档-一-快速开始 🚀 Butterfly 安装文档(一) 快速开始
• Butterfly-安装文档-二-主题页面 📑 Butterfly 安装文档(二) 主题页面
• Butterfly-安装文档-三-主题配置-1 🛠 Butterfly 安装文档(三) 主题配置
• Butterfly-安装文档-四-主题配置-2 ⚔️ Butterfly-安装文档-四-主题配置-2
• Butterfly-安装文档-六-进阶教程 ❓ Butterfly 安装文档(六) 进阶教程
• Butterfly-添加全局吸底Aplayer教程 ✨ Butterfly 全局吸底Aplayer教程
• Butterfly-自定义代码配色 ✨ Butterfly-自定义代码配色
• Butterfly-自定义侧边栏 ✨ Butterfly-自定义侧边栏

ChangeLog 2022-9-02

• 修改了主题的background，更美观了。
  新增background.css，文件内配色代码如下：

  #web_bg {
    background: -webkit-linear-gradient(
      0deg,
      rgba(247, 149, 51, 0.1) 0,
      rgba(243, 112, 85, 0.1) 15%,
      rgba(239, 78, 123, 0.1) 30%,
      rgba(161, 102, 171, 0.1) 44%,
      rgba(80, 115, 184, 0.1) 58%,
      rgba(16, 152, 173, 0.1) 72%,
      rgba(7, 179, 155, 0.1) 86%,
      rgba(109, 186, 130, 0.1) 100%
    );
    background: -moz-linear-gradient(
      0deg,
      rgba(247, 149, 51, 0.1) 0,
      rgba(243, 112, 85, 0.1) 15%,
      rgba(239, 78, 123, 0.1) 30%,
      rgba(161, 102, 171, 0.1) 44%,
      rgba(80, 115, 184, 0.1) 58%,
      rgba(16, 152, 173, 0.1) 72%,
      rgba(7, 179, 155, 0.1) 86%,
      rgba(109, 186, 130, 0.1) 100%
    );
    background: -o-linear-gradient(
      0deg,
      rgba(247, 149, 51, 0.1) 0,
      rgba(243, 112, 85, 0.1) 15%,
      rgba(239, 78, 123, 0.1) 30%,
      rgba(161, 102, 171, 0.1) 44%,
      rgba(80, 115, 184, 0.1) 58%,
      rgba(16, 152, 173, 0.1) 72%,
      rgba(7, 179, 155, 0.1) 86%,
      rgba(109, 186, 130, 0.1) 100%
    );
    background: -ms-linear-gradient(
      0deg,
      rgba(247, 149, 51, 0.1) 0,
      rgba(243, 112, 85, 0.1) 15%,
      rgba(239, 78, 123, 0.1) 30%,
      rgba(161, 102, 171, 0.1) 44%,
      rgba(80, 115, 184, 0.1) 58%,
      rgba(16, 152, 173, 0.1) 72%,
      rgba(7, 179, 155, 0.1) 86%,
      rgba(109, 186, 130, 0.1) 100%
    );
    background: linear-gradient(
      90deg,
      rgba(247, 149, 51, 0.1) 0,
      rgba(243, 112, 85, 0.1) 15%,
      rgba(239, 78, 123, 0.1) 30%,
      rgba(161, 102, 171, 0.1) 44%,
      rgba(80, 115, 184, 0.1) 58%,
      rgba(16, 152, 173, 0.1) 72%,
      rgba(7, 179, 155, 0.1) 86%,
      rgba(109, 186, 130, 0.1) 100%
    );
  }
  
  /* 所有背景（包括首页卡片、文章页、页面页等） */
  #recent-posts > .recent-post-item,
  .layout > div:first-child:not(.recent-posts),
  .layout_post > #page,
  .layout_post > #post,
  .read-mode .layout_post > #post {
    /* 以下代表白色透明度为0.5 */
    background: rgba(255, 255, 255, 0.5);
  }

  主题配置文件修改：

  # Website Background (設置網站背景)
  # can set it to color or image (可設置圖片 或者 顔色)
  # The formal of image: url(http://xxxxxx.com/xxx.jpg)
  background: "#efefef"

  引入CSS

  inject:
   head:
    # - <link rel="stylesheet" href="/xxx.css">
    - <link rel="stylesheet" href="/css/background.css">

• 增加了侧边栏时钟 🛠 侧边栏时钟

• footer背景透明化，修改footer字体为黑色

• header背景透明化

  在background.css中增加

  #footer{
    background: transparent!important;
  }
  /*实现footer背景透明化*/
  #footer, #footer:before {
    background: transparent!important
  }
  /*去除页脚毛玻璃*/
  #page-header{
    background: transparent!important;
  }
  /*实现header背景透明化*/

  修改_layout中footer.styl中–light-grey为–light-black

  #footer-wrap
    position: relative
    padding: 40px 20px
    color: var(--light-black)
    text-align: center
  
    a
      color: var(--light-black)

ChangeLog 2022-9-16

增加嘉然live2D

在_config.butterfly.yml的bottom中本地化,避免嘉然遇刺去世…

# 嘉然和向晚live2D
    #本地化- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/TweenLite.js"></script>
    - <script src="/js/TweenLite.js"></script>
    #本地化- <script src="https://cubism.live2d.com/sdk-web/cubismcore/live2dcubismcore.min.js"></script>
    - <script src="/js/live2dcubismcore.min.js"></script>
    #本地化- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi.min.js"></script>
    - <script src="/js/pixi.min.js"></script>
    #本地化- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cubism4.min.js"></script>
    - <script src="/js/cubism4.min.js"></script>
    #本地化- <link href="https://cdn.jsdelivr.net/gh/journey-ad/blog-img@76ba2b3/live2d/lib/pio.css" rel="stylesheet" type="text/css"/>
    - <link href="/css/pio.css" rel="stylesheet" type="text/css"/>
    #本地化- <script src="https://cdn.jsdelivr.net/gh/journey-ad/blog-img@76ba2b3/live2d/lib/pio.js"></script>
    - <script src="/js/pio.js"></script>
    #本地化- <script src="https://cdn.jsdelivr.net/gh/journey-ad/blog-img@76ba2b3/live2d/lib/pio_sdk4.js"></script>
    - <script src="/js/pio_sdk4.js"></script>
    #本地化- <script src="https://cdn.jsdelivr.net/gh/journey-ad/blog-img@76ba2b3/live2d/lib/load.js"></script>
    - <script src="/js/load.js"></script>

修改pio.css关闭显示无用按钮，调整大小。

.pio-action .pio-close
.pio-action .pio-info 
.pio-action .pio-night 
/* 关闭显示 */
    display: none;

#pio {
	height: 300px;
    vertical-align: middle
}

调整吸底Aplayer

重新在css目录下创建Aplayer.min.css并修改以下内容

在_config.butterfly.yml中head下引入本地Aplayer.min.css即可

- <link rel="stylesheet" href="/css/background.css">

侧边栏收缩

找到Aplayer.min.css并使用https://tool.oschina.net/codeformat/css格式化代码,在代码最后加入以下内容

.aplayer.aplayer-narrow .aplayer-body {
    left: -66px !important;
}
.aplayer-body:hover {
    left: 0px !important
}

调整歌词颜色

找到Aplayer.min.css中以下内容

.aplayer .aplayer-lrc p.aplayer-lrc-current {
    /* 大小 */
    font-size: 17px;
    /* 颜色 */
    color: #1ba2d8;
    opacity: 1;
    overflow: visible;
    height: auto !important;
    min-height: 16px;
}

.aplayer .aplayer-lrc p {
    font-weight: 700;
    font-size:15px;
    color:#777;
    line-height:16px!important;
    height:16px!important;
    padding:0!important;
    margin:0!important;
    transition:all .5s ease-out;
    opacity:.4;
    overflow:hidden
}

---

History-黑历史

其实也没有想到，原来自己的博客历史鸽的有这么久…摊手

Older 2021-10-07

由于不喜欢Hexo的创作方式，又讨厌WordPress的过度臃肿和缓慢

在比较后，选择了Typecho这个框架，拥有轻量化后台管理以及较为方便的图形化插件装载引用，在轻度玩耍情况下还是比较愉快的，不过美中不足的是，使用群体和二次创作的支持量不大，导致趣味性快速降低，最终也沦为本地markdown写完后的一个誊写地点。。。摊手。。。

Lost-Not-Found 2021-02-01

当时应该是由于不喜欢Hexo的创作方式，导致写作热情不佳，所以弃坑了，也算是当时第一次接触了Hexo这个框架和开始接触Markdown语法吧。

可以算是hexo结构了解的启蒙阶段啦（笑）

当时写了一个小黄鸭还是蛮有意思的，不过在2022年将整个仓库摧毁了…

Oldlest 2019-8-15

当时应该是第一次购买海外VPS后，兴冲冲的搭建了一众应用，WordPress也是那个青涩时期第一次接触的产品。

确实给当时的我带来了惊艳的感觉，甚至能够开心好一阵。

纵使WordPress是一个插件以及各种图形化都非常完备的傻瓜式建站应用，但是过于臃肿庞大的自身，最终还是导致了无法能够持久化的在那个兜里没有米的学生时期浪费宝贵的计算资源。

好叭，也不是没有米，只是新鲜感过去后的索然无味，同时过于缓慢的加载速度让人不能接受，最终沦为时代的眼泪。

当时的ChangeLog留存记录：(当时青涩别笑(✿◡‿◡))

疯某人个人博客，来看看吧！（｡ò ∀ ó｡）
（大力建议使用PC端登录，Live2D可调戏！）
Bate版---Version1.06上线
更新日志:
Version1.00---优化了网页整体框架，雪花效果
Version1.01---更新了内置网易云播放器的歌单
Version1.02---新增了博文上方图片轮播
Version1.03---新增友情链接跃迁通道
Version1.04---优化了移动端的体验
Version1.05---优化了付费体验（支持微信/支付宝）[em]e248[/em]
Version1.06---更新了评论网页弹幕滚动（未开启）