argon主题优化

字体设置

字体可以在字体天下、100font等网站里免费下载。通过转换网站获得woff2格式文件。你可以上传到网站根目录或者某个CDN里，然后添加下列额外CSS（具体方法见下）：

/*设置网站字体*/
/*原则上你可以设置多个字体，然后在不同的部位使用不同的字体*/
@font-face{
    font-family:btfFont;
    src: url(https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/fonts/13.woff2) format('woff2')
}
body{
    font-family:"btfFont" !important
}

这里展示所用的13.woff2是汉唐仪美人体，它并不是免费商用字体。个人博客毕竟是公开的，最好还是使用免费商用字体，以免未来有版权纠纷。

文字输入撒花特效

在 页尾脚本 加入代码：

<!--网站输入效果开始-->
<script src="https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/js/input-with-fire.js"></script>

Wordpress网站底部设置网站已运行时间

方法一：

在footer.php中添加以下代码

function momxc() {
var birthDay =NewDate("2023-10-10");//开始时间
var today=new Date();
var timeold=today.getTime()-birthDay.getTime();
var sectimeold=timeold/1000
var secondsold=Math.floor(sectimeold);
var msPerDay=24*60*60*1000; var e_daysold=timeold/msPerDay;
var daysold=Math.floor(e_daysold);
var e_hrsold=(daysold-e_daysold)*-24;
var hrsold=Math.floor(e_hrsold);
var e_minsold=(hrsold-e_hrsold)*-60;
var minsold=Math.floor((hrsold-e_hrsold)*-60); var seconds=Math.floor((minsold-e_minsold)*-60).toString();
document.getElementById("momk").innerHTML = "本站已安全运行："+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒<br>";
setTimeout(momxc, 1000);
}momxc();
</script>
<style>
#momk{animation:change 10s infinite;font-weight:800; }
@keyframes change{0%{color:#5cb85c;}25%{color:#556bd8;}50%{color:#e40707;}75%{color:#66e616;}100% {color:#67bd31;}}
</style>
<?php printf(' | 耗时 %.3f 秒 | 查询 %d 次 | 内存 %.2f MB |',timer_stop( 0, 3 ),get_num_queries(),memory_get_peak_usage() / 1024 / 1024);?><br>

方法二：

添加到 页尾内容 （注意不要添加到页尾脚本里去了）
注意：new Date (year, month, date, hrs, min, sec) 按给定的参数创建 日期对象
其中 month 的值域为 0～11，0 代表 1 月，11 表代表 12 月；所以你输入的月份需要为自己真正月份的前一个月

<style>
/* 核心样式 */
.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;
}
</style>

<div class="github-badge-big">
        <span class="badge-subject"><i class="fa fa-clock-o"></i> Running Time</span><span
            class="badge-value bg-apricots"><span id="blog_running_days" class="odometer odometer-auto-theme"></span>
            days
            <span id="blog_running_hours" class="odometer odometer-auto-theme"></span> H
            <span id="blog_running_mins" class="odometer odometer-auto-theme"></span> M
            <span id="blog_running_secs" class="odometer odometer-auto-theme"></span>S
        </span>

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

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

在左侧栏里添加工具 —— 简码，复制一下代码粘贴进去

<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(-45px);
}
</style>

动态背景设置

视频不要太大，避免网页加载慢

<video
src="link" /*白天动态视频链接*/
class="bg-video bg-video-day"
autoplay=""
loop="loop"
muted=""
></video>
<video
src="link" /*夜间动态视频链接*/
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;
}

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

左侧作者栏设置(在 外观 — 自定义 — 额外CSS 中)

• 在后台外观 –> 主题文件编辑器 处找到边栏 (sidebar.php) 文件，大概87行，标签里的站点概览改成个人简介就可以（或者直接trl+F快速定位）

头像自动缩放、高亮 / 暗

在额外 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(110%); /*调节亮度*/
}

作者名称

在额外 CSS 中加入以下代码：

/* 作者名称 */
#leftbar_overview_author_name {
margin-top: 15px;
font-size: 18px;align-content;
color:#FFA500;
}

作者名称自动缩放

在额外 CSS 中加入以下代码：

/* 作者名称自动缩放 */
#leftbar_overview_author_name {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    transition: transform 0.3s ease; /*变化速度*/
}
#leftbar_overview_author_name:hover {
    transform: scale(1.2); /*缩放大小*/
    filter: brightness(110%); /*调节亮度*/
}

个人简介

在额外 CSS 中加入以下代码：

/* 简介 */
#leftbar_overview_author_description {
font-size: 14px;
margin-top: -4px;
opacity: 0.8;
color:#7E79E2;
}

主题背景透明

方法一

添加到 页尾脚本 里，根据主题色自动透明，透明度可以在 op1、op2、op3….. 那里设置
如何修改透明度（透明度变量说明）：

• op1——“白天”状态主题色透明度
• op2——“白天”状态卡片颜色透明度
• op3——“夜间”状态卡片颜色透明度

• op4——“夜间”状态主题色透明度
  动手改一下4个op变量的数值试一试，你会明白他们的含义的！

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

  .card{
  background-color:rgba(255, 255, 255, 0.8) !important;
  -webkit-backdrop-filter:blur(6px);
  }
  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;
  }
  .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;
  }

本栏目推荐文章
• 如何给shopify motion主题的产品系列添加description
• Flutter Getx 中的Dialog 以及改变主题
• Typora 掘金小册主题
• shopify motion主题如何更换视频
• 界面组件DevExpress WPF v23.2 - 更轻量级的主题支持
• Shopify motion主题404页面的修改
• uniapp实现背景颜色跟随图片主题色变化（多端兼容）
• 博客园主题皮肤汇总记录（持续更新...）
• 一些好看的博客园主题
• MQTT：主题和主题通配符

主题 argon主题argon argon2 argon 主题 主题曲 主题 博客 jupyter主题 主题wpf 主题活动 主题css