Wordpress博客Argon主题美化

AI智能摘要

文章主要围绕博客美化的代码分享与提醒初心主旨两方面展开。作者分享了多个适用于博客优化的代码插件，包括主题下载、鼠标特效、动态背景、头像效果、音乐播放器、雪花动画和背景透明设置等，并提供相关的资源链接和设置说明。同时，强调博客美化不应过度，应以优质内容为核心，提醒读者不要因追求外表而忘却初衷。文章建议保持初心，让美化服务于博客内容本身，从而实现真实与专注的创作价值。

— 此摘要由AI分析文章内容生成，仅供参考。

一、前言

常言道：工欲善其事必先利其器，在发表文章前，美化博客，使其利于自己的观看与管理极其重要，所以我四处搜寻，得到了以下美化代码。但是，有时候我们走得太远，会忘了为什么出发。希望阅览本文章的人不要忘记初心，想想一开始为什么搭建博客。我相信大部分朋友都是为了记录自己学习笔记，生活故事。所以，有时候博客美化过度会适得其反，望各位仔细斟酌，莫要使自己的博客变成了花架子，好的文章才是博客之本，立足之根。

二、Agron主题下载

百度网盘：https://pan.baidu.com/s/1T5sttrL7dpwdEYmK_NPKgQ?pwd=cubp 提取码：cubp

三、主页动态背景

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

四、左侧栏头像特效

#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%); /*调节亮度*/
}

五、菜单标题图像设置

Fontawesome中文网地址：https://fontawesome.com.cn/v5

<i class="fa fa-wordpress"><i/>标签的名字

六、博客背景透明特效

/*白天卡片背景透明*/
.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,
#custom_html-2 {
	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;
}

七、全局字体设置

/字体/
@font-face {
font-family: myFont;
src:url(https://img.crowya.com/font/FZFWZZAY.woff2) format('woff2');
font-display: swap;
}

body,
.nav-link-inner--text {
font-family: myFont;
}

.navbar-brand {
font-size: 1.25rem;
font-weight: 100;
margin-right: 2rem;
padding-bottom: .1rem;
}

八、主页标题缩放特效

/* 标题缩放 */
.banner-title{
	transition: .8s cubic-bezier(.2,.8,.2,1);
}
.banner-title:hover {
	transform:scale(1.4) translateY(-50%);
}

九、哔哩哔哩教程

十、总结

目前这些就是我用到的全部优化博客的代码了，以后有新的美化想法或者代码的化也会及时的发布出来，更多的美化内容可以去这个博客看看

总的来说，我们会在追求完美和美化过程中迷失了自己的初衷。重要的是记住我们开始时的动机和目标，并确保我们的行动与之保持一致。

对于网页设计或其他创作领域而言，美化是一个重要的方面，但不应成为我们放弃原始意图的理由。我们应该谨记初衷，将美化作为实现初衷的手段，而不是目的。

保持初衷的重要性体现在多个方面。它可以帮助我们保持真实性，确保我们所做的与我们的价值观和信念一致。它还能够让我们保持专注，避免过度修饰而使事物变得复杂和混乱。此外，初衷还能为我们提供方向和动力，使我们在遇到挑战和困难时保持坚持和奋斗的勇气。

因此，在进行任何创作或决策时，请时刻回顾自己的初衷，并确保所做的选择与之相符。不要让过度追求美化而迷失自己，而是用美化去支持和加强初衷，让它更好地展现出来。

本站名称：Eucalyptus

转载请注明来源：Eucalyptus-WordPress博客Argon主题美化

本站文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行核实删除。

本站资源大多存储在云端，如发现链接失效，请联系站长，站长会第一时间更新。

WordPress博客Argon主题美化