关联主题:: 本博客搭建指南Obsidian+Quartz+Cloudflare
同级:: 2025-08-16_星期六
下一级::
2025.08.16-最近更新功能：
最近更新功能
好的！我来为你总结一下这次对话中实现的所有功能和修改内容，方便你归档到博客更新日志中。
📝 功能实现总结
🎯 主要目标
在Quartz博客的
content根目录下创建一个”最近更新”页面，自动展示最近更新的文章列表，并优化显示布局。✨ 实现的功能
1. 创建”最近更新”页面
- 文件位置:
content/最近更新.md- 功能: 展示最近更新的文章列表，按更新时间自动排序
- 内容:
--- title: "最近更新" description: "展示最近更新的文章列表" --- # 最近更新 这里展示了最近更新的文章列表，按更新时间排序。 > 💡 **提示**: 这个页面会自动显示最近更新的文章。文章会按照修改时间自动排序，最新的文章会显示在最前面。2. 集成RecentNotes组件
- 修改位置:
quartz.layout.ts-defaultContentPageLayout.beforeBody- 功能: 在”最近更新”页面自动显示最近的文章列表
- 代码:
Component.ConditionalRender({ component: Component.RecentNotes({ title: "最近更新", limit: 50, showTags: true }), condition: (page) => page.fileData.slug === "最近更新", }),3. 优化显示布局（一行显示）
- 修改位置:
quartz/components/styles/recentNotes.scss- 功能: 将笔记标题、标签、日期从垂直三行布局改为水平一行布局
- 主要修改:
.section { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; > .desc { flex: 1; min-width: 200px; } > .meta { white-space: nowrap; } > .tags { display: flex; gap: 0.5rem; flex-wrap: wrap; } }🔧 技术细节
RecentNotes组件配置参数
title: "最近更新"- 自定义标题limit: 50- 显示最近50条笔记showTags: true- 显示标签condition: (page) => page.fileData.slug === "最近更新"- 只在”最近更新”页面显示样式优化特点
- 响应式布局: 使用flexbox实现水平排列
- 标签美化: 标签显示为彩色小标签，支持悬停效果
- 空间优化: 标题占据主要空间，日期和标签紧凑显示
- 换行处理: 在小屏幕上自动换行，保持良好的可读性
涉及的文件列表
- 新增文件:
content/最近更新.md- 最近更新页面- 修改文件:
quartz.layout.ts- 添加RecentNotes组件配置quartz/components/styles/recentNotes.scss- 优化显示布局样式最终效果
- 页面访问: 访问
/最近更新路径- 显示内容: 自动展示最近50条更新的笔记
- 布局效果: 笔记标题、标签、日期在一行内水平排列
- 排序方式: 按修改时间自动排序，最新更新的显示在最前面
- 标签支持: 每个笔记显示相关标签，点击可跳转到标签页面
使用说明
- 页面会自动检测所有markdown文件
- 按文件修改时间排序显示
- 支持标签显示和跳转
- 响应式设计，适配不同屏幕尺寸
- 无需手动维护，内容自动更新
这次实现充分利用了Quartz的内置组件，通过最小化的代码修改实现了功能需求，保持了系统的稳定性和可维护性。
2025.08.16-图片居中
图片居中
配置更新日志 - 图片宽度限制功能
修改概述
实现了正文图片宽度限制为80%，同时排除封面图片的功能，确保封面图片保持100%宽度。
修改的文件
1.
quartz/styles/base.scss
- 第631-636行: 修改了基础图片样式
- 将
max-width: 100%改为max-width: 80%- 添加了封面图片排除规则，确保封面图片保持100%宽度
2.
quartz/styles/custom.scss
- 第58-78行: 添加了封面图片的专门样式规则
- 封面图片样式：使用
!important确保封面图片保持100%宽度- 正文图片居中：非封面图片自动居中显示
功能特性
正文图片
- 宽度限制：80%
- 自动居中显示
- 保持原有的圆角和边距样式
封面图片识别方式
通过alt属性关键词：
cover/封面hero/banner/header通过CSS类名：
.cover img/.hero img/.banner img/.header img使用方法
- 正文图片: 直接插入即可，自动应用80%宽度限制
- 封面图片: 在图片alt属性中添加关键词（如”cover”、“封面”等），或使用相应的CSS类名
技术实现
- 使用CSS选择器优先级管理
- 通过
!important确保封面图片样式不被覆盖- 响应式设计，适配不同屏幕尺寸
生效时间
修改完成后需要重新构建项目以应用样式更改。
2025.08.17-RSS订阅功能
RSS订阅功能
📝 更新日志 - RSS订阅功能
🎯 功能概述
为Quartz博客添加了完整的RSS订阅功能，用户可以通过RSS阅读器订阅最新内容更新。
�� 修改的文件
1.
quartz/components/Footer.tsx
- 在底部导航栏添加了RSS订阅图标和链接
- 使用标准RSS图标SVG，链接到
/index.xml2.
quartz/components/styles/footer.scss
- 为RSS链接添加了美观的样式
- 包含悬停效果和图标对齐样式
3.
quartz.config.ts
- 修改了
CreatedModifiedDate插件的优先级：["git", "frontmatter", "filesystem"]- 优化了RSS配置：
rssLimit: 20,includeEmptyFiles: false4.
RSS_README.md(新增文件)
- 创建了详细的RSS功能使用说明文档
✨ 生成的功能
RSS订阅系统
- 自动生成RSS文件 (
/index.xml)- 按最近修改日期排序（非创建日期）
- 包含最新20篇文章
- 支持中文界面
底部RSS图标
- 美观的RSS订阅图标
- 悬停效果和交互体验
- 直接链接到RSS文件
智能日期排序
- 优先使用git提交历史中的修改日期
- 确保RSS按最新更新时间排序
- 支持多种日期来源的降级策略
�� 技术特性
- 完全自动化的RSS生成
- 与现有Quartz架构完美集成
- 响应式设计和主题适配
- SEO友好的RSS发现机制
📱 用户体验
用户可以通过以下方式订阅：
- 在网站底部找到RSS图标
- 点击图标或复制链接地址
- 在RSS阅读器中添加订阅地址:
https://www.brmys.top/index.xml�� 部署说明
- RSS功能已自动启用，无需额外配置
- 每次构建网站时会自动更新RSS文件
- 支持所有主流RSS阅读器
2025.08.17-最近更新和RSS排序
Obsidian增加一个字段updated，使用该字段作为最近更新和RSS内容的排序。
有一款Obsidian插件可以自动对文档的属性添加update「Update time on edit」体验一般，我卸载了。
2025-08-19_星期二
1、添加左下角底部标识
2、增加左侧菜单栏鼠标悬浮气泡
参考博客：AboutTheGarden
Github仓库代码：oldwinter/knowledge-garden: 我的第二大脑 second brain，我的数字花园 digital garden，用obsidian双链笔记软件写作而成
3、标题底下增加一个横杠
2025-08-20_星期三
1、优化callout配色
2、网站url升级🔥
Obsidian字段增加slug，如果存在slug则以slug为主，访问文章标题也会重定向到slug路径，如果slug为空则默认路径为文章标题。
3、图片缩放
[备注|数字](链接)
如果数字不存在，则默认所有图片限宽80%，如果数字存在，则按照数字的值缩小图片。
4、新增Waline评论区
2025-08-22_星期五
增加复选框样式test-alignment
2025-08-26_星期二
优化关系图谱，参考项目：oleeskild/obsidian-digital-garden
几点优化：
- 增加了Depth共三级；
- 突出显示当前笔记的节点，以黄色显示；
- 显示节点与节点之间的箭头关系；