Argon主题博客美化

Argon主题博客美化

我不是专门写 Web 的,造轮子 肯定是做不到了,只得拿 轮子 和 零件 来组装

**框架:**PHPStudy ( Apache + MySQL + PHP )

**CMS:**WordPress

**Theme:**Argon

我的博客是基于WordPress建站系统的Argon主题,为同样基础的网站可以直接照抄,不一样基础的可能得需要一些Web开发经验才能运用上本文代码

管理员后台 → Argon 主题选项

点击 导入设置 ,粘贴JSON代码,记得做些必要的修改,如:网站目录、图片链接……

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
{
  "argon_theme_color": "#516069",
  "argon_theme_color_hex_preview": "#516069",
  "argon_show_customize_theme_color_picker": true,
  "argon_enable_immersion_color": "true",
  "argon_darkmode_autoswitch": "false",
  "argon_enable_amoled_dark": "false",
  "argon_card_radius": "4",
  "argon_card_shadow": "big",
  "argon_page_layout": "double",
  "argon_article_list_waterflow": "2and3",
  "argon_article_list_layout": "1",
  "argon_font": "serif",
  "argon_assets_path": "jsdelivr",
  "argon_custom_assets_path": "",
  "argon_wp_path": "/blog/",
  "argon_dateformat": "YMD",
  "argon_enable_headroom": "false",
  "argon_toolbar_title": " ",
  "argon_toolbar_icon": "http://8.130.91.80/blog/wp-content/uploads/2023/05/retouch_2023052719093000.png",
  "argon_toolbar_icon_link": "http://8.130.91.80/blog/wp-admin/",
  "argon_toolbar_blur": "true",
  "argon_banner_title": "桐漓の博客",
  "argon_banner_subtitle": "TL's BLOG",
  "argon_banner_size": "fullscreen",
  "argon_page_background_banner_style": "transparent",
  "argon_show_toolbar_mask": true,
  "argon_banner_background_url": "",
  "argon_banner_background_color_type": "shape-dark",
  "argon_banner_background_hide_shapes": false,
  "argon_enable_banner_title_typing_effect": "true",
  "argon_banner_typing_effect_interval": "200",
  "argon_page_background_url": "https://pic.imgdb.cn/item/64b4bb101ddac507cc723295.png",
  "argon_page_background_dark_url": "https://pic.imgdb.cn/item/64b4bb101ddac507cc723295.png",
  "argon_page_background_opacity": "1",
  "argon_sidebar_banner_title": "TL's BLOG",
  "argon_sidebar_banner_subtitle": "山腰太挤,顶峰见",
  "argon_sidebar_auther_name": "梧桐漓染 & 七折",
  "argon_sidebar_auther_image": "https://pic.imgdb.cn/item/64a29e5b1ddac507cc038d97.jpg",
  "argon_sidebar_author_description": "Web渗透、Android逆向小白 & 开发小白",
  "argon_sidebar_announcement": "<style>\n  .special-text {\n    font-size: 13px;\n    line-height: 1;\n  }\n\n  .first-line {\nfont-size: 15px;\n    font-weight: bold;\n    color: black;\n  }\n</style>\n<p class=\"special-text first-line\">欢迎来到梧桐漓染的Blog</p>\n<p class=\"special-text\">希望这里的内容能帮到你</p>\n<hr>\n<p class=\"special-text\">最近域名用不了咯,处理中……</p>\n",
  "argon_fab_show_settings_button": "true",
  "argon_fab_show_darkmode_button": "false",
  "argon_fab_show_gotocomment_button": "true",
  "argon_seo_description": "",
  "argon_seo_keywords": "",
  "argon_article_meta": "views|time|categories|author",
  "argon_show_readingtime": "true",
  "argon_reading_speed": "300",
  "argon_reading_speed_en": "160",
  "argon_reading_speed_code": "20",
  "argon_show_thumbnail_in_banner_in_content_page": "false",
  "argon_first_image_as_thumbnail_by_default": "false",
  "argon_reference_list_title": "参考",
  "argon_show_sharebtn": "domestic",
  "argon_show_headindex_number": "false",
  "argon_donate_qrcode_url": "",
  "argon_additional_content_after_post": "文章:%title%\n作者:%author%\n\n此文章如果能帮助到你就已经物超所值了\n",
  "argon_related_post": "category,tag",
  "argon_related_post_sort_orderby": "date",
  "argon_related_post_sort_order": "DESC",
  "argon_related_post_limit": "10",
  "argon_article_header_style": "article-header-style-2",
  "argon_outdated_info_time_type": "modifiedtime",
  "argon_outdated_info_days": "-1",
  "argon_outdated_info_tip_type": "inpost",
  "argon_outdated_info_tip_content": "本文最后更新于 %date_delta% 天前,其中的信息可能已经有所发展或是发生改变。",
  "argon_archives_timeline_show_month": "true",
  "argon_archives_timeline_url": "http://8.130.91.80/wordpress/%e5%bd%92%e6%a1%a3/",
  "argon_footer_html": "<style>\n/* 核心样式 */\n.github-badge {\ndisplay: inline-block;\nborder-radius: 4px;\ntext-shadow: none;\nfont-size: 13.1px;\ncolor: #fff;\nline-height: 15px;\nmargin-bottom: 5px;\nfont-family: \"Open Sans\", sans-serif;\n}\n.github-badge .badge-subject {\ndisplay: inline-block;\nbackground-color: #4d4d4d;\npadding: 4px 4px 4px 6px;\nborder-top-left-radius: 4px;\nborder-bottom-left-radius: 4px;\nfont-family: \"Open Sans\", sans-serif;\n}\n.github-badge .badge-value {\ndisplay: inline-block;\npadding: 4px 6px 4px 4px;\nborder-top-right-radius: 4px;\nborder-bottom-right-radius: 4px;\nfont-family: \"Open Sans\", sans-serif;\n}\n.github-badge-big {\ndisplay: inline-block;\nborder-radius: 6px;\ntext-shadow: none;\nfont-size: 14.1px;\ncolor: #fff;\nline-height: 18px;\nmargin-bottom: 7px;\n}\n.github-badge-big .badge-subject {\ndisplay: inline-block;\nbackground-color: #4d4d4d;\npadding: 4px 4px 4px 6px;\nborder-top-left-radius: 4px;\nborder-bottom-left-radius: 4px;\n}\n.github-badge-big .badge-value {\ndisplay: inline-block;\npadding: 4px 6px 4px 4px;\nborder-top-right-radius: 4px;\nborder-bottom-right-radius: 4px;\n}\n.bg-orange {\nbackground-color: #ec8a64 !important;\n}\n.bg-red {\nbackground-color: #cb7574 !important;\n}\n.bg-apricots {\nbackground-color: #64769e!important;\n}\n.bg-casein {\nbackground-color: #dfe291 !important;\n}\n.bg-shallots {\nbackground-color: #97c3c6 !important;\n}\n.bg-ogling {\nbackground-color: #95c7e0 !important;\n}\n.bg-haze {\nbackground-color: #9aaec7 !important;\n}\n.bg-mountain-terrier {\nbackground-color: #99a5cd !important;\n}\n</style>\n\n\n\t<!-- 运行时间 -->\n    <div class=\"github-badge-big\">\n        <span class=\"badge-subject\"><i class=\"fa fa-clock-o\"></i> 运行时间</span><span\n            class=\"badge-value bg-apricots\"><span id=\"blog_running_days\" class=\"odometer odometer-auto-theme\"></span>\n            days\n            <span id=\"blog_running_hours\" class=\"odometer odometer-auto-theme\"></span> H\n            <span id=\"blog_running_mins\" class=\"odometer odometer-auto-theme\"></span> M\n            <span id=\"blog_running_secs\" class=\"odometer odometer-auto-theme\"></span>S\n        </span>\n\n<script no-pjax=\"\">\nvar blog_running_days = document.getElementById(\"blog_running_days\");\nvar blog_running_hours = document.getElementById(\"blog_running_hours\");\nvar blog_running_mins = document.getElementById(\"blog_running_mins\");\nvar blog_running_secs = document.getElementById(\"blog_running_secs\");\nfunction refresh_blog_running_time() {\nvar time = new Date() - new Date(2023, 4, 23, 0, 0, 0); /*此处日期的月份改为自己真正月份的前一个月*/\nvar d = parseInt(time / 24 / 60 / 60 / 1000);\nvar h = parseInt((time % (24 * 60 * 60 * 1000)) / 60 / 60 / 1000);\nvar m = parseInt((time % (60 * 60 * 1000)) / 60 / 1000);\nvar s = parseInt((time % (60 * 1000)) / 1000);\nblog_running_days.innerHTML = d;\nblog_running_hours.innerHTML = h;\nblog_running_mins.innerHTML = m;\nblog_running_secs.innerHTML = s;\n}\nrefresh_blog_running_time();\nif (typeof bottomTimeIntervalHasSet == \"undefined\") {\nvar bottomTimeIntervalHasSet = true;\nsetInterval(function () {\nrefresh_blog_running_time();\n}, 500);\n}\n</script>\n</div>\n<div>\n<style>\n@keyframes jump {\n    0% { transform: translateY(0) scale(1); }\n    50% { transform: translateY(-5px) scale(0.9); }\n    100% { transform: translateY(0) scale(1); }\n}\n\n.jumping-text span {\n    display: inline-block;\n    animation: jump 2s infinite;\n    animation-delay: 0s;\n    will-change: transform; /* 添加优化提示 */\n}\n\n\n.jumping-text span:nth-child(1) {\n    animation-delay: 0s;\n}\n\n.jumping-text span:nth-child(2) {\n    animation-delay: 0.2s;\n}\n\n.jumping-text span:nth-child(3) {\n    animation-delay: 0.4s;\n}\n\n/* Add more nth-child styles for each letter */\n\n</style>\n</head>\n<body>\n<i class=\"fa fa-wordpress\"></i>\n<scan class=\"jumping-text\">\n<span>博</span>\n    <span>客</span>\n    <span>基</span>\n    <span>于</span>\n    <span>Argon</span>\n    <span>主</span>\n    <span>题</span>\n    <span>二</span>\n    <span>次</span>\n    <span>开</span>\n    <span>发</span>\n    <span>🛠️</span>\n</scan>\n\n<script>\n    const jumpingText = document.querySelector('.jumping-text');\n    const letters = jumpingText.querySelectorAll('span');\n\n    let delay = 0;\n    letters.forEach((letter) => {\n        letter.style.animationDelay = delay + 's';\n        delay += 0.1;\n    });\n</script>\n</div>\n\n\n<style>\n    .badge-1 {\n        font-size: 9px; /* 调整为您想要的尺寸 */\n    }\n</style>\n\n<span class=\"badge-1\">点下方会跳到Argon项目地址(跳过去就不是我的网站哦不要搞错了•ࡇ•!)</span>",
  "argon_enable_code_highlight": "true",
  "argon_code_theme": "androidstudio",
  "argon_code_highlight_hide_linenumber": "false",
  "argon_code_highlight_break_line": "false",
  "argon_code_highlight_transparent_linenumber": "false",
  "argon_math_render": "mathjax2",
  "argon_mathjax_cdn_url": "https://cdn.bootcdn.net/ajax/libs/mathjax/3.2.2/es5/a11y/assistive-mml.js",
  "argon_mathjax_v2_cdn_url": "https://cdn.bootcdn.net/ajax/libs/mathjax/2.7.9/MathJax.js?config=TeX-AMS_HTML",
  "argon_katex_cdn_url": "//cdn.jsdelivr.net/npm/katex@0.11.1/dist/",
  "argon_enable_lazyload": "true",
  "argon_lazyload_threshold": "800",
  "argon_lazyload_effect": "fadeIn",
  "argon_lazyload_loading_style": "7",
  "argon_enable_fancybox": "true",
  "argon_enable_zoomify": "false",
  "argon_zoomify_duration": "200",
  "argon_zoomify_easing": "cubic-bezier(0.4,0,0,1)",
  "argon_zoomify_scale": "0.9",
  "argon_enable_pangu": "false",
  "argon_custom_html_head": "",
  "argon_custom_html_foot": "",
  "argon_enable_smoothscroll_type": "1_pulse",
  "argon_enable_into_article_animation": "true",
  "argon_disable_pjax_animation": "false",
  "argon_comment_pagination_type": "page",
  "argon_comment_emotion_keyboard": "true",
  "argon_hide_name_email_site_input": "false",
  "argon_comment_need_captcha": "false",
  "argon_get_captcha_by_ajax": "false",
  "argon_comment_allow_markdown": "true",
  "argon_comment_allow_editing": "true",
  "argon_comment_allow_privatemode": "true",
  "argon_comment_allow_mailnotice": "true",
  "argon_comment_mailnotice_checkbox_checked": true,
  "argon_comment_enable_qq_avatar": "true",
  "argon_comment_avatar_vcenter": "false",
  "argon_who_can_visit_comment_edit_history": "admin",
  "argon_enable_comment_pinning": "true",
  "argon_enable_comment_upvote": "false",
  "argon_comment_ua": "platform,browser,version",
  "argon_show_comment_parent_info": "true",
  "argon_fold_long_comments": "true",
  "argon_gravatar_cdn": "gravatar.pho.ink/avatar/",
  "argon_text_gravatar": "false",
  "argon_enable_search_filters": "true",
  "argon_search_filters_type": "*post,*page,shuoshuo",
  "argon_pjax_disabled": "false",
  "argon_hide_categories": "",
  "argon_enable_login_css": "true",
  "argon_home_show_shuoshuo": "false",
  "argon_fold_long_shuoshuo": "false",
  "argon_enable_timezone_fix": "false",
  "argon_hide_shortcode_in_preview": "false",
  "argon_trim_words_count": "0",
  "argon_enable_mobile_scale": "false",
  "argon_disable_googlefont": "false",
  "argon_disable_codeblock_style": "false",
  "argon_update_source": "stop",
  "argon_hide_footer_author": "true"
}

