個人博客搭建過程

嘗試博客搭建,前面注冊部分很簡單,就不寫了,以我看到的一個博客為基礎,加上我自己的測試結束

1.官網

https://dash.infinityfree.com

前半部分參考:

使用Infinityfree免費虛擬主機搭建一個wordpress網站

2.創建賬戶或登錄您的賬戶

想要使用infinityfree免費托管服務,直接進入 Infinityfree 官網,點擊Register注冊。 alt text

和普通的應用使用郵箱注冊一樣,填入郵箱和密碼, 同意協議并人機驗證后, 點擊注冊。 alt text

然后進入你的郵箱中,會有一封驗證郵件,點擊驗證后,賬戶就注冊好了。

3.創建托管賬戶

現在登錄infinityfree的控制臺,可以看到每個賬戶可以創建3個虛擬主機的賬戶,我們可以點擊Create Account創建賬戶。另外雖然infinityfree沒有廣告,但是在主站點和控制面板上的展示廣告,以維持永久免費,不要點錯了。

alt text

點擊創建后進入計劃選擇

alt text

可以看到各種計劃的提供的功能詳情,我們選擇免費計劃,立即創建。人機驗證后,進入域名創建。

4.創建 InfinityFree 提供的自定義域或子域

輸入你喜歡的域名前綴,使用提供的免費二級域名,檢查是否可用。

alt text

添加域名信息,可以把密碼復制下來,以備后面使用,郵箱選項可以選擇不同意,不接受供應商發送給你郵件。

alt text

然后點擊創建賬戶Create Account

出現這樣的界面說明已經創建好了

alt text

可以點擊Finish 或者 Open Control Panel 進入控制臺。

5.管理您的帳戶

進入控制臺主界面,可以看到控制臺中有三個大的管理選項, Contrl Panel控制面板,File Manager文件管理,Softaculous Installer軟件安裝。 alt text。下面還有賬戶設置和站點域名的一些小的設置選項。

6.安裝 CMS(wordpress)

對于我們要安裝wordpress,我們可以在文件管理中,使用FTP上傳安裝文件來安裝,但是InfinityFree 提供了 Softaculous 自動腳本安裝程序,只需單擊幾下即可安裝超過 400 個腳本、應用程序和 CMS(如 WordPress)之一,并自動使它們保持更新。因為我們點擊Softaculous Installer軟件安裝,出現下面界面。

alt text

選擇wordpress install安裝 alt text

在我寫這篇文章的時候(2024年9月)可以看到支持wordpress 4.9 到目前的6.62 版本,還是挺新的,我們選擇6.62版本。URL可以選擇https或者http,目錄可以選擇添加你自定義的目錄或者留空。 alt text

添加一下紅色框內的內容,記錄一下用戶名和密碼。然后也可以修改一下高級設置或者保持默認即可 alt text

高級設置主要有數據庫名和表前綴,以及是否在安裝時候更換一個模板,我們這里先選擇默認,等安裝好后在后臺再更換模板。

點擊安裝 image-20250415212741279

安裝速度還是挺快的,十幾秒即安裝完成。 然后出現一個安裝成功的提示 alt text

訪問我們剛才自定義的域名http://longlikun.42web.io,可以看到wordpress的默認頁面 alt text

現在我們的還沒有配置ssl,下一步我們配置一下ssl。

配置ssl

現在我們配置一個ssl, 選擇上面的ssl選項 alt text

然后點擊創建新的ssl 證書 New SSL Certificate

alt text

添加剛才的域名,點擊 Create Order 創建訂單。

證書創建完成, 然后我們需要添加一個cname記錄,完成挑戰以驗證域名。點擊SetUp CNAME Record alt text

提示添加成功 alt text

稍等幾分鐘,變成綠色的時候,說明已經驗證了域名。

alt text

然后就可以申請安全證書了。 點擊 Request Certifate按鈕,會出現一個進度條 alt text

