style(app): 使用 NuxtImg 替代 img 标签

在多个组件中将 `img` 标签替换为 `NuxtImg` 标签,提升图片加载的性能和优化。例如,在 `AboutSection.vue`、`FriendsSection.vue`、`HeroSection.vue`、`ProjectsSection.vue`、`SitesSection.vue` 和 `SkillsSection.vue` 中的图片标签。

refactor(app): 扩展 `nuxt.config.ts` 配置

扩展了 `nuxt.config.ts` 配置文件中的模块配置,添加了 `@nuxt/image` 和 `@nuxt/eslint` 模块。同时,优化了 `routeRules` 配置,以支持预渲染和增量静态生成。
This commit is contained in:
2025-12-18 22:13:47 +08:00
parent bda4281fde
commit 6b05f7c74e
21 changed files with 423 additions and 231 deletions

View File

@@ -5,8 +5,11 @@
<p class="text-sm text-white/60 mb-3">正在运行的站点 · Websites</p>
<div class="grid grid-cols-1 gap-4 w-full max-w-[1100px] mx-auto sm:grid-cols-2">
<article v-for="site in sites" :key="site.url"
class="rounded-[14px] border border-white/10 bg-gradient-to-br from-white/5 to-white/0 px-4 py-3.5 transition-all duration-200 hover:-translate-y-[3px] hover:border-blue-400/50 w-[290px] h-[145px] flex flex-col">
<article
v-for="site in sites"
:key="site.url"
class="rounded-[14px] border border-white/10 bg-gradient-to-br from-white/5 to-white/0 px-4 py-3.5 transition-all duration-200 hover:-translate-y-[3px] hover:border-blue-400/50 w-[290px] h-[145px] flex flex-col"
>
<div class="flex items-center justify-between mb-1.5">
<h3 class="font-medium truncate">
{{ site.name }}
@@ -19,10 +22,12 @@
{{ site.desc }}
</p>
<a :href="site.url" target="_blank" rel="noreferrer"
class="inline-flex items-center gap-1.5 mt-auto shrink-0 font-semibold text-blue-300 hover:text-blue-400 transition-all duration-200 hover:gap-2">
<NuxtLink
:to="site.url"
class="inline-flex items-center gap-1.5 mt-auto shrink-0 font-semibold text-blue-300 hover:text-blue-400 transition-all duration-200 hover:gap-2"
>
查看
</a>
</NuxtLink>
</article>
</div>
</section>
@@ -30,6 +35,9 @@
<script setup>
defineProps({
sites: Array,
sites: {
type: Array,
default: () => [],
},
});
</script>