feature(pages): Above the fold loading optimization

- Compress image size
     - Truncated character set
     - Compressed style sheet
This commit is contained in:
周中平 2022-11-01 15:28:03 +08:00
parent 6029814152
commit d06fe9a07e
No known key found for this signature in database
GPG Key ID: B1DF9DD42D8E00DC
12 changed files with 53 additions and 22 deletions

View File

@ -9,37 +9,33 @@
<meta name="keywords" content="${meta_keywords!}"/> <meta name="keywords" content="${meta_keywords!}"/>
<meta name="description" content="${meta_description!}" /> <meta name="description" content="${meta_description!}" />
<@global.head /> <@global.head />
<#if is_index??>
<#-- 加速样式表 -->
<link rel="stylesheet" href="${theme_base!}/source/css/index.min.css"/>
<#else>
<#-- 公共样式表 --> <#-- 公共样式表 -->
<link rel="stylesheet" href="${theme_base!}/source/plugins/normalize.css"/> <link rel="stylesheet" href="${theme_base!}/source/plugins/normalize.css"/>
<link rel="stylesheet" href="${theme_base!}/source/plugins/animate.css"/> <link rel="stylesheet" href="${theme_base!}/source/plugins/animate.css"/>
<link rel="stylesheet" href="${theme_base!}/source/plugins/remixicon/remixicon.css"/> <link rel="stylesheet" href="${theme_base!}/source/plugins/remixicon/remixicon.css"/>
<#-- 自定义样式表 --> <#-- 自定义样式表 -->
<link rel="stylesheet" href="${theme_base!}/source/css/Redemption.css"/> <link rel="stylesheet" href="${theme_base!}/source/css/Redemption.css"/>
</#if>
</head> </head>
<body> <body>
<div class="container animate__animated animate__fadeInDown"> <div class="container animate__animated animate__fadeInDown">
<#-- 主体 --> <#-- 主体 -->
<#nested > <#nested >
<#-- 脚注 --> <#-- 脚注 -->
<footer> <footer>
<div class="copyright"> <div class="copyright">
<a href="https://www.foreverblog.cn/" target="_blank" > <a href="https://www.foreverblog.cn/" target="_blank" >
<img src="https://img.foreverblog.cn/logo_en_default.png" alt="" style="width:auto;height:1.25rem;"> <img src="${theme_base!}/source/images/logo_en_default.png" alt="" style="width:auto;height:1.25rem;">
</a> </a>
<a href="https://halo.run">Designed by 7Wate . Proudly published with Halo</a> <a href="https://halo.run">Designed by 7Wate . Proudly published with Halo</a>
<@global.footer /> <@global.footer />
</div> </div>
</footer> </footer>
</div> </div>
</body> </body>
</html> </html>
</#macro> </#macro>

View File

@ -10,30 +10,37 @@ html {
font-weight: 500; font-weight: 500;
} }
} }
@media (min-width: 870px) and (max-width: 1920px) { @media (min-width: 870px) and (max-width: 1440px) {
html { html {
font-size: 20px; font-size: 20px;
font-family: -apple-system, BlinksMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-family: -apple-system, BlinksMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-weight: 500; font-weight: 500;
} }
} }
@media (min-width: 1920px) and (max-width: 2560px) { @media (min-width: 1440px) and (max-width: 1920px) {
html { html {
font-size: 22px; font-size: 22px;
font-family: -apple-system, BlinksMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-family: -apple-system, BlinksMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-weight: 500; font-weight: 500;
} }
} }
@media (min-width: 1920px) and (max-width: 2560px) {
html {
font-size: 1.2vw;
font-family: -apple-system, BlinksMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-weight: 500;
}
}
@media (min-width: 2560px) and (max-width: 2880px) { @media (min-width: 2560px) and (max-width: 2880px) {
html { html {
font-size: 24px; font-size: 1.25vw;
font-family: -apple-system, BlinksMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-family: -apple-system, BlinksMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-weight: 500; font-weight: 500;
} }
} }
@media (min-width: 2880px) { @media (min-width: 2880px) {
html { html {
font-size: 2vh; font-size: 1.27vw;
font-family: -apple-system, BlinksMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-family: -apple-system, BlinksMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-weight: 500; font-weight: 500;
} }
@ -109,7 +116,14 @@ main {
padding-bottom: 5%; padding-bottom: 5%;
} }
} }
@media (min-width: 870px) { @media (min-width: 870px) and (max-width: 1440px) {
main {
width: 71.8vw;
margin-top: 18.48vh;
padding-bottom: 7vh;
}
}
@media (min-width: 1440px) {
main { main {
width: 61.8vw; width: 61.8vw;
margin-top: 23.48vh; margin-top: 23.48vh;

View File

@ -74,8 +74,15 @@ main {
padding-bottom: 5%; padding-bottom: 5%;
} }
// =========== 适配端 ===========
@media (min-width: 870px) and (max-width: 1440px) {
width: 71.8vw;
margin-top: 18.48vh;
padding-bottom: 7vh;
}
// =========== 桌面端 =========== // =========== 桌面端 ===========
@media (min-width: 870px) { @media (min-width: 1440px) {
width: 61.8vw; width: 61.8vw;
margin-top: 23.48vh; margin-top: 23.48vh;
padding-bottom: 7vh; padding-bottom: 7vh;

View File

@ -13,8 +13,8 @@ html {
font-weight: 500; font-weight: 500;
} }
// =========== 桌面=========== // =========== 适配===========
@media (min-width: 870px) and (max-width: 1920px) { @media (min-width: 870px) and (max-width: 1440px) {
font-size: 20px; font-size: 20px;
font-family: -apple-system, BlinksMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, font-family: -apple-system, BlinksMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
@ -22,9 +22,18 @@ html {
font-weight: 500; font-weight: 500;
} }
// =========== 桌面端 ===========
@media (min-width: 1440px) and (max-width: 1920px) {
font-size: 22px;
font-family: -apple-system, BlinksMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
'Noto Color Emoji';
font-weight: 500;
}
// =========== 2K端 =========== // =========== 2K端 ===========
@media (min-width: 1920px) and (max-width: 2560px) { @media (min-width: 1920px) and (max-width: 2560px) {
font-size: 22px; font-size: 1.2vw;
font-family: -apple-system, BlinksMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, font-family: -apple-system, BlinksMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
'Noto Color Emoji'; 'Noto Color Emoji';
@ -33,7 +42,7 @@ html {
// =========== 4K端 =========== // =========== 4K端 ===========
@media (min-width: 2560px) and (max-width: 2880px) { @media (min-width: 2560px) and (max-width: 2880px) {
font-size: 24px; font-size: 1.25vw;
font-family: -apple-system, BlinksMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, font-family: -apple-system, BlinksMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
'Noto Color Emoji'; 'Noto Color Emoji';
@ -42,7 +51,7 @@ html {
// =========== >4K端 =========== // =========== >4K端 ===========
@media (min-width: 2880px) { @media (min-width: 2880px) {
font-size: 2vh; font-size: 1.27vw;
font-family: -apple-system, BlinksMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, font-family: -apple-system, BlinksMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
'Noto Color Emoji'; 'Noto Color Emoji';

4
source/css/index.min.css vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

BIN
source/font/remixicon.eot Normal file

Binary file not shown.

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 6.9 KiB

BIN
source/font/remixicon.ttf Normal file

Binary file not shown.

BIN
source/font/remixicon.woff Normal file

Binary file not shown.

BIN
source/font/remixicon.woff2 Normal file

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB