Argon主题优化教程 | 安云网

发表评论
468 次浏览

A+

背景主题色半透明

博客透明特效：在不改变主题色的前提下，将卡片等事物的背景透明化（可以自己更改透明度）

第一步，在自定义 -> 额外 css 添加：

#leftbar_announcement {background: var(--themecolor-gradient) !important;
}
#footer{background: var(--themecolor-gradient) !important
}

这串代码可以避免 footer 部分和博客公告也被透明，会影响阅读

第二步，在 Argon 主题选项 -> 脚本 的 页尾脚本 添加下面的脚本：

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

这段代码用来修改主题透明度

该代码来自大佬：芥子空间文章

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

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

该代码来自大佬：Freecho 文章

banner 下方小箭头滚动效果

打开 外观 -> 主题文件编辑器
在右侧 主题文件 处找到 主题页眉（header.php 文件）
在第 439 行找到：

 <div class="cover-scroll-down">

将这个 div 代码块中的内容（也就是原本的 <i> 标签）用下面的代码替换：

<i class="fa fa-angle-down" aria-hidden="true" id="pointer1"></i><i class="fa fa-angle-down" aria-hidden="true" id="pointer2"></i><i class="fa fa-angle-down" aria-hidden="true" id="pointer3"></i>

接着，在 自定义 -> 额外 css 添加如下代码：

@keyframes up-down-move {
0% {
opacity:0;
transform:translate(-50%,-150px); 
}
50% {
opacity:1;
transform:translate(-50%,-130px); 
}
100% {
opacity:0;
transform:translate(-50%,-110px); 
}
}
 
.cover-scroll-down .fa-angle-down{
font-size: 3rem;
text-shadow: 0px 0px 8px #dc1111;
position:absolute;
transform: translate(-50%,-80px);
opacity:0;
}
 
.cover-scroll-down #pointer1{animation: up-down-move 3s linear infinite;}
 
.cover-scroll-down #pointer2{animation: up-down-move 3s 1s linear infinite;}
 
.cover-scroll-down #pointer3{animation: up-down-move 3s 2s linear infinite;}

该代码来自大佬：芥子空间文章

网站标题字体彩色霓虹效果

在 自定义 -> 额外 css 中添加：

@keyframes ColdLight {
0%{background-position: 0%;}
100%{background-position: 200%;}
}
.banner-title{
position: absolute;
background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
background-size:200%;
animation: ColdLight 3s linear infinite;
color:transparent !important;
-webkit-background-clip: text;
}
 
.banner-title::before {
content: '';
position: absolute;
top: 0;
left: 50%;
bottom: 0;
right: 0;
transform:translatex(-50%);
max-width:500px;
z-index: -100;
background:white;
filter: blur(30px);
opacity: 0.5;
}
.banner-title .banner-title-inner{
position:relative;
background:inherit;
}
.banner-title .banner-subtitle{
position:relative;
background:inherit;
}

顶部导航栏

在 自定义 -> 额外 css 中添加：

.navbar-brand img {height: 60px;}

该代码来自大佬：芥子空间文章

动态背景

背景可以通过更改 url 链接设置为自己的动态视频 ， 尽量不要太大，否则别人访问时会刷新许久 ，也可以使用我搭建的外链云盘： 云盘链接

<video
src123="https://new.gcxstudio.cn/wp-content/uploads/2022/03/daymode.mp4" /* 白天动态视频链接 */
class="bg-video bg-video-day"
autoplay=""loop="loop"muted=""
></video>
<video
src123="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
src123="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 src123="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
 
<div id='aplayer'></div>

这条代码可以放在 fooer.php 中

虚拟人物 (看板娘)

官网文档：文档

<script src123="https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>

其中 jsonpath: 后面的链接可按自己爱好更改，选择别的虚拟人物：

<script src123="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<script>
    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
        }
    });
</script>
  /*   小帅哥：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 */

该代码来自大佬：Freecho 文章

评论区定位插件

该插件可用来定位发布评论的人位置，小到市区，大到国家。

下载地址：

github 链接蓝奏云链接

我的微信
这是我的微信扫一扫

我的微信公众号
我的微信公众号扫一扫

背景主题色半透明

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

banner 下方小箭头滚动效果

网站标题字体彩色霓虹效果

顶部导航栏

动态背景

虚拟人物 (看板娘)

评论区定位插件

发表评论取消回复

登录 找回密码

登录找回密码