Welcome to our website.

How to Embed the Latest Memos in Hexo and Fix the New API Changes

If you are embedding Memos into a Hexo site, pay close attention to the version you are using. The setup here is based on Memos v0.22.4, and that matters because many JavaScript snippets shared online still call the older API. With recent versions, those scripts will fail to fetch memo data unless you update the requests.

The practical fix is in memos.js. The full setup uses four script files in total. Three of them are functional dependencies that can be loaded from a CDN if you prefer, while the key part that needs adjustment is memos.js so it works with the current API.

screenshot

What needs to be changed

The older API calls are shown in the commented lines below, and the working replacements for the newer API are placed directly underneath them.

One detail worth noting is the thumbnail API in newer versions. It works by appending ?thumbnail=true to the end of the file URL, which feels somewhat similar to the way Qiniu-style image APIs are handled.

<table> <thead> <tr> <th>1 2 3 4 5 6 7 8 9 10 11</th> <th>// var bbUrl = memos + "api/v1/memo?creatorId=" + bbMemo.creatorId + "&rowStatus=NORMAL&limit=" + limit; var bbUrl = memos + "api/v1/memos?filter=creator=='users/"+ bbMemo.creatorId + "'&&visibilities=='PUBLIC'&&pageSize=" + limit; //resUrl += '<a target="_blank" rel="noreferrer" href="' + memos + 'o/r/' + resources[j].id + '/' + resources[j].filename + '">' + resources[j].filename + '</a>' resUrl += '<a target="_blank" rel="noreferrer" href="' + memos + 'flie/' + resources[j].name + '/' + resources[j].filename + '?thumbnail=true">' + resources[j].filename + '</a>' // imgUrl += '<figure class="gallery-thumbnail"><img class="img thumbnail-image" src="' + memos + 'o/r/' + resources[j].id + '/' + resources[j].filename + '"/></figure>' imgUrl += '<figure class="gallery-thumbnail"><img class="img thumbnail-image" src="' + memos + 'file/' + resources[j].name + '/' + resources[j].filename + '?thumbnail=true"/></figure>'</th> </tr> </thead> <tbody> <tr> <td></td> <td></td> </tr> </tbody> </table>

Script package and repository

A cleaned-up version of the modified script has already been organized and published on GitHub. If you want the complete code, you can get it here:

https://github.com/KeyleXiao/MemosWithHexo

For marked.js, this CDN version can be used as a replacement:

marked.js -> https://cdn.bootcdn.net/ajax/libs/marked/14.0.0/marked.min.js

Demo

https://vrast.cn/talking/

Result preview

preview

Related Posts