添加Aplayer音乐播放器与样式魔改

添加aplayer

argon后台——脚本

参数修改参考 aplayer官方文档

<!----- 音乐播放器 ---->
<link rel="stylesheet" href="https://img.kshar.cn/js/APlayer.min.css">
<script src="https://img.kshar.cn/js/APlayer.min.js"></script>
<script src="https://img.kshar.cn/js/Meting.min.js"></script>
<meting-js 
    server="netease" 
    type="playlist" 
    id="8475517540"
    fixed="true" 
    mini="true"
    volume="1"
    lrc-type="0"
    order="random"
    loop="all"
    preload="auto"
    list-folded="false">
</meting-js>
<!--------  音乐播放器完 ------------>

魔改aplayer

外观——自定义——额外css

/* ===== 音乐播放器 css =====*/
@media (max-width: 200px) {
    /* Aplayer音乐标签伸缩 */
    .aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
      left: -66px !important;
      /* 默认情况下缩进左侧66px，只留一点箭头部分 */
    }
   
    .aplayer.aplayer-fixed.aplayer-narrow .aplayer-body:hover {
      left: 0 !important;
      /* 鼠标悬停是左侧缩进归零，完全显示按钮 */
    }
  }
  /* Aplayer日间模式调整 */
  /* 背景色 */
  .aplayer {
    background: rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.07), 0 1px 5px 0 rgba(0, 0, 0, 0.1);
    position: relative;
  }
   
  .aplayer.aplayer-fixed .aplayer-lrc:after,
  .aplayer.aplayer-fixed .aplayer-lrc:before {
    display: none;
  }
   
  .aplayer.aplayer.aplayer-fixed .aplayer-body {
    background: rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.07), 0 1px 5px 0 rgba(0, 0, 0, 0.1);
    position: fixed;
  }
  /* 滚动条 */
  .aplayer .aplayer-list ol::-webkit-scrollbar {
    width: 5px;
  }
  /* HTML 底部音乐播放器 */
  .aplayer-body {
      padding-right: 0!important;
  }
  
  .aplayer.aplayer-fixed .aplayer-lrc {
      top: 70px!important;
      right: 10px!important;
      text-align: right!important
  }
  
  .aplayer.aplayer-fixed {
      background-color: #0000 !important;
  }
  
  .aplayer.aplayer-fixed .aplayer-body {
      bottom: 10px!important;
      left: 20px!important;
      background: #fffa!important;
      border-radius: 10px;
      backdrop-filter: blur(10px);
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      -ms-border-radius: 10px;
      -o-border-radius: 10px;
      border: 1px solid var(--lyx-border)!important;
      box-shadow: var(--heo-shadow-border);
      width: 284px!important
  }
  
  .aplayer-info {
      border-top: none!important
  }
  
  [data-theme=dark] .aplayer.aplayer-fixed .aplayer-body {
      bottom: 10px!important;
      left: 10px!important;
      background: #0008!important;
      border-radius: 10px;
      backdrop-filter: blur(10px);
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      -ms-border-radius: 10px;
      -o-border-radius: 10px;
      color: #fff!important
  }
  
  .aplayer.aplayer-fixed .aplayer-body:hover {
      border: 1px solid var(--lyx-theme)!important;
      box-shadow: 0 0 3px var(--lyx-theme)!important
  }
  
  .aplayer-pic {
      border-radius: 10px;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      -ms-border-radius: 10px;
      -o-border-radius: 10px
  }
  
  [data-theme=dark] .aplayer .aplayer-info .aplayer-music .aplayer-author,[data-theme=dark] .aplayer .aplayer-info .aplayer-controller .aplayer-time {
      color: #fff!important
  }
  
  .aplayer.aplayer-fixed .aplayer-list {
      border: none!important
  }
  
  .aplayer .aplayer-pic {
      transform: translate(-1px);
      -webkit-transform: translateX(-1px);
      -moz-transform: translateX(-1px);
      -ms-transform: translateX(-1px);
      -o-transform: translateX(-1px)
  }
  
  .aplayer.aplayer-fixed .aplayer-list {
      background-color: var(--lyx-white-acrylic1);
      transform: translate(100px,-20px);
      width: 200px;
      border-radius: 10px;
      backdrop-filter: blur(10px);
      -webkit-transform: translate(100px,-20px);
      -moz-transform: translate(100px,-20px);
      -ms-transform: translate(100px,-20px);
      -o-transform: translate(100px,-20px)
  }
  
  [data-theme=dark] .aplayer.aplayer-fixed .aplayer-list {
      background-color: var(--lyx-black-acrylic1)!important
  }
 
  .aplayer.aplayer-fixed .aplayer-icon-lrc {
      display: none!important
  }
  
  .aplayer .aplayer-miniswitcher {
      height: 40%!important;
      left: 290px;
      border-radius: 8px!important;
      -webkit-border-radius: 8px!important;
      -moz-border-radius: 8px!important;
      -ms-border-radius: 8px!important;
      -o-border-radius: 8px!important;
      top: 20px!important;
      }
  
  .aplayer-narrow .aplayer-miniswitcher {
      position: fixed!important;
      left: 300px!important;
      bottom: 10px!important;
      height: 26px!important
  }
  .aplayer-fixed.aplayer-narrow .aplayer-body {
      transition: all 1s;
      transform: translate(-300px);
      -webkit-transform: translateX(-300px);
      -moz-transform: translateX(-300px);
      -ms-transform: translateX(-300px);
      -o-transform: translateX(-300px);
      -webkit-transition: all 1s;
      -moz-transition: all 1s;
      -ms-transition: all 1s;
      -o-transition: all 1s
  }