管理员后台 → 外观 → 自定义 → 额外CSS

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
/* 设置网站字体*/
@font-face{
	font-family:TL;
    src:
    url(https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/fonts/13.woff2) format('woff2')
}

body{
    font-family:"TL" !important
}

管理员后台 → 外观 → 自定义 → 额外CSS

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/*网站横幅字体彩色霓虹效果*/
@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;
  font-weight: 1000; /* 新增加粗字体效果 */
  font-size: 3.5em; /* 横幅字体大小 */
  transition: font-size 0.3s ease; /* 添加过渡效果,时间为0.3秒,缓动方式为ease */
}

/* 横幅字体大小 - 鼠标悬停时 */
.banner-title:hover {
  font-size: 4.6em; /* 鼠标悬停时的字体大小 */
}

.banner-title .banner-title-inner {
  position: relative;
  background: inherit;
}

.banner-title .banner-subtitle {
  position: relative;
  background: inherit;
  font-size: 27px; /* 横幅副标题字体大小 */
}

管理员后台 → 外观 → 自定义 → 额外CSS

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
/*尾注字体大小*/
.additional-content-after-post{
    font-size: 1.2rem
}

/* 公告居中 */
.leftbar-announcement-title {
    font-size: 20px;
    text-align: center;
}
 
.leftbar-announcement-content {
    font-size: 15px;
    line-height: 1.8;
    padding-top: 8px;
    opacity: 0.9;
    text-align: center;
}