當進度條完成后,選擇自動安裝證書 Install SSl Certificate Automatically alt text

還是稍等幾分鐘,回到控制臺的ssl選項 alt text

可以看到我們的域名 狀態變成了issued 發布.說明證書已經申請成功, 但是我們訪問站點,還是http的狀態,因為剛才我們安裝wordpress的時候并沒有選擇https的格式,所以還需要配置一下。如果安裝時候已經選擇了站點是https格式的,那么后面的可以省略了。

修改文件

選擇剛才創建的賬戶,進入文件管理選項卡, alt text

修改站點根目錄的.htaccess ,

image-20250415212447798

image-20250415212513285

添加下面代碼:

image-20250415212534078

RewriteEngine On
RewriteCond %{HTTP:X-Forwarded-Proto} !https
RewriteCond %{HTTPS} off
RewriteCond %{HTTP:CF-Visitor} !{"scheme":"https"}
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

更多詳情見文檔 現在,訪問站點,會自定跳轉到https站點 alt text

這樣我們就完成了使用Infinityfree 搭建一個wordpress 站點,并配置ssl按照證書。alt text


下來是美化部分:

點擊管理

image-20250415212931582

點擊如下按鈕上傳一個主題

image-20250415213020732

這里選擇argon

image-20250415213056315

點擊安裝,等待安裝然后啟用

導入準備好的主題設置JSON

點擊

image-20250415213300895

找到argon主題設置選項 點擊右下角"到底部" 沒有就將頁面下滑一點點
點擊導入設置
輸入這一段json,粘貼到argon導入設置里面 點擊確定 點擊保存更改

之后自己一個一個改自己的相關信息

