Memos API 调用渲染页面

2023-03-07 15:06:16 浏览数 (1)

注意

本文最后更新于 2022-11-06，文中内容可能已过时。

Memos 简介系列

  • Memos 简介
  • Memos 手动导入数据
  • Memos API 调用渲染页面
  • Memos API 公告样式滚动效果
  • Memos API 获取总条数

*更新：已把 Memos 剥离出一个完整的应用，可独立部署，到 eallion/memos.top 这个仓库下载部署到网站根目录即可。

*HUGO：如果使用的是 Hugo 博客框架，可以参考本站的方法：layouts/_default/memos.html

TL,DR

本文介绍如何调用 Memos API 渲染嘀咕、微语、说说类的静态页面

DEMO1 嘀咕：https://eallion.com/memos DEMO2 示例：https://memos.top

教程：博客独立页面调用 Memos 的方法

注：现阶段只能展示 PUBLIC 属性的 Memos

首先找到自己 Memos 实例的 API，如：

代码语言：javascript复制
https://memos.example.com/api/memo?creatorId=101&rowStatus=NORMAL&limit=10

creatorId - 这是用户ID，以前创建的实例 ID 是101，新版本创建的实例 ID 是1

  1. HTML代码

如果是集成到自己的网站，在合适的位置需要放置一个 CSS 选择器作为展示 Memos 的容器。

大多数网站只需要在新建页面中加入这一句就可以了。

核心代码：

代码语言：javascript复制
<div id="memos" class="memos"></div>

完整 HTML 示例：

代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="referrer" content="no-referrer">
    <link rel="icon" href="/assets/img/logo.webp" type="image/*" />
    <link href="assets/css/style.css" rel="stylesheet" type="text/css">
    <link href="assets/css/APlayer.min.css" rel="stylesheet" type="text/css">
    <link href="assets/css/highlight.github.min.css" rel="stylesheet" type="text/css">
    <link href="assets/css/custom.css" rel="stylesheet" type="text/css">
    <title>Memos Top</title>

</head>

<body>
    <header>
        <div class="menu">
            <div class="title">Memos</a></div>

            <div class="pages">
                    <a href="https://github.com/eallion/memos.top" target="_blank" rel="noopener noreferrer" class="">GitHub</a>
                    <a href="https://eallion.com/memos" target="_blank" rel="noopener noreferrer" class="">I'm Feeling Lucky</a>
            </div>

        </div>
        
        <div class='theme-toggle'>


	


api javascript css https html 




	






	

 0 人点赞