优化图片懒加载及 RSS ✅
This commit is contained in:
Han
parent
0be4e71328
commit
e454312864
1
public/assets/images/footer/rss.svg
Normal file
1
public/assets/images/footer/rss.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="83" height="20" role="img" aria-label="订阅: RSS"><title>订阅: RSS</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="83" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="50" height="20" fill="#fe7d37"/><rect x="50" width="33" height="20" fill="#fff"/><rect width="83" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><image x="5" y="3" width="14" height="14" xlink:href="data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmIiByb2xlPSJpbWciIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGU+UlNTPC90aXRsZT48cGF0aCBkPSJNMTkuMTk5IDI0QzE5LjE5OSAxMy40NjcgMTAuNTMzIDQuOCAwIDQuOFYwYzEzLjE2NSAwIDI0IDEwLjgzNSAyNCAyNGgtNC44MDF6TTMuMjkxIDE3LjQxNWMxLjgxNCAwIDMuMjkzIDEuNDc5IDMuMjkzIDMuMjk1IDAgMS44MTMtMS40ODUgMy4yOS0zLjMwMSAzLjI5QzEuNDcgMjQgMCAyMi41MjYgMCAyMC43MXMxLjQ3NS0zLjI5NCAzLjI5MS0zLjI5NXpNMTUuOTA5IDI0aC00LjY2NWMwLTYuMTY5LTUuMDc1LTExLjI0NS0xMS4yNDQtMTEuMjQ1VjguMDljOC43MjcgMCAxNS45MDkgNy4xODQgMTUuOTA5IDE1LjkxeiIvPjwvc3ZnPg=="/><text aria-hidden="true" x="345" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="230">订阅</text><text x="345" y="140" transform="scale(.1)" fill="#fff" textLength="230">订阅</text><text aria-hidden="true" x="655" y="150" fill="#ccc" fill-opacity=".3" transform="scale(.1)" textLength="230">RSS</text><text x="655" y="140" transform="scale(.1)" fill="#333" textLength="230">RSS</text></g></svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
@ -13,7 +13,7 @@ import "../styles/components/ArticleCard.less";
|
||||
|
||||
<article class="vh-article-item vh-animation" style={`animation-delay:calc(var(--vh-animation-delay) + ${index * 50}ms)`}>
|
||||
<a class="vh-article-link" href={`/article/${post.data.id}`}>
|
||||
<section class="vh-article-banner"><Image src={ARTICLE_COVER} alt={post.data.title} width="10" height="10" /></section>
|
||||
<section class="vh-article-banner"><Image src="/assets/images/lazy-loading.webp" data-vh-lz-src={ARTICLE_COVER} alt={post.data.title} width="10" height="10" /></section>
|
||||
<section class="vh-article-desc">
|
||||
<header>
|
||||
<span class={`vh-article-categories vh-categories-${post.data.categories}`}>{post.data.categories}</span>
|
||||
|
||||
@ -30,7 +30,7 @@ import "../styles/components/Aside.less";
|
||||
{
|
||||
WebSites.map(item => (
|
||||
<a class="vh-aside-links-item" href={item.link} title={item.text} target="_blank" rel="noopener nofollow">
|
||||
<img src={item.icon} />
|
||||
<Image src={item.icon} alt={item.text} width="1" height="1" />
|
||||
</a>
|
||||
))
|
||||
}
|
||||
@ -74,7 +74,7 @@ import "../styles/components/Aside.less";
|
||||
recommendArticles.map(async i => (
|
||||
<a href={`/article/${(await i).id}`}>
|
||||
<p class="cover">
|
||||
<img src={(await i).cover} />
|
||||
<Image src={(await i).cover} alt={(await i).title} width="1" height="1" />
|
||||
</p>
|
||||
<p class="info">
|
||||
<span>{(await i).title}</span>
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
---
|
||||
// 静态图片
|
||||
import { Image } from "astro:assets";
|
||||
// 格式化时间
|
||||
import { fmtDate } from "../utils/index";
|
||||
// 页面内容的元数据
|
||||
import SITE_CONFIG from "../config";
|
||||
@ -9,9 +12,7 @@ import "../styles/Footer.less";
|
||||
|
||||
<footer class="vh-footer">
|
||||
<main>
|
||||
<p>
|
||||
<img src="/assets/images/footer/ing.svg" /><span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path fill="#fff" d="M269.4 2.9C265.2 1 260.7 0 256 0s-9.2 1-13.4 2.9L54.3 82.8c-22 9.3-38.4 31-38.3 57.2c.5 99.2 41.3 280.7 213.6 363.2c16.7 8 36.1 8 52.8 0C454.7 420.7 495.5 239.2 496 140c.1-26.2-16.3-47.9-38.3-57.2L269.4 2.9zM144 221.3c0-33.8 27.4-61.3 61.3-61.3c16.2 0 31.8 6.5 43.3 17.9l7.4 7.4 7.4-7.4c11.5-11.5 27.1-17.9 43.3-17.9c33.8 0 61.3 27.4 61.3 61.3c0 16.2-6.5 31.8-17.9 43.3l-82.7 82.7c-6.2 6.2-16.4 6.2-22.6 0l-82.7-82.7c-11.5-11.5-17.9-27.1-17.9-43.3z"></path></svg><cite>稳定运行</cite><em>{fmtDate(CreateTime)}</em></span><a href="https://analytics.vvhan.com" target="_blank" rel="noopener noreferrer"><img src="/assets/images/footer/hananalytics.svg" /></a>
|
||||
</p>
|
||||
<p><a href="https://astro.build/" target="_blank" rel="noopener noreferrer"><img src="/assets/images/footer/astro.svg" /></a><a href="https://github.com/uxiaohan/vhAstro-Theme" target="_blank" rel="noopener noreferrer"><img src="/assets/images/footer/theme.svg" /></a><a href="/sitemap-index.xml"><img src="/assets/images/footer/sitemap.svg" /></a><a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer"><img src="/assets/images/footer/icp.svg" /></a></p>
|
||||
<p><Image src="/assets/images/footer/ing.svg" alt="韩小韩" width="1" height="1" /><span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path fill="#fff" d="M269.4 2.9C265.2 1 260.7 0 256 0s-9.2 1-13.4 2.9L54.3 82.8c-22 9.3-38.4 31-38.3 57.2c.5 99.2 41.3 280.7 213.6 363.2c16.7 8 36.1 8 52.8 0C454.7 420.7 495.5 239.2 496 140c.1-26.2-16.3-47.9-38.3-57.2L269.4 2.9zM144 221.3c0-33.8 27.4-61.3 61.3-61.3c16.2 0 31.8 6.5 43.3 17.9l7.4 7.4 7.4-7.4c11.5-11.5 27.1-17.9 43.3-17.9c33.8 0 61.3 27.4 61.3 61.3c0 16.2-6.5 31.8-17.9 43.3l-82.7 82.7c-6.2 6.2-16.4 6.2-22.6 0l-82.7-82.7c-11.5-11.5-17.9-27.1-17.9-43.3z"></path></svg><cite>稳定运行</cite><em>{fmtDate(CreateTime)}</em></span><a href="https://analytics.vvhan.com" target="_blank" rel="noopener noreferrer"><Image width="1" height="1" alt="HanAnalytics" src="/assets/images/footer/hananalytics.svg" /></a></p>
|
||||
<p><a href="https://astro.build/" target="_blank" rel="noopener noreferrer"><Image width="1" height="1" alt="Astro" src="/assets/images/footer/astro.svg" /></a><a href="https://github.com/uxiaohan/vhAstro-Theme" target="_blank" rel="noopener noreferrer"><Image width="1" height="1" alt="vhAstro-Theme" src="/assets/images/footer/theme.svg" /></a><a href="/sitemap-index.xml"><Image width="1" height="1" alt="sitemap" src="/assets/images/footer/sitemap.svg" /></a><a href="/rss.xml"><Image width="1" height="1" alt="rss" src="/assets/images/footer/rss.svg" /></a><a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer"><Image width="1" height="1" alt="icp" src="/assets/images/footer/icp.svg" /></a></p>
|
||||
</main>
|
||||
</footer>
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
---
|
||||
// 静态图片
|
||||
import { Image } from "astro:assets";
|
||||
// 页面 Info
|
||||
import SITE_CONFIG from "../../config";
|
||||
const { Description, Twikoo } = SITE_CONFIG;
|
||||
@ -23,23 +25,23 @@ import "../../styles/About.less";
|
||||
<p>我是一名热爱前端开发并拥有丰富经验的工程师，喜欢探索新技术并应用于实际项目中。 我始终保持对新技术的热情，并将我的知识与经验分享在我的博客中。我期待在这里与你分享我的见解、经验和最新的技术动态。</p>
|
||||
<h3>🌟 Languages and Tools</h3>
|
||||
<div class="language-tool">
|
||||
<a href="https://www.w3.org/html/" target="_blank" rel="noopener nofollow"><img data-vh-lz-src="https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white" alt="HTML5" /></a>
|
||||
<a href="https://nodejs.org" target="_blank" rel="noopener nofollow"><img data-vh-lz-src="https://img.shields.io/badge/Node.js-339933?style=for-the-badge&logo=node.js&logoColor=white" alt="Node.js" /></a>
|
||||
<a href="https://www.php.net/" target="_blank" rel="noopener nofollow"><img data-vh-lz-src="https://img.shields.io/badge/php-3776AB?style=for-the-badge&logo=php&logoColor=white" alt="PHP" /></a>
|
||||
<a href="https://www.python.org" target="_blank" rel="noopener nofollow"><img data-vh-lz-src="https://img.shields.io/badge/Python-3776AB?style=for-the-badge&logo=python&logoColor=white" alt="Python" /></a>
|
||||
<a href="https://git-scm.com/" target="_blank" rel="noopener nofollow"><img data-vh-lz-src="https://img.shields.io/badge/Git-F05032?style=for-the-badge&logo=git&logoColor=white" alt="Git" /> </a>
|
||||
<a href="https://www.linux.org/" target="_blank" rel="noopener nofollow"><img data-vh-lz-src="https://img.shields.io/badge/Linux-FCC624?style=for-the-badge&logo=linux&logoColor=black" alt="Linux" /></a>
|
||||
<a href="https://www.nginx.com" target="_blank" rel="noopener nofollow"><img data-vh-lz-src="https://img.shields.io/badge/Nginx-009639?style=for-the-badge&logo=nginx&logoColor=white" alt="Nginx" /></a>
|
||||
<a href="https://www.docker.com/" target="_blank" rel="noopener nofollow"><img data-vh-lz-src="https://img.shields.io/badge/Docker-2496ED?style=for-the-badge&logo=docker&logoColor=white" alt="Docker" /></a>
|
||||
<a href="https://vuejs.org/" target="_blank" rel="noopener nofollow"><img data-vh-lz-src="https://img.shields.io/badge/Vue.js-4FC08D?style=for-the-badge&logo=vue.js&logoColor=white" alt="Vue.js" /></a>
|
||||
<a href="https://vitejs.dev/" target="_blank" rel="noopener nofollow"><img data-vh-lz-src="https://img.shields.io/badge/Vite-646CFF?style=for-the-badge&logo=vite&logoColor=white" alt="Vite" /></a>
|
||||
<a href="https://webpack.js.org" target="_blank" rel="noopener nofollow"><img data-vh-lz-src="https://img.shields.io/badge/Webpack-8DD6F9?style=for-the-badge&logo=webpack&logoColor=black" alt="Webpack" /></a>
|
||||
<a href="https://www.electronjs.org" target="_blank" rel="noopener nofollow"><img data-vh-lz-src="https://img.shields.io/badge/Electron-47848F?style=for-the-badge&logo=electron&logoColor=white" alt="Electron" /></a>
|
||||
<a href="https://expressjs.com" target="_blank" rel="noopener nofollow"><img data-vh-lz-src="https://img.shields.io/badge/Express-000000?style=for-the-badge&logo=express&logoColor=white" alt="Express" /></a>
|
||||
<a href="https://tailwindcss.com/" target="_blank" rel="noopener nofollow"><img data-vh-lz-src="https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white" alt="Tailwind CSS" /></a>
|
||||
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank" rel="noopener nofollow"><img data-vh-lz-src="https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black" alt="JavaScript" /></a>
|
||||
<a href="https://www.sqlite.org/" target="_blank" rel="noopener nofollow"><img data-vh-lz-src="https://img.shields.io/badge/SQLite-003B57?style=for-the-badge&logo=sqlite&logoColor=white" alt="SQLite" /></a>
|
||||
<a href="https://code.visualstudio.com/" target="_blank" rel="noopener nofollow"><img data-vh-lz-src="https://img.shields.io/badge/VS_Code-007ACC?style=for-the-badge&logo=visual-studio-code&logoColor=white" alt="VS Code" /></a>
|
||||
<a href="https://www.w3.org/html/" target="_blank" rel="noopener nofollow"><Image width="1" height="1" src="/assets/images/lazy-loading.webp" data-vh-lz-src="https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white" alt="HTML5" /></a>
|
||||
<a href="https://nodejs.org" target="_blank" rel="noopener nofollow"><Image width="1" height="1" src="/assets/images/lazy-loading.webp" data-vh-lz-src="https://img.shields.io/badge/Node.js-339933?style=for-the-badge&logo=node.js&logoColor=white" alt="Node.js" /></a>
|
||||
<a href="https://www.php.net/" target="_blank" rel="noopener nofollow"><Image width="1" height="1" src="/assets/images/lazy-loading.webp" data-vh-lz-src="https://img.shields.io/badge/php-3776AB?style=for-the-badge&logo=php&logoColor=white" alt="PHP" /></a>
|
||||
<a href="https://www.python.org" target="_blank" rel="noopener nofollow"><Image width="1" height="1" src="/assets/images/lazy-loading.webp" data-vh-lz-src="https://img.shields.io/badge/Python-3776AB?style=for-the-badge&logo=python&logoColor=white" alt="Python" /></a>
|
||||
<a href="https://git-scm.com/" target="_blank" rel="noopener nofollow"><Image width="1" height="1" src="/assets/images/lazy-loading.webp" data-vh-lz-src="https://img.shields.io/badge/Git-F05032?style=for-the-badge&logo=git&logoColor=white" alt="Git" /> </a>
|
||||
<a href="https://www.linux.org/" target="_blank" rel="noopener nofollow"><Image width="1" height="1" src="/assets/images/lazy-loading.webp" data-vh-lz-src="https://img.shields.io/badge/Linux-FCC624?style=for-the-badge&logo=linux&logoColor=black" alt="Linux" /></a>
|
||||
<a href="https://www.nginx.com" target="_blank" rel="noopener nofollow"><Image width="1" height="1" src="/assets/images/lazy-loading.webp" data-vh-lz-src="https://img.shields.io/badge/Nginx-009639?style=for-the-badge&logo=nginx&logoColor=white" alt="Nginx" /></a>
|
||||
<a href="https://www.docker.com/" target="_blank" rel="noopener nofollow"><Image width="1" height="1" src="/assets/images/lazy-loading.webp" data-vh-lz-src="https://img.shields.io/badge/Docker-2496ED?style=for-the-badge&logo=docker&logoColor=white" alt="Docker" /></a>
|
||||
<a href="https://vuejs.org/" target="_blank" rel="noopener nofollow"><Image width="1" height="1" src="/assets/images/lazy-loading.webp" data-vh-lz-src="https://img.shields.io/badge/Vue.js-4FC08D?style=for-the-badge&logo=vue.js&logoColor=white" alt="Vue.js" /></a>
|
||||
<a href="https://vitejs.dev/" target="_blank" rel="noopener nofollow"><Image width="1" height="1" src="/assets/images/lazy-loading.webp" data-vh-lz-src="https://img.shields.io/badge/Vite-646CFF?style=for-the-badge&logo=vite&logoColor=white" alt="Vite" /></a>
|
||||
<a href="https://webpack.js.org" target="_blank" rel="noopener nofollow"><Image width="1" height="1" src="/assets/images/lazy-loading.webp" data-vh-lz-src="https://img.shields.io/badge/Webpack-8DD6F9?style=for-the-badge&logo=webpack&logoColor=black" alt="Webpack" /></a>
|
||||
<a href="https://www.electronjs.org" target="_blank" rel="noopener nofollow"><Image width="1" height="1" src="/assets/images/lazy-loading.webp" data-vh-lz-src="https://img.shields.io/badge/Electron-47848F?style=for-the-badge&logo=electron&logoColor=white" alt="Electron" /></a>
|
||||
<a href="https://expressjs.com" target="_blank" rel="noopener nofollow"><Image width="1" height="1" src="/assets/images/lazy-loading.webp" data-vh-lz-src="https://img.shields.io/badge/Express-000000?style=for-the-badge&logo=express&logoColor=white" alt="Express" /></a>
|
||||
<a href="https://tailwindcss.com/" target="_blank" rel="noopener nofollow"><Image width="1" height="1" src="/assets/images/lazy-loading.webp" data-vh-lz-src="https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white" alt="Tailwind CSS" /></a>
|
||||
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank" rel="noopener nofollow"><Image width="1" height="1" src="/assets/images/lazy-loading.webp" data-vh-lz-src="https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black" alt="JavaScript" /></a>
|
||||
<a href="https://www.sqlite.org/" target="_blank" rel="noopener nofollow"><Image width="1" height="1" src="/assets/images/lazy-loading.webp" data-vh-lz-src="https://img.shields.io/badge/SQLite-003B57?style=for-the-badge&logo=sqlite&logoColor=white" alt="SQLite" /></a>
|
||||
<a href="https://code.visualstudio.com/" target="_blank" rel="noopener nofollow"><Image width="1" height="1" src="/assets/images/lazy-loading.webp" data-vh-lz-src="https://img.shields.io/badge/VS_Code-007ACC?style=for-the-badge&logo=visual-studio-code&logoColor=white" alt="VS Code" /></a>
|
||||
</div>
|
||||
</main>
|
||||
{Twikoo.envId && <Comment envId={Twikoo.envId} />}
|
||||
|
||||
@ -16,6 +16,6 @@ export async function GET(context: any) {
|
||||
pubDate: post.data.updated || post.data.date,
|
||||
description: getDescription(post),
|
||||
link: `/article/${post.data.id}`
|
||||
})),
|
||||
})).reverse(),
|
||||
});
|
||||
}
|
||||
|
||||
@ -30,12 +30,15 @@
|
||||
&>a {
|
||||
width: max-content;
|
||||
max-width: 100%;
|
||||
height: max-content;
|
||||
height: 2rem;
|
||||
line-height: 1;
|
||||
overflow: hidden;
|
||||
transition: transform 0.16s ease-in-out;
|
||||
|
||||
&>img {
|
||||
height: calc(100% - 1px);
|
||||
width: auto;
|
||||
object-fit: contain;
|
||||
border-bottom: 1px solid #2563eb;
|
||||
}
|
||||
|
||||
|
||||
@ -68,6 +68,12 @@
|
||||
height: 0.88rem;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
width: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user