日志#

2023-08-29：新增主题安装

前言#

想要做好一个博客，一个漂亮的主题是少不了的。为了寻找一个合适的博客，可花了我不少功夫，最后选择了人气主题Argon。通过到处寻找教程，搜集到了不少美化主题的方法和代码，希望能给大家带来帮助。

主题资源#

链接：solstice23/argon-theme: 📖 Argon - 一个轻盈、简洁的 WordPress 主题 (github.com)

将主题压缩包下载下来，在wordpress后台上传进行安装即可。

虽然Argon主题已经停止更新了，但对我来说已经够用了。

主题安装#

进入wordpress网站后台，在外观-主题中，选择安装主题

选择上传主题，上传下载的Argon主题压缩包，点击立即安装

等待一会，就会提示argon主题安装成功，点击启用主题即可。

Argon主题选项#

在主题选项界面里，可以通过一些设置和脚本对博客界面进行美化。

Argon文档链接：Argon Theme Docs (solstice23.top)

网站底部信息#

网站的页脚信息，如备案、运行时间等内容可在页脚内容里进行配置，使用HTML语言，也支持script标签，我的页脚内容配置如下：

HTML(底部信息)

1
<div class="github-badge-big">
2
        <span class="badge-subject"><i class="fa fa-id-card"></i> 备案号 </span>
3
        <span class="badge-value bg-orange">
4
            <!-- 备案链接 -->
5
            <a href="https://beian.miit.gov.cn/" target="_blank" one-link-mark="yes">湘ICP备2021004011号-1</a>
6
        </span>
7
    </div>
8

9

10
    <div class="github-badge-big">
11
        <span class="badge-subject"><i class="fa fa-copyright" aria-hidden="true"></i>Copyright </span>
12
        <span class="badge-value bg-red">2022-2023</i>
13
            <a href="https://blog.leihub.cn" target="_blank" one-link-mark="yes">@ Lei
14
        </span>
15
        </script>
16
    </div>
17

18
  <!-- 运行时间 -->
19
    <div class="github-badge-big">
20
        <span class="badge-subject"><i class="fa fa-clock-o"></i> Running Time</span>
21
        <span class="badge-value bg-green"><span id="blog_running_days" class="odometer odometer-auto-theme"></span>
22
            天
23
            <span id="blog_running_hours" class="odometer odometer-auto-theme"></span>
24
            小时
25
            <span id="blog_running_mins" class="odometer odometer-auto-theme"></span>
26
            分钟
27
            <span id="blog_running_secs" class="odometer odometer-auto-theme"></span>
28
             秒
29
        </span>

CSS（样式表）

也可以通过CSS对底部信息进行美化

1
<style>
2
/* 核心样式 */
3
.github-badge {
4
display: inline-block;
5
border-radius: 4px;
6
text-shadow: none;
7
font-size: 13.1px;
8
color: #fff;
9
line-height: 15px;
10
margin-bottom: 5px;
11
font-family: "Open Sans", sans-serif;
12
}
13
.github-badge .badge-subject {
14
display: inline-block;
15
background-color: #4d4d4d;
16
padding: 4px 4px 4px 6px;
17
border-top-left-radius: 4px;
18
border-bottom-left-radius: 4px;
19
font-family: "Open Sans", sans-serif;
20
}
21
.github-badge .badge-value {
22
display: inline-block;
23
padding: 4px 6px 4px 4px;
24
border-top-right-radius: 4px;
25
border-bottom-right-radius: 4px;
26
font-family: "Open Sans", sans-serif;
27
}
28
.github-badge-big {
29
display: inline-block;
30
border-radius: 6px;
31
text-shadow: none;
32
font-size: 14.1px;
33
color: #fff;
34
line-height: 18px;
35
margin-bottom: 7px;
36
}
37
.github-badge-big .badge-subject {
38
display: inline-block;
39
background-color: #4d4d4d;
40
padding: 4px 4px 4px 6px;
41
border-top-left-radius: 4px;
42
border-bottom-left-radius: 4px;
43
}
44
.github-badge-big .badge-value {
45
display: inline-block;
46
padding: 4px 6px 4px 4px;
47
border-top-right-radius: 4px;
48
border-bottom-right-radius: 4px;
49
}
50
.bg-orange {
51
background-color: #ec8a64 !important;
52
}
53
.bg-red {
54
background-color: #cb7574 !important;
55
}
56
.bg-apricots {
57
background-color: #f7c280 !important;
58
}
59
.bg-casein {
60
background-color: #dfe291 !important;
61
}
62
.bg-shallots {
63
background-color: #97c3c6 !important;
64
}
65
.bg-ogling {
66
background-color: #95c7e0 !important;
67
}
68
.bg-haze {
69
background-color: #9aaec7 !important;
70
}
71
.bg-mountain-terrier {
72
background-color: #99a5cd !important;
73
}
74
</style>