{"argon_theme_color":"#5e72e4","argon_theme_color_hex_preview":"#5e72e4","argon_show_customize_theme_color_picker":true,"argon_enable_immersion_color":"true","argon_darkmode_autoswitch":"time","argon_enable_amoled_dark":"false","argon_card_radius":"15","argon_card_shadow":"default","argon_page_layout":"double","argon_article_list_waterflow":"1","argon_article_list_layout":"1","argon_font":"serif","argon_assets_path":"jsdelivr_fastly","argon_custom_assets_path":"","argon_wp_path":"/","argon_dateformat":"YMD","argon_enable_headroom":"true","argon_toolbar_title":"愿相知","argon_toolbar_icon":"http://windknow.loveslife.biz/wp-content/uploads/2025/04/cropped-頭像.jpg","argon_toolbar_icon_link":" http://windknow.loveslife.biz/wp-content/uploads/2025/04/cropped-頭像.jpg","argon_toolbar_blur":"true","argon_banner_title":"windknow‘s blog","argon_banner_subtitle":"Life is a coding,I will debug it.","argon_banner_size":"fullscreen","argon_page_background_banner_style":"transparent","argon_show_toolbar_mask":true,"argon_banner_background_url":"--bing--","argon_banner_background_color_type":"shape-primary","argon_banner_background_hide_shapes":true,"argon_enable_banner_title_typing_effect":"true","argon_banner_typing_effect_interval":"100","argon_page_background_url":"http://windknow.loveslife.biz/wp-content/uploads/2025/04/test-scaled.jpg","argon_page_background_dark_url":"http://windknow.loveslife.biz/wp-content/uploads/2025/04/test-scaled.jpg","argon_page_background_opacity":"0.7","argon_sidebar_banner_title":"愿相知公告欄","argon_sidebar_banner_subtitle":"--hitokoto--","argon_sidebar_auther_name":"愿相知","argon_sidebar_auther_image":"http://windknow.loveslife.biz/wp-content/uploads/2025/04/cropped-頭像.jpg","argon_sidebar_author_description":"","argon_sidebar_announcement":"記錄自己技術增長過程的博客~","argon_fab_show_settings_button":"false","argon_fab_show_darkmode_button":"true","argon_fab_show_gotocomment_button":"false","argon_seo_description":"網站描述 (Description Meta 標簽)\n","argon_seo_keywords":"搜索引擎關鍵詞(Keywords Meta 標簽)","argon_article_meta":"time|categories|views","argon_show_readingtime":"true","argon_reading_speed":"580","argon_reading_speed_en":"80","argon_reading_speed_code":"10","argon_show_thumbnail_in_banner_in_content_page":"false","argon_first_image_as_thumbnail_by_default":"true","argon_reference_list_title":"參考","argon_show_sharebtn":"true","argon_show_headindex_number":"false","argon_donate_qrcode_url":"","argon_additional_content_after_post":"文末附加內容","argon_related_post":"category,tag","argon_related_post_sort_orderby":"meta_value_num","argon_related_post_sort_order":"DESC","argon_related_post_limit":"10","argon_article_header_style":"article-header-style-2","argon_outdated_info_time_type":"createdtime","argon_outdated_info_days":"1","argon_outdated_info_tip_type":"inpost","argon_outdated_info_tip_content":"本文最后更新于%modify_date_delta% 天前,其中的信息可能已經過時,如有錯誤請發送郵件到1120774555@qq.com","argon_archives_timeline_show_month":"true","argon_archives_timeline_url":"","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: #f7c280 !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<div class=\"github-badge-big\">\n<span class=\"badge-subject\"><i class=\"fa fa-id-card\"></i> 備案號 </span\n><span class=\"badge-value bg-orange\">\n<a href=\"https://beian.miit.gov.cn/\" target=\"_blank\" one-link-mark=\"yes\"\n>蘇ICP備0000000000號</a\n>\n|\n<a\nhref=\"http://www.beian.gov.cn/portal/registerSystemInfo?recordcode= 32072202010255\"\ntarget=\"_blank\"\none-link-mark=\"yes\"\n>蘇公網安備 00000000000000號</a\n></span\n>\n</div>\n<div class=\"github-badge-big\">\n        <span class=\"badge-subject\"><i class=\"fa fa-cloud\" aria-hidden=\"true\"></i> CDN</span>\n        <span class=\"badge-value bg-shallots\">\n            <a href=\"https://www.upyun.com/\" target=\"_blank\" one-link-mark=\"yes\">Upyun</a>\n        </span>\n<span class=\"badge-subject\"><i class=\"fa fa-wordpress\"></i> Powered</span\n><span class=\"badge-value bg-green\"\n><a href=\"https://cn.wordpress.org/\" target=\"_blank\" one-link-mark=\"yes\"\n>WordPress</a\n></span\n>\n</div>\n<div class=\"github-badge-big\">\n<span class=\"badge-subject\">Copyright </span\n><span class=\"badge-value bg-red\">\n2022-2022\n<i class=\"fa fa-copyright\"></i> Fawang</span\n>\n</script>\n</div>\n<div class=\"github-badge-big\">\n<span class=\"badge-subject\"><i class=\"fa fa-clock-o\"></i> Running Time</span\n><span class=\"badge-value bg-apricots\"\n><span id=\"blog_running_days\" class=\"odometer odometer-auto-theme\"></span>\ndays\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>\nS</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(2020, 0,0, 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<!--live2d--> \n<script src=\"/wp-content/themes/argon/argon/live2d/TweenLite.js\"></script> \n<script src=\"/wp-content/themes/argon/argon/live2d/live2dcubismcore.min.js\"></script>\n<script src=\"/wp-content/themes/argon/argon/live2d/pixi.min.js\"></script> \n<script src=\"/wp-content/themes/argon/argon/live2d/cubism4.min.js\"></script> \n<link href=\"/wp-content/themes/argon/argon/live2d/pio.css\" rel=\"stylesheet\" type=\"text/css\"/> \n<script src=\"/wp-content/themes/argon/argon/live2d/pio.js\"></script> \n<script src=\"/wp-content/themes/argon/argon/live2d/pio_sdk4.js\"></script> \n<script src=\"/wp-content/themes/argon/argon/live2d/load.js\"></script>","argon_enable_code_highlight":"true","argon_code_theme":"vs2015","argon_code_highlight_hide_linenumber":"true","argon_code_highlight_break_line":"false","argon_code_highlight_transparent_linenumber":"false","argon_math_render":"none","argon_mathjax_cdn_url":"//cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml-full.js","argon_mathjax_v2_cdn_url":"//cdn.jsdelivr.net/npm/mathjax@2.7.5/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":"1","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":"article","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":"commentsender","argon_enable_comment_pinning":"true","argon_enable_comment_upvote":"true","argon_comment_ua":"platform,browser","argon_show_comment_parent_info":"true","argon_fold_long_comments":"true","argon_gravatar_cdn":"","argon_text_gravatar":"true","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":"true","argon_enable_timezone_fix":"false","argon_hide_shortcode_in_preview":"true","argon_trim_words_count":"0","argon_enable_mobile_scale":"false","argon_disable_googlefont":"false","argon_disable_codeblock_style":"false","argon_update_source":"github","argon_hide_footer_author":"true"}

