开始

CSS更改

样式参考

成果参考

1
文件目录:myblog\themes\yilia\source\main.0cf68a.css
1
2
3
4
5
6
7
8
9
10
11
左边侧边栏
.left-col{
侧边栏菜单
.left-col #header .profilepic(头像)
.left-col #header .header-menu(主页菜单)
.left-col #header .header-smart-menu(所有文章等项目菜单)
#header .header-nav .social(社交按钮菜单)
自己添加部分
#header .header-nav .music(网易云音乐)
#poem_sentence(每日一句诗歌)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
右侧文章(註：在2194行)
.article{
文章区域右上角日期
.archive-article-date
文章标题
.article-inner h1.article-title,.article-title
文章右下角展开全文
.article-more-link a
文章下方分割线
.article-info-index.article-info
文章中超链接
.article-entry a
}
回到顶部按钮
.mod-side-operation__jump-to-top .icon-back
.jump-container:hover .icon-back
1
2
3
4
5
6
7
8
9
10
颜色渐变动画
@keyframes gradientBG
淡出淡入动画
@keyframes load_music
横拉动画
@keyframes before_Load_Left_col
@keyframes after_Load_Left_col
缩放动画
@keyframes before_load_article
@keyframes after_load_arricle
1
2
3
4
手机端首部背景
#mobile-nav .overlay
手机端部分设置
@media screen and (max-width:800px)
打字效果
抖动效果
边框动画
鼠标点击出现爱心效果
雪花飘落效果

BUG

1. Chrome浏览器访问显示三个滚动条

1
调整::-webkit-scrollbar选择器display:none，Chrome浏览器一个滚动条也没有

2. 文章标题抖动

在CSS文件的选择器.article-inner h1.article-title,.article-title添加抖动功能,但出现以整一行中心为锚点抖动的情况
目前处理办法(改变锚点)

1
transform-origin: 5%;

已解决

1
display:flex->display: inline-flex;

3. 每日一句功能

侧边栏部分

1
2
yilia\layout\_partial\left-col.ejs(26-40);
CSS:width: 21ch;->???

页脚部分(可不进行修改)

1
yilia\layout\_partial\footer.ejs(10-11);

4. 添加隐藏侧边栏功能

参考文章:秦时明月之君临天下
问题在于JavaScript代码无法获取对于CSS选择器
原代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
    var hide = false;
    function myFunction(x) {
        x.classList.toggle("change");
        if(hide == false){
            $(".left-col").css('display', 'none');
            $(".mid-col").css("left", 6);
            $(".tools-col").css('display', 'none');
            $(".tools-col.hide").css('display', 'none');
            hide = true;
        }else{
            $(".left-col").css('display', '');
            $(".mid-col").css("left", 300);
            $(".tools-col").css('display', '');
            $(".tools-col.hide").css('display', '');
            hide = false;
        }
    }
</script>

改代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
    var hide = false;
    function myFunction(x) {
        x.classList.toggle("change");
        if(hide == false){
        document.getElementsByClassName("left-col")[0].style.display="none";
        document.getElementsByClassName("mid-col")[0].style.left="6";
        document.getElementsByClassName("tools-col")[0].style.display="none";
        document.getElementsByClassName("hide")[1].style.display="none";
            hide = true;
        }else{
        document.getElementsByClassName("left-col")[0].style.display="block";
        document.getElementsByClassName("mid-col")[0].style.left="300";
        document.getElementsByClassName("tools-col")[0].style.display="block";
        document.getElementsByClassName("hide")[1].style.display="block";
            hide = false;
        }
    }
</script>

改完问题在于document.getElementsByClassName(“hide”)[1]无法获取CSS选择器
查看网页源代码发现.tools-col.hide类对应HTML代码如下

1
<div class="tools-col" q-class="show:isShow,hide:isShow|isFalse" q-on="click:stop(e)"></div>

仍然无法解决…

结束