实际效果如图

小工具#

年度倒计时显示（左侧栏）

打开主题自定义，在左侧栏里添加工具-简码，将以下代码复制粘贴进去

1
<div class="progress-wrapper" style="padding: 0">
2
<div class="progress-info">
3
<div class="progress-label">
4
<span id="yearprogress_yearname"></span>
5
</div>
6
<div id="yearprogress_text_container" class="progress-percentage">
7
<span id="yearprogress_progresstext"></span>
8
<span id="yearprogress_progresstext_full"></span>
9
</div>
10
</div>
11
<div class="progress">
12
<div id="yearprogress_progressbar" class="progress-bar bg-primary"></div>
13
</div>
14
</div>
15
<script no-pjax="">
16
function yearprogress_refresh() {
17
let year = new Date().getFullYear();
18
$("#yearprogress_yearname").text(year);
19
let from = new Date(year, 0, 1, 0, 0, 0);
20
let to = new Date(year, 11, 31, 23, 59, 59);
21
let now = new Date();
22
let progress = (((now - from) / (to - from + 1)) * 100).toFixed(7);
23
let progressshort = (((now - from) / (to - from + 1)) * 100).toFixed(2);
24
$("#yearprogress_progresstext").text(progressshort + "%");
25
$("#yearprogress_progresstext_full").text(progress + "%");
26
$("#yearprogress_progressbar").css("width", progress + "%");
27
}
28
yearprogress_refresh();
29
if (typeof yearProgressIntervalHasSet == "undefined") {
30
var yearProgressIntervalHasSet = true;
31
setInterval(function () {
32
yearprogress_refresh();
33
}, 500);
34
}
35
</script>
36
<style>
37
#yearprogress_text_container {
38
width: 100%;
39
height: 22px;
40
overflow: hidden;
41
user-select: none;
42
}
43
#yearprogress_text_container > span {
44
transition: all 0.3s ease;
45
display: block;
46
}
47
#yearprogress_text_container:hover > span {
48
transform: translateY(-20px);
49
}
50
</style>

网站访问数据

进入 Wordpress，点击插件，搜索并且下载 Wp Statistics
外观 —— 小工具 —— 站点额外内容 —— 旧版小工具 —— 统计

音乐播放功能#

在主题的脚本设置里，可以使用以下代码，设置音乐播放器。

1
<!-- 音乐播放器 -->
2
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
3
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
4
<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
5
<meting-js
6
    server="netease"
7
    type="playlist"
8
    id="8440101601"
9
    fixed="true"
10
    mini="true"
11
    order="random"
12
    loop="all"
13
    preload="auto"
14
    list-folded="false"
15
    autoplay="true">
16
</meting-js>

上面的调用链接可能会突然失效，如有需要可参考官方文档
APlayer HTML5 音乐播放器 | ACE-BLOG (ace520.github.io)

server="netease" 指定音乐平台为网易云，type="song" 指单曲类型，id="8440101601" 为音乐的 id（这里的 id 为打开音乐歌单，网址显示的 id）

开启吸底模式 fixed="true", 开启迷你模式 mini="true", 随机播放 order="random", 关闭底部歌词 lrc-type="0"

注意：id 需要为自己创建的歌单，不能为我喜欢的音乐；server 可以改自己用的音乐平台，如 netease (网易云)、tencent (QQ 音乐)

具体参数设置点击此链接：https://yy.liveout.cn/article/Learn/front-end/aplayer%E5%8F%82%E6%95%B0.png

Aplayer 播放器官网文档：APlayer HTML5 音乐播放器 | ACE-BLOG (ace520.github.io)

添加以上代码后，在博客首页左下方会出现一个音乐播放器，如图所示，因为浏览器原因可能无法自动播放。

动态背景#

背景可以通过更改 url 链接设置为自己的动态视频，尽量不要太大，否则别人访问时会刷新许久

