尝试博客搭建,前面注册部分很简单,就不写了,以我看到的一个博客为基础,加上我自己的测试结束
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>
勾选左侧随便加点东西