165 lines
9.9 KiB
Markdown
165 lines
9.9 KiB
Markdown
# todo list & recording
|
||
|
||
## 功能
|
||
1. 实现markdown预览页面切图功能，预览页面是以完成渲染的页面，生成一整张长图。再按文章顺序裁剪为图片(png格式)。(v1.3.1)
|
||
- 长图宽度为1080，可配置。切图图片横竖比例3:4，图片宽度保持与长图相同。
|
||
✅
|
||
- 横竖比例和图片宽像素可配置。
|
||
✅
|
||
- 标题取frontmatter的title属性。
|
||
✅
|
||
- 图片保存路径可配置，默认为/Users/gavin/note2any/images/xhs。
|
||
✅
|
||
- 图片名取frontmatter的slug属性，如: slug: mmm，文章长图命名为mmm.png，如切为3张图片，则切图图片名按顺序依次为mmm_1.png,mmm_2.png,mmm_3.png
|
||
✅
|
||
- 文章预览中增加“切图”按钮，点击执行预览文章的切图操作。
|
||
✅
|
||
|
||
2. 说明/修改/增加：
|
||
- 发布平台选"小红书"时，保留“刷新”，“发布到小红书”，去掉“切图”按钮，用"当前页切图"和"全部页切图"替代切图按钮和功能。
|
||
其他按钮及页面布局如下：
|
||
|
||
+------------------------------------------------------------+
|
||
| [刷新] [发布到小红书] | ← 顶部工具栏
|
||
| [模板选择▼] [主题选择▼] [字体选择 ▼] 字体大小[- +] | ← 顶部工具栏
|
||
+------------------------------------------------------------+
|
||
|
||
+------------------------------------------------------------+
|
||
| @Yeban 夜半 2025/10/8 | ← 作者信息行
|
||
| |
|
||
| 17日下午课程：《理想国》 | ← 标题
|
||
| |
|
||
| 财富是好的，美德是财富的结果。... | ← 正文（多行）
|
||
| |
|
||
| 欲望中解放出来，可以做很多事情... |
|
||
| |
|
||
| （正文继续，多段落） |
|
||
| |
|
||
+------------------------------------------------------------+
|
||
|
||
[ ← 2/7 → ] ← 分页导航
|
||
|
||
+------------------------------------------------------------+
|
||
| [⬇ 当前页切图] [⇓ 全部页切图] | ← 底部操作栏
|
||
+------------------------------------------------------------+
|
||
✅
|
||
|
||
效果参考附图。
|
||
✅
|
||
|
||
- 先对html分页，在预览中分页显示。
|
||
- 页面适配切图比例的设置。
|
||
- 确保表格和图片不跨页面显示。
|
||
- 点击"模版选择"，可以选择渲染的模版。点击"主题选择"，可以选择渲染的主题。点击"字体选择"，可以选择字体。
|
||
- 点击"+"所有字体加一号，点击"-"所有字体减一号。
|
||
- 点击"当前页切图"，把当前html页面转为png图片，图片保存路径和命名按此前设置。
|
||
- 点击"全部页切图"，把所有html页面转为png图片，图片保存路径和命名按此前设置。
|
||
✅
|
||
|
||
3. 目前xhs模式发布功能未实现，因为没有登录。
|
||
整合xhs登陆和发布功能。
|
||
- 在“用户配置”tab中增加“小红书用户名”配置项，默认13357108011。（⚠️ **后续可能需要维护多账号**）
|
||
- xhslogin项目，XHS_PHONE=13357108011 XHS_AUTO_CLOSE=1 npm run publish -- --title "恢复功能测试" --content "验证恢复核心功能后保留优化的代码" --images "/Users/gavin/myweb/static/img/ibook笔记.png" --visibility private --collection 自嗨 --timestamp
|
||
其中:
|
||
- 参数XHS_PHONE为“小红书用户名”配置项。
|
||
- title取markdown文章的title
|
||
- content取markdown文章frontmatter中的description信息，如果没有description或内容为空，取markdown正文前2段（段以空行隔离，不超过300字[n]；段1+段2>n，取段1；段1+段2+段3>n，取段1段2 ……）
|
||
- images取小红书切图结果，按文章次序。
|
||
- visibility在小红书模式下，预览页的工具栏中增加"公开"checkbox，默认为不选，即private。
|
||
- collection在小红书模式下，预览页的工具栏中增加下拉框选择，下拉框内容从登录小红书自动获取。
|
||
- timestamp是调试使用，默认使用
|
||
|
||
❓ 重构后无法运行，原因是obsidian中playwright环境没有。
|
||
❌ 要用xhslogin 的 Playwright 逻辑，就必须把 Playwright 当成外部依赖加载（运行前安装 playwright 和浏览器内核）。 如果一定要彻底摆脱 Playwright，只能回到 webview 方案，重新实现一次自动化流程，与其说“利用现成 Chromium”，不如说“自己写网页自动化框架”，工作量很大。
|
||
|
||
**改变思路**：
|
||
xhslogin改造成MCP server部署在远端服务器上。插件中只要实现mcp client就可以了。
|
||
这样xhslogin项目没有必要整合到note2any中。
|
||
|
||
4. 选中内容，右键发布到不同平台。发布时调用渲染，发布到特定的栏目中，比如网站中某个区块的“闪念集”。
|
||
|
||
## 问题
|
||
1. "发布平台"首次选“小红书”时，预览页面没有加载当前文章。
|
||
✅
|
||
|
||
2. 顶部按钮适应窗口宽度，超出窗口，折行显示。
|
||
✅
|
||
|
||
3. 小红书模式问题：
|
||
- html分页预览不是从顶部开始显示，显示不完整。
|
||
- 预览窗口似乎只显示了一部分？上面部分被挡住了吗？
|
||
- 参考微信公众号模式下的预览窗口，不同点在于小红书模式下，每页的宽高比按配置要求。
|
||
✅
|
||
|
||
4. 修改：
|
||
- 公共部分独立出来，如“发布平台”，放在新建platform-choose.ts中，“发布平台”选择切换平台逻辑放在该模块中，便于以后其他平台扩展。
|
||
- 其他所有组件独立。node-preview.ts改为mp-preview.ts, 专门用于处理微信公众号模式下的页面和逻辑处理；preview-view.ts改为xhs-preview.ts，专门用于小红书模式下的页面和逻辑处理。
|
||
|
||
效果不理想。❌，需求修改如下：
|
||
|
||
目前mp-preview.ts中既实现微信公众号（micro-public，mp）的处理逻辑，又实现小红书（xiaohongshu，xhs）的处理逻辑，模块不清晰。优化：
|
||
- 平台选择是公共部分，组件及逻辑放在新建的platform-choose.ts中，platform-choose.ts的“发布平台”选择切换平台。
|
||
公共部分独立，便于以后其他模式的扩展。
|
||
- mp-preview.ts改为wechat-preview.ts，专注处理微信公众号页面和逻辑处理。
|
||
- preview-view.ts改为xhs-preview.ts，专门用于小红书模式下的页面和逻辑处理。
|
||
- platform-choose.ts平台选择后，依据选择模式，调用wechat-preview.ts(微信公众号)或xhs-preview.ts(小红书)中的方法进行组件、页面渲染和逻辑处理。
|
||
- wechat-preview.ts中保留微信公众号模式(micro-public,mp)相关的处理逻辑，小红书处理逻辑移到xhs-preview.ts中。
|
||
|
||
|
||
✅
|
||
|
||
5. 按4重构后。obsidian一直处于“加载工作区中”。在“安全模式”下打开obsidian，再在设置下关闭安全模式，插件能正常加载，但右上角弹出提示“获取样式失败defaultldefault，请检查主题是否正确安装。”
|
||
|
||
修复后，重启obsidian还是一直处于“加载工作区中”。但从安全模式进入，在关闭安全模式，插件正常加载，且没有错误提示。
|
||
|
||
SOLVE：obsidian控制台打印信息，定位在哪里阻塞，AI修复。
|
||
✅
|
||
|
||
6. 把代码逻辑中的所有css移到styles.css中。
|
||
✅
|
||
|
||
7. 小红书模式，页面渲染使用选择的主题。参考微信公众号模式进行渲染。
|
||
✅
|
||
|
||
8. 需求：小红书模式下，html渲染后按照previewWidth × previewHeight 的预览窗口尺寸切割，内容不能丢失。
|
||
主题、字体、字大小变化时，需要进行重新分页，保持内容不丢失。
|
||
去掉主题设置，使用全局主题设置。(❗️先简化，后续小红书和微信公众号应主题应该需要独立开。）
|
||
去掉字体设置，使用主题字体。
|
||
字体大小支持直接编辑。
|
||
问题：
|
||
- 字变大时，一页的内容放不下，重新分页应该会增加页数。但现在重新分页当前页放不下的内容只是被剪掉了。
|
||
- 表格显示不完整。
|
||
✅
|
||
|
||
9. styles.css中有很多冗余。改为grid布局。部分完成，这部分需要后面**手动调整**重构。🧶 ♻️ ❇️
|
||
问题：小红书预览布局有问题❓
|
||
|
||
小红书布局改为grid，但平台选择器部分没有完成修改。
|
||
保持微信和小红书页面一致性，都用grid重构，复用css样式代码。
|
||
|
||
10. 新建docs文件夹，把除了README和todolist以外的markdown文件放到docs中。
|
||
✅
|
||
|
||
11. `` -- 不应该渲染为图片链接
|
||
|
||
|
||
## 经验
|
||
1. 在不确定AI是否理解，或者需求是否准确的情况下，先用codex chat模式提问，看回答确定AI理解是否准确。
|
||
尤其对于较大规模的重构需求，这点很重要 ‼️ 。
|
||
|
||
例如：
|
||
这个思路有问题。我提供命令行只是对参数做说明，这些参数实际上是函数参数。
|
||
我需要把xhslogin的功能代码无缝的整合进现有项目中，而不是通过命令行传参的方式实现。
|
||
这么做的同时，保持结构和模块清晰。
|
||
请再提供思路，我来审核下。
|
||
|
||
2. 复杂页面，codex生成的css可能无比复杂，不便于维护修改。
|
||
自己写布局demo原型，让codex参考布局修改(原来元素美化的css可保留)。
|
||
demo原型可以手绘后，拍照让chatgpt生成，在此基础上自己修改。
|
||
|
||
## 思路
|
||
1. 网上图片模版，让AI快速生成css themes主题。快速套用。‼️
|
||
**样式和功能必须结构，样式必须可以0基础，快速选择，让用户可以选择足够多样式(AI生成)。**
|
||
|
||
|