集成朋友圈与笔记本功能
本文是在博主 团子和蛋糕 文章:用 GitHub Gist 做博客后端:零成本的说说与笔记方案 基础上增加了自己实践过程的一些细节,转载无需和我联系,但请注明文章来源。如果侵权之处,请联系博主进行删除,谢谢~
目录结构
以下是朋友圈和笔记本功能相关的核心目录结构:
Firefly-hyde/├── astro.config.mjs # 修改 - 添加路径别名│├── src/│ ├── components/│ │ └── moments/ # 新增目录│ │ ├── MomentCard.astro # 新增 - 朋友圈卡片组件│ │ └── MomentsCover.astro # 新增 - 朋友圈封面组件│ ││ ├── config/│ │ ├── externalMomentsConfig.ts # 新增 - 朋友圈配置│ │ ├── externalNotebooksConfig.ts # 新增 - 笔记本配置│ │ ├── navBarConfig.ts # 修改 - 添加导航链接│ │ └── siteConfig.ts # 修改 - 添加封面配置│ ││ ├── content/│ │ ├── config.ts # 修改 - 添加moments集合│ │ └── moments/ # 新增目录│ │ └── *.md # 新增 - 本地朋友圈内容文件│ ││ ├── data/│ │ └── moments.ts # 新增 - 获取远程朋友圈数据脚本│ ││ ├── pages/│ │ ├── admin/ # 新增目录│ │ │ ├── index.astro # 新增 - 登录页│ │ │ ├── moments.astro # 新增 - 朋友圈管理│ │ │ └── notebooks.astro # 新增 - 笔记本管理│ │ ├── life/notebooks/│ │ │ └── remote-entry.astro # 新增 - 远程笔记页│ │ ├── moments.astro # 新增 - 朋友圈主页│ │ └── moments/│ │ └── pinned.astro # 新增 - 精选朋友圈│ ││ ├── types/│ │ └── siteConfig.ts # 修改 - 添加momentsCover类型│ ││ └── utils/│ ├── content-utils.ts # 修改 - 添加数据获取│ └── gist-api.ts # 新增 - Gist API工具└──新增朋友圈/封面卡片组件
文件路径:src/components/moments/MomentCard.astro和src/components/moments/MomentsCover.astro
完整代码:MomentCard.astro
完整代码:MomentsCover.astro
创建 Gist API 工具文件
文件路径: src/utils/gist-api.ts
完整代码: gist-api.ts
创建朋友圈配置
文件路径: src/config/externalMomentsConfig.ts
// 外部朋友圈数据源配置(基于 GitHub Gist,完全免费)// 数据存储在 GitHub Gist 中,通过 GitHub API 读写
export const externalMomentsConfig = { // 是否启用外部朋友圈数据源 enable: true,
// GitHub Gist ID(创建 Gist 后从 URL 中获取) // 替换为你的 Gist ID。https://gist.github.com/Seasir-Hyde/xxxx,其中 xxxx 即为 Gist ID gistId: "替换为你的 Gist ID",
// Gist 中的文件名 fileName: "moments.json",
// 默认作者信息 defaultAuthor: "Hyde", defaultAvatar: "https://你的头像URL.jpg",
// 后台登录密码的 SHA-256 哈希 // 生成方式:在线工具:https://www.strongpasswordgenerator.org/zh-cn/sha256-hash-generator/ adminPasswordHash: "b5d9ded2ab2812e8653f06fc4d3246a4b13642e8371bc74a7f1003eb4fb4e637",
// GitHub Token(优先从环境变量 GITHUB_TOKEN 读取) githubToken: process.env.GITHUB_TOKEN || "",};创建笔记本配置
文件路径: src/config/externalNotebooksConfig.ts
// 外部笔记数据源配置(基于 GitHub Gist)// 每个笔记本有独立的 Gist 仓库
export const externalNotebooksConfig = { // 是否启用外部笔记数据源 enable: true,
// 每个笔记本对应的 Gist ID // 在 https://gist.github.com 创建 Secret Gist,文件名 notebooks-entries.json,内容 [] notebookGists: { "每日总结": "your-gist-id-here", "日记": "your-gist-id-here", "日常琐记": "your-gist-id-here", "学习笔记": "your-gist-id-here", } as Record<string, string>,
// 笔记模板(Admin 页面快速选择) // {name} 会被替换为今天的日期 templates: [ { id: "daily", icon: "📝", name: "每日总结", title: "{name} 每日总结", content: "📍今天做了什么:\n📅今日感想:\n🔮明日计划:", }, { id: "diary", icon: "📔", name: "日记", title: "{name}", content: "## 天气\n\n## 今天发生了什么\n\n## 心情\n\n", }, { id: "reading", icon: "📚", name: "读书笔记", title: "", content: "## 📚 书籍信息\n\n- 书名:\n- 作者:\n\n## 核心观点\n\n## 我的感想\n\n", }, { id: "free", icon: "📄", name: "空白", title: "", content: "", }, ] as Array<{ id: string; icon: string; name: string; title: string; content: string; }>,
// 后台登录密码的 SHA-256 哈希(与朋友圈后台共用同一密码) adminPasswordHash: "b5d9ded2ab2812e8653f06fc4d3246a4b13642e8371bc74a7f1003eb4fb4e637",
// GitHub Token githubToken: process.env.GITHUB_TOKEN || "",};修改站点配置
文件路径: src/config/siteConfig.ts
操作: 添加朋友圈封面配置
插入位置: 在 defaultAvatar 配置之后
添加代码:
// 朋友圈页面封面配置(微信朋友圈风格)momentsCover: { enable: true, image: "https://你的封面图片URL.jpg",},修改类型定义
文件路径: src/types/siteConfig.ts
// 朋友圈页面封面配置momentsCover: { enable: boolean; image?: string;},修改导航栏配置
文件路径: src/config/navBarConfig.ts
修改1 - 添加朋友圈链接:
在导航链接列表中添加:
LinkPresets.Moments,修改2 - 定义链接预设:
在 LinkPresets 对象中添加:
Moments: { name: "朋友圈", url: "/moments/", icon: "mdi:wechat",},修改3 - 添加登录链接:
文件路径:src/components/layout/Navbar.astro
<LightDarkSwitch client:load></LightDarkSwitch> <a aria-label="Admin" href="/admin/" class="btn-plain scale-animation rounded-lg h-11 w-11 active:scale-90"> <Icon is:inline name="material-symbols:account-circle" class="text-[1.25rem]"></Icon> </a>修改内容配置
文件路径: src/content.config.ts
// 朋友圈集合const momentsCollection = defineCollection({ loader: glob({ pattern: "**/*.{md,mdx}", base: "./src/content/moments" }), schema: ({ image }) => z.object({ author: z.string().optional().default(""), avatar: z.string().optional().default(""), pinned: z.boolean().optional().default(false), published: z.date(), images: z .array(image().or(z.string())) .or(z.string()) .optional() .default([]), tags: z.array(z.string()).optional().default([]), location: z.string().optional().default(""), device: z.string().optional().default(""), }),});
// 导出朋友圈集合export const collections = { posts: postsCollection, spec: specCollection, ziyuan: ziyuanCollection, moments: momentsCollection, // 朋友圈集合};创建朋友圈数据获取脚本
文件路径: src/data/moments.ts
此脚本从布局文件抽离,便于维护。负责从 GitHub Gist 加载朋友圈数据并动态插入页面。
完整代码: moments.ts
创建精选朋友圈页面
文件路径: src/pages/moments/pinned.astro
完整代码: pinned.astro
Admin 管理后台
创建登录页
文件路径: src/pages/admin/index.astro
核心功能: SHA-256 密码验证,登录成功后存储 token 到 localStorage
完整代码: index.astro
创建朋友圈管理页
文件路径: src/pages/admin/moments.astro
核心功能:
- 从 Gist 读取朋友圈数据
- 新增/编辑/删除朋友圈
- 支持图片上传(转为 base64)
- 支持置顶、标签、位置
完整代码: moments.astro
创建笔记本管理页
文件路径: src/pages/admin/notebooks.astro
核心功能:
- 多笔记本支持
- 笔记模板选择
- Markdown 编辑
- 时间线展示
完整代码: notebooks.astro
环境变量配置
文件路径: .env
# GitHub Token(用于 Gist API 认证)# 获取方式:https://github.com/settings/tokens# 需要 gist 权限GITHUB_TOKEN=your_github_token_here路径别名配置
修改 Astro 配置
文件路径: astro.config.mjs
import { defineConfig } from 'astro/config';
export default defineConfig({ vite: { resolve: { alias: { "@": "./src", "@components": "./src/components", "@layouts": "./src/layouts", "@config": "./src/config", "@utils": "./src/utils", "@data": "./src/data", }, }, },});文件清单
| 文件路径 | 操作 | 说明 |
|---|---|---|
src/utils/gist-api.ts | 新建 | Gist API 工具函数 |
src/config/externalMomentsConfig.ts | 新建 | 朋友圈配置 |
src/config/externalNotebooksConfig.ts | 新建 | 笔记本配置 |
src/config/siteConfig.ts | 修改 | 添加封面配置 |
src/config/navBarConfig.ts | 修改 | 添加导航链接 |
src/types/siteConfig.ts | 修改 | 添加类型定义 |
src/content.config.ts | 修改 | 添加 moments 集合 |
src/data/moments.ts | 新建 | 朋友圈数据获取脚本 |
src/utils/content-utils.ts | 修改 | 添加数据获取 |
src/components/moments/MomentCard.astro | 新建 | 朋友圈卡片组件 |
src/components/moments/MomentsCover.astro | 新建 | 朋友圈封面组件 |
src/pages/moments.astro | 新建 | 朋友圈主页 |
src/pages/moments/pinned.astro | 新建 | 精选朋友圈 |
src/pages/admin/index.astro | 新建 | 登录页 |
src/pages/admin/moments.astro | 新建 | 朋友圈管理 |
src/pages/admin/notebooks.astro | 新建 | 笔记本管理 |
src/pages/life/notebooks/remote-entry.astro | 新建 | 远程笔记页 |
.env | 新建 | 环境变量配置 |
astro.config.mjs | 修改 | 添加路径别名 |
支持与分享
如果这篇文章对你有帮助,欢迎分享给更多人或打赏支持!