主题捣鼓日记

sakura版本（YYDS）

主要框架都没怎么动，功能挺完整的。但是如果要DIY还是得自己把代码捋一遍，不然从哪改起都不知道，注释不能说完全没用。。。

捣鼓了两天两夜，还是有很多细节没改好，main.js翻了四五遍，看评论区发现诸多细节还要改CSS文件，太难了。。前端都忘得差不多了，赶紧借机复习一下。

还没有改的功能包括：下拉之后主页面浅色背景图、右下角的live2D模型、阅读模式切换、移动端不太适配的问题······打算后面慢慢研究吧。

先贴个原作者地址：博客园二次元主题——Sakura - 不忘编码 - 博客园 (cnblogs.com)

展示一下哥们魔改后的样子：

主页：

主题捣鼓日记

主页下拉：

主题捣鼓日记

随笔页面：

主题捣鼓日记

文章页面：

主题捣鼓日记

代码框：

评论框的这个血小板不知道咋搞的。。。

主题捣鼓日记

自己DIY的效果：

打字机：

参考

CSS3 动画 | 菜鸟教程 (runoob.com)

【实战】用CSS实现文本打字机效果_css打字机效果-CSDN博客

主题捣鼓日记

我是用css写的：

自定义的CSS样式里找到这段：

.header-info p {     margin: 0;     font-family: 'Ubuntu', sans-serif;     font-weight: 1800;     overflow: hidden;     text-overflow: ellipsis; } /*创建打字机动画*/ .container {     display: inline-block; }  .typed-out {     overflow: hidden;     border-right: .15em solid orange;     white-space: nowrap;     font-size: 1.6rem;     width: 0;     animation: typing 5s steps(30, end) 1s infinite alternate; }  @keyframes typing {     from {         width: 0     }      to {         width: 100%     } }

main.js文件里找到这段：
```
`  <div class="header-info"><p><div class="container"><div class="typed-out"><i class="fa fa-quote-left"></i> ${config.text} <i class="fa fa-quote-right"></i></div></div></p>` + 
```
加上在css定义的container,typed-out两个样式，改成上面代码的样式即可。

音乐自动播放

在页脚html里找到这段

然后加上选中部分：
```
<script>     let ref = setInterval(function () {         isaplay();     }, 2000);     function isaplay() {         if ($(".aplayer-play").length == 1) {             $(".aplayer-play").click()             clearInterval(ref);         }     } </script> 
```
那个dataid使用网易云外链即可，自己搜搜

自己调试DIY的时候最好还是关了，因为要频繁打开主页

4.22

改了左上角bloglogo 、navlist的背景、submenu，找到了浅色背景图，就藏在css里，果然多看几遍还是找得到的。

阅读模式切换这个还没弄懂，看板娘资源后面再找找，over。

未完待续···