更換網站圖標

然后設置網站圖標 點擊外觀 自定義

image-20250415213616896

點擊站點身份 跟換站點圖標 上傳文件 更換 點擊發布

image-20250415213714112

添加網站導航

其中這些文字的名字帶圖標如下

<i class="fa fa-home"></i>首頁
<i class="fa fa-book" aria-hidden="true"></i>文章
<i class="fa fa-comment-o" aria-hidden="true"></i>說說
<i class="fa fa-question-circle" aria-hidden="true"></i>關于
<i class="fa fa-comments" aria-hidden="true"></i>留言板
<i class="fa fa-youtube-play" aria-hidden="true"></i>bilibili主頁
<i class="fa fa-clock-o" aria-hidden="true"></i>歸檔

分類目錄這里如圖即可,不用額外配置

image-20250415213834007

添加頁面

image-20250415220317301

1.添加關于

image-20250415220501669

點擊左上角頭像回去

2.添加說說:點擊標題輸入說說,選擇說說模板

image-20250415220728928

3.添加歸檔,選擇歸檔時間軸

4.新建留言板,選擇留言板

image-20250415220955592

加好分類后 點擊外觀 點擊菜單 菜單名:網站導航,點擊創建。(記得勾選頂部導航!)

image-20250415213930996

菜單項:點擊分類目錄 點擊查看所有 點擊全選 點擊添加至菜單 點擊保存菜單

添加分類目錄中的文章,

頁面中的留言板,說說,關于。

image-20250415222331446

點擊自定義鏈接,鏈接文字是首頁,網址是我們的首頁的網址,添加至菜單

image-20250415222003879

為他們配置一下圖標,點擊保存

image-20250415222644351

給網站導航和其他內容配置CSS(包含透明設置)

點擊外觀 點擊自定義 點擊額外CSS

