A static page rendered with the Memos API

memos-demo.vercel.app

Memos Top. 通过 Memos API 渲染的静态网页。

简单的 HTML、纯净的 CSS、原生的 JS。

Live Demo • I'm Feeling Lucky ✍

中文 | English

Tip

已支持老版（< v0.22.0）和新版（>= v0.22.0）两种 API，请配置 APIVersion

Note

如果你想把你的 Mastodon（长毛象）的嘟文嵌入到自己的网页中，你可以参考这个项目。
https://github.com/eallion/mastodon-embed-timeline

前端框架

• 暗黑模式适配
• 移动端自适应

• Memos
• Highlight.js
• Markedjs
• ViewImage.js

使用方法

1. clone本仓库或下载后部署.

git clone https://github.com/eallion/memos.top

2. 设置

在 index.html 文件中调整以下设置：

<script type="text/javascript">
  var memos = {
    host: 'https://demo.usememos.com/', // 修改为自己部署 Memos 的网址，末尾有 / 斜杠。
    limit: '10', // 每页显示的条数，默认显示 10 条。
    creatorId: '1', // 老的实例是 101，新的实例是 1。https://demo.usememos.com/u/1
    domId: '#memos', // 默认为 #memos，一般不用修改。
    username: 'memos', // 自定义显示在前端的 ID。
    name: 'Official Demo', // 自定义显示在前端的全名。
    language: 'zh-CN', // `en` `zh-CN` 等，用于显示相对时间。
    APIVersion: 'new', // `new` 或者 `legacy`，Memos API 版本，小于 `v0.22.0`: 填写：`legacy`，大于等于 `v0.22.0`：填写`new`。
    total: true, // 显示 Memos 总条数。新版没有好办法显示，老版本也关闭了 Amount API。
    doubanAPI: '', // 填入一个 API 渲染豆瓣条目，不填不渲染，只显示 URL，自建 API：https://github.com/eallion/douban-api-rs
  }
</script>

3. 网站图标和头像 (可选)

在 assets/img 目录中，替换成自己的图标和头像。

• logo.webp 是网站图标，显示在浏览器标签上。

• avatar.jpg 是头像，显示在每条 Memos 的左侧。

• 待办：获取 Memos 的默认头像：https://memos.apidocumentation.com/reference#tag/userservice/GET/file/{name}/avatar

4. 上传

上传 index.html 文件 assets 目录及目录中的所有文件到网站根目录。

部署到 GitHub Pages

Demo: https://eallion.github.io/memos.top

1. Fork 本仓库
2. 按照 #使用方法.2 设置自己的 API
3. 转到自己的 memos.top 仓库的设置 - Setting - Pages - Deploy from a branch - Branch(main/root)

部署到 Vercel

Demo: https://memos-demo.vercel.app/

1. Fork 本仓库
2. 按照 #使用方法.2 设置自己的 API
3. 进入自己的 Vercel 面板
4. 新建一个 Project，导入 GitHub 上的仓库
5. 按默认设置不用改动，直接点Deploy
6. 中国大陆可能需要绑定一个自定义域名才能访问 Vercel

Todo:

• Vercel 一键部署

其他平台

你也可以把这个静态页面部署到 Cloudflare Pages 或者 Netlify 等平台。

使用技巧:

发布 Memos 时的格式： 👈👈👈

1. Bilibili 视频。分享的视频链接。支持BV/AV号。暂不支持b23.tv链接。

https://www.bilibili.com/video/BV1Sd4y1b7yg/

2. Youtube 视频。分享的视频链接。

https://www.youtube.com/watch?v=mNK6h1dfy2o

3. Youku 视频。分享的视频链接。

https://v.youku.com/v_show/id_XNTkyMjkxNTEyOA==.html

4. 腾讯视频。分享的视频链接。

https://v.qq.com/x/cover/mzc00200z47sdeu/m0044zpag6c.html

5. Spotify 音乐。分享的链接。支持track/album。

https://open.spotify.com/track/6Uq8BnOxvXJsQiJ2XqfO5P

6. 网易云音乐。链接即可。

https://music.163.com/#/song?id=4153490

7. QQ 音乐。只支持 sondmid 不支持 songid。

https://y.qq.com/n/ryqq/songDetail/004W3BfK46dMXk 

from https://github.com/eallion/memos.top