早安喵栈
极简页脚改版：为博客全量引入 Shields.io 徽章图标
✨AI 摘要：
🤖 正在生成摘要...
在追求极简与美感的中途，我一直觉得原本纯文字渲染的页脚显得有些过于沉闷。原本的样式是由普通的文本链接拼接而成：
Powered by Astro & Firefly | Deployed on Vercel
虽然清爽，但在视觉层级上缺乏一点精炼感。正好借着最近优化组件的机会，决定将页脚的版权声明和技术栈信息，全部重构为 Shields.io 的徽章风格。
🎨 改版效果与思路
本次改版主要分为两个核心区域：
- 版权声明行：将原本的
© 2026 ZaoCat All Rights Reserved.转化为统一样式的 Shields.io 徽章，并保留年份与站长配置的动态渲染能力。 - 技术栈与部署行：将 Astro、Firefly 主题以及 Vercel 部署标识转化为带有官方 Logo 和专属品牌色调的徽章组合。
🛠️ 具体实现步骤
直接编辑 src/components/Footer.astro 组件，将原本的文字结构替换为带有 Shields.io 生成接口的 <img> 标签组合。
1. 动态版权徽章
为了保持代码的灵活性，版权信息借由 Astro 的模板语法直接拼接 currentYear 与 profileConfig.name，免去每年手动更新代码的烦恼：
<!-- 动态年份与站名的版权徽章 --><div class="mx-0.5 my-2 flex items-center justify-center gap-2 flex-wrap"> <a href="/" class="inline-flex items-center"> <img src={`[https://img.shields.io/badge/%C2%A9%20$](https://img.shields.io/badge/%C2%A9%20$){currentYear}-${profileConfig.name}%20All%20Rights%20Reserved.-4B5563?style=flat`} alt={`Copyright ${currentYear} ${profileConfig.name}`} /> </a></div>2. 技术栈与部署徽章
在驱动框架与部署服务的图标中，引入了对应品牌的颜色与矢量 Logo，提升辨识度：
代码段
<!-- 技术栈与部署徽章行 --><div class="mx-0.5 my-2 flex items-center justify-center gap-2 flex-wrap"> <!-- Astro 徽章 --> <a target="_blank" href="[https://astro.build](https://astro.build)" class="inline-flex items-center"> <img src="[https://img.shields.io/badge/Powered%20by-Astro-BC52EE?style=flat&logo=astro&logoColor=white](https://img.shields.io/badge/Powered%20by-Astro-BC52EE?style=flat&logo=astro&logoColor=white)" alt="Astro" /> </a>
<!-- Firefly 主题徽章 --> <a target="_blank" href="[https://github.com/CuteLeaf/Firefly](https://github.com/CuteLeaf/Firefly)" class="inline-flex items-center"> <img src="[https://img.shields.io/badge/Theme-Firefly-ff69b4?style=flat](https://img.shields.io/badge/Theme-Firefly-00BA91?style=flat)" alt="Firefly" /> </a>
<span class="text-black/30 dark:text-white/30">|</span>
<!-- Vercel 部署徽章 --> <a target="_blank" href="[https://vercel.com](https://vercel.com)" class="inline-flex items-center"> <img src="[https://img.shields.io/badge/Deployed%20on-Vercel-000000?style=flat&logo=vercel&logoColor=white](https://img.shields.io/badge/Deployed%20on-Vercel-000000?style=flat&logo=vercel&logoColor=white)" alt="Vercel" /> </a></div>💡 Shields.io 参数微调小结
在定制 Shields.io 徽章时，有几个参数特别实用：
- URL 编码：
%C2%A9对应©符号，%20对应空格。 logo&logoColor：指定内置的标准图标（如astro,vercel）及图标颜色。style：默认使用flat样式，在现代轻量化界面中观感最为和谐；如果喜欢厚重的科技感，也可以尝试for-the-badge。- 配色选择：版权徽章选用了中灰 (
#4B5563)，既能保证可读性，又不会在页面底部抢走主内容的焦点。
📝 完整 Footer.astro 结构参考
最终重构后的代码块非常干练：
代码段
---import fs from "node:fs";import path from "node:path";import { profileConfig } from "@/config";
const currentYear = new Date().getFullYear();
let customFooterHtml = "";try { const footerHtmlPath = path.join( process.cwd(), "src", "config", "FooterConfig.html", ); customFooterHtml = fs.readFileSync(footerHtmlPath, "utf-8"); customFooterHtml = customFooterHtml.replace(/<!--[\s\S]*?-->/g, "").trim();} catch (error) { console.warn( "FooterConfig.html 读取失败:", error instanceof Error ? error.message : String(error), );}---
<footer class="site-footer pointer-events-auto pb-4 md:pb-6"> <div class="transition border-t border-black/10 dark:border-white/15 mt-10 mb-5 border-dashed mx-32"></div>
<div class="transition flex flex-col items-center justify-center px-6"> <div class="transition text-sm text-center"> {customFooterHtml && <div set:html={customFooterHtml} class="mb-2" />}
<!-- 版权行 --> <div class="mx-0.5 my-2 flex items-center justify-center gap-2 flex-wrap"> <a href="/" class="inline-flex items-center"> <img src={`[https://img.shields.io/badge/%C2%A9%20$](https://img.shields.io/badge/%C2%A9%20$){currentYear}-${profileConfig.name}%20All%20Rights%20Reserved.-4B5563?style=flat`} alt={`Copyright ${currentYear} ${profileConfig.name}`} /> </a> </div>
<!-- 技术栈与部署徽章行 --> <div class="mx-0.5 my-2 flex items-center justify-center gap-2 flex-wrap"> <a target="_blank" href="[https://astro.build](https://astro.build)" class="inline-flex items-center"> <img src="[https://img.shields.io/badge/Powered%20by-Astro-BC52EE?style=flat&logo=astro&logoColor=white](https://img.shields.io/badge/Powered%20by-Astro-BC52EE?style=flat&logo=astro&logoColor=white)" alt="Astro" /> </a>
<a target="_blank" href="[https://github.com/CuteLeaf/Firefly](https://github.com/CuteLeaf/Firefly)" class="inline-flex items-center"> <img src="[https://img.shields.io/badge/Theme-Firefly-ff69b4?style=flat](https://img.shields.io/badge/Theme-Firefly-ff69b4?style=flat)" alt="Firefly" /> </a>
<span class="text-black/30 dark:text-white/30">|</span>
<a target="_blank" href="[https://vercel.com](https://vercel.com)" class="inline-flex items-center"> <img src="[https://img.shields.io/badge/Deployed%20on-Vercel-000000?style=flat&logo=vercel&logoColor=white](https://img.shields.io/badge/Deployed%20on-Vercel-000000?style=flat&logo=vercel&logoColor=white)" alt="Vercel" /> </a> </div> </div> </div></footer>修改完成后提交代码，Vercel 会自动完成构建与部署。看着页脚整齐规范的徽章，博客的整体精致感又提升了不少！
支持与分享
如果这篇文章对你有帮助，欢迎分享给更多人或打赏支持！
极简页脚改版：为博客全量引入 Shields.io 徽章图标
https://929255.xyz/posts/astro-shields-footer/