/* ===== 音乐播放器 css 完 ===== */

魔改代码来自 Jming

文章与说说鼠标悬停3D效果

argon后台——脚本

<!-----------鼠标悬停3D效果start---------->
<!--1.定义对象属性（似乎没生效）-->
<div class="article.post:not(.post-full)" data-tilt></div>
<div class=".shuoshuo-preview-container" data-tilt></div>
<!--2.JS脚本-->
<script src="https://img.kshar.cn/js/3dkp.js"></script> <!--如果你没有引用过mobile-detect.js，请去除这里的注释以使其生效-->
<script type="text/javascript" src="https://img.kshar.cn/js/3dkp2.js"></script>
<!--3.动作-->
<script type="text/javascript">
    // 设备检测。依赖前述mobile-detect项目。
    var md = new MobileDetect(window.navigator.userAgent);
    // PC生效，手机/平板不生效
    // md.mobile(); md.phone(); 
    if(!md.phone() && !md.tablet()){
        window.pjaxLoaded = function(){
            // 正文卡片
            VanillaTilt.init(document.querySelectorAll("article.post:not(.post-full)"),{
                reverse:false,  // 是否反转倾斜方向
                max:2,     // 最大的倾斜角度(度)
                startX:0,      // X轴上的起始倾斜，单位为度。
                startY:0,      // Y轴上的起始倾斜，单位为度。
                perspective:1000,   // 转换角度，越低倾斜越极端
                scale:1.02,      // 缩放比例,2 = 200%, 1.5 = 150%, 等等..
                speed:300,    // 进入/退出 过渡的速度
                transition:true,   // 是否在进入/退出的时候设置过渡效果
                axis:"y",   // 设置禁用哪个轴的反转,值为"x"或者"y"或者null
                reset:true,   // 设置在退出时清除倾斜效果
                easing:"cubic-bezier(.03,.98,.52,.99)",    // 设置进入退出时过渡的贝塞尔曲线
                glare:true,// 设置是否拥有炫光效果,即透明度渐变效果
                "max-glare":0.7,      // 设置最大的透明效果,1=100%,0.5=50%
                "glare-prerender":false,  // false, VanillaTilt为你创建透明炫光元素,否则你需要自己在.jstilt-glare>.js-tilt-glare-inner中自己添加render函数
                "mouse-event-element":null,   // css选择器或者链接到HTML的元素,他将监听该元素上的鼠标事件
                "full-page-listening":false,  // 是否监听整个页面的鼠标移动事件,若为true,他将监听这个页面,而非选中元素
                gyroscope:false,   // 是否开启陀螺仪的方向检测
                gyroscopeMinAngleX: 0,  //陀螺仪最小角度X
                gyroscopeMaxAngleX: 0,  //陀螺仪最大角度X
                gyroscopeMinAngleY: 0,  //陀螺仪最小角度
                gyroscopeMaxAngleY: 0,  //陀螺仪最大角度
                gyroscopeSamples: 10  //陀螺仪样品
            })
            // 说说卡片
            VanillaTilt.init(document.querySelectorAll(".shuoshuo-preview-container"),{
                reverse:false,  // 是否反转倾斜方向
                max:2,     // 最大的倾斜角度(度)
                startX:0,      // X轴上的起始倾斜，单位为度。
                startY:0,      // Y轴上的起始倾斜，单位为度。
                perspective:1000,   // 转换角度，越低倾斜越极端
                scale:1.02,      // 缩放比例,2 = 200%, 1.5 = 150%, 等等..
                speed:300,    // 进入/退出 过渡的速度
                transition:true,   // 是否在进入/退出的时候设置过渡效果
                axis:"y",   // 设置禁用哪个轴的反转,值为"x"或者"y"或者null
                reset:true,   // 设置在退出时清除倾斜效果
                easing:"cubic-bezier(.03,.98,.52,.99)",    // 设置进入退出时过渡的贝塞尔曲线
                glare:true,// 设置是否拥有炫光效果,即透明度渐变效果
                "max-glare":0.7,      // 设置最大的透明效果,1=100%,0.5=50%
                "glare-prerender":false,  // false, VanillaTilt为你创建透明炫光元素,否则你需要自己在.jstilt-glare>.js-tilt-glare-inner中自己添加render函数
                "mouse-event-element":null,   // css选择器或者链接到HTML的元素,他将监听该元素上的鼠标事件
                "full-page-listening":false,  // 是否监听整个页面的鼠标移动事件,若为true,他将监听这个页面,而非选中元素
                gyroscope:false,   // 是否开启陀螺仪的方向检测
                gyroscopeMinAngleX: 0,  //陀螺仪最小角度X
                gyroscopeMaxAngleX: 0,  //陀螺仪最大角度X
                gyroscopeMinAngleY: 0,  //陀螺仪最小角度
                gyroscopeMaxAngleY: 0,  //陀螺仪最大角度
                gyroscopeSamples: 10  //陀螺仪样品
            })
        }
        $(window.pjaxLoaded);
        $(document).on('pjax:end', window.pjaxLoaded); 
    }
