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>
<script src="http://localhost:35729/livereload.js?snipver=1"></script>
<script>
/* 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/ */

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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