166 lines
7.8 KiB
Markdown
166 lines
7.8 KiB
Markdown
# 项目
|
||
|
||
开启plan模式，在工作区下建一个新文件夹：claw-cases-web，构建一个【苹果官网风格】的中英文双语网站，名称是：【龙虾应用案例，英文是：OpenClaw Use Cases】，汇总展示 OpenClaw 真实应用案例，按 6 大类别组织，支持卡片展开/收起交互，每个案例有独立详情页。
|
||
案例数据来源：https://github.com/hesamsheikh/awesome-openclaw-usecases
|
||
|
||
## 要求
|
||
|
||
- 纯静态网站（HTML + CSS + JS）
|
||
- 中英双语支持（中文为主，英文为辅）
|
||
- 响应式设计（桌面 4 列 / 平板 2 列 / 手机 1 列）
|
||
- 案例详情页从 GitHub 拉取 markdown 内容，预翻译为中文
|
||
- 部署到 Vercel
|
||
|
||
## 案例分为6大类别
|
||
|
||
1. 社交媒体（Social Media）
|
||
2. 创意与构建（Creative & Building）
|
||
3. 基础设施与 DevOps（Infrastructure & DevOps）
|
||
4. 生产力工具（Productivity）
|
||
5. 研究与学习（Research & Learning）
|
||
6. 金融与交易（Finance & Trading）
|
||
|
||
## 每个案例包含
|
||
|
||
- 中英文名称
|
||
- 中英文功能说明、所需技能、使用方法等
|
||
- GitHub 详情页链接
|
||
|
||
## 确认的部分
|
||
|
||
我需要确认的部分：
|
||
1. 界面效果，可以在界面输出后，给我HTML，我确认下界面的效果风格
|
||
2. 部署到Vercel时，我有Vercel账号，但是我需要提供什么给你自动部署，这部分需要你在程序开发完毕部署时和我确认
|
||
|
||
其余，基本上都不需要确认直接执行。
|
||
|
||
---
|
||
|
||
这个Index页面，风格没问题。但是自适应有些问题，当用手机打开的时候：
|
||
1. 分类部分（div class="category-container"部分）有横向滚动条。
|
||
2. 切换到英文的时候，分类部分的内容依然是汉字
|
||
3. 切换到英文后，点击具体的分类，下面的内容变成了空白
|
||
|
||
所以如果后续才处理页面的bug，那可以继续。风格没问题了。
|
||
如果index页面作为后续的指引，需要修复我发现的bug。
|
||
|
||
---
|
||
|
||
关于`手机横向滚动条`，现在没有滚动条了，但是浏览起来不方便，需要手指滑动，但是没有滚动条，一般人又不知道这里可以拖动。
|
||
能否考虑不把这个放到页面中部，而是放在顶部，类似于栏目的概念；手机版时，增加一个顶部右上角的菜单，用户点击时浮动一个菜单层，点击对应的菜单切换。
|
||
|
||
---
|
||
|
||
现在手机版的菜单处理没问题，但是丢掉了中英文切换和黑白版式切换。
|
||
操作上，去掉`查看详情`，当用户点击卡片时自动进入详情页。
|
||
|
||
详情页内容不够丰富，丢失了很多元素，目前只有功能介绍、所需技能、使用方法。
|
||
而原介绍的MD内容很多遗失了。这一部分，我觉得应该将MD翻译成中文展示出来。
|
||
|
||
所以这部分我觉得变成了两个工作，一个是详情页展示，将Md生成HTMl或者直接展示md，转换功能不需要单独造轮子可以用现成的工具。
|
||
另一部分是中文的内容生成，单独启动一个子工序，专门生成每一个汉化的md。
|
||
最终展示详细的中文详情页。
|
||
|
||
这样index页面上的`在Github查看`也不需要了。
|
||
这样调整后，去掉`了解更多`的折叠，默认的所需技能、使用方法也展示出来。
|
||
|
||
这样，你先调整index和一个详情页，作为样例，我看下效果。
|
||
|
||
---
|
||
|
||
其他没问题，`daily-reddit-digest`的详情有问题。
|
||
|
||
比如，`所需技能`部分
|
||
原md是有链接的，现在丢失了。
|
||
|
||
`使用方法`部分
|
||
|
||
有一部分提示词，现在也没有。
|
||
```
|
||
I want you to give me the top performing posts from the following subreddits.
|
||
<paste the list here>
|
||
Create a separate memory for the reddit processes, about the type of posts I like to see and every day ask me if I liked the list you provided. Save my preference as rules in the memory to use for a better digest curation. (e.g. do not include memes.)
|
||
Every day at 5pm, run this process and give me the digest.
|
||
```
|
||
|
||
提示词部分，我觉得可以不翻译。即md中引用的部分。
|
||
|
||
---
|
||
|
||
我在页面上没有看到任何变化，即使我清除了浏览器的缓存。
|
||
请检查一下代码。
|
||
|
||
而且这种把翻译放到js里的方式太不合理了。
|
||
我觉得应该创建一个cn文件夹，里面放一个翻译后的daily-reddit-digest.md，这样我起码能检查翻译的问题。
|
||
|
||
---
|
||
|
||
你说`CDN 可能被阻止了`
|
||
我在本地启动了一个Nginx，位置在C:\Tools\nginx-1.28.2，同时做好了配置为本次使用，这样访问localhost就可以。做好了测试后，我又把Nginx停掉了。
|
||
你是否可以操作Nginx？若可以的话，能否把本地的Nginx作为你的一个技能还是资源记录到全局中，这样我们后续开发都能使用。
|
||
如果不行，我可以自己操作，当Nginx配置更改时，自己重启。
|
||
|
||
---
|
||
|
||
`daily-reddit-digest`详情页的内容上基本都差不多了，在`安装技能后，请这样告诉 OpenClaw：`这句话后面的引用内容上，能否加一个复制按钮以便用户方便复制到剪贴板上。
|
||
|
||
---
|
||
|
||
关于nginx，你操作不了，我就不记录了。
|
||
|
||
详情页的样式`<nav class="detail-nav">`这部分中间有一块凸起的灰色，感觉像footer的突起，不好看，这部分样式需要调整，不行就和内容部分保持一致。或者你有其他建议。
|
||
|
||
现在我们需要完成所有的详情页——即翻译工作。
|
||
|
||
完成后通知我。
|
||
|
||
---
|
||
|
||
我大概看了几个。
|
||
* `daily-youtube-digest`
|
||
* `!youtube-full 技能安装`这个应该是引用中增加了链接，从而导致显示问题
|
||
* 表格显示不对，`为什么选择 TranscriptAPI.com 而不是 yt-dlp？`这下面的内容。
|
||
|
||
我的想法：
|
||
1. 能否使用现成的Markdown转HTMl的第三方包，不要自己造轮子。
|
||
2. 由于翻译非常生硬，能否考虑在详情页底部增加一个英文部分。
|
||
* 或者将之前中英文对照功能恢复回来，增加一个en部分放置英文的原文档。
|
||
|
||
---
|
||
|
||
我看到了，MD转换问题解决了，但是英文部分，你好像还没有建立文件夹，下载相应的英文文档。
|
||
|
||
---
|
||
|
||
这是一个token， vcp_44v5su6LwURpCSgXdNX3uh7NmDTUO5kA6NI9YMSUXTwHF57NsP1ZfXe6
|
||
|
||
你按照方式一部署。
|
||
|
||
---
|
||
|
||
当我使用微信分享时，分享的卡片上只有标题，没有内容介绍
|
||
|
||
下面是我之前做的网站页面，增加了很多`meta`
|
||
```
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
|
||
<link rel="shortcut icon" href="./static/favicon.ico" type="image/x-icon">
|
||
<meta property="og:site_name" content="Wantsong 认知破局手册">
|
||
<meta property="og:image" content="https://imgs.wantsong.life/QmioIHRBM6.jpg">
|
||
<meta property="twitter:image" content="https://imgs.wantsong.life/QmioIHRBM6.jpg">
|
||
<meta name="title" content="Wantsong 认知破局手册">
|
||
<meta property="og:title" content="Wantsong 认知破局手册">
|
||
<meta property="twitter:title" content="Wantsong 认知破局手册">
|
||
<meta name="description" content="Wantsong 认知破局手册是一份帮助你打破认知局限、提升思维能力的指南。">
|
||
<meta property="og:description" content="Wantsong 认知破局手册是一份帮助你打破认知局限、提升思维能力的指南。">
|
||
<meta property="twitter:description" content="Wantsong 认知破局手册是一份帮助你打破认知局限、提升思维能力的指南。">
|
||
<meta property="og:url" content="https://knowing-doing-unity.wantsong.life/">
|
||
<meta property="twitter:card" content="summary">
|
||
<meta name="keyword" content="Wantsong 认知破局手册, 认知破局, 思维能力, 认知升级, 学习方法, 心智模型, 认知工具, 认知训练, 认知资源, 认知社区">
|
||
|
||
```
|
||
|
||
需要你参考这些meta，在index页面上增加相应的描述。
|
||
描述结构参考上面的引用内容，描述内容根据我们这次做的内容来提取。
|
||
|