个人博客搭建过程

尝试博客搭建,前面注册部分很简单,就不写了,以我看到的一个博客为基础,加上我自己的测试结束

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.mzph.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…