Argon主题美化

为了避免对原主题造成破坏性影响,所做的美化几乎都是按照wordpress和Argon主题提供的方案进行。

只有极个别“改动范围小、直接改源文件会方便很多很多、几乎不可能破坏原主题”的样式美化才改动了主题源文件


背景主题色半透明

在不改变主题色的前提下,将卡片等事物的背景透明化(可以自己更改透明度)

  1. 第一步,在 自定义->额外css 添加:
    #leftbar_announcement {
    background: var(--themecolor-gradient) !important;
    }
    #footer{
    background: var(--themecolor-gradient) !important
    }
  2. 第二步,在 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变量的数值试一试,你会明白他们的含义的!


字体

网站字体样式

借鉴跳转

  1. 字体来源:可以到 100font.com字体天下 进行下载
  2. 转换字体文件:前往 TTF to WOFF2 将字体文件转换问woff2格式
  3. 存放文件:转换后的字体文件,可以可以选则存放到你自己的网站文件目录下面,或者某个CDN当中
  4. 修改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下方小箭头滚动效果

这是目前唯一一个改动了主题源文件的样式美化

  1. 打开 外观->主题文件编辑器
  2. 在右侧 主题文件 处找到 主题页眉(header.php文件)
  3. 在第 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>
  4. 接着,在 自定义->额外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;
    }

便携性优化

点击文章摘要可以跳转文章详情

点击文章封面可以跳转文章详情

 

感谢观看!欢迎联系或留言!
码字不易!若想转载,请标明来源——
- 文章:Argon主题美化
- 作者:北冥红烧鱼
- 链接:https://blog.hongshaoyv.com/argon-beautification/

公众号:北冥IT鱼


我的字节跳动校招内推码:7Z39RAF
👉点击这里即刻投递!!!

评论

  1. 博主
    Android Chrome
    1年前
    2023-2-17 4:02:32

    内容有点多,后面慢慢补

    来自北京
    • duaoxun
      北冥红烧鱼
      Windows Edge
      5月前
      2023-12-01 16:44:00

      第二步,在 Argon主题选项->脚本 的 页尾脚本 添加下面的脚本:不知道在哪里 麻烦告知一下

      来自江苏
      • duaoxun
        duaoxun
        Windows Edge
        4月前
        2023-12-11 8:57:52

        已经解决

        来自江苏
        • 博主
          duaoxun
          Android Chrome
          4月前
          2023-12-12 12:13:50

          解决了就好👌,最近没注意消息(:з」∠)

          来自北京
  2. 白雨
    Windows Edge
    12月前
    2023-4-26 23:11:08

    大佬,你博客首页进入能完全显示背景,下滑才到博客内容,这个怎么搞的。

    来自山东
    • 我没耳机
      白雨
      Android Chrome
      9月前
      2023-7-19 18:50:13

      全屏,banel

      来自新疆
  3. 博主
    Macintosh Chrome
    已编辑
    12月前
    2023-4-28 0:03:27

    我这个是使用了Argon主题模版。
    如果你想自己实现一个,原理其实非常简单(前提是有一定的前端代码基础):

    1. 固定网站页面背景(脱离普通流,可以用position:fixed),避免上下滑动
    2. 在页面普通流排版中,让一个块级元素占据100vh高度,这个块级元素你可以放置任何东西,比如博客名称
    3. 剩下的内容可以继续往下排列就行
    来自北京
  4. 唐晓白
    Windows Edge
    11月前
    2023-5-25 9:26:42

    你们背景图片都是哪里搞得? 我的放进去不是自动拉伸就是糊的一批

    来自辽宁
    • 博主
      唐晓白
      Macintosh Chrome
      已编辑
      11月前
      2023-5-26 11:48:20

      我的背景图是平时保存的图片,担心拉伸的话,你可以直接按照屏幕比例裁剪图片

      来自上海
      • 唐晓白
        北冥红烧鱼
        Windows Edge
        11月前
        2023-5-29 14:14:55

        OK 还有一个问题 站主你写写代码得快的放大效果怎么做的?

        来自辽宁
        • 博主
          唐晓白
          Android Firefox
          11月前
          2023-5-31 19:47:37

          没太明白你的意思,详细一点?

          来自上海
  5. pidanxia
    Windows Chrome
    10月前
    2023-6-21 23:15:08

    博主,你顶部导航栏上的子菜单卡片是怎么弄成透明的呀?就是比如指针停留在教程的时候,下面的子菜单卡片,我的是纯白色底的不是透明的

    来自广东
    • 博主
      pidanxia
      Macintosh Chrome
      10月前
      2023-6-23 16:48:45

      我没有刻意的改变过子菜单卡片的透明度,本文提到的“背景主题色半透明”是我唯一改变博客主题透明度的地方,所以多半是子菜单卡片继承了其中的透明度改动。😳

      来自北京
      • pidanxia
        北冥红烧鱼
        Windows Chrome
        10月前
        2023-6-24 22:46:11

        感谢佬的回答~已经解决啦,原来是我透明度拉太低了导致看起来不透明哈哈哈

        来自广东
  6. 御郗
    Windows Edge
    9月前
    2023-7-08 9:46:52

    老哥 这个用来展示代码的是什么?

    来自江苏
  7. Windows Edge
    8月前
    2023-8-21 12:54:03

    博主,请问字体如何更改?先谢谢了

    来自江西
    • Ryugu
      Windows Edge
      8月前
      2023-8-21 12:54:47

      还有,请问这个显示浏览器的插件是什么?谢谢啦

      来自江西
      • 博主
        Ryugu
        Macintosh Chrome
        6月前
        2023-10-05 23:13:47

        这个在Argon主题选项中:评论->评论区->评论者 UA 显示,选择“平台+浏览器”

        来自北京
        • Ryugu
          北冥红烧鱼
          iPhone AppleWebKit
          6月前
          2023-10-05 23:26:01

          谢谢了!

          来自江西
    • 博主
      Ryugu
      Macintosh Chrome
      6月前
      2023-10-05 23:01:34

      字体样式已经修改已经加到文章中,之前遗漏了|´・ω・)ノ

      来自北京
  8. 故里
    Windows Edge
    7月前
    2023-9-05 6:55:02

    大佬好,关于这个背景透明的,我用了你给的脚本,效果达到了,但是公告栏出了点问题,就是在夜间模式公告栏颜色没有从主题色变回深灰色,还是日间模式的主题色,而把脚本删了就不会这样了。

    来自广东
    • 博主
      故里
      Macintosh Chrome
      6月前
      2023-10-05 23:00:35

      这有点不太好定位问题,检查一下代码copy的正确性?或者回忆一下是否此前对相关样式做过其他修改,导致“覆盖”?

      来自北京
    • 11
      故里
      Windows Chrome
      2月前
      2024-2-23 12:10:26

      你好,请问你的问题解决了没,我也出现了这种情况

      来自甘肃

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