坚果大叔 坚果大叔
  • 首页
  • 闲言碎语
  • 技术
  • 生活
  • 记录
  • 朋友
  • 热点新闻
  • 常用代码
  • 工具箱
  • 关于
首页 › 技术 › 在博客中加上memos记录展示。

在博客中加上memos记录展示。

坚果大叔
2024-12-25 23:41:27技术阅读 2,319

什么是 memos?

memos 是「一个具有知识管理和社交网络的开源、自我托管的备忘录中心」。这是一个类似私人微博的产品,支持标签、过滤、搜索、多账户,可以自用也可以和朋友一起使用,用来碎片化的记录信息,就像 flomo 一样。除了以上它还可以是一个免费的自托管知识库。

TA 能做什么?

你可以部署在自己的服务器,当作私人的微博、朋友圈、记录载体、知识库、笔记等。他可以支持 markdown 输入,也可以添加标签、附件📎等多种形式。

如何部署?

可以直接使用 docker 进行安装。

docker run -d --name memos -p 5230:5230 -v ~/.memos/:/var/opt/memos neosmemo/memos:latest

或者像我一样在宝塔面板中选择 docker- 应用-memos 直接进行安装。安装完成后再网站中新增一个 memos 网址 并设置反向代理到 docker 部署的 memos 服务的应用端口地址上。

在博客中加上memos记录展示。-坚果大叔

更多安装教程可以直接搜索 memos 安装教程。

在个人博客和小程序中添加 memos 信息展示页面

有的时候想随时记录下当前的一个心情、状态、或者要做的事情,那么对于博客来说可能有点不合适,因为对于rss 来说可能有太多不是正式的内容。所以在搭建 memos 后,发现TA有对外的 api。所以就想着把 memos 的状态更新到自己的博客上面。效果如下

web端博客

在博客中加上memos记录展示。-坚果大叔

博客小程序中

在博客中加上memos记录展示。-坚果大叔

实现方式

在小程序中,实现很简单只需要调取 memos 的 memos 接口,默认会返回当前所有的记录,在小程序中渲染即可。请求的时候需要带上 token 并且做好懒加载和分页即可。

  fetchMemos: function (pageToken = '', limit = 20) {
    const self = this;
    wx.request({
      url: 'https://demo.memos.cn/api/v1/memos?pageToken=${pageToken}&pageSize=${limit}&creatorId=1',
      method: 'GET',
      header: {
        'Authorization': 'Bearer ' + 'token',
        'Content-Type': 'application/json',
      },
      success: (res) => {
        if (res.statusCode === 200) {
          const newMemos = res.data.memos;
          const pageToken = res.data.nextPageToken;
          const mdata = this.data.memosData.concat(newMemos);
          mdata.forEach((item) => {
            item.newcreateTime = self.formatTimeAgo(item.createTime)
          })
          self.setData({
            memosData: mdata,
            pageToken: pageToken,
          });
        }
      },
    });
  },

在个人博客上如何实现呢?因为博客使用的 WordPress ,所以你需要在你的主题目录中新建一个单页模板文件,用来显示 memos 信息。

首先在你的博客安装目录中的主题文件目录下的 pages 目录中新建一个单页模板。同时设置信息如下:

在博客中加上memos记录展示。-坚果大叔

然后在博客后台新建页面,选择页面模板为刚刚设置的memos pages,然后将该页面添加到你的菜单中。

接下来在模板页面添加相关逻辑代码。

html 部分

碎碎念

加载中...
没有更多数据了

