页脚与小部件配置

页脚（Footer）和小部件（Widgets）是网站底部的内容区域，包含版权信息、统计数据和推荐内容。所有配置都在 src/theme.config.ts 中。

快速开始：最小配置

最简单的页脚配置只需要两个字段：

src/theme.config.ts

export default defineConfig({
  // ...
  footer: {
    since: 2025,           // 博客起始年份
  },
});

效果：页脚会显示”© 2025 - 2026 ❤️ 作者名 @ 网站名”

提示

所有 footer 和 widgets 配置都是可选的。如果不配置，会使用合理的默认值。

配置版权年份（since）

since 是你的博客开始运营的年份。

基础用法

src/theme.config.ts

export default defineConfig({
  footer: {
    since: 2020,  // 你的博客始于 2020 年
  },
});

页脚会显示：© 2020 - 2026 ...（假设当前是 2026 年）

如果今年才开始

如果你的博客是今年新建的，可以填当前年份：

src/theme.config.ts

export default defineConfig({
  footer: {
    since: 2026,
  },
});

页脚会简化显示为：© 2026 ...（不再显示年份范围）

配置版权图标（icon）

版权信息中间有一个装饰性图标（默认是粉色爱心）。你可以自定义它的样式和颜色。

默认效果

如果不配置，默认使用：

src/theme.config.ts

export default defineConfig({
  footer: {
    icon: {
      name: "sakura rotate",    // "sakura" 是樱花图标，"rotate" 是旋转动画
      color: "#ffc0cb",          // 粉红色
    },
  },
});

使用其他图标

你可以换成任何 emoji 或图标类名：

src/theme.config.ts

export default defineConfig({
  footer: {
    icon: {
      name: "i-ri-heart-fill",   // 使用 Remix Icon 的爱心图标
      color: "#ff6b6b",          // 红色爱心
    },
  },
});

常用图标推荐：

• "i-ri-heart-fill"：实心爱心
• "i-ri-star-fill"：星星
• "i-ri-fire-fill"：火焰
• 或者直接填 emoji："❤️"、"⭐"、"🔥"

开启统计信息（count）

count 控制是否在页脚显示站点统计数据（总字数、预计阅读时间）。

开启统计

src/theme.config.ts

export default defineConfig({
  footer: {
    count: true,  // 显示统计信息
  },
});

效果：页脚会显示类似”12,345 字 | 预计阅读 41 分钟”的统计信息。

关闭统计

src/theme.config.ts

export default defineConfig({
  footer: {
    count: false,  // 不显示统计信息
  },
});

注意

统计数据是自动计算的，包含所有已发布文章的字数总和。

是否显示”Powered by”（powered）

powered 控制是否在页脚显示”由 Astro 和 ShokaX 驱动”的声明。

显示（默认）

src/theme.config.ts

export default defineConfig({
  footer: {
    powered: true,  // 显示技术声明
  },
});

效果：页脚会显示”Powered by Astro and ShokaX”（带链接）。

隐藏

src/theme.config.ts

export default defineConfig({
  footer: {
    powered: false,  // 不显示技术声明
  },
});

推荐保留

如果你觉得这个主题不错，建议保留 powered: true，这有助于更多人发现 ShokaX 主题 ❤️

ICP 备案信息（仅中国大陆）

如果你的网站部署在中国大陆服务器，需要显示 ICP 备案号。

基础 ICP 备案

src/theme.config.ts

export default defineConfig({
  footer: {
    icp: {
      enable: true,                      // 启用 ICP 信息
      icpnumber: "津ICP备XXXXXXXX号",  // 你的备案号
    },
  },
});

效果：页脚会显示备案号，点击会跳转到工信部备案查询网站。

添加公安备案（可选）

如果你还有公安备案，可以加上：

src/theme.config.ts

export default defineConfig({
  footer: {
    icp: {
      enable: true,
      icpnumber: "津ICP备2022001375号",
      beian: "津公网安备 12345678901234号",  // 公安备案号
      recordcode: "12345678901234",         // 备案编号（纯数字）
      icon: "/beian-icon.png",              // 公安备案图标（可选）
    },
  },
});

国外用户

如果你的网站部署在海外（如 Vercel、Netlify），不需要配置 ICP 信息，设置 enable: false 或完全不配置此项即可。

小部件配置（widgets）

小部件区域位于页脚上方，可以显示随机文章推荐和最近评论。

开启随机文章推荐

src/theme.config.ts

export default defineConfig({
  widgets: {
    randomPosts: true,  // 显示 10 篇随机文章
  },
});

效果：页面底部会显示一个”随机文章”卡片，展示 10 篇随机推荐的文章。

开启最近评论

src/theme.config.ts

export default defineConfig({
  widgets: {
    recentComments: true,  // 显示最近评论
  },
});

需要评论系统

最近评论功能需要你配置评论系统（如 Waline、Twikoo）。如果未配置评论系统，此选项不会生效。

关闭所有小部件

src/theme.config.ts

export default defineConfig({
  widgets: {
    randomPosts: false,
    recentComments: false,
  },
});

配置项速查

footer 配置

字段	类型	默认值	说明
since	number	当前年份	博客起始年份。
icon.name	string	"sakura rotate"	版权图标名称（图标类名或 emoji）。
icon.color	string	"#ffc0cb"	版权图标颜色（CSS 颜色值）。
count	boolean	true	是否显示统计信息（字数、阅读时间）。
powered	boolean	true	是否显示技术声明。
icp.enable	boolean	false	是否显示 ICP 备案信息。
icp.icpnumber	string	-	ICP 备案号。
icp.beian	string	-	公安备案号（可选）。
icp.recordcode	string	-	公安备案编号（纯数字，可选）。
icp.icon	string	-	公安备案图标路径（可选）。

widgets 配置

字段	类型	默认值	说明
randomPosts	boolean	true	是否显示随机文章推荐。
recentComments	boolean	true	是否显示最近评论（需要评论系统）。

完整配置示例

一个典型的页脚配置：

src/theme.config.ts

export default defineConfig({
  siteName: "我的博客",
  // ... 其他配置

  footer: {
    since: 2020,
    icon: {
      name: "i-ri-heart-fill",
      color: "#ff6b6b",
    },
    count: true,
    powered: true,
    icp: {
      enable: false,  // 海外部署，不需要备案
    },
  },

  widgets: {
    randomPosts: true,
    recentComments: false,  // 暂未配置评论系统
  },
});

常见问题

Q: 统计的字数不准确？

统计字数包含所有已发布文章（draft: false 或未设置 draft）的正文内容，包括中文字符和英文单词。如果你觉得不准，检查是否有草稿文章未标记为 draft: true。

Q: 如何更换公安备案图标？

1. 从公安备案网站下载官方图标
2. 将图标文件放到 public/ 目录，如 public/beian-icon.png
3. 在配置中填写 icon: "/beian-icon.png"

Q: 可以完全隐藏页脚吗？

页脚是网站的重要组成部分，建议保留。如果确实需要隐藏，需要修改 src/layouts/Layout.astro，直接删除或注释掉 <Footer> 组件。