</script>
<!--------------鼠标悬停3D效果end-------->

页脚内容

argon后台——页脚

<!------------备案信息及又拍云-------------->
<div class="github-badge-big">
<span class="badge-subject"><i class="fa fa-copyright" aria-hidden="true"></i> </span>
        <span>2024</i>
            <a href="https://kshar.cn/" target="_blank" one-link-mark="yes">柠檬茶
        </span>
</div>
<div class="github-badge-big">
<!-- 备案链接 -->
<a href="https://beian.miit.gov.cn/" target="_blank" one-link-mark="yes">鄂ICP备2024058901号</a>
</div>
<div class="github-badge-big">
      <span class="badge-subject"><i class="fa fa-cloud" aria-hidden="true"></i> CDN & 云存储</span>
      <span class="badge-value bg-shallots">
<!-- 又拍云链接 -->
            <a href="https://www.upyun.com/" target="_blank" one-link-mark="yes">又拍云</a>
       </span>
</div>

<!--------运行时间开始------------->
<div>已运行 <span id="blog_running_days" class="odometer"></span> 天 <span id="blog_running_hours" class="odometer"></span> 时 <span id="blog_running_mins" class="odometer"></span> 分 <span id="blog_running_secs" class="odometer"></span> 秒 </div>
<script no-pjax>
var blog_running_days=document.getElementById("blog_running_days");
var blog_running_hours=document.getElementById("blog_running_hours");
var blog_running_mins=document.getElementById("blog_running_mins");
var blog_running_secs=document.getElementById("blog_running_secs");
function refresh_blog_running_time(){
    //此处月份要-1，因为JS中Date月份从0开始算
    //2023.1.11开始运行
    var time = new Date() - new Date(2023,06,10, 10, 30, 0);
    var d=parseInt(time/24/60/60/1000);
    var h=parseInt(time%(24*60*60*1000)/60/60/1000);
    var m=parseInt(time%(60*60*1000)/60/1000);
    var s=parseInt(time%(60*1000)/1000);
    blog_running_days.innerHTML=d;
    blog_running_hours.innerHTML=h;
    blog_running_mins.innerHTML=m;
    blog_running_secs.innerHTML=s;
}
refresh_blog_running_time();
if (typeof(bottomTimeIntervalHasSet) == "undefined"){
    var bottomTimeIntervalHasSet = true;
    setInterval(function(){refresh_blog_running_time();},500);
}
</script>
<!---------运行时间完------------------->

将Gravatar头像服务替换为Cravatar

解决wordpress评论头像显示问题

外观——主题文件编辑器——function.php文件里添加

