在WordPress中嵌入memos时间线

memos是一款隐私优先的轻量级自部署笔记服务，便于轻松捕捉并分享您的精彩想法。Wordpress作为一个网页内容管理系统，缺少能够类似微博一样的分享碎片化内容的机制，而在wordpress里嵌入memos时间线就可以解决这个问题，同时提供给阅读者更多了解您的渠道。

memos.top是一款能利用memos API渲染静态页面的服务，本文通过在wordpress中在自定义HTML区块中编写iframe代码展示memos.top渲染的静态页面，来达到嵌入指定用户公开时间线的目的。您也可以以类似的方法嵌入MemosGallery来展示您在memos中的所有公开图片。您可查看由我配置的示例。

由于是通过iframe实现的，所以应该也可以在除了Wordpress以外的网站上使用。

关于memos的部署请您参照官方说明文档。

一、配置memos.top

在您要部署memos.top的位置运行以下命令：

git clone https://github.com/kunjinkao-xs/memos.top

然后打开index.html，注意修改以下内容：

    <script type="text/javascript">
        var memos = {
            host: 'https://demo.usememos.com/',  // 你的memos地址, 以'/'结束.
            limit: '10',  // 时间线展示条数.
            creatorId: '1',  // 用户ID.
            domId: '#memos',  // 默认 #memos.
            username: 'memos',  // 展示的用户名.
            name: 'Official Demo',  // 展示的名称.
        }

    </script>

您可根据需要修改html文件的内容，本贴的首图就是笔者修改后的形式。在Wordpress中不需要嵌入除时间线以外的内容，所以此外全部删除。

在index.html中body部分的最后加入以下内容引入脚本：（作用：参与调整iframe大小，详见此博文）

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.7/iframeResizer.contentWindow.min.js" defer=""></script>

此时您可单独访问此html页面，查看是否能够正确显示公开时间线，若可以继续进行。

二、在wordpress中配置

进入文章/页面的编辑页面，新建自定义HTML区块并填入以下内容：

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <div>
    <iframe src="/memo_static.html" width="100%" scrolling="no" id="iFrameResizer0" style="overflow: hidden;border: none;display: block"></iframe>
    </div>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.7/iframeResizer.min.js"></script>
    <script type="text/javascript">
      var callbackDisplay = 'p#callback'

      iFrameResize({
        log: false, // Enable console logging
        inPageLinks: true,
        onResized: function (messageData) {
          // Callback fn when resize is received
          $(callbackDisplay).html(
            '<b>Frame ID:</b> ' +
              messageData.iframe.id +
              ' <b>Height:</b> ' +
              messageData.height +
              ' <b>Width:</b> ' +
              messageData.width +
              ' <b>Event type:</b> ' +
              messageData.type
          )
        },
        onMouseEnter: function (messageData) {
          // Callback fn when mouse enters iframe
          $(callbackDisplay).html(
            '<b>Frame ID:</b> ' +
              messageData.iframe.id +
              ' <b>ScreenX:</b> ' +
              messageData.screenX +
              ' <b>ScreenY:</b> ' +
              messageData.screenY +
              ' <b>Event type:</b> ' +
              messageData.type
            )
        },
        onMouseLeave: function (messageData) {
          // Callback fn when mouse enters iframe
          $(callbackDisplay).html(
            '<b>Frame ID:</b> ' +
              messageData.iframe.id +
              ' <b>ScreenX:</b> ' +
              messageData.screenX +
              ' <b>ScreenY:</b> ' +
              messageData.screenY +
              ' <b>Event type:</b> ' +
              messageData.type
          )
        },
        onMessage: function (messageData) {
          // Callback fn when message is received
          $(callbackDisplay).html(
            '<b>Frame ID:</b> ' +
              messageData.iframe.id +
              ' <b>Message:</b> ' +
              messageData.message
          )
          alert(messageData.message)
          document
            .getElementsByTagName('iframe')[0]
            .iFrameResizer.sendMessage('Hello back from parent page')
        },
        onClosed: function (id) {
          // Callback fn when iFrame is closed
          $(callbackDisplay).html('<b>IFrame (</b>' + id + '<b>) removed from page.</b>')
        },

      })
    </script>

需要注意在iframe src=”/memo_static.html”中“/memo_static.html”修改为您在第一步放置memos.top的index.html文件所在位置。

所有的js脚本您可部署在您的网站目录下，src改为如“./js/iframeResizer.contentWindow.min.js”的形式。

此时您的memos时间线就可以无缝的嵌入在wordpress的页面/文章中了！

参考资料：

• usememos/memos: A privacy-first, lightweight note-taking service. Easily capture and share your great thoughts – Github
• eallion/memos.top: ✍ A static page rendered with the Memos API.
• 支持跨域的iframe自适应高度方法 – 锟斤拷的博客