/* 一言居中 */
.leftbar-banner-title {
    font-size: 20px;
    display: block;
    text-align: center;
}

 
/*文章标题字体大小*/
.post-title {
    font-size: 23px
}
 
/*正文字体大小(不包含代码)*/
.post-content p{
    font-size: 1.2rem;
}
li{
    font-size: 1.2rem;
	
}
 
/*评论区字体大小*/
p {
    font-size: 1.2rem
			
}
 
/*评论发送区字体大小*/
.form-control{
    font-size: 1.2rem
}
 
/*评论勾选项目字体大小*/
.custom-checkbox .custom-control-input~.custom-control-label{
    font-size: 1rem
}

/*评论区代码的强调色*/
code {
  color: rgba(var(--themecolor-rgbstr));
}
 
/*说说字体大小和颜色设置*/
.shuoshuo-title {
    font-size: 25px;
/*  color: rgba(var(--themecolor-rgbstr)); */
}
 

/* 个性签名居中 */
.leftbar-banner-subtitle {
    margin-top: 15px;
    margin-bottom: 8px;
    font-size: 13px;
    opacity: 0.8;
    display: block;
    text-align: center;
}

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

.leftbar-menu-item > a:hover, .leftbar-menu-item.current > a{
    background-color: #f9f9f980;
}

