为了避免对原主题造成破坏性影响,所做的美化几乎都是按照wordpress和Argon主题提供的方案进行。
只有极个别“改动范围小、直接改源文件会方便很多很多、几乎不可能破坏原主题”的样式美化才改动了主题源文件
背景主题色半透明
在不改变主题色的前提下,将卡片等事物的背景透明化(可以自己更改透明度)
- 第一步,在 自定义->额外css 添加:
#leftbar_announcement { background: var(--themecolor-gradient) !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——“夜间”状态主题色透明度
动手改一下4个op变量的数值试一试,你会明白他们的含义的!
字体
网站字体样式
- 字体来源:可以到 100font.com、字体天下 进行下载
- 转换字体文件:前往 TTF to WOFF2 将字体文件转换问woff2格式
- 存放文件:转换后的字体文件,可以可以选则存放到你自己的网站文件目录下面,或者某个CDN当中
- 修改css:最后只需要在网站的 自定义->额外css 中添加字体样式即可,如下所示
/*设置网站字体*/ @font-face{ font-family:btfFont; src: url(https://blog.hongshaoyv.com/font/jyhphy-2.woff2) format('woff2') } body{ font-family:"btfFont" !important }
解释:
上面的css代码中,我在url中写的是我自己存放字体文件的位置,我将字体文件存放在服务器,并利用nginx定位到它。
我在css中将此字体命名为“btFont”,并将它应用在“body”范围内。
网站标题字体彩色霓虹效果
在 自定义->额外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; }
顶部导航栏
左上角图片大小
.navbar-brand img { height: 60px; }
自己设置一个喜欢的值即可
左上角图片和右侧文字的间距
.mr-lg-5, .mx-lg-5 { margin-right: 1rem !important; }
自己修改成合适的间距即可
菜单项间距调整
如果你的菜单项不太多(5、6个左右),那么基本不需要额外设置此样式;反之,你可能会因为菜单项过多而造成拥挤,建议手动设置间距。
在 自定义->额外css 中添加:
.navbar-expand-lg .navbar-nav .nav-link { padding-right: 0.5rem; padding-left: 0.5rem; }
自己调到合适的值即可
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; }
便携性优化
点击文章摘要可以跳转文章详情
点击文章封面可以跳转文章详情
作者请问一下这个评论显示ip属地使用了哪个插件ovo
主题自带的,有个开关,无需额外下载
左侧个人信息栏的文章超链接怎么做的感谢
位置处于:控制台->外观->菜单
你需要做的:
大佬好,关于这个背景透明的,我用了你给的脚本,效果达到了,但是公告栏出了点问题,就是在夜间模式公告栏颜色没有从主题色变回深灰色,还是日间模式的主题色,而把脚本删了就不会这样了。
这有点不太好定位问题,检查一下代码copy的正确性?或者回忆一下是否此前对相关样式做过其他修改,导致“覆盖”?
你好,请问你的问题解决了没,我也出现了这种情况
博主,请问字体如何更改?先谢谢了
还有,请问这个显示浏览器的插件是什么?谢谢啦![](data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iZW1vdGlvbi1sb2FkaW5nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9Ii04IC04IDQwIDQwIiBzdHJva2U9IiM4ODgiIG9wYWNpdHk9Ii41IiB3aWR0aD0iNjAiIGhlaWdodD0iNjAiPgogIDxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik0xNC44MjggMTQuODI4YTQgNCAwIDAxLTUuNjU2IDBNOSAxMGguMDFNMTUgMTBoLjAxTTIxIDEyYTkgOSAwIDExLTE4IDAgOSA5IDAgMDExOCAweiIvPgo8L3N2Zz4=)
这个在Argon主题选项中:评论->评论区->评论者 UA 显示,选择“平台+浏览器”
谢谢了!
字体样式已经修改已经加到文章中,之前遗漏了|´・ω・)ノ
老哥 这个用来展示代码的是什么?
主题自带的代码高亮
博主,你顶部导航栏上的子菜单卡片是怎么弄成透明的呀?就是比如指针停留在教程的时候,下面的子菜单卡片,我的是纯白色底的不是透明的
我没有刻意的改变过子菜单卡片的透明度,本文提到的“背景主题色半透明”是我唯一改变博客主题透明度的地方,所以多半是子菜单卡片继承了其中的透明度改动。😳
感谢佬的回答~已经解决啦,原来是我透明度拉太低了导致看起来不透明哈哈哈
你们背景图片都是哪里搞得? 我的放进去不是自动拉伸就是糊的一批
我的背景图是平时保存的图片,担心拉伸的话,你可以直接按照屏幕比例裁剪图片
OK 还有一个问题 站主你写写代码得快的放大效果怎么做的?
没太明白你的意思,详细一点?
我这个是使用了Argon主题模版。
如果你想自己实现一个,原理其实非常简单(前提是有一定的前端代码基础):
大佬,你博客首页进入能完全显示背景,下滑才到博客内容,这个怎么搞的。
全屏,banel
内容有点多,后面慢慢补![](data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iZW1vdGlvbi1sb2FkaW5nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9Ii04IC04IDQwIDQwIiBzdHJva2U9IiM4ODgiIG9wYWNpdHk9Ii41IiB3aWR0aD0iNjAiIGhlaWdodD0iNjAiPgogIDxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik0xNC44MjggMTQuODI4YTQgNCAwIDAxLTUuNjU2IDBNOSAxMGguMDFNMTUgMTBoLjAxTTIxIDEyYTkgOSAwIDExLTE4IDAgOSA5IDAgMDExOCAweiIvPgo8L3N2Zz4=)
第二步,在 Argon主题选项->脚本 的 页尾脚本 添加下面的脚本:不知道在哪里 麻烦告知一下
已经解决
解决了就好👌,最近没注意消息(:з」∠)