/*網站字體*/
/*原則上你可以設置多個字體,然后在不同的部位使用不同的字體。*/
@font-face{font-family:echo;
src:url(https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/fonts/13.woff2) format('woff2')
}body{font-family: 'echo', Georgia, -apple-system, 'Nimbus Roman No9 L', 'PingFang SC', 'Hiragino Sans GB', 'Noto Serif SC', 'Microsoft Yahei', 'WenQuanYi Micro Hei', 'ST Heiti', sans-serif
}/*橫幅字體大小*/
.banner-title {font-size: 2.5em;
}
.banner-subtitle{font-size: 28px;-webkit-text-fill-color: transparent;        
background: linear-gradient(94.75deg,rgb(60, 172, 247) 0%,rgb(131, 101, 253) 43.66%,                rgb(255, 141, 112) 64.23%,rgb(247, 201, 102) 83.76%,rgb(172, 143, 100) 100%);        
-webkit-background-clip: text;
}/*文章標題字體大小*/
.post-title {font-size: 25px
}/*正文字體大小(不包含代碼)*/
.post-content p{font-size: 1.25rem;
}
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: 1.2rem
}
/*評論區代碼的強調色*/
code {color: rgba(var(--themecolor-rgbstr));
}/*說說字體大小和顏色設置*/
.shuoshuo-title {font-size: 25px;
/*  color: rgba(var(--themecolor-rgbstr)); */
}/*尾注字體大小*/
.additional-content-after-post{font-size: 1.2rem
}/* 公告居中 */
.leftbar-announcement-title {font-size: 20px;
/*     text-align: center; */color: #00FFFF
}.leftbar-announcement-content {font-size: 15px;line-height: 1.8;padding-top: 8px;opacity: 0.8;
/*     text-align: center; */color:#00FFFF;
}/* 一言居中 */
.leftbar-banner-title {font-size: 20px;display: block;text-align: center;opacity: 0.8;
}/* 個性簽名居中 */
.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: rgba(var(--themecolor-rgbstr));
}/*左側菜單欄突出顏色修改*/
.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.8) !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.1) !important;backdrop-filter: blur(10px);-webkit-backdrop-filter:blur(10px);
}/*夜間透明*/
html.darkmode.bg-white,html.darkmode .card,html.darkmode #footer{background:rgba(66, 66, 66, 0.9) !important;
}
html.darkmode #fabtn_blog_settings_popup{background:rgba(66, 66, 66, 0.95) !important;
}/*標簽背景
.post-meta-detail-tag {background:rgba(255, 255, 255, 0.5)!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;
}/*頂欄菜單放大*/
/*這里也可以設置剛剛我們設置的btfFont字體。試試看!*/.navbar-nav .nav-link {font-size: 1rem;font-family: 'echo';}
.navbar-brand {font-family: 'echo';font-size: 1.2rem;margin-right: 1.0 rem;padding-bottom: 0.2 rem;-webkit-text-fill-color: transparent;        
background: linear-gradient(94.75deg,rgb(60, 172, 247) 0%,rgb(131, 101, 253) 43.66%,                rgb(255, 141, 112) 64.23%,rgb(247, 201, 102) 83.76%,rgb(172, 143, 100) 100%);        
-webkit-background-clip: text;
}/*菜單大小*/
.nav-link-inner--text {font-size: 1.25em;
}
.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: 1.4em;padding-left: 1.4em;
}/*隱藏wp-SEO插件帶來的線條陰影(不一定要裝)*/
*[style='position: relative; z-index: 99998;'] {display: none;
}/* 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;
}/*      左側欄外觀CSS     *//* 頭像 */
#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;transition: transform 0.3s ease;
}/*  頭像亮暗  */
#leftbar_overview_author_image:hover {transform: scale(1.23);filter: brightness(150%);
}/* 名稱 */
#leftbar_overview_author_name {margin-top: 15px;font-size: 18px;align-content;color:#00FFFF;
}/* 簡介 */
#leftbar_overview_author_description {font-size: 14px;margin-top: -4px;opacity: 0.8;color:#c21f30;
}/* 標題,鏈接等 */
a, .btn-neutral {color:#AF7AC5 ;}/* 頁腳透明 */
#footer {background: var(--themecolor-gradient);color: #fff;width: 100%;float: right;margin-bottom: 25px;text-align: center;padding: 25px 20px;line-height: 1.8;transition: none;opacity: 0.6;
}

里面的內容復制到網站額外CSS設置里面,點擊發布

給后臺設置一個自己的頭像

點擊插件 點擊添加新插件 搜索User Profile Picture 添加后啟用 然后點擊用戶 點擊個人資料 點擊Profile Image 上傳圖片更改即可

同時修改管理配色方案為argon 名字 昵稱 公開顯示為 郵箱 點擊更新個人資料