if ( ! function_exists( 'get_cravatar_url' ) ) {
    /**
    *  将Gravatar头像服务替换为Cravatar
    * @param string $url
    * @return string
    */
    function get_cravatar_url( $url ) {
        $sources = array(
            'www.gravatar.com',
            '0.gravatar.com',
            '1.gravatar.com',
            '2.gravatar.com',
            'secure.gravatar.com',
            'cn.gravatar.com'
        );
        return str_replace( $sources, 'cravatar.cn', $url );
    }
    add_filter( 'um_user_avatar_url_filter', 'get_cravatar_url', 1 );
    add_filter( 'bp_gravatar_url', 'get_cravatar_url', 1 );
    add_filter( 'get_avatar_url', 'get_cravatar_url', 1 );
}

css美化代码合集

外观——自定义——额外css

/*隐藏左移按钮*/
#fabtn_toggle_sides{display:none;}
/*左侧栏头像自动缩放*/
#leftbar_overview_author_image:hover{
	transform: scale(1.2);
	filter: brightness(150%);
}
/*隐藏左侧栏搜索框*/
.leftbar-menu {display: none;}
.leftbar-search-button {display: none;}
#leftbar_part2_inner:before {display: none;}
@media screen and (min-width: 900px){
	.leftbar-banner {
	border-radius: var(--card-radius);
	}
}
/*=========字体设置============*/
/*原则上你可以设置多个字体，然后在不同的部位使用不同的字体。*/
/*字体*/
@font-face {
	font-family: myFont;
src:url(https://img.kshar.cn/js/FZFWZZAY.woff2) format('woff2');
	font-display: swap;
}
body{
    font-family:"myFont" !important
}
/*设置加粗字体颜色*/
strong {
    /*白天*/
    color: #A7727D;
}
html.darkmode strong {
    /*夜晚*/
    color: #FAAB78;
}
/*说说预览模式的代码字体颜色*/
pre {
    /*白天*/
    color: #A7727D;
}
html.darkmode pre {
    /*夜晚*/
    color: #FAAB78;
}
/*横幅字体大小*/
.banner-title {
  font-size: 2.2em;
}
.banner-subtitle{
  font-size: 20px;
}
 
/*文章标题字体大小*/
.post-title {
    font-size: 22px
}
 
/*正文字体大小（不包含代码）*/
.post-content p{
    font-size: 1.25rem;
}
li{
    font-size: 1.2rem;
}
 
/*评论区字体大小*/
p {
    font-size: 1.2rem
}
 
/*评论发送区字体大小*/
.form-control{
    font-size: 1.2rem
}
 
/*评论勾选项目字体大小*/
.custom-checkbox .custom-control-input~.custom-control-label{
    font-size: 1.2rem
}
/*评论区代码的强调色*/
code {
  color: rgba(var(--themecolor-rgbstr));
}
 
/*说说字体大小和颜色设置*/
.shuoshuo-title {
    font-size: 20px;
/*  color: rgba(var(--themecolor-rgbstr)); */
}
 
/*尾注字体大小*/
.additional-content-after-post{
    font-size: 1.2rem
}
 
/*========颜色设置===========*/
 
/*文章或页面的正文颜色*/
body{
    color:#364863
}
 
/*引文属性设置*/
blockquote {
    /*添加弱主题色为背景色*/
    background: rgba(var(--themecolor-rgbstr), 0.1) !important;
    width: 100%
}
 
/*引文颜色 建议用主题色*/
:root {
    /*也可以用类似于--color-border-on-foreground-deeper: #009688;这样的命令*/
    --color-border-on-foreground-deeper: rgba(var(--themecolor-rgbstr));
}
 
/*左侧菜单栏突出颜色修改*/
.leftbar-menu-item > a:hover, .leftbar-menu-item.current > a{
    background-color: #f9f9f980;
}
 
/*站点概览分隔线颜色修改*/
.site-state-item{
    border-left: 1px solid #aaa;
}
.site-friend-links-title {
    border-top: 1px dotted #aaa;
}
#leftbar_tab_tools ul li {
    padding-top: 3px;
    padding-bottom: 3px;
    border-bottom:none;
}
html.darkmode #leftbar_tab_tools ul li {
    border-bottom:none;
}

/*========透明设置===========*/
 
/*白天卡片背景透明*/
.card{
    background-color:rgba(255, 255, 255, 0.85) !important;
    /*backdrop-filter:blur(6px);*//*毛玻璃效果主要属性*/
    -webkit-backdrop-filter:blur(6px);
}
 