/*站点概览分隔线颜色修改*/
.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;
}
 
/*左侧栏搜索框的颜色*/
button#leftbar_search_container {
    background-color: transparent;
}

/*白天模式下白色卡片透明度*/
.card{
    background-color:rgba(255, 255, 255, 0.85) !important;
    /*backdrop-filter:blur(6px);*//*毛玻璃效果主要属性*/
    -webkit-backdrop-filter:blur(6px);
}

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

/*分类卡片透明*/
.bg-gradient-secondary{
    background:rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter:blur(10px);
}

/*夜间模式透明*/
html.darkmode.bg-white,html.darkmode .card,html.darkmode #footer{
    background:rgba(66, 66, 66, 0.85) !important;
}
html.darkmode #fabtn_blog_settings_popup{/*这个我也忘了是什么设置什么的透明度*/
    background:rgba(66, 66, 66, 0.95) !important;
}

/*========排版设置===========*/
 
/*左侧栏层级置于上层*/
#leftbar_part1 {
    z-index: 1;
}

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

/*子菜单对齐及样式调整*/
.dropdown-menu .dropdown-item>i{
    width: 10px;
}
.dropdown-menu>a {
    color:var(--themecolor);
}
.dropdown-menu{
    min-width:max-content;
}
.dropdown-menu .dropdown-item {
    padding: .5rem 1.5rem 0.5rem 1rem;
}
.leftbar-menu-subitem{
    min-width:max-content;
}
.leftbar-menu-subitem .leftbar-menu-item>a{
    padding: 0rem 1.5rem 0rem 1rem;
}

