在 Astro ThoughtLite 美化页脚

打开 src/layouts/Footer.astro

（部分内容根据需要自行修改）:

---
import { getCollection, getEntry, render } from "astro:content";
import { getRelativeLocaleUrl } from "astro:i18n";
import { monolocale } from "$config";
import i18nit from "$i18n";

let { locale, author, copyright } = Astro.props;

const t = i18nit(locale);

let ccURL: string;
let ccLabel: string;

// 博客运行日期计算
const blogLaunchDate = new Date("2025-11-08");
const currentDate = new Date();
const daysRunning = Math.floor(
(currentDate.getTime() - blogLaunchDate.getTime()) / (1000 * 60 * 60 * 24)
);

// 导航显示链接
const navLinks = [
{ title: "首页", url: "/" },
{ title: "文章", url: "/note" },
{ title: "随笔", url: "/jotting" },
{ title: "关于", url: "/about" },
{ title: "友链", url: "/links" },
{ title: "留言", url: "/message" }
];

switch (copyright.type) {
case "CC BY 4.0":
ccURL = "https://creativecommons.org/licenses/by/4.0/";
ccLabel = "Attribution 4.0 International";
break;
case "CC BY-SA 4.0":
ccURL = "https://creativecommons.org/licenses/by-sa/4.0/";
ccLabel = "Attribution-ShareAlike 4.0 International";
break;
case "CC BY-NC 4.0":
ccURL = "https://creativecommons.org/licenses/by-nc/4.0/";
ccLabel = "Creative Commons Attribution-NonCommercial 4.0 International";
break;
case "CC BY-NC-SA 4.0":
ccURL = "https://creativecommons.org/licenses/by-nc-sa/4.0/";
ccLabel = "Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International";
break;
case "CC BY-ND 4.0":
ccURL = "https://creativecommons.org/licenses/by-nd/4.0/";
ccLabel = "Creative Commons Attribution-NoDerivatives 4.0 International";
break;
case "CC BY-NC-ND 4.0":
ccURL = "https://creativecommons.org/licenses/by-nc-nd/4.0/";
ccLabel = "Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International";
break;
default:
ccURL = "https://creativecommons.org/publicdomain/zero/1.0/";
ccLabel = "CC0 1.0 Universal";
break;
}

const ccIcons = ["fa6-brands:creative-commons"];
if (copyright.type === "CC0 1.0") {
ccIcons.push("fa6-brands:creative-commons-zero");
} else {
if (copyright.type.includes("BY")) ccIcons.push("fa6-brands:creative-commons-by");
if (copyright.type.includes("NC")) ccIcons.push("fa6-brands:creative-commons-nc");
if (copyright.type.includes("SA")) ccIcons.push("fa6-brands:creative-commons-sa");
if (copyright.type.includes("ND")) ccIcons.push("fa6-brands:creative-commons-nd");
}

// 寻找文章数据
const notes = await getCollection("note", note => {
let published = !note.data.draft;
let localed = monolocale || note.id.split("/")[0] === locale;
return published && localed;
});

const noteWords = (
await Promise.all(
notes.map(async note => (await render(note)).remarkPluginFrontmatter.words)
)
).reduce((sum, words) => sum + words, 0);

const jottings = await getCollection("jotting", jotting => {
let published = !jotting.data.draft;
let localed = monolocale || jotting.id.split("/")[0] === locale;
return published && localed;
});

const jottingWords = (
await Promise.all(
jottings.map(async jotting => (await render(jotting)).remarkPluginFrontmatter.words)
)
).reduce((sum, words) => sum + words, 0);

const totalWords = noteWords + jottingWords;

// 获取最近文章
const latestArticles = [...notes, ...jottings]
.filter(item => !item.data.draft)
.sort((a, b) => b.data.timestamp.getTime() - a.data.timestamp.getTime())
.slice(0, 6);

// Policy
const policy = await getEntry("information", `${locale}/policy`);
---

<style lang="less">
/* 样式部分本身已是 2 空格，这里不再赘述，逻辑未改 */
</style>

<footer>
<div class="footer-container">
<div class="footer-column column-left">
<h3>关于本站</h3>
<p class="intro-text">
Hello! 我是 Yaten，这是我的个人博客，<br />
在这里我会分享我的学习笔记、生活随笔<br />
以及各种有趣的内容。
</p>
<p class="intro-text">
本站至今已经运行了
<span class="highlight">{daysRunning}</span> 天，<br />
写下
<span class="highlight">{notes.length + jottings.length}</span>
篇文章，共计
<span class="highlight">{totalWords}</span>
字。
</p>
</div>

<div class="footer-column column-center">
<h3>导航</h3>
<div class="nav-list">
{navLinks.map(link => {
const isExternal = link.url.startsWith("http");
return isExternal ? (
<a href={link.url} target="_blank" rel="noopener noreferrer">
{link.title}
</a>
) : (
<a href={getRelativeLocaleUrl(locale, link.url)}>
{link.title}
</a>
);
})}
</div>

<div class="extra-info">
<h4>联系方式</h4>
<div class="info-item">
<a href="https://github.com/Yaten-Z" target="_blank">
GitHub: Yaten-Z
</a>
</div>
<div class="info-item">
<a href="mailto:Yaten-Z@outlook.com">
Email: Yaten-Z@outlook.com
</a>
</div>
<div class="info-item">
<a href="https://qm.qq.com/q/IyIRVq6vwQ" target="_blank">
QQ: 2635802854
</a>
</div>
</div>
</div>

<div class="footer-column column-right">
<h3>最近文章</h3>
{latestArticles.length > 0 ? (
<div class="articles-list">
{latestArticles.map(item => {
const type = item.collection === "note" ? "note" : "jotting";
const date = new Date(item.data.timestamp).toLocaleDateString(locale);
return (
<a
href={getRelativeLocaleUrl(
locale,
`/${type}/${item.id.split("/").slice(1).join("/")}`
)}
class="article-link"
>
{item.data.title}
<span class="article-date">{date}</span>
</a>
);
})}
</div>
) : (
<div class="no-articles">暂无推荐</div>
)}
</div>
</div>

<div class="footer-bottom">
<div class="bottom-info">
{copyright.type !== "CC0 1.0" && [
<span>©</span>,
<span>{copyright.year}</span>
]}
<span>
{typeof author === "string"
? author
: author.link
? <a href={author.link} target="_blank">{author.name}</a>
: author.name}
</span>
<span>·</span>
<a href={ccURL} target="_blank" title={ccLabel}>
{copyright.type}
</a>
<span>·</span>
<span>
Powered by <a href="https://astro.build/" target="_blank">Astro</a>
</span>
</div>
</div>
</footer>