/*小工具栏背景完全透明*/
/*小工具栏是card的子元素，如果用同一个透明度会叠加变色，故改为完全透明*/
.card .widget,.darkmode .card .widget,#post_content > div > div > div.argon-timeline-card.card.bg-gradient-secondary.archive-timeline-title{
    background-color:#ffffff00 !important;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
}
.emotion-keyboard,#fabtn_blog_settings_popup{
    background-color:rgba(255, 255, 255, 0.95) !important;
}
 
/*分类卡片透明*/
.bg-gradient-secondary{
    background:rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter:blur(10px);
}
 
/*夜间透明*/
html.darkmode.bg-white,html.darkmode .card,html.darkmode #footer{
    background:rgba(66, 66, 66, 0.9) !important;
}
html.darkmode #fabtn_blog_settings_popup{
    background:rgba(66, 66, 66, 0.95) !important;
}
 
/*标签背景
.post-meta-detail-tag {
    background:rgba(255, 255, 255, 0.5)!important;
}*/
/*========排版设置===========*/
 
/*左侧栏层级置于上层*/
#leftbar_part1 {
    z-index: 1;
}
/*分类卡片文本居中*/
#content > div.page-information-card-container > div > div{
    text-align:center;
}
 
/*子菜单对齐及样式调整*/
.dropdown-menu .dropdown-item>i{
    width: 10px;
}
.dropdown-menu>a {
    color:var(--themecolor);
}
.dropdown-menu{
    min-width:max-content;
}
.dropdown-menu .dropdown-item {
    padding: .5rem 1.5rem 0.5rem 1rem;
}
.leftbar-menu-subitem{
    min-width:max-content;
}
.leftbar-menu-subitem .leftbar-menu-item>a{
    padding: 0rem 1.5rem 0rem 1rem;
}
 
/*左侧栏边距修改*/
.tab-content{
    padding:10px 0px 0px 0px !important;
}
.site-author-links{
    padding:0px 0px 0px 10px ;
}
/*目录位置偏移修改*/
#leftbar_catalog{
    margin-left: 0px;
}
/*目录条目边距修改*/
#leftbar_catalog .index-link{
    padding: 4px 4px 4px 4px;
}
/*左侧栏小工具栏字体缩小*/
#leftbar_tab_tools{
    font-size: 14px;
}
 
/*正文图片边距修改*/
article figure {margin:0;}
/*正文图片居中显示*/
.fancybox-wrapper {
    margin: auto;
}
/*正文表格样式修改*/
article table > tbody > tr > td,
article table > tbody > tr > th,
article table > tfoot > tr > td,
article table > tfoot > tr > th,
article table > thead > tr > td,
article table > thead > tr > th{
    padding: 8px 10px;
    border: 1px solid;
}
/*表格居中样式*/
.wp-block-table.aligncenter{margin:10px auto;}
 
/*回顶图标放大*/
button#fabtn_back_to_top, button#fabtn_go_to_comment, button#fabtn_toggle_blog_settings_popup, button#fabtn_toggle_sides, button#fabtn_open_sidebar{
    font-size: 1.2rem;
}
 
/*顶栏菜单*/
/*这里也可以设置刚刚我们设置的btfFont字体。试试看！*/
.navbar-nav .nav-link {
    font-size: 1.2rem;
    font-family: 'myFont';
}
.nav-link-inner--text {
    /*顶栏菜单字体大小*/
    font-size: 1.2rem;
}
.navbar-nav .nav-item {
    margin-right:0;
}
.mr-lg-5, .mx-lg-5 {
    margin-right:1rem !important;
}
.navbar-toggler-icon {
    width: 1.5rem;
    height: 1.5rem;
}
.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 0.9rem;
    padding-left: 1rem;
}
 
/*顶栏图标*/
.navbar-brand {
    font-family: 'Noto Serif SC',serif;
    font-size: 1.25rem;
    /*顶栏图标边界微调*/
    margin-right: 15rem; /*左右偏移*/
    padding-bottom: 0.3rem;
}
.navbar-brand img { 
  /* 图片高度*/
    height: 24px;
}
 
/*隐藏wp-SEO插件带来的线条阴影（不一定要装）*/
*[style='position: relative; z-index: 99998;'] {
    display: none;
}

/* 页脚透明 */
#footer {
    background: var(--themecolor-gradient);
    color: #fff;
    width: 100%;
    float: right;
    margin-bottom: 25px;
    text-align: center;
    padding: 25px 20px;
    line-height: 1.8;
    transition: none;
    opacity: 0.6;
}