惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

云风的 BLOG
云风的 BLOG
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
博客园 - 叶小钗
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
V
V2EX
酷 壳 – CoolShell
酷 壳 – CoolShell
月光博客
月光博客
人人都是产品经理
人人都是产品经理
宝玉的分享
宝玉的分享
博客园 - 司徒正美
WordPress大学
WordPress大学
Microsoft Azure Blog
Microsoft Azure Blog
罗磊的独立博客
Vercel News
Vercel News
T
The Blog of Author Tim Ferriss
T
Tailwind CSS Blog
A
About on SuperTechFans
Apple Machine Learning Research
Apple Machine Learning Research
L
LangChain Blog
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
V
Visual Studio Blog
S
SegmentFault 最新的问题
Google DeepMind News
Google DeepMind News
博客园 - 聂微东

有呀

骑士活塞G4:冠军之心的觉醒 最近入手的几台心头好 组了一台 QNAS Mini 部署轻量友链朋友圈 给Memos页面增加编辑、归档及删除功能 开始连接,给Memos页面增加转发功能 所谓尼康战歌 富士直出日系治愈色调 使用 Umami Api 实现点赞统计 极简模式部署友链朋友圈 使用 Umami Api 显示统计数据 Memos页面添加Twikoo评论系统 使用Midjourney渲染游戏场景原画 富士的胶片感太好看了吧 一组76人美图 制作Big Sur风格的 icon 总有一些事,比总冠军更重要 一组收藏的原神原画壁纸 Hi,Hugo 在疫情中心武汉的这两个月 2020年流行设计风格探索 最近发现一个神器 入了多看电纸书 换了新主题 折叠屏会是智能设备的下一个形态么 Hackintosh 安装全攻略 平淡日子里的刺 Gridea主题:Mao Hi,Gridea 发一个 Office 365 家庭版的车
给Memos页面添加发布框
2023-07-01 · via 有呀

起因

最开始是看到 @林木木 发的一条哔哔。说是想要在Memos页面内嵌入哔哔单页,从而可以实现在一个页面内发布哔哔以及浏览哔哔。寻思这样一来,体验确实是可以好很多,不需要切来切去,更有沉浸感。

部署代码

  • HTML
  • CSS
.load-memos-editor{position:fixed;right:1rem;bottom:1rem;background-color:#ebeced;}
.memos-editor-body{display:flex;border-radius:.33rem;background-color:var(--light-background-secondary);flex-direction:column}
.dark .memos-editor-body {background-color: var(--dark-background-secondary);}
.memos-editor-content,.memos-editor-footer,.memos-editor-option{display: flex;}
.memos-editor-content .memos-editor-inputer{overflow-x:hidden;overflow-y:clip;padding:0;width:100%;max-height:160px;outline:2px solid transparent;outline-offset:2px;background-color:transparent;white-space:pre-wrap;line-height:2rem;resize:none;overflow-wrap:anywhere;word-break:normal}
.memos-editor-tools{display: flex;flex-direction: column;}
.memos-editor-tools .action-btn {padding: .25rem;}
.memos-editor-tools .memos-tag-list {display:flex;flex-wrap:wrap;align-items:center;line-height:2;}
.memos-editor-tools .memos-tag {position:relative;}
.memos-editor-tools .memos-tag a {flex:1}
  • JS
<script>
var memosData = {
    dom:'#memos',
};
</script>
  • 页面布局

grid.css

  • 字体图标

iconfont.css

  • Javascript

memos-editor.js

  • 消息提醒弹窗
https://github.com/TheWindRises-2/coco-message
  • Animate.css
https://animate.style/

使用说明

  • 填入 Memos Open API ,格式如下:
https://memos.example.com/api/memo?openId=<Memos Open API>
  • 开始哔哔吧

在线围观

围观地址:https://nuoea.com/memos

致谢

更新日志

  • 2023-07-01 正式上线
  • 2023-07-02 新增:上传图片
  • 2023-07-02 修复:API地址多出/导致“Memos Open API 有误,请重新输入!”的问题
  • 2023-07-03 新增:随机回顾一条 Memos
  • 2023-07-04 新增:切换当前 Memos Open API
  • 2023-07-09 新增:光标自动定位(感谢 @空白生活
  • 2023-07-09 修复:随机Memos中最多只能显示1个标签的问题(感谢 @空白生活
  • 2023-07-18 新增:适配 0.14.0 版本API
  • 2023-07-19 新增:资源库图片删除
  • 2023-07-19 新增:编辑按钮
  • 2023-07-19 修复:无法新增TAG标签的问题