JavaScript 部分

    let isLoading = false;
    let hasMoreData = true;
    function loadMemos(pageToken = '') {
        if (isLoading || !hasMoreData) return;
        isLoading = true; document.getElementById('loading').style.display = 'block';
        fetch('', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: 'action=load_memos&pageToken=${pageToken}',
        })
        .then(response => response.json())
        .then(data => {
            isLoading = false; document.getElementById('loading').style.display = 'none';
            if (data && data.memos && Array.isArray(data.memos) && data.memos.length > 0) {
                const memosContainer = document.getElementById('memos-container');
                data.memos.forEach(memo => {
                    const existingMemo = Array.from(memosContainer.children).find(child => child.dataset.id === memo.id);
                    if (!existingMemo) {
                        const memoElement = document.createElement('div');
                        memoElement.className ='memo-item'; 
                        memoElement.dataset.id = memo.id;
                        let tagsHtml = '';
                        if (memo.property && memo.property.tags && memo.property.tags.length > 0) {
                            tagsHtml = '
${memo.property.tags.map(tag =>
#${tag}
).join('')}
'; } memoElement.innerHTML = `
                                 
坚果大叔
${memo.formattedTime}
${memo.content}
${tagsHtml} `;                       memosContainer.appendChild(memoElement); } }); // pageToken = data.nextPageToken; localStorage.setItem('nextPageToken', data.nextPageToken); if (!data.nextPageToken) { hasMoreData = false; document.getElementById('no-more-data').style.display = 'block'; } } else { hasMoreData = false; document.getElementById('no-more-data').style.display = 'block'; } }) .catch(error => { console.error('加载数据失败:', error); isLoading = false; document.getElementById('loading').style.display = 'none'; }); } window.addEventListener('scroll', function () { if (isLoading || !hasMoreData) return; const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight; const clientHeight = document.documentElement.clientHeight || document.body.clientHeight; if (scrollTop + clientHeight >= scrollHeight - 140) { let pageToken = localStorage.getItem('nextPageToken') || '' loadMemos(pageToken); } }); document.addEventListener('DOMContentLoaded', function () { loadMemos(); });

因为需要分页加载,所以你还需要在你的博客目录下的 functions.php 中添加接口请求的功能。

add_action('wp_ajax_load_memos', 'handle_load_memos');
add_action('wp_ajax_nopriv_load_memos', 'handle_load_memos');

function handle_load_memos() {
    $pageToken = sanitize_text_field($_POST['pageToken'] ?? '');
    $limit = 20;
    $response = wp_remote_get("https://demo.memos.cn/api/v1/memos?pageToken={$pageToken}&pageSize={$limit}&creatorId=1", array(
        'headers' => array(
            'Authorization' => 'Bearer token',
            'Content-Type' => 'application/json',
        ),
    ));
    if (is_array($response) && !is_wp_error($response)) {
        $body = wp_remote_retrieve_body($response);
        $data = json_decode($body, true);

        if (!empty($data['memos'])) {
            foreach ($data['memos'] as &$memo) {
                $memo['formattedTime'] = formatTimeAgo($memo['createTime']);
            }
            wp_send_json(array(
                'memos' => $data['memos'],
                'nextPageToken' => $data['nextPageToken'] ?? '',
            ));
        }
    }
    wp_send_json(array(
        'memos' => [],
        'nextPageToken' => '',
    ));

    wp_die(); // 必须调用 wp_die() 结束请求
}

将上面文件都保存完成后,就可以在你的博客成功显示 memos的内容了。

但是因为安装版本的 memos 的问题,api 返回的数据中只有文本信息,上传的多媒体内容并没有返回,这个问题还没有解决,还在查看 api 文档。后续一并更新解决。

赞赏 赞(2)
最近半个月
上一篇
我的2024!开了好头,但结尾好像有点不太好~
下一篇
在小程序中查看
再想想
所有评论(5)
  • 扶苏

    挺有兴趣的,前面部署不难,怎么调用到wp里能否再详细些,还有可以首页某个区域直接调用吗?就是不作为一个导航子链接,而是作为右侧的一个边栏栏目内容

    4 月前 江苏 回复
    • 坚果大叔

      @扶苏: 理论上可以放到任何位置的,放在导航里是新增了一个页面。如果要放到单独的某个小工具里,可以直接用 js 来调用。

      4 月前 江苏 回复
    • 坚果大叔

      @扶苏: 我要 wp 代码的话,我直接发你

      4 月前 江苏 回复
    • 扶苏

      @坚果大叔: 好呀,给我代码试一试呢~谢啦

      4 月前 江苏 回复
    • 坚果大叔

      @扶苏: 你加我微信 lecooe

      4 月前 浙江 回复
搜你想看的
聚合文章
Sort函数小Tips!
网站折腾记
VuePress 发布流程
响应式网站移动端hover处理
闲言碎语
Memos
npm install 出现 Error:EISDIR:illegal operation on a directory 的错误提示!
2025-03-31 19:02:11
555 0 0
iphone 利用 Scriptable 添加网上国网电费小组件
2025-01-06 20:40:20
4,960 6 2
网页点击平滑滚动效果~
2024-10-17 16:43:08
2,025 4
Ant-design-vue Table 自定义列斑马纹效果
2024-09-26 11:26:50
2,780 1
5 2
  • 2
  • 5
博主

一位佛系的前端开发者,略通摄影,乐于尝试新事物,热衷于美食。

友链
故事胶片
公众号
坚果大叔 执行上下文 卖坚果的怪叔叔 Dacking
Copyright © 2017-2025 坚果大叔

开往-友链接力

萌ICP备20230818号

苏ICP备18048410号-3
  • 首页
  • 闲言碎语
  • 技术
  • 生活
  • 记录
  • 朋友
  • 热点新闻
  • 常用代码
  • 工具箱
  • 关于
# CSS # # JavaScript # # vue # # 微信 # # 生活 #
坚果大叔
317
文章
125
评论
365
喜欢