/*左侧栏边距修改*/
.tab-content{
    padding:10px 0px 0px 0px !important;
}
.site-author-links{
    padding:0px 0px 0px 10px ;
}

/*目录位置偏移修改*/
#leftbar_catalog{
    margin-left: 0px;
}

/*目录条目边距修改*/
#leftbar_catalog .index-link{
    padding: 4px 4px 4px 4px;
}

/*左侧栏小工具栏字体缩小*/
#leftbar_tab_tools{
    font-size: 14px;
}
 
/*正文图片边距修改*/
article figure {margin:0;}

/*正文图片居中显示*/
.fancybox-wrapper {
    margin: auto;
}

/*正文表格样式修改*/
article table > tbody > tr > td,
article table > tbody > tr > th,
article table > tfoot > tr > td,
article table > tfoot > tr > th,
article table > thead > tr > td,
article table > thead > tr > th{
    padding: 8px 10px;
    border: 1px solid;
}

/*表格居中样式*/
.wp-block-table.aligncenter{margin:10px auto;}
 
/*回顶图标放大*/
button#fabtn_back_to_top, button#fabtn_go_to_comment, button#fabtn_toggle_blog_settings_popup, button#fabtn_toggle_sides, button#fabtn_open_sidebar{
    font-size: 1.2rem;
}
 