上传视频到云平台或媒体库，复制资源链接。我一开始也使用了动态背景，放在腾讯云cos里，结果一天就跑了1g多流量，后面还是取消了动态背景。

1
<video
2
src=" " /*白天动态视频链接*/
3
class="bg-video bg-video-day"
4
autoplay=""
5
loop="loop"
6
muted=""
7
></video>
8
<video
9
src=" " /*夜间动态视频链接*/
10
class="bg-video bg-video-night"
11
autoplay=""
12
loop="loop"
13
muted=""
14
></video>
15
<style>
16
video.bg-video {
17
position: fixed;
18
z-index: -1;
19
left: 0;
20
right: 0;
21
top: 0;
22
bottom: 0;
23
width: 100vw;
24
height: 100vh;
25
object-fit: cover;
26
pointer-events: none;
27
}
28
html.darkmode video.bg-video.bg-video-day {
29
opacity: 0;
30
}
31
html.darkmode video.bg-video.bg-video-night {
32
opacity: 1;
33
}
34
video.bg-video.bg-video-day {
35
opacity: 1;
36
}
37
video.bg-video.bg-video-night {
38
opacity: 0;
39
}
40
#banner,
41
#banner .shape {
42
background: transparent !important;
43
}
44
* {
45
font-family: "Comfortaa", "Open Sans", -apple-system, system-ui,
46
BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial,
47
"PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif;
48
}
49
</style>
50
<script
51
src="https://api.gcxstudio.cn/odometer/odometer.min.js"
52
integrity="sha256-65R1G5irU1VT+k8L4coqgd3saSvO/Wufson/w+v2Idw="
53
crossorigin="anonymous"
54
></script>
55

56

57
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
58
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
59

60
<div id='aplayer'></div>

看板娘#

在主题脚本中，添加以下代码，在博客右下角添加一个看板娘。

1
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
2
<script>
3
    L2Dwidget.init({
4
        "model": {
5
　　　　　　　//jsonpath控制显示那个小萝莉模型，
6
            //(切换模型需要改动)
7
//              "https://unpkg.com/(live2d-widget-model-koharu)@1.0.5/assets/(koharu).model.json"
8
            jsonPath: "https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json",
9
            "scale": 1
10
        },
11
        "display": {
12
            "position": "right", //看板娘的表现位置
13
            "width": 75,  //小萝莉的宽度
14
            "height": 150, //小萝莉的高度
15
            "hOffset": 0,
16
            "vOffset": -20
17
        },
18
        "mobile": {
19
            "show": true,
20
            "scale": 0.5
21
        },
22
        "react": {
23
            "opacityDefault": 0.7,
24
            "opacityOnHover": 0.2
25
        }
26
    });
27
</script>
28

29
   /*   小帅哥： https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json
30
      萌娘：https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json
31
      白猫：https://unpkg.com/live2d-widget-model-tororo@1.0.5/assets/tororo.model.json
32
      黑猫： https://unpkg.com/live2d-widget-model-hijiki@1.0.5/assets/hijiki.model.json
33
      小可爱（女）：https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json
34
      小可爱（男）：https://unpkg.com/live2d-widget-model-haruto@1.0.5/assets/haruto.model.json
35
      初音：https://unpkg.com/live2d-widget-model-miku@1.0.5/assets/miku.model.json
36
      圣职者妹妹：https://unpkg.com/live2d-widget-model-z16@1.0.5/assets/z16.model.json
37
      茶杯犬：https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json
38
      绿毛妹妹：https://unpkg.com/live2d-widget-model-tsumiki@1.0.5/assets/tsumiki.model.json
39
      金龟子妹妹：https://unpkg.com/live2d-widget-model-unitychan@1.0.5/assets/unitychan.model.json
40
      https://unpkg.com/live2d-widget-model-nito@1.0.5/assets/nito.model.json
41
      https://unpkg.com/live2d-widget-model-ni-j@1.0.5/assets/ni-j.model.json
42
      小阿狸： https://unpkg.com/live2d-widget-model-nico@1.0.5/assets/nico.model.json
43
      https://unpkg.com/live2d-widget-model-nietzche@1.0.5/assets/nietzche.model.json
44
      https://unpkg.com/live2d-widget-model-nipsilon@1.0.5/assets/nipsilon.model.json
45
      女学生： https://unpkg.com/live2d-widget-model-hibiki@1.0.5/assets/hibiki.model.json */

博客透明#

