mirror of
https://github.com/Wcowin/Mkdocs-Wcowin.git
synced 2025-07-20 17:06:34 +00:00
Compare commits
3 Commits
17c317b771
...
7fc407847f
| Author | SHA1 | Date | |
|---|---|---|---|
| 7fc407847f | |||
| 22c0a8add2 | |||
| ce08e8dc4a |
@ -19,6 +19,7 @@ status: new
|
||||
style="width: 270px; border-radius: 50%; display: block; margin: 0 auto;">
|
||||
</center>
|
||||
|
||||
|
||||
<!-- <center>
|
||||
|
||||
{style="width: 270px; border-radius: 50%;"}
|
||||
@ -31,7 +32,7 @@ status: new
|
||||
|
||||
<center><font size=6 color= #757575>
|
||||
观史知今，当思进退，读书明志可识春秋
|
||||
|
||||
<br>
|
||||
——Wcowin </font></center>
|
||||
|
||||
---
|
||||
@ -158,7 +159,7 @@ status: new
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="qualification__title">未完待续</h3>
|
||||
<span class="qualification__subtitle">在路上，永远热泪盈眶</span>
|
||||
<span class="qualification__subtitle">于道各努力，千里自同风</span>
|
||||
<div class="qualification__calendar">
|
||||
<font color= #757575><iconify-icon icon="tabler:calendar"></iconify-icon>
|
||||
Before - After</font>
|
||||
|
||||
@ -26,7 +26,7 @@ comments: false
|
||||
|
||||
---
|
||||
|
||||
<iframe src="../个人简历.pdf" width="100%" height="800px" style="border: 1px solid #ccc; overflow: auto;">
|
||||
<iframe src="../个人简历2.pdf" width="100%" height="800px" style="border: 1px solid #ccc; overflow: auto;">
|
||||
</iframe>
|
||||
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
Binary file not shown.
BIN
docs/about/个人简历2.pdf
Normal file
BIN
docs/about/个人简历2.pdf
Normal file
Binary file not shown.
44
docs/blog/websitebeauty/accelerate.md
Normal file
44
docs/blog/websitebeauty/accelerate.md
Normal file
@ -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)
|
||||
134
docs/blog/websitebeauty/footer.md
Normal file
134
docs/blog/websitebeauty/footer.md
Normal file
@ -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"
|
||||
<!-- Footer -->
|
||||
<footer class="md-footer">
|
||||
|
||||
<!-- Link to previous and/or next page -->
|
||||
{% if "navigation.footer" in features %}
|
||||
{% if page.previous_page or page.next_page %}
|
||||
{% if page.meta and page.meta.hide %}
|
||||
{% set hidden = "hidden" if "footer" in page.meta.hide %}
|
||||
{% endif %}
|
||||
<nav
|
||||
class="md-footer__inner md-grid"
|
||||
aria-label="{{ lang.t('footer') }}"
|
||||
{{ hidden }}
|
||||
>
|
||||
|
||||
<!-- Link to previous page -->
|
||||
{% if page.previous_page %}
|
||||
{% set direction = lang.t("footer.previous") %}
|
||||
<a
|
||||
href="{{ page.previous_page.url | url }}"
|
||||
class="md-footer__link md-footer__link--prev"
|
||||
aria-label="{{ direction }}: {{ page.previous_page.title | e }}"
|
||||
>
|
||||
<div class="md-footer__button md-icon">
|
||||
{% set icon = config.theme.icon.previous or "material/arrow-left" %}
|
||||
{% include ".icons/" ~ icon ~ ".svg" %}
|
||||
</div>
|
||||
<div class="md-footer__title">
|
||||
<span class="md-footer__direction">
|
||||
{{ direction }}
|
||||
</span>
|
||||
<div class="md-ellipsis">
|
||||
{{ page.previous_page.title }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
<!-- Link to next page -->
|
||||
{% if page.next_page %}
|
||||
{% set direction = lang.t("footer.next") %}
|
||||
<a
|
||||
href="{{ page.next_page.url | url }}"
|
||||
class="md-footer__link md-footer__link--next"
|
||||
aria-label="{{ direction }}: {{ page.next_page.title | e }}"
|
||||
>
|
||||
<div class="md-footer__title">
|
||||
<span class="md-footer__direction">
|
||||
{{ direction }}
|
||||
</span>
|
||||
<div class="md-ellipsis">
|
||||
{{ page.next_page.title }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-footer__button md-icon">
|
||||
{% set icon = config.theme.icon.next or "material/arrow-right" %}
|
||||
{% include ".icons/" ~ icon ~ ".svg" %}
|
||||
</div>
|
||||
</a>
|
||||
{% endif %}
|
||||
</nav>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
<!-- Further information -->
|
||||
<div class="md-footer-meta md-typeset">
|
||||
<div class="md-footer-meta__inner md-grid">
|
||||
{% include "partials/copyright.html" %}
|
||||
|
||||
<font color="#B9B9B9">
|
||||
<div class="footer-visit-count" style="display: flex; justify-content: center; align-items: center;">
|
||||
本站访问量：<script async src="//finicounter.eu.org/finicounter.js"></script>
|
||||
<span id="finicount_views"></span> |
|
||||
<footer>
|
||||
<a href="https://icp.gov.moe/?keyword=20230640" target="_blank">萌ICP备20230640号</a>
|
||||
</footer>
|
||||
</div>
|
||||
</font>
|
||||
|
||||
<style>
|
||||
.footer-visit-count {
|
||||
height: fit-content;
|
||||
min-height: 55px; /* 根据实际情况调整此高度 */
|
||||
}
|
||||
</style>
|
||||
{% if config.extra.social %}
|
||||
{% include "partials/social.html" %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
|
||||
```
|
||||
|
||||
高亮部分自行修改即可
|
||||
|
||||
## 页脚版权设置
|
||||
|
||||
mkdocs.yml中添加：
|
||||
```yaml
|
||||
|
||||
copyright: Copyright © 2022~2025 Wcowin # 左下角的版权声明
|
||||
|
||||
```
|
||||
|
||||
如果想删除页脚显示“Made with Material for MkDocs”(不建议)
|
||||
|
||||
```yaml
|
||||
extra:
|
||||
generator: false #删除页脚显示“使用 MkDocs 材料制造”
|
||||
```
|
||||
@ -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
|
||||
切换字体后可能返回顶部按钮会在个别浏览器显示异常
|
||||
|
||||
@ -118,11 +118,11 @@ ____ __ ____ ______ ______ ____ __ ____ __ .__ __.
|
||||
- 简单易上手，小白配置
|
||||
- 𝕙𝕒𝕧𝕖 𝕒 𝕘𝕠𝕠𝕕 𝕥𝕚𝕞𝕖 ! -->
|
||||
|
||||
视频教程(1) 联系我(2)
|
||||
<!-- 视频教程(1) 联系我(2)
|
||||
{ .annotate }
|
||||
|
||||
1. 点击右下角[:simple-bilibili:](https://space.bilibili.com/1407028951/lists/4566631?type=series)图标查看视频教程.
|
||||
2. TEL:18939533255(微信号)
|
||||
2. TEL:18939533255(微信号) -->
|
||||
|
||||
***
|
||||
|
||||
|
||||
@ -19,15 +19,15 @@ anime.timeline({loop: true})
|
||||
|
||||
|
||||
//全屏视频
|
||||
var video = document.getElementById("video1");
|
||||
var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
|
||||
// var video = document.getElementById("video1");
|
||||
// var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
|
||||
|
||||
if (isMobile) {
|
||||
video.style.display = "none";
|
||||
video.muted = true;
|
||||
} else {
|
||||
video.volume = 0.5; // 或者根据需要设置适当的音量值，例如 0.5 表示 50% 的音量
|
||||
}
|
||||
// if (isMobile) {
|
||||
// video.style.display = "none";
|
||||
// video.muted = true;
|
||||
// } else {
|
||||
// video.volume = 0.5; // 或者根据需要设置适当的音量值，例如 0.5 表示 50% 的音量
|
||||
// }
|
||||
|
||||
// 优化
|
||||
// const container = document.querySelector('.container');
|
||||
|
||||
@ -1,29 +0,0 @@
|
||||
{#-
|
||||
This file was automatically generated - do not edit
|
||||
-#}
|
||||
{% extends "main.html" %}
|
||||
{% block tabs %}
|
||||
{{ super() }}
|
||||
<style>.md-header{position:initial}.md-main__inner{margin:0}.md-content{display:none}@media screen and (min-width:60em){.md-sidebar--secondary{display:none}}@media screen and (min-width:76.25em){.md-sidebar--primary{display:none}}</style>
|
||||
<section class="mdx-container">
|
||||
<div class="md-grid md-typeset">
|
||||
<div class="mdx-hero">
|
||||
<div class="mdx-hero__image">
|
||||
<img src="assets/images/illustration.png" alt="" width="1659" height="1200" draggable="false">
|
||||
</div>
|
||||
<div class="mdx-hero__content">
|
||||
<h1>Technical documentation that just works</h1>
|
||||
<p>{{ config.site_description }}. Set up in 5 minutes.</p>
|
||||
<a href="{{ page.next_page.url | url }}" title="{{ page.next_page.title | e }}" class="md-button md-button--primary">
|
||||
Quick start
|
||||
</a>
|
||||
<a href="{{ 'insiders/' | url }}" title="Material for MkDocs Insiders" class="md-button">
|
||||
Get Insiders
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
{% block content %}{% endblock %}
|
||||
{% block footer %}{% endblock %}
|
||||
@ -1,10 +1,34 @@
|
||||
:root {
|
||||
--admonition-border-left-width: 0.2rem;
|
||||
--base-border-radius: 0.5rem;
|
||||
--card-hover-shadow: 0 0 0.2rem #ffffff40;
|
||||
}
|
||||
|
||||
/* Change font family of filename present on top of code block. */
|
||||
/* .highlight span.filename {
|
||||
/* 卡片圆角与悬浮阴影 */
|
||||
.md-typeset .grid.cards > ul > li,
|
||||
.md-typeset .md-button,
|
||||
.md-typeset table:not([class]) {
|
||||
border-radius: var(--base-border-radius);
|
||||
}
|
||||
.md-typeset .grid.cards > ul > li:hover {
|
||||
box-shadow: var(--card-hover-shadow);
|
||||
}
|
||||
|
||||
/* 页脚社交图标高度 */
|
||||
.md-social__link svg {
|
||||
max-height: 1rem;
|
||||
}
|
||||
|
||||
/* 搜索框及下拉结果圆角 */
|
||||
.md-search__form,
|
||||
[data-md-toggle="search"]:checked ~ .md-header .md-search__form,
|
||||
[dir="ltr"] .md-search__output {
|
||||
border-radius: var(--base-border-radius);
|
||||
}
|
||||
|
||||
/* 可选：如需恢复代码块、警告框等样式，取消注释即可 */
|
||||
/*
|
||||
.highlight span.filename {
|
||||
border-bottom: none;
|
||||
border-radius: var(--base-border-radius);
|
||||
display: inline;
|
||||
@ -14,234 +38,33 @@
|
||||
margin-bottom: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
.highlight span.filename + pre > code {
|
||||
.highlight span.filename + pre > code,
|
||||
.md-typeset pre > code {
|
||||
border-radius: var(--base-border-radius);
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
.md-typeset pre > code {
|
||||
border-radius: var(--base-border-radius);
|
||||
} */
|
||||
|
||||
/* Customize admonition layout */
|
||||
/* .md-typeset .admonition {
|
||||
.md-typeset .admonition {
|
||||
border-width: 0px;
|
||||
border-left-width: var(--admonition-border-left-width);
|
||||
}
|
||||
|
||||
[dir="ltr"] .md-typeset blockquote {
|
||||
border-radius: 0.2rem;
|
||||
border-left-width: var(--admonition-border-left-width);
|
||||
} */
|
||||
|
||||
/* Grid Cards */
|
||||
.md-typeset .grid.cards > ul > li {
|
||||
border-radius: var(--base-border-radius);
|
||||
}
|
||||
.md-typeset .grid.cards > ul > li:hover {
|
||||
box-shadow: 0 0 0.2rem #ffffff40;
|
||||
}
|
||||
|
||||
/* Markdown Button */
|
||||
.md-typeset .md-button {
|
||||
border-radius: var(--base-border-radius);
|
||||
}
|
||||
|
||||
/* Footer: Social Links */
|
||||
.md-social__link svg {
|
||||
max-height: 1rem;
|
||||
}
|
||||
|
||||
|
||||
/* Forms */
|
||||
.md-search__form {
|
||||
border-radius: var(--base-border-radius);
|
||||
}
|
||||
|
||||
[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
|
||||
border-top-right-radius: var(--base-border-radius);
|
||||
border-top-left-radius: var(--base-border-radius);
|
||||
}
|
||||
|
||||
[dir="ltr"] .md-search__output {
|
||||
border-bottom-right-radius: var(--base-border-radius);
|
||||
border-bottom-left-radius: var(--base-border-radius);
|
||||
}
|
||||
|
||||
/* Blog - index.md */
|
||||
/* div.md-content header {
|
||||
display: none;
|
||||
}
|
||||
*/
|
||||
|
||||
/* 可选：博客相关样式，按需启用 */
|
||||
/*
|
||||
.md-post--excerpt {
|
||||
background-color: var(--md-accent-fg-color--transparent);
|
||||
box-shadow: 0 0 0 1rem var(--md-accent-fg-color--transparent);
|
||||
border-radius: var(--base-border-radius);
|
||||
}
|
||||
|
||||
.md-post--excerpt .md-post__header {
|
||||
justify-content: center;
|
||||
justify-content: left;
|
||||
}
|
||||
|
||||
.md-post--excerpt .md-post__content > h2,
|
||||
.md-post__action {
|
||||
text-align: center;
|
||||
} */
|
||||
|
||||
/* Table */
|
||||
.md-typeset table:not([class]) {
|
||||
border-radius: var(--base-border-radius);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.carousel {
|
||||
width: 60%;
|
||||
height: 100%;
|
||||
|
||||
border-radius: 0.4rem;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
/* 居中 */
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
border: 0.075rem solid #7b7b7b7a;
|
||||
box-shadow: var(--md-shadow-z1);
|
||||
}
|
||||
|
||||
.carousel-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
position: relative;
|
||||
left: 0;
|
||||
|
||||
display: flex;
|
||||
|
||||
/* 过渡动画 1s */
|
||||
transition: all 1s;
|
||||
}
|
||||
|
||||
.carousel-hover {
|
||||
height: 100%;
|
||||
width: 10%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
||||
/* 子元素垂直居中 */
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.carousel-hover.left {
|
||||
left: 0;
|
||||
}
|
||||
.carousel-hover.right {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.carousel-hover button {
|
||||
background-color: var(--md-accent-fg-color);
|
||||
border-radius: 50%;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
.carousel-hover button::after {
|
||||
display: block;
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
|
||||
background-color: white;
|
||||
content: "";
|
||||
mask-position: center;
|
||||
-webkit-mask-position: center;
|
||||
}
|
||||
.carousel-hover.left button::after {
|
||||
mask-image: var(--md-tabbed-icon--prev);
|
||||
-webkit-mask-image: var(--md-tabbed-icon--prev);
|
||||
}
|
||||
.carousel-hover.right button::after {
|
||||
mask-image: var(--md-tabbed-icon--next);
|
||||
-webkit-mask-image: var(--md-tabbed-icon--next);
|
||||
}
|
||||
|
||||
/* hover 外层 */
|
||||
.carousel-hover:hover button {
|
||||
opacity: 0.5;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
/* hover 内层 */
|
||||
.carousel-hover button:hover {
|
||||
opacity: 0.8;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.carousel-container a {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.carousel-container img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.carousel-bottom {
|
||||
position: absolute;
|
||||
/* 宽度等同于内容宽度 */
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
|
||||
bottom: 0;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
/* 指示器间距 */
|
||||
gap: 10px;
|
||||
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
.carousel-bottom:hover {
|
||||
opacity: 0.8;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.carousel-bottom .indicator {
|
||||
height: 5px;
|
||||
width: 20px;
|
||||
|
||||
background-color: var(--md-accent-fg-color);
|
||||
|
||||
opacity: 0.5;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.carousel:hover .bottom .indicator {
|
||||
opacity: 1;
|
||||
}
|
||||
.carousel:hover .shift .btn {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.carousel {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.carousel-hover button {
|
||||
opacity: 1;
|
||||
}
|
||||
text-align: left;
|
||||
}
|
||||
*/
|
||||
@ -146,7 +146,7 @@ img {
|
||||
/* 滚动条 */
|
||||
|
||||
|
||||
::-webkit-scrollbar {
|
||||
/* ::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
@ -183,7 +183,7 @@ background-color: #49b1f5;
|
||||
::-webkit-scrollbar:hover {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
}
|
||||
} */
|
||||
|
||||
/*bilbili*/
|
||||
/*哔哩哔哩视频适配*/
|
||||
|
||||
@ -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
|
||||
@ -284,7 +286,8 @@ extra_javascript:
|
||||
- https://cdn.jsdelivr.net/gh/Wcowin/Wcowin.github.io@main/docs/javascripts/view.js
|
||||
|
||||
extra_css:
|
||||
- stylesheets/extra.css # 自定义CSS
|
||||
# - stylesheets/extra.css # 自定义CSS
|
||||
- https://cdn.jsdelivr.net/gh/Wcowin/Mkdocs-Wcowin@main/docs/stylesheets/extra.css
|
||||
# - stylesheets/link.css #友链配置
|
||||
- https://cdn.jsdelivr.net/gh/Wcowin/Wcowin.github.io@main/docs/stylesheets/link.css #友链CDN
|
||||
# - stylesheets/customize.css # 搜索圆角优化
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user