介绍
起因
最近无聊，写了个小玩意，感觉挺不错的，说说为什么想写个这个吧，最开始的时候用哪个memos，但是那个要部署在服务器上面，就很~没办法，我没有钱买服务器，或者说不想花钱买，后面就一直在找其他的项目，看看有没平替，不得不说，确实让我找到几个，但是吧，那个ui和操作，以及访问速度，真的有点感人，说的是这个memos-cloudflare,该说不说，作者很厉害，数据库，储存全都白嫖cloudflare，但是正因为需要数据库和R2这些，就注定离不开cloudflare，但是吧，这玩意在国内的速度就很迷会，时快时慢的，大多数时候打开就得加载半天，属于是很难受了，之后看到的项目基本都大同小异。
想法
这时候就不得不提AI-雪的想法了，我想的是使用静态网站，这样就能托管到netlify，vercel这种国内速度还行的平台，但是静态网站，总不能每次都手动修改在上传吧，想想都不现实，诶，你猜怎么着，有个叫webdav的东西，这玩意真是个好东西啊，由于文件很小，同步个几千次都要不了多少流量，所有坚果云这种甚至都行，将webdav作为环境变量储存到网站中，在给定一个既定格式，网页通过既定格式渲染memos页面，每次加载网页都实时读取webdav文件渲染，这简直是绝了，并且obsidian支持webdav同步，所以完全可以将数据文件放在obsidian里面，如何再写一个obsidian插件，这样obsidian也能使用memos了，并且通过webdav云同步同步数据到云端，这样数据就和网页端实时同步了，这个想法简支太不错了，然后呢，是不是可以在做一个专门显示memos的安卓软件，配置好webdav信息之后，实时读取云端数据文档，再按照同样的数据格式渲染memos，这样手机端也能实时显示了，并且由于渲染格式是一样的，所以完全可以将手机端和网页端的webdav数据文件设定为同一个，这样两边数据就互通了，这个想法是不是很棒。
展示
那么，展示吧，网页端，看看ui喜不喜欢，AI-雪自己反正挺喜欢的 
怎么样怎么样，还不错吧，左边的侧边栏哦，是根据浏览器边框自动显示隐藏的，因此，其实大部分时候是看不到侧边栏的，可以通过点击上面的Memos字样控制侧边栏显示隐藏~ 如你所见，它支持大部分memos语法，当然也包括图片啦（都有快捷键了啦），上面的输入框那里有一个memo还是待办的切换按钮，这个按钮切换到待办的时候，每一行就会变成一个todo~这个时候有些语法就会失灵咯，因为是专门写代办的，第一条就是待办的样子，左上角的星星是置顶的意思，是不是很棒
诺，这就是没有侧边栏的样子啦，是不是清爽多了，右上角那个按钮就是切换显示样式的，现在的样子其实也还行，方便快速寻找memo，可以自由切换哦
来看这个页面，点击任意memo就会触发这个小卡，方便快速预览，虽然点击展开按钮也能看，不过这样不是更显眼么，因为AI-雪有时候找memo，找半天分不清楚是哪一条的，这个功能我喜欢 对啦，memo支持标签，#加任意文字回车就是标签，和标题的区别是没有空格，侧边栏可以通过标签筛选memo，虽然没啥用，我为什么不直接搜索呢~好看就完了呗~
部署
这个项目，AI-雪将他放在github了哦，Memos-web,ummmm https://github.com/AIOVTUE/memos-web 你问我为什么要再放一个链接吗，因为我觉得这样好看 上面有介绍怎么部署的其实，不过呢我还是再讲一遍吧，笔记那边写的有点乱乱的 提一句，不要使用vercel，因为有点问题，但是AI-雪不怎么用这个，所以没修（主要是修的话再出问题还得修），推荐使用netlify，访问快，cloudflare也能够部署的，其实说严谨一点的话，vercel也能部署，就是webdav的api有点问题，导致用不了~
环境变量
以下是所有用到的环境变量 可以复制 .env.example 为 .env 并填写，到时候部署可以直接上传.env文件，当然你也可以一个个自己设置
| 变量 | 必填 | 说明 |
|---|---|---|
SITE_PASSWORD | 是 | 网站访问密码 |
WEBDAV_URL | 是 | WebDAV 根地址，如 https://example.com/remote.php/dav/files/user |
WEBDAV_USERNAME | 是 | WebDAV 用户名 |
WEBDAV_PASSWORD | 是 | WebDAV 密码 |
WEBDAV_FILE_PATH | 否 | 文件路径（相对 WEBDAV_URL），默认 basic.memos.md |
AUTH_SECRET | 建议 | 会话签名密钥，至少 32 位随机字符串 |
ALLOWED_ORIGIN | 否 | 跨域前端地址（逗号分隔），同域部署无需设置 |
basic.memos.md这个东西吧，尽量别改哦，如果你还想用后续的obsidian插件或者手机端的话，改了就无法读取了，手机端好像可以读取，obsidian似乎，好像也行？我没试过啦 |
部署到云端
其实到cloudflare还是到netlify步骤都一样啦，这里就介绍一个
部署到 Netlify
- 打开 netlify→ Add new site → Import an existing project
- 连接 Git 仓库
- 构建设置（
netlify.toml已预配置，一般无需修改）：- Build command:
npm run build - Publish directory:
dist
- Build command:
- Site configuration → Environment variables 中添加全部环境变量
- 触发部署 提一句，其实首次部署可以不加环境变量，后面再去加，加了在重新部署也行，看你喜欢哪种咯~ 然后？然后就没啦，直接就能用了，是不是很简单~
常见问题：
| 现象 | 可能原因 | 处理 |
|---|---|---|
| 登录后一直加载失败 | WebDAV 地址或凭据错误 | 检查 WEBDAV_* 变量，确认 WebDAV 可从公网访问 |
| 401 Unauthorized | 密码错误或 Cookie 未生效 | 确认 SITE_PASSWORD；生产环境需 HTTPS |
| 404 on /api/* | 平台函数未正确配置 | 确认使用了对应目录（api/ / netlify/functions/ / functions/） |
| 保存失败 500 | WebDAV 无写权限或路径错误 | 检查 WEBDAV_FILE_PATH，确认账号有 PUT 权限 |
| 登录频繁被限 | 触发速率限制 | 15 分钟内最多 10 次失败尝试，稍后再试 |
最后的最后，千万不要泄露你们的密码哦，建议你们下载仓库之后上传到私人，其实直接克隆也没有问题，但是AI-雪觉得不是私人不安全~虽然实际并不会
- 本文链接：https://daily.yybb.us/posts/Memos-web
- 版权声明：本博客所有文章除特别声明外，均默认采用 CC BY-NC-SA 许可协议。