添加到 页尾脚本 里，根据主题色自动透明，透明度可以在 op1、op2、op3….. 那里设置

1
<script>
2
  function hexToRgb(hex,op){
3
    let str = hex.slice(1);
4
    let arr;
5
    if (str.length === 3) arr = str.split('').map(d => parseInt(d.repeat(2), 16));
6
    else arr = [parseInt(str.slice(0, 2), 16), parseInt(str.slice(2, 4), 16), parseInt(str.slice(4, 6), 16)];
7
    return  `rgb(${arr.join(', ')}, ${op})`;
8
};
9

10
  let themeColorHex = getComputedStyle(document.documentElement).getPropertyValue('--themecolor').trim();
11
  let op1 = 0.6
12
  let themeColorRgb = hexToRgb(themeColorHex,op1);
13
  let themecolorGradient = getComputedStyle(document.documentElement).getPropertyValue('--themecolor-gradient')*
14
  document.documentElement.style.setProperty('--themecolor-gradient',themeColorRgb)
15

16
  let op2 = 0.8
17
  // 方法一：
18
  let colorTint92 = getComputedStyle(document.documentElement).getPropertyValue('--color-tint-92').trim();
19
  colorTint92 += ', '+op2;
20
  document.documentElement.style.setProperty('--color-tint-92',colorTint92)
21
  // 方法二：（无效）
22
  // let colorForegroundHex = getComputedStyle(document.documentElement).getPropertyValue('--color-foreground').trim();
23
  // let colorForeground = hexToRgb(colorForegroundHex,op2)
24
  // 无效的原因是博客里的--color-fpreground是局部变量，不是:root里的全局变量，所以最好的办法是修改--color-tint-92，这个是全局的
25
  // document.documentElement.style.setPrope。rty('--color-fpreground',colorForeground)
26
   // 不要用下面这种cssText这种写法，会导致上面--themecolor-gradient的样式修改失效！
27
   // document.documentElement.style.cssText = '--color-tint-92:'+colorTint92
28

29
  let op3 = 0.65
30
  let colorShade90 = getComputedStyle(document.documentElement).getPropertyValue('--color-shade-90').trim();
31
  colorShade90 += ', ' + op3;
32
  document.documentElement.style.setProperty('--color-shade-90',colorShade90)
33

34
  let op4 = 0.8
35
  let colorShade86 = getComputedStyle(document.documentElement).getPropertyValue('--color-shade-86').trim();
36
  colorShade86 += ', ' + op4;
37
  document.documentElement.style.setProperty('--color-shade-86',colorShade86)
38
</script>

字体#

Docker 系列 WordPress 系列特效 – Bensz (hwb0307.com)

鼠标、输入特效：这些特效可以访问以上友情链接

以下为Echo的额外 CSS，涉及字体、透明等博客样式

ps: 字体链接需要上传到云端调用才能生效（下面字体链接已失效）

1
/*=========字体设置============*/
2

3
/*网站字体*/
4
/*原则上你可以设置多个字体，然后在不同的部位使用不同的字体。*/
5
@font-face{
6
    font-family:echo;
7
    src:
8
    url(https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/fonts/13.woff2) format('woff2')
9
}
10
body{
11
    font-family:"aLei" !important
12
}
13

14
/*横幅字体大小*/
15
.banner-title {
16
  font-size: 2.5em;
17
}
18
.banner-subtitle{
19
  font-size: 27px;
20
}
21

22
/*文章标题字体大小*/
23
.post-title {
24
    font-size: 25px
25
}
26

27
/*正文字体大小（不包含代码）*/
28
.post-content p{
29
    font-size: 1.25rem;
30
}
31
li{
32
    font-size: 1.2rem;
33

34
}
35

36
/*评论区字体大小*/
37
p {
38
    font-size: 1.2rem
39

40
}
41

42
/*评论发送区字体大小*/
43
.form-control{
44
    font-size: 1.2rem
45
}
46

47
/*评论勾选项目字体大小*/
48
.custom-checkbox .custom-control-input~.custom-control-label{
49
    font-size: 1.2rem
50
}
51
/*评论区代码的强调色*/
52
code {
53
  color: rgba(var(--themecolor-rgbstr));
54
}
55

56
/*说说字体大小和颜色设置*/
57
.shuoshuo-title {
58
    font-size: 25px;
59
/*  color: rgba(var(--themecolor-rgbstr)); */
60
}
61