/*顶栏菜单放大*/
 
 
.navbar-nav .nav-link {
    font-size: 1rem;
    font-family: 'echo';
			
}
.navbar-brand {
	color: white!important;
	font-family: 'echo';
    font-size: 1.4rem;
    margin-right: 1rem;
    padding-bottom: .2rem;
}

/*菜单大小*/
.nav-link-inner--text {
    font-size: 1.2em;
}
.navbar-nav .nav-item {
    margin-right:0;
}
.mr-lg-5, .mx-lg-5 {
    margin-right:1rem !important;
}
.navbar-toggler-icon {
    width: 1.8rem;
    height: 1.8rem;
}

/*菜单间距*/
.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 2.1em;
    padding-left: 1.em;
}

/* Github卡片样式*/
.github-info-card-header a {
    /*Github卡片抬头颜色*/
    color: black !important;
    font-size: 1.5rem;
}
.github-info-card {
    /*Github卡片文字(非链接)*/
    font-size: 1rem;
    color: black !important;
}
.github-info-card.github-info-card-full.card.shadow-sm {
    /*Github卡片背景色*/
    background-color: rgba(var(--themecolor-rgbstr), 0.1) !important;
}

/*导航栏图标大小*/
.navbar-brand img {
height: 40px;
}

/*左上角图片和右侧文字的间距*/
.mr-lg-5, .mx-lg-5 {
margin-right: 3rem !important;
}

  1. 管理员后台 → 外观 → 自定义 → 额外CSS
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/*banner下方小箭头滚动效果*/
@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;
}
  1. 管理员后台 → 外观 → 主题文件编辑器 → 主题页眉(header.php文件)

  2. 439行<div class="cover-scroll-down">的下一行(<i>标签的那行)替换成以下三行代码

    1
    2
    3
    
    <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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
#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 {
	transition: transform 0.3s ease-in-out; /* 添加过渡效果 */
}

#leftbar_overview_author_image:hover {
	transform: scale(1.3) rotate(360deg); /* 缩放并旋转 */
}

管理员后台 → 外观 → 主题文件编辑器 → 边栏文件(sidebar.php)

点击 头像 跳转大概在第 126 行左右

1
2
3
4
5
6
7
<div class="tab-pane fade text-center<?php if ($nowActiveTab == 1) { echo ' active show'; }?>" id="leftbar_tab_overview"
     role="tabpanel" aria-labelledby="leftbar_tab_overview_btn">
/*添加的代码,链接是要跳转的页面链接*/    <a href="http://8.130.91.80/blog/?p=97">
        <div id="leftbar_overview_author_image"
             style="background-image: url(<?php echo get_option('argon_sidebar_auther_image') == '' ? 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cmVjdCBmaWxsPSIjNUU3MkU0MjIiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIi8+PGc+PGcgb3BhY2l0eT0iMC4zIj48cGF0aCBmaWxsPSIjNUU3MkU0IiBkPSJNNzQuMzksMzIuODZjLTAuOTgtMS43LTMuMzktMy4wOS01LjM1LTMuMDlINDUuNjJjLTEuOTYsMC00LjM3LDEuMzktNS4zNSwzLjA5TDI4LjU3LDUzLjE1Yy0wLjk4LDEuNy0wLjk4LDQuNDgsMCw2LjE3bDExLjcxLDIwLjI5YzAuOTgsMS43LDMuMzksMy4wOSw1LjM1LDMuMDloMjMuNDNjMS45NiwwLDQuMzctMS4zOSw1LjM1LTMuMDlMODYuMSw1OS4zMmMwLjk4LTEuNywwLjk4LTQuNDgsMC02LjE3TDc0LjM5LDMyLjg2eiIvPjwvZz48ZyBvcGFjaXR5PSIwLjgiPjxwYXRoIGZpbGw9IiM1RTcyRTQiIGQ9Ik02Mi4wNCwyMC4zOWMtMC45OC0xLjctMy4zOS0zLjA5LTUuMzUtMy4wOUgzMS43M2MtMS45NiwwLTQuMzcsMS4zOS01LjM1LDMuMDlMMTMuOSw0Mi4wMWMtMC45OCwxLjctMC45OCw0LjQ4LDAsNi4xN2wxMi40OSwyMS42MmMwLjk4LDEuNywzLjM5LDMuMDksNS4zNSwzLjA5aDI0Ljk3YzEuOTYsMCw0LjM3LTEuMzksNS4zNS0zLjA5bDEyLjQ5LTIxLjYyYzAuOTgtMS43LDAuOTgtNC40OCwwLTYuMTdMNjIuMDQsMjAuMzl6Ii8+PC9nPjwvZz48L3N2Zz4=' : get_option('argon_sidebar_auther_image'); ?>)"
             class="rounded-circle shadow-sm" alt="avatar"></div>
