Hugo有呀2026-07-07T04:03:54+00:00https://nuoea.com/tags/memos/给Memos页面增加编辑、归档及删除功能https://nuoea.com/memos-add-edit-and-archive/2023-07-19T14:44:15+08:002023-07-19T14:44:15+08:00更新
  • 2023-07-19 新增删除功能；

前言

书接上回，继续完善Memos页面。这次给页面增加编辑和归档功能，让我们的Memos页面使用起来更加的方便。

说明

值得一提的是，两个功能都需要Memos发布框的支持。还没有折腾的同学看这里： Memos页面添加发布框

编辑

  • 首先，给你的每一条Memos 增加一个按钮，并绑定一个点击事件:
<button class="edit-btn" onclick="editMemo('+JSON.stringify(data[i]).replace(/"/g, '&quot;')+')">编辑</button>
  • 添加点击事件
function editMemo(e) {
  var memoContent = e.content,memoId = e.id,memoRelationList = e.relationList,memoResourceList = e.resourceList,memoVisibility = e.visibility;
  getEditor = window.localStorage && window.localStorage.getItem("memos-editor-display"),
  memosOpenId = window.localStorage && window.localStorage.getItem("memos-access-token");
  if(memosOpenId && getEditor == "show"){
    memosTextarea.value = memoContent;
    memosTextarea.style.height = memosTextarea.scrollHeight + 'px';
    submitMemoBtn.classList.add("d-none");
    editMemoDom.classList.remove("d-none");
    document.body.scrollIntoView({behavior: 'smooth'});
  }
  editMemoBtn.addEventListener("click", function () {
    memosOpenId = window.localStorage && window.localStorage.getItem("memos-access-token"),
    memoContent = memosTextarea.value,
    memoResourceList = window.localStorage && JSON.parse(window.localStorage.getItem("memos-resource-list")) ? window.localStorage && JSON.parse(window.localStorage.getItem("memos-resource-list")) : e.resourceList,
    memoVisibility = memosVisibilitySelect.value;
    let TAG_REG = /(?<=#)([^#\s!.,;:?"'()]+)(?= )/g;
    let memosTag = memoContent.match(TAG_REG);
    let hasContent = memoContent.length !== 0;
    if (hasContent) {
      var memoUrl = memosPath+"/api/v1/memo/"+memoId+"?openId="+memosOpenId;
      var memoBody = {content:memoContent,id:memoId,relationList:memoRelationList,resourceList:memoResourceList,visibility:memoVisibility}
      fetch(memoUrl, {
        method: 'PATCH',
        body: JSON.stringify(memoBody),
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(function(res) {
        if (res.status == 200) {
          if (memosTag !== null) {
            const memoTagUrl = memosPath + "/api/v1/tag?openId=" + memosOpenId;
            (async () => {
              for await (const i of memosTag) {
                const response = await fetch(memoTagUrl, {
                  method: 'POST',
                  headers: {
                    'Content-Type': 'application/json'
                  },
                  body: JSON.stringify({
                    name: i
                  })
                });
              }
            })();
          }
          cocoMessage.success(
          '保存成功',
          ()=>{
            submitMemoBtn.classList.remove("d-none");
            editMemoDom.classList.add("d-none");
            location.reload();
          })
        }
      })
    }
  })
}

cancelEditBtn.addEventListener("click", function () {
  if (!editMemoDom.classList.contains("d-none")) {
    memosTextarea.value = '';
    memosTextarea.style.height = 'inherit';
    editMemoDom.classList.add("d-none");
    submitMemoBtn.classList.remove("d-none");
  }
})

归档

  • 首先，还是给你的每一条Memos 增加一个按钮，并绑定一个点击事件:
<button class="archive-btn" onclick="archiveMemo(\''+data[i].id+'\')">归档</button>
  • 然后，添加点击事件
function archiveMemo(memoId) { //获取Memos的ID值
  memosOpenId = window.localStorage && window.localStorage.getItem("memos-access-token"); //登录信息
  if(memosOpenId && memoId){ //判断是否登录以及获取到Memos的ID值
    var memoUrl = memosPath+"/api/v1/memo/"+memoId+"?openId="+memosOpenId;
    var memoBody = {id:memoId,rowStatus:"ARCHIVED"};
    fetch(memoUrl, {
      method: 'PATCH',
      body: JSON.stringify(memoBody),
      headers: {
        'Content-Type': 'application/json'
      }
    }).then(function(res) {
      if (res.status == 200) {
        cocoMessage.success(
        '归档成功',
        ()=>{
          location.reload();
        })
      }
    })
  }
}

删除

  • 首先，还是给你的每一条Memos 增加一个按钮，并绑定一个点击事件:
<button class="delete-btn" onclick="deleteMemo(\''+data[i].id+'\')">删除</button>
  • 然后，添加点击事件
function deleteMemo(memoId) {
  memosOpenId = window.localStorage && window.localStorage.getItem("memos-access-token");
  if(memosOpenId && memoId){
    var memoUrl = memosPath+"/api/v1/memo/"+memoId+"?openId="+memosOpenId;
    fetch(memoUrl, {
      method: 'DELETE',
      headers: {
        'Content-Type': 'application/json'
      }
    }).then(function(res) {
      if (res.status == 200) {
        cocoMessage.success(
        '删除成功',
        ()=>{
          location.reload();
        })
      }
    }).catch(err => {
      cocoMessage.error('出错了，再检查一下吧')
    })
  }
}
]]>开始连接，给Memos页面增加转发功能https://nuoea.com/memos-link-owner/2023-07-06T20:30:23+08:002023-07-06T20:30:23+08:00前言

其实这个想法来自于 @小饿 同学。在Memos页面拥有了发布框之后，我也一直在想，除了方便快捷之外，怎么可以让发布框更好用。转发功能的概念，让我眼前一亮。

小饿： 转发功能，其实就是复制好友说说再评论，就更加接近微博了，信息连接效率会指数级提升。

Memos诞生很长时间以来，很多人都是当个笔记应用，记录生活。后来因为[@林木木] 开始折腾。有了各种API，开始出现单独的Memos页面，也有了浏览器插件，各种手机APP。生态圈一下子就建立起来了。再到后来，木木兄为Memos开发了广场页面，尽可能多的将大家的信息聚合起来，自此，Memos开启了社交时代。

木木的「广场」页面，其实已经非常趋近于微博。发布框加上后，功能已经非常完整了。所以当你拥有了一个Memos广场页面，并且加上了发布框。这个转发的功能，也可以折腾起来了。

部署

  • 首先，给你的每一条Memos 增加一个转发按钮，并绑定一个点击事件。
<a onclick="transPond('+JSON.stringify(memosForm)+')"></a>
  • 然后，定义转发的内容。
let memosForm = {
  creatorName:creatorName,
  content:transData,
  url:memosLink
};
  • 再然后，需要找到你页面中的发布框以及当前登录信息。
var memosOpenId = window.localStorage && window.localStorage.getItem("memos-access-token");
var memosPath = window.localStorage && window.localStorage.getItem("memos-access-path");
var getEditor = window.localStorage && window.localStorage.getItem("memos-editor-display");
var memosTextarea = document.querySelector(".memos-editor-textarea");
var memosVisibilitySelect = document.querySelector(".select-memos-value");
var submitMemoBtn = document.querySelector(".submit-memos-btn");
var editMemoDom = document.querySelector(".edit-memos");
var editMemoBtn = document.querySelector(".edit-memos-btn");
var cancelEditBtn = document.querySelector(".cancel-edit-btn");
  • 最后，给发布框中，添加转发内容。
var transRes = '[@'+ a.creatorName+']('+a.url+') \n\n> '+a.creatorName+': '+a.content;
memosTextarea.value = transRes;
memosTextarea.style.height = memosTextarea.scrollHeight + 'px';
document.body.scrollIntoView({behavior: 'smooth'})

完整点击事件代码如下：

//转发
function transPond(a){
  var memosTextarea = document.querySelector(".memos-editor-textarea");
  var getEditor = window.localStorage && window.localStorage.getItem("memos-editor-display");
  memosOpenId = window.localStorage && window.localStorage.getItem("memos-access-token");
  if(memosOpenId && getEditor == "show"){
    var transRes = '[@'+ a.creatorName+']('+a.url+') \n\n> '+a.creatorName+': '+a.content;
    memosTextarea.value = transRes;
    memosTextarea.style.height = memosTextarea.scrollHeight + 'px';
    document.body.scrollIntoView({behavior: 'smooth'})
  }else{
    window.open(a.url);//如果没登录，则不转发直接跳转。
  }
}

最后

效果如下：

]]>给Memos页面添加发布框https://nuoea.com/add-memos-editor/2023-07-01T21:39:02+08:002023-07-01T21:39:02+08:00起因

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

