嘗試博客搭建,前面注冊部分很簡單,就不寫了,以我看到的一個博客為基礎,加上我自己的測試結束
1.官網
https://dash.infinityfree.com
前半部分參考:
使用Infinityfree免費虛擬主機搭建一個wordpress網站
2.創建賬戶或登錄您的賬戶
想要使用infinityfree免費托管服務,直接進入 Infinityfree 官網,點擊Register
注冊。
和普通的應用使用郵箱注冊一樣,填入郵箱和密碼, 同意協議并人機驗證后, 點擊注冊。
然后進入你的郵箱中,會有一封驗證郵件,點擊驗證后,賬戶就注冊好了。
3.創建托管賬戶
現在登錄infinityfree的控制臺,可以看到每個賬戶可以創建3個虛擬主機的賬戶,我們可以點擊Create Account
創建賬戶。另外雖然infinityfree沒有廣告,但是在主站點和控制面板上的展示廣告,以維持永久免費,不要點錯了。
點擊創建后進入計劃選擇
可以看到各種計劃的提供的功能詳情,我們選擇免費計劃,立即創建。人機驗證后,進入域名創建。
4.創建 InfinityFree 提供的自定義域或子域
輸入你喜歡的域名前綴,使用提供的免費二級域名,檢查是否可用。
添加域名信息,可以把密碼復制下來,以備后面使用,郵箱選項可以選擇不同意,不接受供應商發送給你郵件。
然后點擊創建賬戶Create Account
出現這樣的界面說明已經創建好了
可以點擊Finish
或者 Open Control Panel
進入控制臺。
5.管理您的帳戶
進入控制臺主界面,可以看到控制臺中有三個大的管理選項, Contrl Panel
控制面板,File Manager
文件管理,Softaculous Installer
軟件安裝。 。下面還有賬戶設置和站點域名的一些小的設置選項。
6.安裝 CMS(wordpress)
對于我們要安裝wordpress,我們可以在文件管理中,使用FTP上傳安裝文件來安裝,但是InfinityFree 提供了 Softaculous 自動腳本安裝程序,只需單擊幾下即可安裝超過 400 個腳本、應用程序和 CMS(如 WordPress)之一,并自動使它們保持更新。因為我們點擊Softaculous Installer
軟件安裝,出現下面界面。
選擇wordpress install
安裝
在我寫這篇文章的時候(2024年9月)可以看到支持wordpress 4.9 到目前的6.62 版本,還是挺新的,我們選擇6.62版本。URL可以選擇https或者http,目錄可以選擇添加你自定義的目錄或者留空。
添加一下紅色框內的內容,記錄一下用戶名和密碼。然后也可以修改一下高級設置或者保持默認即可
高級設置主要有數據庫名和表前綴,以及是否在安裝時候更換一個模板,我們這里先選擇默認,等安裝好后在后臺再更換模板。
點擊安裝
安裝速度還是挺快的,十幾秒即安裝完成。 然后出現一個安裝成功的提示
訪問我們剛才自定義的域名http://longlikun.42web.io,可以看到wordpress的默認頁面
現在我們的還沒有配置ssl,下一步我們配置一下ssl。
配置ssl
現在我們配置一個ssl, 選擇上面的ssl選項
然后點擊創建新的ssl 證書 New SSL Certificate
添加剛才的域名,點擊 Create Order
創建訂單。
證書創建完成, 然后我們需要添加一個cname記錄,完成挑戰以驗證域名。點擊SetUp CNAME Record
提示添加成功
稍等幾分鐘,變成綠色的時候,說明已經驗證了域名。
然后就可以申請安全證書了。 點擊 Request Certifate
按鈕,會出現一個進度條
當進度條完成后,選擇自動安裝證書 Install SSl Certificate Automatically
還是稍等幾分鐘,回到控制臺的ssl選項
可以看到我們的域名 狀態變成了issued
發布.說明證書已經申請成功, 但是我們訪問站點,還是http的狀態,因為剛才我們安裝wordpress的時候并沒有選擇https的格式,所以還需要配置一下。如果安裝時候已經選擇了站點是https格式的,那么后面的可以省略了。
修改文件
選擇剛才創建的賬戶,進入文件管理選項卡,
修改站點根目錄的.htaccess ,
添加下面代碼:
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站點
這樣我們就完成了使用Infinityfree 搭建一個wordpress 站點,并配置ssl按照證書。
下來是美化部分:
點擊管理
點擊如下按鈕上傳一個主題
這里選擇argon
點擊安裝,等待安裝然后啟用
導入準備好的主題設置JSON
點擊
找到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"}
更換網站圖標
然后設置網站圖標 點擊外觀 自定義
點擊站點身份 跟換站點圖標 上傳文件 更換 點擊發布
添加網站導航
其中這些文字的名字帶圖標如下
<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>歸檔
分類目錄這里如圖即可,不用額外配置
添加頁面
1.添加關于
點擊左上角頭像回去
2.添加說說:點擊標題輸入說說,選擇說說模板
3.添加歸檔,選擇歸檔時間軸
4.新建留言板,選擇留言板
加好分類后 點擊外觀 點擊菜單 菜單名:網站導航,點擊創建。(記得勾選頂部導航!)
菜單項:點擊分類目錄 點擊查看所有 點擊全選 點擊添加至菜單 點擊保存菜單
添加分類目錄中的文章,
頁面中的留言板,說說,關于。
點擊自定義鏈接,鏈接文字是首頁,網址是我們的首頁的網址,添加至菜單
為他們配置一下圖標,點擊保存
給網站導航和其他內容配置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 名字 昵稱 公開顯示為 郵箱 點擊更新個人資料
給網站上傳白天和黑夜的背景
點擊媒體 點擊添加文件 上傳即可 上傳好后點擊圖片可查看圖片的位置并 復制圖片url位置
點擊argon主題選項
修改頭像為自己的
點擊右邊大綱–頁面背景 粘貼url地址到頁面背景/頁面背景(夜間模式時)輸入框
滑到底部點擊保存
年度倒計時顯示
點擊外觀 在左側欄里面添加工具–簡碼
輸入:
<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>
點擊右上角更新
左側個人鏈接
在菜單點擊創建菜單如下
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>
勾選左側隨便加點東西