62
/*尾注字体大小*/
63
.additional-content-after-post{
64
    font-size: 1.2rem
65
}
66

67
/* 公告居中 */
68
.leftbar-announcement-title {
69
    font-size: 20px;
70
    text-align: center;
71
}
72

73
.leftbar-announcement-content {
74
    font-size: 15px;
75
    line-height: 1.8;
76
    padding-top: 8px;
77
    opacity: 0.9;
78
    text-align: center;
79
}
80

81
/* 一言居中 */
82
.leftbar-banner-title {
83
    font-size: 20px;
84
    display: block;
85
    text-align: center;
86
}
87

88
/* 个性签名居中 */
89
.leftbar-banner-subtitle {
90
    margin-top: 15px;
91
    margin-bottom: 8px;
92
    font-size: 13px;
93
    opacity: 0.8;
94
    display: block;
95
    text-align: center;
96
}
97

98
/*========颜色设置===========*/
99

100
/*文章或页面的正文颜色*/
101
body{
102
    color:#364863
103
}
104

105
/*引文属性设置*/
106
blockquote {
107
    /*添加弱主题色为背景色*/
108
    background: rgba(var(--themecolor-rgbstr), 0.1) !important;
109
    width: 100%
110
}
111

112
/*引文颜色 建议用主题色*/
113
:root {
114
    /*也可以用类似于--color-border-on-foreground-deeper: #009688;这样的命令*/
115
    --color-border-on-foreground-deeper: rgba(var(--themecolor-rgbstr));
116
}
117

118
/*左侧菜单栏突出颜色修改*/
119
.leftbar-menu-item > a:hover, .leftbar-menu-item.current > a{
120
    background-color: #f9f9f980;
121
}
122

123
/*站点概览分隔线颜色修改*/
124
.site-state-item{
125
    border-left: 1px solid #aaa;
126
}
127
.site-friend-links-title {
128
    border-top: 1px dotted #aaa;
129
}
130
#leftbar_tab_tools ul li {
131
    padding-top: 3px;
132
    padding-bottom: 3px;
133
    border-bottom:none;
134
}
135
html.darkmode #leftbar_tab_tools ul li {
136
    border-bottom:none;
137
}
138

139
/*左侧栏搜索框的颜色*/
140
button#leftbar_search_container {
141
    background-color: transparent;
142
}
143

144
/*========透明设置===========*/
145

146
/*白天卡片背景透明*/
147
.card{
148
    background-color:rgba(255, 255, 255, 0.8) !important;
149
    /*backdrop-filter:blur(6px);*//*毛玻璃效果主要属性*/
150
    -webkit-backdrop-filter:blur(6px);
151
}
152

153
/*小工具栏背景完全透明*/
154
/*小工具栏是card的子元素，如果用同一个透明度会叠加变色，故改为完全透明*/
155
.card .widget,.darkmode .card .widget,#post_content > div > div > div.argon-timeline-card.card.bg-gradient-secondary.archive-timeline-title{
156
    background-color:#ffffff00 !important;
157
    backdrop-filter:none;
158
    -webkit-backdrop-filter:none;
159
}
160
.emotion-keyboard,#fabtn_blog_settings_popup{
161
    background-color:rgba(255, 255, 255, 0.95) !important;
162
}
163

164
/*分类卡片透明*/
165
.bg-gradient-secondary{
166
    background:rgba(255, 255, 255, 0.1) !important;
167
    backdrop-filter: blur(10px);
168
    -webkit-backdrop-filter:blur(10px);
169
}
170

171
/*夜间透明*/
172
html.darkmode.bg-white,html.darkmode .card,html.darkmode #footer{
173
    background:rgba(66, 66, 66, 0.9) !important;
174
}
175
html.darkmode #fabtn_blog_settings_popup{
176
    background:rgba(66, 66, 66, 0.95) !important;
177
}
178

179
/*标签背景
180
.post-meta-detail-tag {
181
    background:rgba(255, 255, 255, 0.5)!important;
182
}*/
183

184

185
/*========排版设置===========*/
186

187
/*左侧栏层级置于上层*/
188
#leftbar_part1 {
189
    z-index: 1;
190
}
191

192
/*分类卡片文本居中*/
193
#content > div.page-information-card-container > div > div{
194
    text-align:center;
195
}
196

