Document

Argon 主题美化

2024-07-30
dfer
178
javascript html css CSDN

页脚

在Argon主题选项的页脚内容中添加如下内容

<div class="github-badge-big">
	<span class="badge-subject"><i class="fa fa-id-card"></i> 备案号 </span>
	<span class="badge-value bg-orange">
	<!-- 备案链接 -->
	<a href="https://beian.miit.gov.cn/" target="_blank" one-link-mark="yes">  豫ICP备xxxxxxxxxx号-1  </a>
	</span>
</div>

<!-- 联系我 -->
<div class="github-badge-big">
	<span class="badge-subject"><i class="fa fa-envelope-o" aria-hidden="true"></i> 联系我 </span>
	<span class="badge-value bg-red">88888888@qq.com</span>
</div>

<!-- 运行时间 -->
<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>天
	<span id="blog_running_hours" class="odometer odometer-auto-theme"></span> 小时
	<span id="blog_running_mins" class="odometer odometer-auto-theme"></span> 分钟
	<span id="blog_running_secs" class="odometer odometer-auto-theme"></span>秒
	</span>
</div>

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

<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(2024, 1, 1, 0, 0, 0); /*此处日期的月份对应0-11*/
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 添加：

/* 公告栏 */
#leftbar_announcement{
background: var(--themecolor-gradient) !important;
}
/* 统计数据 */
#wp_statistics_widget-2{
background-color:transparent!important;
}
/* 倒计时 日历 标签云 */
#block-10,#block-12,#block-15{
	background-color:transparent!important;
}
/* 页脚 */
#footer{
background: var(--themecolor-gradient) !important
}

第二步，在 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>

第三步，修改透明度（透明度变量说明）：

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

修改对应的数值即可

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

鼠标外观

鼠标外观在 footer.php 里加入这个代码即可：

<!--鼠标指针特效2 开始-->
<style type="text/css">
.main-content img,body{cursor:url(https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/mouse/halo-dream/cursor/breeze/Arrow.cur),auto}.actions>div,.expand-done,.main-content figure>figcaption div,.navbar-above .navbar-nav .item,.navbar-searchicon,.navbar-slideicon,.photos .picture-details,.widget .ad-tag .click-close,a,button{cursor:url(https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/mouse/halo-dream/cursor/breeze/Hand.cur),auto}blockquote,code,h1,h2,h3,h4,h5,h6,hr,input[type=text],li,p,td,textarea,th{cursor:url(https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/mouse/halo-dream/cursor/breeze/IBeam.cur),auto}
</style>
<!--鼠标指针特效2 结束-->

文章引文属性设置

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

/*引文属性设置*/
blockquote {
    /*添加弱主题色为背景色*/
    background: rgba(var(--themecolor-rgbstr), 0.13) !important;
    width: 100%
}
/*引文颜色 建议用主题色*/
:root {
    /*也可以用类似于--color-border-on-foreground-deeper: #009688;这样的命令*/
    --color-border-on-foreground-deeper: rgba(var(--themecolor-rgbstr));
}

网站字体

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

我这里使用的字体是文鼎PL简中楷

/*设置网站字体*/
/*原则上你可以设置多个字体，然后在不同的部位使用不同的字体*/
@font-face{
    font-family:btfFont;
    src: url(https://blog.long-code.cn/125.woff2) format('woff2')
}
body{
    font-family:"btfFont" !important
}

菜单前图标

Argon 主题内置了 Font Awesome 4.7.0 图标库

我们可以直接在图标库里挑选自己需要的图标

比如：首页

<i class="fa fa-home" aria-hidden="true"></i> 首页

顶部菜单栏放大

外观 - 自定义 - 额外 CSS

 .navbar-nav .nav-link {
font-size: 1rem;
}
.navbar-brand {
font-size: 1.5rem;
margin-right: 1rem;
padding-bottom: .2rem;
}
.navbar-nav .nav-item {
margin-right:0;
}
.navbar-expand-lg .navbar-nav .nav-link {
padding-right: 0.9rem;
padding-left: 1rem;
}

友人帐

页面

新建一个页面，标题为友人帐
在页面中添加一个简码
简码中输入如下内容 friendlinks/，外面加上中括号
修改页面的固定链接 friendlinks
将该页面加入菜单 <i class="fa fa-link"></i> 友人帐
该页面的其他内容根据个人情况自行设计即可

添加友链

后台菜单栏 -> 链接 -> 添加链接
填写对应的内容后，点击添加就ok了

文字输入撒花特效

在footer.php末尾 </body> 上方加入代码

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

特效

在footer.php末尾 </body> 上方加入代码

页面特效

雪花特效

$.getScript("https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/js/xiaxue.js");

樱花特效

$.getScript("https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/js/yinghua.js");

鼠标点击

小烟花

$.getScript("https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/js/mouse-click.js");

大烟花

$.getScript("https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/mouse/mouse-click-02/mouse-canvas.js");

鼠标移动

仙女棒

$.getScript("https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/mouse/halo-dream/fairyDustCursor.min.js");

泡泡

$.getScript("https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/mouse/joe/censor10.js");

汇总

<!--全页特效开始-->
<script src="https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/js/mobile-detect.js"></script>
<script type="text/javascript">
    // 设备检测
    var md = new MobileDetect(window.navigator.userAgent);
    // PC生效，手机/平板不生效
    // md.mobile(); md.phone();
    if(!md.phone()){
        if(!md.tablet()){
            // 雪花
            // 樱花
            // 小烟花特效
            // 大烟花特效
            document.write('<style>#mouse-canvas {z-index:217483647; pointer-events: none;  box-sizing: border-box !important; display: block !important; position: fixed !important; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100vh;}</style>')
            // 鼠标移动的仙女棒特效
            // 鼠标移动的泡泡特效
        }
    }
</script>
<!--全页特效结束-->

左侧作者栏样式

在额外 css 中添加如下代码

作者名称

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

作者名称自动缩放

/* 作者名称自动缩放 */
#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%); /*调节亮度*/
}

简介

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

站点概览分隔线颜色修改

/*站点概览分隔线颜色修改*/
.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;
}

头像自动缩放

/* 头像自动缩放、高亮 / 暗 */
#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%); /*调节亮度*/
}

参考文章

上一篇： nginx处理php

下一篇： css——层叠样式，