首页 > 其他分享 >Argon 主题美化

Argon 主题美化

时间:2024-07-29 09:54:47浏览次数:8  
标签:color 主题 blog Argon important background border 美化 4px

页脚

在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">[email protected]</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%); /*调节亮度*/
}

参考文章

标签:color,主题,blog,Argon,important,background,border,美化,4px
From: https://blog.csdn.net/m0_58749949/article/details/140763295

相关文章

  • “星光领航”志愿服务队开展“品读红色经典”主题支教活动
    “星光领航”志愿服务队开展“品读红色经典”主题支教活动为提升学生们的综合素质,培养学生们的爱国主义精神,7月26日山东建筑大学“星光领航”志愿服务队前往唐官小区开展“品读红色经典,发扬爱国主义精神”为主题的支教活动。团队成员......
  • 7.26 Dp 主题赛 赛后总结
    T1T1看上去就很板,开场后有几个人一直在说话导致我心烦意乱,加上Sorato和Psm很快就切掉,可我确一直没有思路,所以开始的时候很慌。后来冷静下来仔细思考一下,首先注意到数据范围允许\(O(n^2)\)的dp,不难想到设置一个这样的dp状态,\(f[i]\)表示将区间\([1,i]\)变成美丽的所需的最小花......
  • 网站源码教育机构pbootcms模板网页设计主题
    教育机构的网站设计分享我很高兴向大家介绍我刚刚制作的教育机构的网站设计。友好的站点界面,是打动访客的第一步。教育机构网站的主题网站设计旨在向访客展示机构的专业性、教学质量以及服务内容,同时提供一个用户友好的界面,使访客能够轻松地获取所需信息、进行互动和报名。以......
  • 【HTML+CSS】CSS字体美化:打造引人入胜的视觉盛宴
    目录一、选择合适的字体1.1Web安全字体1.2自定义字体二、字体样式调整2.1字体大小与行高2.2字体粗细与斜体2.3字体颜色三、文本装饰与布局3.1文本阴影3.2文本换行与对齐3.3文本装饰线四、字体美化实战案例 在网页设计中,字体不仅仅是文字信息的载体,更是......
  • typecho仿某度响应式主题Xaink
    新闻类型博客主题,简洁好看,适合资讯类、快讯类、新闻类博客建站,响应式设计,支持明亮和黑暗模式直接下载zip源码->解压后移动到Typecho主题目录->改名为xaink->启用。演示图: 下载链接: typecho仿某度响应式主题Xaink红客社区:客户端下载-红客网络编程与渗透技术......
  • Jetpack Compose学习(12)——Material Theme的主题色切换
    原文:JetpackCompose学习(12)——MaterialTheme的主题色切换-Stars-One的杂货小窝闲着无事研究了下JetpackComposeM3主题切换效果本系列以往文章请查看此分类链接Jetpackcompose学习如何生成主题首先,我们需要知道的是,M3有提供个在线网站供开发者进行快速生成主题,......
  • 网站源码装饰公司pbootcms模板网页设计主题
    装饰公司的网站设计分享我很高兴向大家介绍我刚刚制作的装饰公司的网站设计。友好的站点界面,是打动访客的第一步。装饰公司网站的主题网站设计通常需要考虑多个方面,以确保网站能够有效地展示公司形象、吸引潜在客户并提升业务。以下是对装饰公司网站主题设计的详细介绍:一、......
  • markdown主题
    流行主题https://bndong.github.io/Cnblogs-Theme-SimpleMemory/v2.1/dist/reference/configs.htmhttps://esofar.github.io/cnblogs-theme-silence/#/showcasehttps://github.com/cnbloglabs/awescnb?tab=readme-ov-filehttps://github.com/Zou-Wang/CNblogs-Theme-S......
  • 389.权志龙明星主题网页 大学生期末大作业 Web前端网页制作 html5+css+js
    欢迎光临仙女的网页世界!这里有Web前端网页制作的各行各业的案例,样式齐全新颖,并持续更新!感谢CSDN,提供了这么好的知识学习、技术交流的平台,让我们在这里相遇,小伙伴们,来吧,让我们一起开启Web前端网页制作的奇妙之旅!说起Web前端,大学开启这扇技术之门以来,一切起始于兴趣爱好和......
  • hexo fluid主题折腾
    如何下载fluid主题hexo5.0以上的版本,直接npm安装:npminstall--savehexo-theme-fluid安装好之后,在博客目录下创建_config.fluid.yml,将主题_config.yml的内容复制进去。以后如果修改任何主题配置,都直接修改_config.fluid.yml就好,因为它的配置优先级是高于原_config.yml的。......