image-20250415214826237

給網站上傳白天和黑夜的背景

點擊媒體 點擊添加文件 上傳即可 上傳好后點擊圖片可查看圖片的位置并 復制圖片url位置

image-20250415215258084

點擊argon主題選項

修改頭像為自己的

image-20250415215157327

點擊右邊大綱–頁面背景 粘貼url地址到頁面背景/頁面背景(夜間模式時)輸入框

image-20250415215402833

滑到底部點擊保存

image-20250415215536560

年度倒計時顯示

點擊外觀 在左側欄里面添加工具–簡碼

image-20250415223048959

輸入:

<div class="progress-wrapper" style="padding: 0">
<div class="progress-info">
<div class="progress-label">
<span id="yearprogress_yearname"></span>
</div>
<div id="yearprogress_text_container" class="progress-percentage">
<span id="yearprogress_progresstext"></span>
<span id="yearprogress_progresstext_full"></span>
</div>
</div>
<div class="progress">
<div id="yearprogress_progressbar" class="progress-bar bg-primary"></div>
</div>
</div>
<script no-pjax="">
function yearprogress_refresh() {
let year = new Date().getFullYear();
$("#yearprogress_yearname").text(year);
let from = new Date(year, 0, 1, 0, 0, 0);
let to = new Date(year, 11, 31, 23, 59, 59);
let now = new Date();
let progress = (((now - from) / (to - from + 1)) * 100).toFixed(7);
let progressshort = (((now - from) / (to - from + 1)) * 100).toFixed(2);
$("#yearprogress_progresstext").text(progressshort + "%");
$("#yearprogress_progresstext_full").text(progress + "%");
$("#yearprogress_progressbar").css("width", progress + "%");
}
yearprogress_refresh();
if (typeof yearProgressIntervalHasSet == "undefined") {
var yearProgressIntervalHasSet = true;
setInterval(function () {
yearprogress_refresh();
}, 500);
}
</script>
<style>
#yearprogress_text_container {
width: 100%;
height: 22px;
overflow: hidden;
user-select: none;
}
#yearprogress_text_container > span {
transition: all 0.3s ease;
display: block;
}
#yearprogress_text_container:hover > span {
transform: translateY(-45px);
}
</style>

點擊右上角更新

image-20250415223132207

image-20250415223438565

左側個人鏈接

在菜單點擊創建菜單如下

ss_progresstext_full").text(progress + "%");
$("#yearprogress_progressbar").css("width", progress + "%");
}
yearprogress_refresh();
if (typeof yearProgressIntervalHasSet == "undefined") {
var yearProgressIntervalHasSet = true;
setInterval(function () {
yearprogress_refresh();
}, 500);
}
</script>
<style>
#yearprogress_text_container {
width: 100%;
height: 22px;
overflow: hidden;
user-select: none;
}
#yearprogress_text_container > span {
transition: all 0.3s ease;
display: block;
}
#yearprogress_text_container:hover > span {
transform: translateY(-45px);
}
</style>

勾選左側隨便加點東西
在這里插入圖片描述

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/901733.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/901733.shtml
英文地址,請注明出處:http://en.pswp.cn/news/901733.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Proxmox VE 網絡配置命令大全

如果對 Proxmox VE 全棧管理感興趣&#xff0c;可以關注“Proxmox VE 全棧管理”專欄&#xff0c;后續文章將圍繞該體系&#xff0c;從多個維度深入展開。 概要&#xff1a;Proxmox VE 網絡配置靈活&#xff0c;滿足虛擬化組網需求。基礎靠橋接實現虛擬機與物理網絡互聯&#x…

【QT入門到晉級】QT打動態庫包及引入動態庫包

前言 本篇為持續更新狀態&#xff0c;內容包含window、Linux下打動態庫包&#xff0c;以及引入動態庫包的方式。 一、window 1、動態庫打包 以百度的OCR接口調用打dll庫為例&#xff0c;以下為qtcreator創建動態庫過程&#xff1a; 1.1Qtcreator創建lib項目 創建成功后&…