部署代码

  • HTML
<div id="memos"></div>
  • 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标签的问题
]]>Memos页面添加Twikoo评论系统https://nuoea.com/memos-twikoo/2023-06-05T21:56:31+08:002023-06-05T21:56:31+08:00写在前面

如果没有木木老师的《Memos x Twikoo》我是根本不会把这两个毫不相干的系统联系起来的，在给Memos添加了Twikoo评论系统之后，因为增加了社交属性，所以BB的时候，都更带劲了。

而美中不足的就是如果需要评论，需要跳转到Memos的页面内，这对于用户体验来说，还是略有不足的。而就在前不久，拾月老师的一篇《单页 Memos 添加 Artalk 评论，无限接近微博》让评论系统嵌入Memos页面内，从而可以沉浸式边BB边吐槽，让Momos从一个记录工具成功变身微博、朋友圈，可玩性大增。只不过我看教程用的都是Artalk这个评论工具，作为用着Twikoo很顺手，并不想更换的我来说，只能自己根据大佬们提供的思路，自行折腾了。

评论数量

关于Memos页面的搭建，直接用木木老师的就好。木木老师开发的版本，代码逻辑清晰，功能完善，开箱即用。Twikoo评论数量的实现在官网有相应API。

批量获取文章评论数

twikoo.getCommentsCount({
  envId: '您的环境id', // 环境 ID
  // region: 'ap-guangzhou', // 环境地域，默认为 ap-shanghai，如果您的环境地域不是上海，需传此参数
  urls: [ // 不包含协议、域名、参数的文章路径列表，必传参数
    '/2020/10/post-1.html',
    '/2020/11/post-2.html',
    '/2020/12/post-3.html'
  ],
  includeReply: false // 评论数是否包括回复，默认：false
}).then(function (res) {
  console.log(res);
  // 返回示例: [
  //   { url: '/2020/10/post-1.html', count: 10 },
  //   { url: '/2020/11/post-2.html', count: 0 },
  //   { url: '/2020/12/post-3.html', count: 20 }
  // ]
}).catch(function (err) {
  // 发生错误
  console.error(err);
});

