网站LOGO
静若安然
页面加载中
11月11日
网站LOGO 静若安然
记录个人学习生活和成长历程
菜单
  • 静若安然
    记录个人学习生活和成长历程
    用户的头像
    首次访问
    上次留言
    累计留言
    我的等级
    我的角色
    打赏二维码
    打赏博主
    Agron 功能美化
    点击复制本页信息
    微信扫一扫
    文章二维码
    文章图片 文章标题
    创建时间
  • 一 言
    确认删除此评论么? 确认
  • 本弹窗介绍内容来自,本网站不对其中内容负责。

    Agron 功能美化

    Akria · 原创 ·
    wordpress · 博客主题
    共 14018 字 · 约 3 分钟 · 4993
    本文最后更新于2024年02月15日,已经过了269天没有更新,若内容或图片失效,请留言反馈

    年度倒计时显示 (左侧栏)

    • 在左侧栏里添加工具 —— 简码,复制一下代码粘贴进去
    html 代码:
    <div class="progress-wrapper" style="padding: 0">
        <div class="progress-info">
            <div class="progress-label">
                <span id="yearprogress_yearname"></span>
            </div>
            <div id="yearprogress_text_container" class="progress-percentage">
                <span id="yearprogress_progresstext"></span>
                <span id="yearprogress_progresstext_full"></span>
            </div>
        </div>
        <div class="progress">
            <div id="yearprogress_progressbar" class="progress-bar bg-primary"></div>
        </div>
    </div>
    <script no-pjax="">
        function yearprogress_refresh() {
            let year = new Date().getFullYear();
            $("#yearprogress_yearname").text(year);
            let from = new Date(year, 0, 1, 0, 0, 0);
            let to = new Date(year, 11, 31, 23, 59, 59);
            let now = new Date();
            let progress = (((now - from) / (to - from + 1)) * 100).toFixed(7);
            let progressshort = (((now - from) / (to - from + 1)) * 100).toFixed(2);
            $("#yearprogress_progresstext").text(progressshort + "%");
            $("#yearprogress_progresstext_full").text(progress + "%");
            $("#yearprogress_progressbar").css("width", progress + "%");
        }
        yearprogress_refresh();
        if (typeof yearProgressIntervalHasSet == "undefined") {
            var yearProgressIntervalHasSet = true;
            setInterval(function() {
                yearprogress_refresh();
            }, 500);
        }
    </script>
    <style>
        #yearprogress_text_container {
            width: 100%;
            height: 22px;
            overflow: hidden;
            user-select: none;
        }
    
        #yearprogress_text_container>span {
            transition: all 0.3s ease;
            display: block;
        }
    
        #yearprogress_text_container:hover>span {
            transform: translateY(-20px);
        }
    </style>

    动态背景

    • 背景可以通过更改 url 链接设置为自己的动态视频,尽量不要太大,否则别人访问时会刷新许久
    html 代码:
    <video src="https://new.gcxstudio.cn/wp-content/uploads/2022/03/daymode.mp4" /*白天动态视频链接*/ class="bg-video bg-video-day"
        autoplay="" loop="loop" muted=""></video>
    <video src="https://new.gcxstudio.cn/wp-content/uploads/2022/03/darkmode.webm" /*夜间动态视频链接*/
        class="bg-video bg-video-night" autoplay="" loop="loop" muted=""></video>
    <style>
        video.bg-video {
            position: fixed;
            z-index: -1;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            width: 100vw;
            height: 100vh;
            object-fit: cover;
            pointer-events: none;
        }
    
        html.darkmode video.bg-video.bg-video-day {
            opacity: 0;
        }
    
        html.darkmode video.bg-video.bg-video-night {
            opacity: 1;
        }
    
        video.bg-video.bg-video-day {
            opacity: 1;
        }
    
        video.bg-video.bg-video-night {
            opacity: 0;
        }
    
        #banner,
        #banner .shape {
            background: transparent !important;
        }
    
        * {
            font-family: "Comfortaa", "Open Sans", -apple-system, system-ui,
                BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial,
                "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif;
        }
    </style>
    <script src="https://api.gcxstudio.cn/odometer/odometer.min.js"
        integrity="sha256-65R1G5irU1VT+k8L4coqgd3saSvO/Wufson/w+v2Idw=" crossorigin="anonymous"></script>
    
    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
    <script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
    
    <div id='aplayer'></div>

    网站访问数据 (左侧栏)

    1. 进入 Wordpress,点击插件,搜索并且下载 Wp Statistics
    2. 外观 —— 小工具 —— 站点额外内容 —— 旧版小工具 —— 统计

    网站底部信息

    JavaScript(网站运行时间脚本)

    new Date (year, month, date, hrs, min, sec) 按给定的参数创建 日期对象,其中 month 的值域为 0~11,0 代表 1 月,11 表代表 12 月;所以你输入的月份需要为自己真正月份的前一个月

    js 代码:
    <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() {
             var time = new Date() - new Date(2022, 5, 31, 0, 0, 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>

    字体、博客透明等特效

    在 外观 — 自定义 — 额外CSS 中

    css 代码:
    /*=========字体设置============*/
     /*网站字体*/
     /*原则上你可以设置多个字体,然后在不同的部位使用不同的字体。*/
     @font-face {
         font-family: echo;
         src:
             url(https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/fonts/13.woff2) format('woff2')
     }
     body {
         font-family: "echo" !important
     }
     /*横幅字体大小*/
     .banner-title {
         font-size: 2.5em;
     }
     .banner-subtitle {
         font-size: 27px;
     }
     /*文章标题字体大小*/
     .post-title {
         font-size: 25px
     }
     /*正文字体大小(不包含代码)*/
     .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: 25px;
         /* color: rgba(var(--themecolor-rgbstr)); */
     }
     /*尾注字体大小*/
     .additional-content-after-post {
         font-size: 1.2rem
     }
     /* 公告居中 */
     .leftbar-announcement-title {
         font-size: 20px;
         text-align: center;
     }
     .leftbar-announcement-content {
         font-size: 15px;
         line-height: 1.8;
         padding-top: 8px;
         opacity: 0.9;
         text-align: center;
     }
     /* 一言居中 */
     .leftbar-banner-title {
         font-size: 20px;
         display: block;
         text-align: center;
     }
     /* 个性签名居中 */
     .leftbar-banner-subtitle {
         margin-top: 15px;
         margin-bottom: 8px;
         font-size: 13px;
         opacity: 0.8;
         display: block;
         text-align: center;
     }
     /*========颜色设置===========*/
     /*文章或页面的正文颜色*/
     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;
     }
     /*左侧栏搜索框的颜色*/
     button#leftbar_search_container {
         background-color: transparent;
     }
     /*========透明设置===========*/
     /*白天卡片背景透明*/
     .card {
         background-color: rgba(255, 255, 255, 0.8) !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;
     }
     /*顶栏菜单放大*/
     .navbar-nav .nav-link {
         font-size: 1rem;
         font-family: 'echo';
     }
     .navbar-brand {
         color: white !important;
         font-family: 'echo';
         font-size: 1.4rem;
         margin-right: 1rem;
         padding-bottom: .2rem;
     }
     /*菜单大小*/
     .nav-link-inner--text {
         font-size: 1.2em;
     }
     .navbar-nav .nav-item {
         margin-right: 0;
     }
     .mr-lg-5,
     .mx-lg-5 {
         margin-right: 1rem !important;
     }
     .navbar-toggler-icon {
         width: 1.8rem;
         height: 1.8rem;
     }
     /*菜单间距*/
     .navbar-expand-lg .navbar-nav .nav-link {
         padding-right: 2.1em;
         padding-left: 1.em;
     }
     /*隐藏wp-SEO插件带来的线条阴影(不一定要装)*/
     *[style='position: relative; z-index: 99998;'] {
         display: none;
     }
     /* Github卡片样式*/
     .github-info-card-header a {
         /*Github卡片抬头颜色*/
         color: black !important;
         font-size: 1.5rem;
     }
     .github-info-card {
         /*Github卡片文字(非链接)*/
         font-size: 1rem;
         color: black !important;
     }
     .github-info-card.github-info-card-full.card.shadow-sm {
         /*Github卡片背景色*/
         background-color: rgba(var(--themecolor-rgbstr), 0.1) !important;
     }

    博客透明 (根据主题自动)

    添加到页尾脚本里,根据主题色自动透明,透明度可以在 op1、op2、op3….. 那里设置

    js 代码:
    <script>
         function hexToRgb(hex, op) {
             let str = hex.slice(1);
             let arr;
             if (str.length === 3) arr = str.split('').map(d => parseInt(d.repeat(2), 16));
             else arr = [parseInt(str.slice(0, 2), 16), parseInt(str.slice(2, 4), 16), parseInt(str.slice(4, 6), 16)];
             return `rgb(${arr.join(', ')}, ${op})`;
         };
    
         let themeColorHex = getComputedStyle(document.documentElement).getPropertyValue('--themecolor').trim();
         let op1 = 0.6
         let themeColorRgb = hexToRgb(themeColorHex, op1);
         let themecolorGradient = getComputedStyle(document.documentElement).getPropertyValue('--themecolor-gradient') *
             document.documentElement.style.setProperty('--themecolor-gradient', themeColorRgb)
    
         let op2 = 0.8
         // 方法一:
         let colorTint92 = getComputedStyle(document.documentElement).getPropertyValue('--color-tint-92').trim();
         colorTint92 += ', ' + op2;
         document.documentElement.style.setProperty('--color-tint-92', colorTint92)
         // 方法二:(无效)
         // let colorForegroundHex = getComputedStyle(document.documentElement).getPropertyValue('--color-foreground').trim();
         // let colorForeground = hexToRgb(colorForegroundHex,op2)
         // 无效的原因是博客里的--color-fpreground是局部变量,不是:root里的全局变量,所以最好的办法是修改--color-tint-92,这个是全局的
         // document.documentElement.style.setPrope。rty('--color-fpreground',colorForeground)
         // 不要用下面这种cssText这种写法,会导致上面--themecolor-gradient的样式修改失效!
         // document.documentElement.style.cssText = '--color-tint-92:'+colorTint92
    
         let op3 = 0.65
         let colorShade90 = getComputedStyle(document.documentElement).getPropertyValue('--color-shade-90').trim();
         colorShade90 += ', ' + op3;
         document.documentElement.style.setProperty('--color-shade-90', colorShade90)
    
         let op4 = 0.8
         let colorShade86 = getComputedStyle(document.documentElement).getPropertyValue('--color-shade-86').trim();
         colorShade86 += ', ' + op4;
         document.documentElement.style.setProperty('--color-shade-86', colorShade86)
     </script>

    头像自动缩放、高亮 / 暗

    鼠标经过头像时自动缩放、高亮 / 暗

    在 外观 — 自定义 — 额外CSS 中

    css 代码:
    #leftbar_overview_author_image {
    width: 100px;
    height: 100px;
    margin: auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: rgba(127, 127, 127, 0.1);
    overflow: hidden;
    box-shadow: 0 0 5px rgba(116, 8, 204, 0.3);
    transition: transform 0.3s ease; /*变化速度*/
    }
    
    #leftbar_overview_author_image:hover {
    transform: scale(1.2); /*缩放大小*/
    filter: brightness(150%); /*调节亮度*/
    }

    点击头像 / 姓名跳转相关页面

    在 外观 — 主题文件编辑器 中,选择 边栏文件(sidebar.php)

    点击 头像 跳转大概在第 126 行左右,

    添加链接标签,其中链接改为想要跳转的地方

    html 代码:
    <div class="tab-pane fade text-center<?php if ($nowActiveTab == 1) { echo ' active show'; }?>" id="leftbar_tab_overview" role="tabpanel" aria-labelledby="leftbar_tab_overview_btn">
    <a href="地址">
    <div id="leftbar_overview_author_image" style="background-image: ........ 
    <a/>

    点击 姓名 跳转则是 130 行左右

    添加地址标签

    html 代码:
    <a href="https://www.liveout.cn/about/">
    <h6 id="leftbar_overview_author_name"><?php echo get_option('argon_sidebar_auther_name') == '' ? bloginfo('name') : get_option('argon_sidebar_auther_name'); ?> </h6>
    <a/>
    声明:本文由 Akria(博主)原创,依据 CC-BY-NC-SA 4.0 许可协议 授权,转载请注明出处。

    还没有人喜爱这篇文章呢

    我要发表评论 我要发表评论
    博客logo 静若安然 记录个人学习生活和成长历程 51统计 百度统计
    ICP 蜀ICP备2023037012号-1

    💻️ Akria 昨天 17:15 在线

    🕛

    本站已运行 7 年 77 天 20 小时 12 分
    静若安然. © 2017 ~ 2024.
    网站logo

    静若安然 记录个人学习生活和成长历程