| wordpress中argon主题的美化+插件 | 您所在的位置：网站首页 › apricots音乐 › wordpress中argon主题的美化+插件 |
|
年度倒计时显示 (左侧栏)
注意：以下使用的前端资源均可在360静态资源前端库中找到 文章来源，感谢作者提供的优质作品，本人仅在此基础上少做了修改 在左侧栏里添加工具 —— 简码，复制一下代码粘贴进去 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); } #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(-45px); } 底部音乐播放下面的调用链接可能会突然失效，如有需要可参考官方文档 APlayer HTML5 音乐播放器 | ACE-BLOG (ace520.github.io) server="netease" 指定音乐平台为网易云，type="song" 指单曲类型，id="7373135320" 为音乐的 id（这里的 id 为打开音乐歌单，网址显示的 id） 开启吸底模式 fixed="true", 开启迷你模式 mini="true", 随机播放 order="random", 关闭底部歌词 lrc-type="0" 注意：id 需要为自己创建的歌单，不能为我喜欢的音乐；server 可以改自己用的音乐平台，如 netease (网易云)、tencent (QQ 音乐) 具体参数设置点击此链接：https://yy.liveout.cn/article/Learn/front-end/aplayer%E5%8F%82%E6%95%B0.png Aplayer 播放器官网文档：APlayer HTML5 音乐播放器 | ACE-BLOG (ace520.github.io) 动态背景 (视频资源失效可以换自己的，使用视频的时候记得压缩一下) 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; } 虚拟人物 (看板娘)以下代码选择一项复制即可，效果不同，自行选择 具体文章：stevenjoezhang/live2d-widget: 把萌萌哒的看板娘抱回家 (ノ≧∇≦) ノ | Live2D widget for web platform (github.com) 方法一 方法二其中 jsonpath: 后面的链接可按自己爱好更改，选择别的虚拟人物 L2Dwidget.init({ "model": { //jsonpath控制显示那个小萝莉模型， //(切换模型需要改动) // "https://unpkg.com/(live2d-widget-model-koharu)@1.0.5/assets/(koharu).model.json" jsonPath: "https://unpkg.com/[email protected]/assets/koharu.model.json", "scale": 1 }, "display": { "position": "right", //看板娘的表现位置 "width": 75, //小萝莉的宽度 "height": 150, //小萝莉的高度 "hOffset": 0, "vOffset": -20 }, "mobile": { "show": true, "scale": 0.5 }, "react": { "opacityDefault": 0.7, "opacityOnHover": 0.2 } }); /* 小帅哥： https://unpkg.com/[email protected]/assets/chitose.model.json 萌娘：https://unpkg.com/[email protected]/assets/shizuku.model.json 白猫：https://unpkg.com/[email protected]/assets/tororo.model.json 黑猫： https://unpkg.com/[email protected]/assets/hijiki.model.json 小可爱（女）：https://unpkg.com/[email protected]/assets/koharu.model.json 小可爱（男）：https://unpkg.com/[email protected]/assets/haruto.model.json 初音：https://unpkg.com/[email protected]/assets/miku.model.json 圣职者妹妹：https://unpkg.com/[email protected]/assets/z16.model.json 茶杯犬：https://cdn.jsdelivr.net/npm/[email protected]/assets/wanko.model.json 绿毛妹妹：https://unpkg.com/[email protected]/assets/tsumiki.model.json 金龟子妹妹：https://unpkg.com/[email protected]/assets/unitychan.model.json https://unpkg.com/[email protected]/assets/nito.model.json https://unpkg.com/[email protected]/assets/ni-j.model.json 小阿狸： https://unpkg.com/[email protected]/assets/nico.model.json https://unpkg.com/[email protected]/assets/nietzche.model.json https://unpkg.com/[email protected]/assets/nipsilon.model.json 女学生： https://unpkg.com/[email protected]/assets/hibiki.model.json */ 网站底部信息 css样式表 /* 核心样式 */ .github-badge { display: inline-block; border-radius: 4px; text-shadow: none; font-size: 13.1px; color: #fff; line-height: 15px; margin-bottom: 5px; font-family: "Open Sans", sans-serif; } .github-badge .badge-subject { display: inline-block; background-color: #4d4d4d; padding: 4px 4px 4px 6px; border-top-left-radius: 4px; border-bottom-left-radius: 4px; font-family: "Open Sans", sans-serif; } .github-badge .badge-value { display: inline-block; padding: 4px 6px 4px 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; font-family: "Open Sans", sans-serif; } .github-badge-big { display: inline-block; border-radius: 6px; text-shadow: none; font-size: 14.1px; color: #fff; line-height: 18px; margin-bottom: 7px; } .github-badge-big .badge-subject { display: inline-block; background-color: #4d4d4d; padding: 4px 4px 4px 6px; border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .github-badge-big .badge-value { display: inline-block; padding: 4px 6px 4px 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .bg-orange { background-color: #ec8a64 !important; } .bg-red { background-color: #cb7574 !important; } .bg-apricots { background-color: #f7c280 !important; } .bg-casein { background-color: #dfe291 !important; } .bg-shallots { background-color: #97c3c6 !important; } .bg-ogling { background-color: #95c7e0 !important; } .bg-haze { background-color: #9aaec7 !important; } .bg-mountain-terrier { background-color: #99a5cd !important; } html（底部信息） 备案号 苏ICP备1234567890号| 苏公网安备 32072212344321号 CDN Upyun Powered WordPress Copyright 2022-2023 @ Echo Running Time days H M S JavaScript（网站运行时间脚本）注意：new Date (year, month, date, hrs, min, sec) 按给定的参数创建 日期对象 其中 month 的值域为 0～11，0 代表 1 月，11 表代表 12 月；所以你输入的月份需要为自己真正月份的前一个月 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); } 博客自定义 CSS 样式 博主的设置参考上面友情链接，以下为我的额外 CSS，涉及字体、透明等博客样式 在 外观 — 自定义 — 额外CSS 中 ps: 字体链接需要上传到云端调用才能生效 /*网站字体*/ /*原则上你可以设置多个字体，然后在不同的部位使用不同的字体。*/ @font-face{ font-family:echo; src:url(https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/fonts/13.woff2) format('woff2') font-weight:400； unicode-range: U+1f1e9-1f1f5; font-display:swap; } body{ font-family: 'echo', Georgia, -apple-system, 'Nimbus Roman No9 L', 'PingFang SC', 'Hiragino Sans GB', 'Noto Serif SC', 'Microsoft Yahei', 'WenQuanYi Micro Hei', 'ST Heiti', sans-serif } /*横幅字体大小*/ .banner-title { font-size: 2.5em; } .banner-subtitle{ font-size: 28px; -webkit-text-fill-color: transparent; background: linear-gradient(94.75deg,rgb(60, 172, 247) 0%,rgb(131, 101, 253) 43.66%, rgb(255, 141, 112) 64.23%,rgb(247, 201, 102) 83.76%,rgb(172, 143, 100) 100%); -webkit-background-clip: text; } /*文章标题字体大小*/ .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; */ color: #00FFFF } .leftbar-announcement-content { font-size: 15px; line-height: 1.8; padding-top: 8px; opacity: 0.8; /* text-align: center; */ color:#00FFFF; } /* 一言居中 */ .leftbar-banner-title { font-size: 20px; display: block; text-align: center; opacity: 0.8; } /* 个性签名居中 */ .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; } /*顶栏菜单放大*/ /*这里也可以设置刚刚我们设置的btfFont字体。试试看！*/ .navbar-nav .nav-link { font-size: 1rem; font-family: 'echo'; } .navbar-brand { font-family: 'echo'; font-size: 1.2rem; margin-right: 1.0 rem; padding-bottom: 0.2 rem; -webkit-text-fill-color: transparent; background: linear-gradient(94.75deg,rgb(60, 172, 247) 0%,rgb(131, 101, 253) 43.66%, rgb(255, 141, 112) 64.23%,rgb(247, 201, 102) 83.76%,rgb(172, 143, 100) 100%); -webkit-background-clip: text; } /*菜单大小*/ .nav-link-inner--text { font-size: 1.25em; } .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: 1.4em; padding-left: 1.4em; } /*隐藏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; } /* 左侧栏外观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; transition: transform 0.3s ease; } /* 头像亮暗 */ #leftbar_overview_author_image:hover { transform: scale(1.23); filter: brightness(150%); } /* 名称 */ #leftbar_overview_author_name { margin-top: 15px; font-size: 18px;align-content; color:#00FFFF; } /* 简介 */ #leftbar_overview_author_description { font-size: 14px; margin-top: -4px; opacity: 0.8; color:#c21f30; } /* 标题，链接等 */ a, .btn-neutral { color:#AF7AC5 ; } /* 页脚透明 */ #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; } 根据主题自动透明添加到页尾脚本里，根据主题色自动透明，透明度可以在 op1、op2、op3….. 那里设置 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) 头像缩放或亮暗鼠标经过头像时自动缩放、高亮 / 暗 外观—自定义—额外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%); /*调节亮度*/ } 评论头像显示外观—主题文件编辑器 中的 function 模板函数添加此代码 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 ); } 插件合集 网站访问数据 (左侧栏)进入 Wordpress，点击插件，搜索并且下载 Wp Statistics 外观 —— 小工具 —— 站点额外内容 —— 旧版小工具 —— 统计 评论 IP 地址以下根据体验自己选择 WP-UserAgent | kyleabaker.com WordPress 展示评论者地理位置插件 Easy Location WP Githuber MD 神中神，把wordpress的编辑器换成marckdown |
| CopyRight 2018-2019 实验室设备网 版权所有 |