Optimization

This commit is contained in:
Sodbileg Gansukh 2023-09-19 21:19:25 +08:00
parent a053e4b57d
commit db2de86339
7 changed files with 32 additions and 29 deletions

View File

@ -21,8 +21,6 @@
} }
</style> </style>
<script src="http://localhost:35729/livereload.js?snipver=1"></script>
<script> <script>
/* The script for calculating the color contrast has been taken from /* The script for calculating the color contrast has been taken from
https://gomakethings.com/dynamically-changing-the-text-color-based-on-background-color-contrast-with-vanilla-js/ */ https://gomakethings.com/dynamically-changing-the-text-color-based-on-background-color-contrast-with-vanilla-js/ */

View File

@ -63,22 +63,22 @@
"config": { "config": {
"posts_per_page": 16, "posts_per_page": 16,
"image_sizes": { "image_sizes": {
"xxs": {
"width": 30
},
"xs": { "xs": {
"width": 100 "width": 160
}, },
"s": { "s": {
"width": 300 "width": 320
}, },
"m": { "m": {
"width": 600 "width": 600
}, },
"l": { "l": {
"width": 1000 "width": 960
}, },
"xl": { "xl": {
"width": 1200
},
"xxl": {
"width": 2000 "width": 2000
} }
}, },

View File

@ -5,7 +5,7 @@
<h2 class="gh-featured-title">Featured</h2> <h2 class="gh-featured-title">Featured</h2>
<div class="gh-featured-feed"> <div class="gh-featured-feed">
{{#foreach featured}} {{#foreach featured}}
{{> "post-card"}} {{> "post-card" imageSizes="80px"}}
{{/foreach}} {{/foreach}}
</div> </div>
</div> </div>

View File

@ -17,7 +17,7 @@
{{#match headerStyle "Highlight"}} {{#match headerStyle "Highlight"}}
<div class="gh-header-left"> <div class="gh-header-left">
{{#foreach posts limit="1"}} {{#foreach posts limit="1"}}
{{> "post-card"}} {{> "post-card" imageSizes="(max-width: 767px) calc(100vw - max(8vmin, 40px)), 640px"}}
{{/foreach}} {{/foreach}}
</div> </div>
<div class="gh-header-middle"> <div class="gh-header-middle">
@ -31,7 +31,7 @@
{{else}} {{else}}
<div class="gh-featured-feed"> <div class="gh-featured-feed">
{{#foreach posts from="5" limit="6"}} {{#foreach posts from="5" limit="6"}}
{{> "post-card"}} {{> "post-card" imageSizes="80px"}}
{{/foreach}} {{/foreach}}
</div> </div>
{{/if}} {{/if}}
@ -47,7 +47,11 @@
{{#match @number 5}} {{#match @number 5}}
<div class="gh-header-right"> <div class="gh-header-right">
{{/match}} {{/match}}
{{#if @first}}
{{> "post-card" imageSizes="640px"}}
{{else}}
{{> "post-card"}} {{> "post-card"}}
{{/if}}
{{#match @number 4}} {{#match @number 4}}
</div> </div>
{{/match}} {{/match}}

View File

@ -25,7 +25,7 @@
{{#match posts.length ">=" 4}} {{#match posts.length ">=" 4}}
{{#get "posts" include="authors" limit="16"}} {{#get "posts" include="authors" limit="16"}}
{{#foreach posts from="5" limit="12"}} {{#foreach posts from="5" limit="12"}}
{{> "post-card"}} {{> "post-card" lazyLoad=true}}
{{/foreach}} {{/foreach}}
{{/get}} {{/get}}
{{/match}} {{/match}}
@ -33,7 +33,7 @@
{{#match posts.length ">=" 10}} {{#match posts.length ">=" 10}}
{{#get "posts" include="authors" limit="22"}} {{#get "posts" include="authors" limit="22"}}
{{#foreach posts from="11" limit="12"}} {{#foreach posts from="11" limit="12"}}
{{> "post-card"}} {{> "post-card" lazyLoad=true}}
{{/foreach}} {{/foreach}}
{{/get}} {{/get}}
{{/match}} {{/match}}
@ -42,14 +42,14 @@
{{#match posts.length ">=" 7}} {{#match posts.length ">=" 7}}
{{#get "posts" include="authors" limit="19"}} {{#get "posts" include="authors" limit="19"}}
{{#foreach posts from="8" limit="12"}} {{#foreach posts from="8" limit="12"}}
{{> "post-card"}} {{> "post-card" lazyLoad=true}}
{{/foreach}} {{/foreach}}
{{/get}} {{/get}}
{{/match}} {{/match}}
{{else}} {{else}}
{{#get "posts" include="authors" limit="12"}} {{#get "posts" include="authors" limit="12"}}
{{#foreach posts}} {{#foreach posts}}
{{> "post-card"}} {{> "post-card" lazyLoad=true}}
{{/foreach}} {{/foreach}}
{{/get}} {{/get}}
{{/match}} {{/match}}
@ -65,14 +65,14 @@
{{/get}} {{/get}}
{{/match}} {{/match}}
{{#foreach posts}} {{#foreach posts}}
{{> "post-card"}} {{> "post-card" lazyLoad=true}}
{{/foreach}} {{/foreach}}
{{/match}} {{/match}}
{{!-- Tag and author pages --}} {{!-- Tag and author pages --}}
{{#match feed "archive"}} {{#match feed "archive"}}
{{#foreach posts}} {{#foreach posts}}
{{> "post-card"}} {{> "post-card" lazyLoad=true}}
{{/foreach}} {{/foreach}}
{{/match}} {{/match}}
@ -80,7 +80,7 @@
{{#match feed "recent"}} {{#match feed "recent"}}
{{#get "posts" include="authors" filter="id:-{{post.id}}" limit="4" as |next|}} {{#get "posts" include="authors" filter="id:-{{post.id}}" limit="4" as |next|}}
{{#foreach next}} {{#foreach next}}
{{> "post-card"}} {{> "post-card" lazyLoad=true}}
{{/foreach}} {{/foreach}}
{{/get}} {{/get}}
{{/match}} {{/match}}
@ -92,7 +92,7 @@
<aside class="gh-sidebar"> <aside class="gh-sidebar">
<section class="gh-about"> <section class="gh-about">
{{#if @site.icon}} {{#if @site.icon}}
<img class="gh-about-icon" src="{{@site.icon}}" alt="{{@site.title}}"> <img class="gh-about-icon" src="{{@site.icon}}" alt="{{@site.title}}" loading="lazy">
{{/if}} {{/if}}
<h3 class="gh-about-title is-title">{{@site.title}}</h3> <h3 class="gh-about-title is-title">{{@site.title}}</h3>
{{#if @site.description}} {{#if @site.description}}

View File

@ -1,12 +1,11 @@
{{#if feature_image}} {{#if feature_image}}
<figure class="gh-article-image"> <figure class="gh-article-image">
<img <img
srcset="{{img_url feature_image size="s"}} 300w, srcset="{{img_url feature_image size="s"}} 320w,
{{img_url feature_image size="m"}} 720w, {{img_url feature_image size="m"}} 600w,
{{img_url feature_image size="l"}} 960w, {{img_url feature_image size="l"}} 960w,
{{img_url feature_image size="xl"}} 1200w, {{img_url feature_image size="xl"}} 1200w,
{{img_url feature_image size="xxl"}} 2000w" {{img_url feature_image size="xxl"}} 2000w"
sizes="(max-width: 1200px) 100vw, 1200px"
src="{{img_url feature_image size="xl"}}" src="{{img_url feature_image size="xl"}}"
alt="{{title}}" alt="{{title}}"
> >

View File

@ -3,14 +3,16 @@
{{#if feature_image}} {{#if feature_image}}
<figure class="gh-card-image"> <figure class="gh-card-image">
<img <img
srcset="{{img_url feature_image size="s"}} 300w, srcset="{{img_url feature_image size="xs" format="webp"}} 160w,
{{img_url feature_image size="m"}} 720w, {{img_url feature_image size="s" format="webp"}} 320w,
{{img_url feature_image size="l"}} 960w, {{img_url feature_image size="m" format="webp"}} 600w,
{{img_url feature_image size="xl"}} 1200w, {{img_url feature_image size="l" format="webp"}} 960w,
{{img_url feature_image size="xxl"}} 2000w" {{img_url feature_image size="xl" format="webp"}} 1200w,
sizes="(max-width: 1200px) 100vw, 1200px" {{img_url feature_image size="xxl" format="webp"}} 2000w"
sizes="{{#if imageSizes}}{{imageSizes}}{{else}}320px{{/if}}"
src="{{img_url feature_image size="m"}}" src="{{img_url feature_image size="m"}}"
alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}" alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
{{#if lazyLoad}}loading="lazy"{{/if}}
> >
</figure> </figure>
{{/if}} {{/if}}