197
/*子菜单对齐及样式调整*/
198
.dropdown-menu .dropdown-item>i{
199
    width: 10px;
200
}
201
.dropdown-menu>a {
202
    color:var(--themecolor);
203
}
204
.dropdown-menu{
205
    min-width:max-content;
206
}
207
.dropdown-menu .dropdown-item {
208
    padding: .5rem 1.5rem 0.5rem 1rem;
209
}
210
.leftbar-menu-subitem{
211
    min-width:max-content;
212
}
213
.leftbar-menu-subitem .leftbar-menu-item>a{
214
    padding: 0rem 1.5rem 0rem 1rem;
215
}
216

217
/*左侧栏边距修改*/
218
.tab-content{
219
    padding:10px 0px 0px 0px !important;
220
}
221
.site-author-links{
222
    padding:0px 0px 0px 10px ;
223
}
224
/*目录位置偏移修改*/
225
#leftbar_catalog{
226
    margin-left: 0px;
227
}
228
/*目录条目边距修改*/
229
#leftbar_catalog .index-link{
230
    padding: 4px 4px 4px 4px;
231
}
232
/*左侧栏小工具栏字体缩小*/
233
#leftbar_tab_tools{
234
    font-size: 14px;
235
}
236

237
/*正文图片边距修改*/
238
article figure {margin:0;}
239
/*正文图片居中显示*/
240
.fancybox-wrapper {
241
    margin: auto;
242
}
243
/*正文表格样式修改*/
244
article table > tbody > tr > td,
245
article table > tbody > tr > th,
246
article table > tfoot > tr > td,
247
article table > tfoot > tr > th,
248
article table > thead > tr > td,
249
article table > thead > tr > th{
250
    padding: 8px 10px;
251
    border: 1px solid;
252
}
253
/*表格居中样式*/
254
.wp-block-table.aligncenter{margin:10px auto;}
255

256
/*回顶图标放大*/
257
button#fabtn_back_to_top, button#fabtn_go_to_comment, button#fabtn_toggle_blog_settings_popup, button#fabtn_toggle_sides, button#fabtn_open_sidebar{
258
    font-size: 1.2rem;
259
}
260

261
/*顶栏菜单放大*/
262

263

264
.navbar-nav .nav-link {
265
    font-size: 1rem;
266
    font-family: 'echo';
267

268
}
269
.navbar-brand {
270
  color: white!important;
271
  font-family: 'echo';
272
    font-size: 1.4rem;
273
    margin-right: 1rem;
274
    padding-bottom: .2rem;
275
}
276
/*菜单大小*/
277
.nav-link-inner--text {
278
    font-size: 1.2em;
279
}
280
.navbar-nav .nav-item {
281
    margin-right:0;
282
}
283
.mr-lg-5, .mx-lg-5 {
284
    margin-right:1rem !important;
285
}
286
.navbar-toggler-icon {
287
    width: 1.8rem;
288
    height: 1.8rem;
289
}
290
/*菜单间距*/
291
.navbar-expand-lg .navbar-nav .nav-link {
292
    padding-right: 2.1em;
293
    padding-left: 1.em;
294
}
295

296
/*隐藏wp-SEO插件带来的线条阴影（不一定要装）*/
297
*[style='position: relative; z-index: 99998;'] {
298
    display: none;
299
}
300

301
/* Github卡片样式*/
302
.github-info-card-header a {
303
    /*Github卡片抬头颜色*/
304
    color: black !important;
305
    font-size: 1.5rem;
306
}
307
.github-info-card {
308
    /*Github卡片文字（非链接）*/
309
    font-size: 1rem;
310
    color: black !important;
311
}
312
.github-info-card.github-info-card-full.card.shadow-sm {
313
    /*Github卡片背景色*/
314
    background-color: rgba(var(--themecolor-rgbstr), 0.1) !important;
315
}

美化JSON#

懒得自己配置的，也可以直接导入美化配置JSON一键配置。

音乐

音乐

日志#

前言#

主题资源#

主题安装#

Argon主题选项#

网站底部信息#

小工具#

音乐播放功能#

动态背景#

看板娘#

博客透明#

字体#

美化JSON#

相关链接#

支持与分享

评论区

音乐

wordpress-argon主题

日志#

前言#

主题资源#

主题安装#

Argon主题选项#

网站底部信息#

小工具#

音乐播放功能#

动态背景#

看板娘#

博客透明#

字体#

美化JSON#

相关链接#

支持与分享

评论区