请求中，需要一个评论URL的数组，所以我的思路是先通过Api获取Memos的数据。在遍历获取到的数据之后，拿到我所希望的由URL组成的数组。

直接在 getFirstList（） 方法中增加一个方法 updateTiwkoo()，并传值。

function getFirstList() {
  var bbUrl = memos + "api/memo?creatorId=" + bbMemo.creatorId + "&rowStatus=NORMAL&limit=" + limit;
  fetch(bbUrl).then(res => res.json()).then(resdata => {
    updateTiwkoo(resdata.data)
    var nowLength = resdata.data.length
    if (nowLength < limit) { //返回数据条数小于 limit 则直接移除“加载更多”按钮，中断预加载
      document.querySelector("button.button-load").remove()
      return
    }
    page++
    offset = limit * (page - 1)
    getNextList()
  });
}

function updateTiwkoo(data) {
  var twiID = data.map((item) => memos + "m/" + item.id);
  twikoo.getCommentsCount({
    envId: envId, // 环境 ID
    urls: twiID,
    includeReply: true // 评论数是否包括回复，默认：false
  }).then(function (res) {
    updateCount(res)
  }).catch(function (err) {
    console.error(err);
  });

  function updateCount(res) {
    var twiCount = res.map((item) => {
      return Object.assign({},{'count':item.count})
    });
    var bbTwikoo = data.map((item,index) => {
      return {...item, ...twiCount[index]};
    });
    updateHTMl(bbTwikoo)
  }
}

在获取到评论数的数据后，直接将两个数组合并。形成一个包含有评论数的新数组。

评论内容

主要是在 Memos 页面内增加一个 供 Twikoo 初始化的容器。并通过一系列触发操作显示渲染。详细如下：

首先，我们需要在页面内增加一个按钮，通过点击来触发评论加载。

<a onclick='loadTwikoo(memosId)'></a>

其次，我们需要一个容纳 Twikoo 评论的容器，未触发时该容器隐藏。

<div class='twikoo-body twikoo-memosId d-none'></div>

最后，我们需要一个点击事件，将评论初始化。

function loadTwikoo(memosId) {
  var twikooDom = document.querySelector('.twikoo-memosId');
  var twikooCon = "<div id='twikoo'></div>"
  if (twikooDom.classList.contains('d-none')) {
    document.querySelectorAll('.twikoo-body').forEach((item) => {item.classList.add('d-none');})
    if(document.getElementById("twikoo")){
      document.getElementById("twikoo").remove() //如果页面中已经有其他Twikoo初始化，则移除。
    }
    twikooDom.insertAdjacentHTML('beforeend', twikooCon); 
    twikooDom.classList.remove('d-none');
    twikoo.init({
      envId: envId,
      el: '#twikoo',
      path: memosPath + "/m/" + memosId 
    });
  }else{
    twikooDom.classList.add('d-none');
    document.getElementById("twikoo").remove()
  }
}

值得一提的是，需要将该 Twikoo 的ID值传给触发的方法。

最终效果

效果如下

]]>