首页 > 其他分享 >主题捣鼓日记

主题捣鼓日记

时间:2024-04-22 23:55:05浏览次数:13  
标签:自定义 主页 博客园 主题 打字机 捣鼓 日记 css

主题捣鼓日记

sakura版本(YYDS)

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

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

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

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

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

主页:

image-20240422003911062

主页下拉:

image-20240422004124929

随笔页面:

image-20240422004016679

文章页面:

image-20240422004249151

代码框:

image-20240422004308323

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

image-20240422005202908

自己DIY的效果:

  1. 打字机:

    参考

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

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

打字机效果

我是用css写的:

  1. 自定义的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%
    }
}
  1. 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里找到这段image-20240422011937937

    然后加上选中部分:

    <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。

    未完待续···

二期cute-ncblogs

作者原来就写的挺好的其实,这也是我第一个找到的自定义主题,一顿魔改之后,发现改不太明白。。。不过有了这个练手,后面的sakura稍微好一些了。

要说缺点,只是觉得很多东西局促在右下角展开栏里,这一点不太好。

原作者:cute-cnblogs 自定义博客园样式美化二期来啦~ - 麋鹿鲁哟 - 博客园

因为整了半天没往下弄了,就贴几个图纪念一下。

主页:

image-20240421012418213

image-20240421012735850

文章观感:

image-20240421012957592

标签:自定义,主页,博客园,主题,打字机,捣鼓,日记,css
From: https://www.cnblogs.com/7dragonpig/p/18148560

相关文章

  • 九下四月下旬日记
    4.21闲话做题纪要4.22闲话做题纪要luoguP1494[国家集训队]小Z的袜子设\([l,r]\)内每个数出现的次数为\(cnt_{i}\),有\(\begin{aligned}\frac{\sum\limits_{i=1}^{\max\limits_{j=1}^{n}\{c_{j}\}}\binom{cnt_{i}}{2}}{\binom{r-l+1}{2}}\end{aligned}\)......
  • 日记
    2024/4/21#include<stdio.h>voidf(doublea,doubleb,doublec,double*max){  *max=a;  intarr[3]={a,b,c};  for(inti=0;i<3;i++){    if(*max<arr[i])*max=arr[i];  }}intmain(){  doublea=0.0,b=0.0,c=0.0;  doublemax_1=0......
  • burpsuite使用深色主题暗色主题[保姆姬教程,方便快捷]
    点开burpsuite后点右上角的齿轮,在弹出的新窗口的搜索框搜索'theme',然后点'dark'.具体如图成了PS:我在网上搜burp改暗色主题,全是一大堆要么一上来吹水,要么得下插件的麻烦的教程,我跟着教程搞了一会儿才发现burp自带个暗色主题.于是写下这篇随笔.......
  • 日记
    2024.4.19#include<stdio.h>voiddot(intarr[6][6],int*num,int*row,int*col){ intc=0; intc_1=0; for(inti=1;i<=5;i++){ for(intj=1;j<=5;j++){ for(intp=1;p<=5;p++){ if(arr[i][j]<=arr[p][j]){ c++; } } if(c==5)......
  • 组会日记
    2024-4-18日记大的方向:看完一篇论文!!1.puncturedcode:为什么每一个locallity都要捎带着提一下puncturedcode呢?每一个码都一定有locality属性,但是可能很差,我们需要一个衡量的标准,那么怎么来定义这个标准呢,就是通过punctured来定义,因为punctured是截断的,我们可以通过截断,来判断该......
  • 打造心灵栖息地:YY日记App——原型设计分享
    YY日记App是一个专为年轻人打造的心灵日记应用,旨在提供一个私密、个性化的日记记录平台。在本篇博客中,我将分享我对YY日记App的原型设计思路和实现过程。一、用户研究  在设计YY日记App的原型之前,我进行了深入的用户研究,明确了目标用户群体为年轻人,他们希望有一个简洁易用、......
  • 团队开发日记第二篇
    今天进行了站立会议,主要讨论了整个项目的工作分配和关键技术点......
  • NLP自然语言处理—主题模型LDA案例:挖掘人民网留言板文本数据|附代码数据
    全文链接:http://tecdat.cn/?p=2155最近我们被客户要求撰写关于NLP自然语言处理的研究报告,包括一些图形和统计输出。随着网民规模的不断扩大,互联网不仅是传统媒体和生活方式的补充,也是民意凸显的地带。领导干部参与网络问政的制度化正在成为一种发展趋势,这种趋势与互联网发展的时......
  • NLP自然语言处理—主题模型LDA回归可视化案例:挖掘智能门锁电商评价数据
    全文链接:http://tecdat.cn/?p=2175早在1995年比尔·盖茨就在《未来之路》里说过:未来没有配套智能家居的房子,就是毛坯房。现在人们生活越来越便捷,人们也更加倾向于智能化家居,当你还在纠结“人工智能”安利值不值得吃,最近不少朋友家里又出现智能门锁,相比传统门锁来说,究竟能有多智能......
  • 日记
    2024.4.15#include<stdio.h>voidf(intarr[][5],intnum_1,intnum_2){for(intj=0;j<5;j++){inttemp=arr[num_1-1][j];arr[num_1-1][j]=arr[num_2-1][j];arr[num_2-1][j]=temp;}}i......