Uniapp: 大綱

目錄 一、基礎鞏固1.1、Uniapp:下拉選擇框ba-tree-picker1.2、Uniapp&#xff1a;確認框1.3、Uniapp&#xff1a;消息提示框1.4、Uniapp&#xff1a;列表提示框1.5、Uniapp&#xff1a;獲取當前定位坐標 二、項目配置2.1、Uniapp&#xff1a;修改端口號2.2、Uniapp&#xff1a;…

WPF 從Main()方法啟動

1.去掉App.xaml StartupUri“MainWindow.xaml” 只會讓App.g.cs 不生成這行代碼&#xff0c;但是還是會生成的App.g.cs文件中生成Main方法 this.StartupUri new System.Uri("MainWindow.xaml", System.UriKind.Relative);默認的App.xaml的生成操作是 應用程序定義…

ADB的安裝及抓取日志(2)

三、ADB抓取日志 在使用ADB抓取日志前&#xff0c;首先要保證電腦已經安裝并配置ADB&#xff0c;在上一節已經驗證完成。連接設備&#xff1a;可通過USB或者WI-FI&#xff0c;將安卓設備與電腦連接&#xff0c;并啟用USB調試模式&#xff0c;此處我選擇的是通過電腦與安卓設備…

opencv 灰度實驗

opencv 灰度實驗 1. 最大值法2. 平均值法3. 加權均值法4(直接讀取灰度圖)cv2.IMREAD_GRAYSCALE5內置將原圖轉換為灰度圖cv2.cvtColor()6 兩個極端的灰度值 灰度圖與彩色圖最大的不同就是&#xff1a;彩色圖是由R、G、B三個通道組成&#xff0c;而灰度圖只有一個通道&#xff0c…

『Kubernetes(K8S) 入門進階實戰』實戰入門 - Pod 詳解

『Kubernetes(K8S) 入門進階實戰』實戰入門 - Pod 詳解 Pod 結構 每個 Pod 中都可以包含一個或者多個容器&#xff0c;這些容器可以分為兩類 用戶程序所在的容器&#xff0c;數量可多可少Pause 容器&#xff0c;這是每個 Pod 都會有的一個根容器&#xff0c;它的作用有兩個 可…

用 Vue 3 實現一個拖拽排序表格組件(支持列/行重排、列寬調整)

文章目錄 一、項目初始化1.1 技術棧說明1.2 項目結構圖&#xff08;Mermaid&#xff09; 二、構建基礎表格組件2.1 創建基本表格結構 三、實現行拖拽排序3.1 安裝依賴3.2 使用 vuedraggable 實現拖拽 四、實現列寬拖拽調整4.1 基本樣式設置4.2 添加拖拽邏輯 五、實現列拖拽排序…

Python異常處理全面指南

目錄 一、異常處理概述 1.1 什么是異常&#xff1f; 1.2 常見異常類型示例 二、基礎異常捕獲 2.1 簡單異常捕獲語法 2.2 特定異常類型捕獲 三、高級異常處理技術 3.1 完整異常處理語法 3.2 異常傳遞機制 四、主動拋出異常 4.1 自定義異常拋出 4.2 創建自定義異常類 …

基于混沌映射的LDPC信道編譯碼matlab性能仿真,對比LDPC

目錄 1.算法仿真效果 2.算法涉及理論知識概要 2.1 混沌映射 2.2 基于混沌映射的LDPC編譯碼 3.MATLAB核心程序 4.完整算法代碼文件獲得 1.算法仿真效果 matlab2022a仿真結果如下&#xff08;完整代碼運行后無水印&#xff09;&#xff1a; 仿真操作步驟可參考程序配套的操…

學點概率論,打破認識誤區

