cover

走马

陈粒

集成朋友圈与笔记本功能

1666 字
8 分钟
集成朋友圈与笔记本功能
AI 摘要

提示

本文是在博主 团子和蛋糕 文章:用 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修改添加路径别名

支持与分享

如果这篇文章对你有帮助,欢迎分享给更多人或打赏支持!

打赏
集成朋友圈与笔记本功能
https://seasir.top/blog/moments/
作者
Hyde
发布于
2026-06-21
许可协议
CC BY-NC-SA 4.0
相关文章 智能推荐
1
实现今日一言功能
Firefly 基于 Astro 框架搭建了今日一言小组件,配置数据源、开发页面组件并完成全局注册与布局设置,组件会按日期每日展示不同名言,全端样式与交互效果均已适配完成。
2
隐藏封面图
Firefly 最近在折腾博客的封面图显示逻辑,加了个「隐藏封面图」的开关功能——从类型定义、配置项、工具函数到 UI 控件和样式,一步步把整个流程补全了。代码分散在多个文件里,但核心就一件事:让用户能一键收起或展开文章封面,既保持页面简洁,又不丢失视觉层次。顺手还做了多语言支持,中文、英文切换也一起配上了。
3
归档统计
Firefly 最近在折腾博客的归档统计功能,从获取归档列表开始,一路写到更新内容的工具函数、类型定义,再到多语言配置的拆分与管理——每一处改动都为了让归档页更清晰、更易维护,也顺便理清了自己代码里的逻辑脉络。
4
给博客增加单个和全部分类页面
Firefly 最近给博客加了个小功能:点击分类名就能跳转到该分类下的所有文章,还能一键查看全部分类列表——整个过程其实挺顺的,从创建页面、写 URL 工具函数,到更新导航栏和多语言支持,一步步配下来,连分类链接都自动带上了本地化路径,现在逛自己博客像逛图书馆一样清爽 😄
5
恋爱计时组件
Firefly 最近给博客加了个小彩蛋——「恋爱计时组件」,从零撸了一个记录纪念日的小工具。写了组件代码、配了全局注册、还兼顾了桌面端侧边栏和移动端的显示逻辑,连 TypeScript 类型定义和双方昵称/日期的配置项都琢磨得挺细。虽然只是个轻量小功能,但每次看到倒计时跳动,心里都悄悄甜一下 😊
随机文章 随机推荐

评论区

Profile Image of the Author
Hyde
Hello, I'm Hyde.
📢 欢迎来访者
👋🏻 Hi,我是Hyde,欢迎您!
分类
标签
站点统计
文章
11
分类
2
标签
5
总字数
4,867
运行时长
0
最后活动
0 天前
站点信息
构建平台
EdgeOne
博客版本
Firefly v6.12.3
文章许可
CC BY-NC-SA 4.0
音乐
封面

音乐

暂未播放

0:00 0:00
暂无歌词
我和宝宝在一起已经
---------TSH ❤️ CXY---------
---------TSH
❤️
CXY---------
0 0 0 0 0 00
✨ 今日一言
" 成功的秘诀在于对目标的执着追求。 "
—— 本杰明·迪斯雷利
天气预报
统计

文章目录

✨️ 复制成功,转载请标注本文地址