/*添加的代码*/    </a>

点击 姓名 跳转则是 130 行(添加完上面代码的情况下)左右

1
2
3
<a href="http://8.130.91.80/blog/?p=97">/*添加的代码*/
    <h6 id="leftbar_overview_author_name"><?php echo get_option('argon_sidebar_auther_name') == '' ? bloginfo('name') : get_option('argon_sidebar_auther_name'); ?></h6>
</a>/*添加的代码*/

管理员后台 → Argon 主题选项 → 页脚内容

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
<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: #64769e !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>


<!-- 运行时间 -->
<div class="github-badge-big">
    <span class="badge-subject"><i class="fa fa-clock-o"></i> 运行时间</span><span
        class="badge-value bg-apricots"><span id="blog_running_days" class="odometer odometer-auto-theme"></span>
            days
            <span id="blog_running_hours" class="odometer odometer-auto-theme"></span> H
            <span id="blog_running_mins" class="odometer odometer-auto-theme"></span> M
            <span id="blog_running_secs" class="odometer odometer-auto-theme"></span>S
        </span>

    <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(2023, 4, 23, 0, 0, 0); /*此处日期的月份改为自己真正月份的前一个月*/
            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>
</div>
<div>
    <style>
        @keyframes jump {
            0% {
                transform: translateY(0) scale(1);
            }
            50% {
                transform: translateY(-5px) scale(0.9);
            }
            100% {
                transform: translateY(0) scale(1);
            }
        }

        .jumping-text span {
            display: inline-block;
            animation: jump 2s infinite;
            animation-delay: 0s;
            will-change: transform; /* 添加优化提示 */
        }


        .jumping-text span:nth-child(1) {
            animation-delay: 0s;
        }

        .jumping-text span:nth-child(2) {
            animation-delay: 0.2s;
        }

        .jumping-text span:nth-child(3) {
            animation-delay: 0.4s;
        }

        /* Add more nth-child styles for each letter */

    </style>
    </head>
    <body>
    <i class="fa fa-wordpress"></i>
    <scan class="jumping-text">
        <span>博</span>
        <span>客</span>
        <span>基</span>
        <span>于</span>
        <span>Argon</span>
        <span>主</span>
        <span>题</span>
        <span>二</span>
        <span>次</span>
        <span>开</span>
        <span>发</span>
        <span>🛠️</span>
    </scan>

    <script>
        const jumpingText = document.querySelector('.jumping-text');
        const letters = jumpingText.querySelectorAll('span');

        let delay = 0;
        letters.forEach((letter) => {
            letter.style.animationDelay = delay + 's';
            delay += 0.1;
        });
    </script>
</div>


<style>
    .badge-1 {
        font-size: 9px; /* 调整为您想要的尺寸 */
    }
</style>

<span class="badge-1">点下方会跳到Argon项目地址(跳过去就不是我的网站哦不要搞错了•ࡇ•!)</span>

想获得更多美化教程建议去看看这些文章 ⬇

Argon主题博客美化 – Echo (liveout.cn)

Argon主题美化 - 北冥红烧鱼的芥子空间 (hongshaoyv.com)

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

Argon 主题修改记录 - 鸦鸦的巢穴 (crowya.com)