概率論是統計分析和機器學習的核心。掌握概率論對于理解和開發穩健的模型至關重要&#xff0c;因為數據科學家需要掌握概率論。本博客將帶您了解概率論中的關鍵概念&#xff0c;從集合論的基礎知識到高級貝葉斯推理&#xff0c;并提供詳細的解釋和實際示例。 目錄 簡介 基本集合…

【數據結構_9】棧和隊列

隊列 Queue 一個方向進&#xff0c;一個方向出 Queue隊列提供的核心方法&#xff1a; 入隊列&#xff1a;offer add 出隊列&#xff1a;poll remove 取隊首元素&#xff1a; peek element 前面一列發生錯誤是返回null 后面一列發生錯誤時拋出異常 Queue是否能夠使用isEm…

HarmontOS-ArkUI V2狀態 !!語法糖 雙向綁定

什么是雙向綁定 雙向綁定指的是在組件間數據的雙向綁定。當一個值無論是在父組件還是子組件中改動都會在這兩層中都更新界面。 回顧過往的“雙向綁定”實現方式 靠@Event裝飾回調函數 一般是對于@Param修飾的狀態變量。當子組件發生某個動作的時候,調用某個父組件傳遞過來的…

貪心算法day9(合并區間)

1.合并區間 56. 合并區間 - 力扣&#xff08;LeetCode&#xff09; 對于這種區間問題&#xff0c;我們應該先排序根據排序的結果總結一些規律&#xff0c;進而的得出解決該問題的策略。 class Solution {public static int[][] merge(int[][] intervals) {//第一步進行左端點…

探索加密期權波動率交易的系統化實踐——動態對沖工具使用

Trading Volatility – What Are My Options? 在本文中&#xff0c;我們將介紹一些如何交易資產波動性&#xff08;而非資產價格&#xff09;的示例。為了幫助理解&#xff0c;我們將使用 Deribit 上提供的幾種不同產品&#xff0c;包括但不限于期權。我們將盡可能消除對標的價…

子函數嵌套的意義——以“顏色排序”為例(Python)

多一層縮進精減參數傳遞&#xff0c;參數少平鋪書代碼寫更佳。 筆記模板由python腳本于2025-04-16 11:52:53創建&#xff0c;本篇筆記適合喜歡子函數嵌套結構代碼形式的coder翻閱。 【學習的細節是歡悅的歷程】 博客的核心價值&#xff1a;在于輸出思考與經驗&#xff0c;而不僅…

【數據結構與算法】LeetCode每日一題

此題跟27.移除數組中的指定值 類似&#xff0c;都是移除且雙指針玩法&#xff0c;只不過判斷條件發生了變化 此題跟26.刪除有序數組中的重復項I 一樣&#xff0c;除了fast-1變成了fast-2

c#OleDb連接池管理功能

使用 ConcurrentDictionary 和 ConcurrentBag 來管理數據庫連接 using Drv.Utilities; using System; using System.Collections.Concurrent; using System.Collections.Generic; using System.Data.OleDb; using System.Linq;namespace Drv.AccessClient {/// <summary>…

【Flink運行時架構】核心組件

在Flink的運行架構中&#xff0c;有兩大比較重要的組件&#xff1a;作業管理器&#xff08;JobManager&#xff09;和任務管理器&#xff08;TaskManager&#xff09;。 Flink的作業提交與任務處理時的系統如下圖所示。 其中&#xff0c;客戶端并不是處理系統的一部分&#xff…

牟乃夏《ArcGIS Engine地理信息系統開發教程》學習筆記2

目錄 一、ArcGIS Engine概述 1、 定義 2、 核心功能 3、 與ArcObjects&#xff08;AO&#xff09;的關系 二、開發環境搭建 1、 開發工具要求 2、 關鍵步驟 三、 ArcGIS Engine核心組件 1、 對象模型 2、 類庫分類 四、 第一個AE應用程序&#xff08;C#示例&#xf…