Before - After
diff --git a/docs/about/resume.md b/docs/about/resume.md
index cea8c1a..9f4ae53 100644
--- a/docs/about/resume.md
+++ b/docs/about/resume.md
@@ -26,7 +26,7 @@ comments: false
---
-
diff --git a/docs/about/sty/portfolio.css b/docs/about/sty/portfolio.css
index d2a3d08..9c924b6 100644
--- a/docs/about/sty/portfolio.css
+++ b/docs/about/sty/portfolio.css
@@ -1,69 +1,63 @@
:root {
- --header-height: 3rem;
+ --header-height: 3rem;
- /*========== Colors ==========*/
- --first-color: #608DBD;
- --first-color-second: #608DBD;
- --first-color-alt: #608DBD;
- --first-color-lighter: #608DBD;
+ /*========== Colors ==========*/
+ --first-color: #608DBD;
+ --first-color-second: #608DBD;
+ --first-color-alt: #608DBD;
+ --first-color-lighter: #608DBD;
- --title-color: #608DBD;
- --text-color: #080505;
- --text-color-light: #f5ab17;
+ --title-color: #608DBD;
+ --text-color: #757575;
+ /* --text-color-light: #f5ab17; */
- --input-color: #F5EEE3;
- --body-color: #FDFBF8;
- --container-color: #FFFFFF;
+ --input-color: #F5EEE3;
+ /* --body-color: #FDFBF8;
+ --container-color: #FFFFFF; */
- /*========== Font and typography ==========*/
- --big-font-size: 2rem;
- --h1-font-size: 1.5rem;
- --h2-font-size: 1.25rem;
- --h3-font-size: 1.125rem;
- --normal-font-size: .938rem;
- --small-font-size: .813rem;
- --smaller-font-size: .70rem;
+ /*========== Font and typography ==========*/
+ --big-font-size: 2rem;
+ --h1-font-size: 1.5rem;
+ --h2-font-size: 1.25rem;
+ --h3-font-size: 1.125rem;
+ --normal-font-size: .938rem;
+ --small-font-size: .813rem;
+ --smaller-font-size: .70rem;
- /*========== Font weight ==========*/
- --font-medium: 500;
- --font-semi-bold: 600;
+ /*========== Font weight ==========*/
+ --font-medium: 500;
+ --font-semi-bold: 600;
- /*========== Margenes Bottom ==========*/
- --mb-0-25: .25rem;
- --mb-0-5: .5rem;
- --mb-0-75: .75rem;
- --mb-1: 1rem;
- --mb-1-5: 1.5rem;
- --mb-2: 2rem;
- --mb-2-5: 2.5rem;
- --mb-3: 3rem;
+ /*========== Margenes Bottom ==========*/
+ --mb-0-25: .25rem;
+ --mb-0-5: .5rem;
+ --mb-0-75: .75rem;
+ --mb-1: 1rem;
+ --mb-1-5: 1.5rem;
+ --mb-2: 2rem;
+ --mb-2-5: 2.5rem;
+ --mb-3: 3rem;
- /*========== z index ==========*/
- --z-tooltip: 10;
- --z-fixed: 100;
- --z-modal: 1000;
+ /*========== z index ==========*/
+ --z-tooltip: 10;
+ --z-fixed: 100;
+ --z-modal: 1000;
}
/* Font size for large devices */
@media screen and (min-width: 968px) {
- :root {
- --big-font-size: 3rem;
- --h1-font-size: 2.25rem;
- --h2-font-size: 1.5rem;
- --h3-font-size: 1.25rem;
- --normal-font-size: 1rem;
- --small-font-size: .875rem;
- --smaller-font-size: .813rem;
- }
+ :root {
+ --big-font-size: 3rem;
+ --h1-font-size: 2.25rem;
+ --h2-font-size: 1.5rem;
+ --h3-font-size: 1.25rem;
+ --normal-font-size: 1rem;
+ --small-font-size: .875rem;
+ --smaller-font-size: .813rem;
+ }
}
/*==================== BASE ====================*/
-* {
- box-sizing: border-box;
- padding: 0;
- margin: 0;
-}
-
html {
scroll-behavior: smooth;
}
@@ -116,18 +110,18 @@ h1, h2, h3, h4 {
gap: 1rem;
}
-.home__content{
+.home__content {
grid-template-columns: .5fr 3fr;
padding-top: 3.5rem;
align-items: center;
}
-.home__social{
+.home__social {
grid-template-columns: max-content;
row-gap: 1rem;
}
-.home__social-icon{
+.home__social-icon {
font-size: 1.25rem;
}
@@ -135,23 +129,23 @@ h1, h2, h3, h4 {
color: var(--first-color-alt);
}
-.home__title{
+.home__title {
font-size: var(--big-font-size);
}
-.home__subtitle{
+.home__subtitle {
margin-bottom: var(--h3-font-size);
color: var(--text-color);
font-weight: var(--font-medium);
margin-bottom: var(--mb-0-75);
}
-.home__description{
+.home__description {
margin-bottom: var(--mb-2);
}
/*==================== BUTTONS ====================*/
-.button{
+.button {
display: inline-block;
background-color: var(--first-color-alt);
color: #fff;
@@ -164,23 +158,23 @@ h1, h2, h3, h4 {
background-color: var(--first-color-alt);
}
-.button__icon{
+.button__icon {
font-size: 1.25rem;
margin-right: var(--mb-0-5);
transition: .3s;
color: #FFF;
}
-.button--flex{
+.button--flex {
display: inline-flex;
align-items: center;
}
-.button--small{
+.button--small {
padding: .75rem 1rem;
}
-.button--link{
+.button--link {
padding: 0;
background-color: transparent;
color: var(--first-color);
@@ -192,41 +186,41 @@ h1, h2, h3, h4 {
}
/*==================== ABOUT ====================*/
-.about__img{
+.about__img {
width: 400px;
border-radius: .5rem;
justify-self: center;
align-self: center;
}
-.about__description{
+.about__description {
text-align: center;
margin-bottom: var(--mb-2-5);
}
-.about__info{
+.about__info {
display: flex;
justify-content: space-evenly;
margin-bottom: var(--mb-2-5);
}
-.about__info-title{
+.about__info-title {
font-size: var(--h2-font-size);
font-weight: var(--font-semi-bold);
color: var(--title-color);
}
-.about__info-name{
+.about__info-name {
font-size: var(--smaller-font-size);
}
.about__info-title,
-.about__info-name{
+.about__info-name {
display: block;
text-align: center;
}
-.about__buttons{
+.about__buttons {
margin: 0 auto;
display: flex;
justify-content: center;
@@ -234,11 +228,11 @@ h1, h2, h3, h4 {
}
/*==================== SKILLS ====================*/
-.skills__container{
+.skills__container {
row-gap: 0;
}
-.skills__header{
+.skills__header {
display: flex;
align-items: center;
margin-bottom: var(--mb-2-5);
@@ -246,130 +240,130 @@ h1, h2, h3, h4 {
}
.skills__icon,
-.skills__arrow{
+.skills__arrow {
font-size: 2rem;
- color: var(--md-primary-fg-color);
+ color: #757575;
}
-.skills__icon{
+.skills__icon {
margin-right: var(--mb-0-75);
}
-.skills__title{
+.skills__title {
font-size: var(--h3-font-size);
}
-.skills_subtitle{
+.skills_subtitle {
font-size: var(--small-font-size);
color: var(--text-color-light);
}
-.skills__arrow{
+.skills__arrow {
margin-left: auto;
transition: .4s;
}
-.skills__list{
+.skills__list {
row-gap: 1.5rem;
padding-left: 2.7rem;
}
-.skills__titles{
+.skills__titles {
display: flex;
justify-content: space-between;
margin-bottom: var(--mb-0-5);
}
-.skills__name{
+.skills__name {
font-size: var(--normal-font-size);
font-weight: var(--font-medium);
}
-.skills__number{
+.skills__number {
margin-top: var(--mb-2-5);
}
.skills__bar,
-.skills__percentage{
+.skills__percentage {
height: 5px;
border-radius: .25rem;
}
-.skills__bar{
+.skills__bar {
background-color: var(--first-color-lighter);
}
-.skills__percentage{
+.skills__percentage {
display: block;
background-color: var(--first-color);
}
-.skills__fastapi{
+.skills__fastapi {
width: 90%;
}
-.skills__django{
+.skills__django {
width: 85%;
}
-.skills__flask{
+.skills__flask {
width: 75%;
}
-.skills__spring{
+.skills__spring {
width: 75%;
}
-.skills__androidjava{
+.skills__androidjava {
width: 70%;
}
-.skills__androidkotlin{
+.skills__androidkotlin {
width: 60%;
}
-.skills__flutter{
+.skills__flutter {
width: 60%;
}
-.skills__aws{
+.skills__aws {
width: 80%;
}
-.skills__azure{
+.skills__azure {
width: 75%;
}
-.skills__oc{
+.skills__oc {
width: 70%;
}
-.skills__cicd{
+.skills__cicd {
width: 75%;
}
-.skills__close .skills__list{
+.skills__close .skills__list {
height: 0;
overflow: hidden;
}
-.skills__open .skills__list{
+.skills__open .skills__list {
height: max-content;
margin-bottom: var(--mb-2-5);
}
-.skills__open .skills__arrow{
+.skills__open .skills__arrow {
transform: rotate(-180deg);
}
/*==================== QUALIFICATION ====================*/
-.qualification__tabs{
+.qualification__tabs {
display: flex;
justify-content: space-evenly;
margin-bottom: var(--mb-2);
}
-.qualification__button{
+.qualification__button {
font-size: var(--h3-font-size);
font-weight: var(--font-medium);
cursor: pointer;
@@ -379,34 +373,42 @@ h1, h2, h3, h4 {
color: var(--first-color);
}
-.qualification__icon{
+.qualification__icon {
font-size: 1.8rem;
margin-right: var(--mb-0-25);
}
-.qualification__data{
+.qualification__data {
display: grid;
- grid-template-columns: 1.5fr max-content 1.5fr;
- column-gap: 1.5rem;
+ grid-template-columns: 1fr max-content 1fr;
+ column-gap: 0.5rem;
}
-.qualification__title{
+.qualification__data > div:first-child {
+ text-align: center;
+}
+.qualification__data > div:last-child {
+ text-align: center;
+}
+
+
+.qualification__title {
font-size: var(--normal-font-size);
font-weight: var(--font-medium);
}
-.qualification__subtitle{
+.qualification__subtitle {
display: inline-block;
font-size: var(--smaller-font-size);
margin-bottom: var(--mb-1);
}
-.qualification__calendar{
+.qualification__calendar {
font-size: var(--smaller-font-size);
color: var(--md-primary-fg-color--dark);
}
-.qualification__rounder{
+.qualification__rounder {
display: inline-block;
width: 13px;
height: 13px;
@@ -414,7 +416,7 @@ h1, h2, h3, h4 {
border-radius: 50%;
}
-.qualification__line{
+.qualification__line {
display: block;
width: 1px;
height: 100%;
@@ -422,51 +424,54 @@ h1, h2, h3, h4 {
transform: translate(6px, -7px);
}
-.qualification [data-content]{
+.qualification [data-content] {
display: none;
}
-.qualification__active[data-content]{
+.qualification__active[data-content] {
display: block;
}
-.qualification__button.qualification__active{
+.qualification__button.qualification__active {
color: var(--first-color);
}
/*==================== MEDIA QUERIES ====================*/
/* For small devices */
-@media screen and (max-width: 350px){
- .container{
+@media screen and (max-width: 350px) {
+ .container {
margin-left: var(--mb-1);
margin-right: var(--mb-1);
}
- .home__content{
+ .home__content {
grid-template-columns: .25fr 3fr;
}
- .home__blob{
+
+ .home__blob {
width: 180px;
}
- .skills__title{
+ .skills__title {
font-size: var(--normal-font-size);
}
- .qualification__data{
+ .qualification__data {
gap: .5rem;
}
}
/* For medium devices */
-@media screen and (min-width: 568px){
- .home__content{
+@media screen and (min-width: 568px) {
+ .home__content {
grid-template-columns: max-content 1fr 1fr;
}
- .home__data{
+
+ .home__data {
grid-column: initial;
}
- .home__img{
+
+ .home__img {
order: 1;
justify-self: center;
}
@@ -474,102 +479,115 @@ h1, h2, h3, h4 {
.skills__container,
.about__container,
.portfolio__content,
- .project__container{
+ .project__container {
grid-template-columns: repeat(2, 1fr);
}
- .qualification__sections{
+ .qualification__sections {
display: grid;
grid-template-columns: 6fr;
justify-content: center;
}
}
-@media screen and (min-width: 768px){
- .container{
+@media screen and (min-width: 768px) {
+ .container {
margin-left: auto;
margin-right: auto;
}
- body{
+ body {
margin: 0;
}
- .section{
+ .section {
padding: 6rem 0 2rem;
}
- .section__subtitle{
+
+ .section__subtitle {
margin-bottom: 4rem;
}
- .header{
+ .header {
top: 0;
bottom: initial;
}
.header,
- .main{
+ .main {
padding: 0 1rem;
}
- .home__container{
+ .home__container {
row-gap: 5rem;
}
- .home__content{
+
+ .home__content {
padding-top: 5.5rem;
column-gap: 2rem;
}
- .home__blob{
+
+ .home__blob {
width: 270px;
}
- .home__scroll{
+
+ .home__scroll {
display: block;
}
- .home__scroll-button{
+
+ .home__scroll-button {
margin-left: 3rem;
}
- .about__container{
+ .about__container {
column-gap: 5rem;
}
- .about__img{
+
+ .about__img {
width: 350px;
}
- .about__description{
+
+ .about__description {
text-align: initial;
}
- .about__info{
+
+ .about__info {
justify-content: space-between;
}
- .about__buttons{
+
+ .about__buttons {
justify-content: initial;
}
- .qualification__tabs{
+ .qualification__tabs {
justify-content: center;
}
- .qualification__button{
+
+ .qualification__button {
margin: 0 var(--mb-1);
}
- .qualification__sections{
+
+ .qualification__sections {
grid-template-columns: .5fr;
}
}
/* For large devices */
-@media screen and (min-width: 1024px){
+@media screen and (min-width: 1024px) {
.header,
- .main{
+ .main {
padding: 0;
}
- .home__blob{
+ .home__blob {
width: 320px;
}
- .home__social{
+
+ .home__social {
transform: translateX(-6rem);
}
- .qualification__sections{
+
+ .qualification__sections {
display: grid;
grid-template-columns: 6fr;
justify-content: center;
diff --git a/docs/about/个人简历.pdf b/docs/about/个人简历.pdf
deleted file mode 100644
index 1dda51d..0000000
Binary files a/docs/about/个人简历.pdf and /dev/null differ
diff --git a/docs/about/个人简历2.pdf b/docs/about/个人简历2.pdf
new file mode 100644
index 0000000..43a277b
Binary files /dev/null and b/docs/about/个人简历2.pdf differ
diff --git a/docs/blog/websitebeauty/accelerate.md b/docs/blog/websitebeauty/accelerate.md
new file mode 100644
index 0000000..99465d9
--- /dev/null
+++ b/docs/blog/websitebeauty/accelerate.md
@@ -0,0 +1,44 @@
+---
+title: 加速网站访问的一些心得
+tags:
+ - Mkdocs
+---
+
+# 加速网站访问的一些心得
+
+在使用 MkDocs 构建网站时，为了提高访问速度，我们可以采取以下一些措施：
+## 1. 优化图片
+使用合适的图片格式，如 WebP、JPEG2000 等，减少图片文件大小，从而加快加载速度。
+
+可以使用在线工具进行图片压缩，如：
+
+- [freeconvert](https://www.freeconvert.com/zh/webp-converter)
+
+## 2. JS/CSS使用 CDN
+使用内容分发网络（CDN）来加速网站的访问，将静态资源（如图片、CSS、JS）缓存到全球各地的服务器上，用户就近访问，减少延迟。
+
+这里推荐
+
+- [jsDelivr CDN 加速 GitHub 文件](https://www.jsdelivr.com/github)
+
+## 3.加速本地渲染
+
+优化 git 插件的 enabled 配置
+比如我配置里有 git-revision-date-localized 和 git-committers 插件，这些插件会在每次渲染时读取所有文件的 git 历史，导致本地预览变慢。
+推荐做法是在本地开发时禁用它们，仅在 CI/CD 或线上构建时启用。
+具体写法如下：
+
+```yaml hl_lines="3 5"
+plugins:
+ - git-revision-date-localized:
+ enabled: !ENV [CI, false] # 只有在CI环境变量为true时才启用
+ - git-committers:
+ enabled: !ENV [CI, false]
+
+```
+
+---
+
+检验加速效果是否生效可以使用lighthouse进行测试，具体可以参考：
+
+[使用lighthouse进行网站性能测试](../../develop/lighthouse.md)
\ No newline at end of file
diff --git a/docs/blog/websitebeauty/footer.md b/docs/blog/websitebeauty/footer.md
new file mode 100644
index 0000000..15a4580
--- /dev/null
+++ b/docs/blog/websitebeauty/footer.md
@@ -0,0 +1,134 @@
+---
+title: 页脚设置
+hide:
+ # - navigation # 显示右
+ # - toc #显示左
+ # - footer
+ # - feedback
+tags:
+ - Mkdocs
+comments: false
+---
+
+## 页脚设置
+
+MkDocs 支持自定义页脚。
+
+
+
+在docs/overrides/partials/footer.html中（没有该文件时，创建footer.html文件）添加以下代码：
+
+```html hl_lines="71-86"
+
+
+
+
+```
+
+高亮部分自行修改即可
+
+## 页脚版权设置
+
+mkdocs.yml中添加：
+```yaml
+
+copyright: Copyright © 2022~2025 Wcowin # 左下角的版权声明
+
+```
+
+如果想删除页脚显示“Made with Material for MkDocs”(不建议)
+
+```yaml
+extra:
+ generator: false #删除页脚显示“使用 MkDocs 材料制造”
+```
\ No newline at end of file
diff --git a/docs/blog/websitebeauty/mkdocsfont.md b/docs/blog/websitebeauty/mkdocsfont.md
index cb15be3..1b89802 100644
--- a/docs/blog/websitebeauty/mkdocsfont.md
+++ b/docs/blog/websitebeauty/mkdocsfont.md
@@ -158,9 +158,8 @@ font-weight: normal;
} */
```
-四选一，mkdocs.yml和extra.css相互对应
-不懂extra_css的用法的可以看一下我写的[extra_css部分](../Mkdocs/mkdocs2.md)教程
+不懂extra_css的用法的可以看一下我写的[extra_css部分](../Mkdocs/mkdocs2.md/#extra_javascriptextra_css)教程
!!!tip
切换字体后可能返回顶部按钮会在个别浏览器显示异常
diff --git a/docs/overrides/home.html b/docs/overrides/home.html
deleted file mode 100644
index 1fcb2eb..0000000
--- a/docs/overrides/home.html
+++ /dev/null
@@ -1,29 +0,0 @@
-{#-
- This file was automatically generated - do not edit
--#}
-{% extends "main.html" %}
-{% block tabs %}
- {{ super() }}
-
-
-{% endblock %}
-{% block content %}{% endblock %}
-{% block footer %}{% endblock %}
diff --git a/mkdocs.yml b/mkdocs.yml
index c68b7ce..6ed2d4f 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -88,6 +88,8 @@ nav:
- 相对地址的一些问题: blog/websitebeauty/Relativeaddress.md
- 添加404页面: blog/websitebeauty/404.md
- 为MKdocs添加文章修订时间戳: blog/websitebeauty/time.md
+ - 页脚设置: blog/websitebeauty/footer.md
+ - 加速网站访问的一些心得: blog/websitebeauty/accelerate.md
- 建设MKdocs技能指北:
- Markdown:
- Markdown指南: develop/Markdown/markdown.md
-