Memos官网：memos
前言
一般来讲，Memos通过Docker来部署，所以想要部署使用Memos的话，最好有服务器。
如果你没有服务器的话，可以尝试使用小N同学和杜老师维护的公益项目：memos纯公益代部署服务。
简介
Memos是一个轻量级的自托管备忘录中心。开源和永久免费。可以说是支持 Docker 自部署的 flomo ，而且有 API 调取数据和发 Memos 。在短短两年的时间内，Memos就在GitHub上获得了20k的星星。
效果展示
说说页面展示：空间动态
清单页面展示：清单列表
本教程参考了Leonus和木木木木木关于Memos的文章，感兴趣的同学可以去看一看。
部署
下面是在服务器上使用docker进行的Memos部署方法。
第一步
新建一个文件夹memos，作为项目的根文件夹。
第二步
在根文件夹下新建文件docker-compose.yml。 推荐使用docker-compose.yml方式进行部署，方便制定数据储存位置及更新版本，其中使用${PWD}指定路径为当前文件夹。
version: "3.0"
services:
memos:
image: neosmemo/memos:latest
container_name: memos
volumes:
- ${PWD}/.memos/:/var/opt/memos
ports:
- 5230:5230第三步
以宝塔面板为例：
- 安装docker
宝塔面板好像已经自带了docker环境（不确定忘记了）
- 安装docker compose
pip install docker compose
验证docker compose是否安装成功
docker compose version
- 构建并启动容器
docker compose up -d
- 由于Memos是一个新的项目，还处于快速迭代的时期，所以我们可能会经常更新版本
docker compose down && docker image rm neosmemo/memos:latest && docker compose up -d
我们的数据都会存放在.memos文件夹中，所以建议定时备份目录下的.memos文件夹。
- 附
docker compose的用法\命令：
用法：docker compose [OPTIONS] COMMAND
使用Docker定义并运行多容器应用程序。
OPTIONS：
| 命令 | 注释 |
|---|---|
| –ansi string | 控制何时打印ANSI控制字符（”never”|”always”|”auto”）（默认：”auto”） |
| –compatibility | 在向后兼容模式下运行compose |
| –dry-run | 在dry run模式下执行命令 |
| –env-file stringArray | 指定备用环境文件 |
| -f, –file stringArray | 编写配置文件 |
| –parallel int | 控制最大并行度，-1表示无限制（默认值-1） |
| –profile stringArray | 指定要启用的配置文件 |
| –progress string | 设置进度输出类型（auto、tty、plain、quiet）（默认为“auto”） |
| –project-directory string | 指定备用工作目录（默认值：首次指定的Compose文件的路径） |
| -p, –project-name string | 项目名称 |
COMMAND：
| 命令 | 注释 |
|---|---|
| build | 构建或重建服务 |
| config | 分析、解析并呈现规范格式的compose文件 |
| cp | 在服务容器和本地文件系统之间复制文件/文件夹 |
| create | 为服务创建容器 |
| down | 停止并移除容器、网络 |
| events | 从容器接收实时事件 |
| exec | 在运行的容器中执行命令 |
| images | 列出创建的容器使用的图像 |
| kill | 强制停止服务容器 |
| logs | 查看容器的输出 |
| ls | 列出正在运行的撰写项目 |
| pause | 暂停服务 |
| port | 打印端口绑定的公共端口 |
| ps | 列出容器 |
| pull | 拉取服务图像 |
| push | 推送服务图片 |
| restart | 重新启动服务容器 |
| rm | 删除已停止的服务容器 |
| run | 对服务运行一次性命令 |
| start | 启动服务 |
| stop | 停止服务 |
| top | 显示正在运行的进程 |
| unpause | 无偿服务 |
| up | 创建和启动容器 |
| version | 显示Docker Compose版本信息 |
| wait | 阻塞，直到第一个服务容器停止 |
有关命令的详细信息，请运行docker compose COMMAND--help
第四步
添加反向代理：
操作如下：网站—>添加站点（之后的操作建立在自己创建的站点上面）—>设置—>反向代理—>添加反向代理
其中目标url填写的是http://自己的服务器ip:5230
Memos api
Memos api的格式如下：https://memos地址/api/v1/memo?creatorId=用户ID&tag=标签名&limit=限制数量
memos地址：
就是自己memos服务的域名地址，比如我的就是：memos.zhaozeyu.top。
用户ID：
在自己的memos主页点击头像，点击RSS，可以获取到RSS地址如：https://memos.zhaozeyu.top/u/1/rss.xml，其中1就是自己的用户ID。
标签名：
自己在memos服务中创建的标签名，用来区分不同类型的备忘录，你可以自定义为“说说”、“清单”、“相册”等。
限制数量：
一个数字，用来限制要显示的数量。
完整memos api示例：https://memos.zhaozeyu.top/api/v1/memo?creatorId=1&tag=说说&limit=30
说说功能
在子比主题的网站中新建页面，选择自定义HTML区块，然后嵌入一下代码（记得将Memos api改成自己的）：
<style>
#memos-box {
width: 100%;
position: relative;
}
.memos-talk {
padding: 10px;
border: 1px solid lightgray;
border-radius: 20px;
position: absolute;
transition: all 0.2s linear;
}
.memos-talk:hover {
box-shadow: 0 0 12px rgba(0, 0, 0, 0.24);
}
.memos-meta {
display: flex;
align-items: center;
height: 60px;
}
.memos-avatar {
width: 60px!important;
height: 60px!important;
margin: 0 !important;
border-radius: 15px;
}
.memos-info {
margin-left: 10px;
display: flex;
flex-direction: column;
}
span.memos-nick {
color: var(--theme-color);
}
span.memos-date {
opacity: 0.6;
font-size: 1.4rem;
}
/* 中间内容 */
.memos-content {
margin-top: 10px;
}
.memos-images {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.memos-img {
margin: 2px !important;
object-fit: cover;
aspect-ratio: 1 / 1;
}
.memos-files {
display: flex;
flex-wrap: wrap;
}
.memos-file {
margin: 5px;
padding: 2px 5px;
background-color: lightgray;
border: 1px lightgrey solid;
border-radius: 8px;
font-size: 1.2rem;
}
.memos-file:hover {
background-color: transparent;
transition: all 1s linear;
}
/* 底部 */
.memos-tag {
margin: 0 5px;
opacity: 0.6;
font-size: 1.4rem;
}
</style>
<div id="memos-box"></div>
<script>
const url = "https://memos.zhaozeyu.top";
fetch(`${url}/api/v1/memo?creatorId=1&tag=说说&limit=30`)
.then((res) => res.json())
.then((res) => {
let items = [];
let html = "";
res.forEach((item) => {
items.push(format(item));
});
items.forEach((item) => {
let imagesHtml = "";
let tagsHtml = "";
let resourcesHtml = "";
item.images.forEach((t, index) => {
imagesHtml += `<img class="memos-img" src="${t}" alt="${index}"/>`;
});
item.resources.forEach((t) => {
resourcesHtml += `<div class="memos-file"><a href="${t.url}" target="_blank">${t.filename}</a></div>`;
});
item.tags.forEach((t) => {
tagsHtml += `<span class="memos-tag">#${t}</span>`;
});
html += `<div class="memos-talk">
<div class="memos-meta">
<img
class="memos-avatar"
src="https://imagecloud.zhaozeyu.top/2023/10/07/652166bad3c71.webp"
alt="avatar"
/>
<div class="memos-info">
<span class="memos-nick">是zzy呀</span>
<span class="memos-date">${item.createDate}</span>
</div>
</div>
<div class="memos-content">
<div style="white-space: pre-wrap">${item.content}</div>
<div class="memos-images">${imagesHtml}</div>
<div class="memos-files">${resourcesHtml}</div>
</div>
<div class="memos-bottom">
<div>${tagsHtml}</div>
</div>
</div>`;
});
document.getElementById("memos-box").innerHTML = html;
setPositions();
setPositions();
});
/**
* 格式化
* @param {{createdTs: string, content: string, resourceList: [{filename: string, externalLink: string}]}} item
* @returns {{images: (string[]|*[]), resources: *[], content: string, createDate: string, tags: (string[]|*[])}}
*/
function format(item) {
// 创建日期
let createDate = getTime(new Date(item.createdTs * 1000).toString());
// 标签数组
let tagMatches = item.content.match(/\{(.*?)}/g);
let tags = tagMatches
? tagMatches.map((t) => t.replace(/^\{(.*)}$/, "$1"))
: [];
// 图片数组
let imageMatches = item.content.match(/!\[.*?]\(.*?\)/g);
let images = imageMatches
? imageMatches.map((t) => t.replace(/!\[.*?]\((.*?)\)/, "$1"))
: [];
// 去除 标签、图片、自定义tag
let content = item.content
.replace(/#(.*?)\s/g, "")
.replace(/!\[(.*?)]\((.*?)\)/g, "")
.replace(/\{(.*?)}/g, "")
.replace(/^\s+|\s+$/g, "")
.replace(
/\[(.*?)]\((.*?)\)/g,
(match, alt, url) => `<a href=${url}>${alt}</a>`
);
// 资源数组
let resources = [];
if (item.resourceList.length > 0) {
item.resourceList.forEach((t) => {
resources.push({
filename: t.filename,
url: t.externalLink
? t.externalLink
: `${url}/o/r/${t.id}/${t.publicId}/${t.filename}`,
});
});
}
return {
createDate,
content,
tags,
images,
resources,
};
}
// 时间转化
function getTime(time) {
let d = new Date(time);
let ls = [
d.getFullYear(),
d.getMonth() + 1,
d.getDate(),
d.getHours(),
d.getMinutes(),
d.getSeconds(),
];
for (let i = 0; i < ls.length; i++) {
ls[i] = ls[i] <= 9 ? "0" + ls[i] : ls[i] + "";
}
if (Number(ls[0]) === new Date().getFullYear()) {
return ls[1] + "月" + ls[2] + "日 " + ls[3] + ":" + ls[4];
} else {
return (
ls[0] + "年" + ls[1] + "月" + ls[2] + "日 " + ls[3] + ":" + ls[4]
);
}
}
// 瀑布流布局
// 计算一共有多少列，以及每一列之间的间隙
function cal() {
let boxElement = document.getElementById("memos-box");
let boxWidth = boxElement.clientWidth; // box容器的宽度
// 计算列的数量
let columns;
if (boxWidth > 1536) {
columns = 5;
} else if (boxWidth > 1280) {
columns = 4;
} else if (boxWidth > 1024) {
columns = 3;
} else if (boxWidth > 768) {
columns = 2;
} else if (boxWidth > 512) {
columns = 2;
} else if (boxWidth > 375) {
columns = 1;
} else {
columns = 1;
}
// 计算间隙个数，两边不设置间隙
let spaceNum = columns - 1; // 间隙数量
// 定义每一个间隙的宽度
let spaceWidth = 10;
// 计算 talk 的宽度
let talkWidth = Math.floor((boxWidth - spaceNum * spaceWidth) / columns);
return {columns, talkWidth};
}
// 设置每个 talk 的位置
function setPositions() {
let boxElement = document.getElementById("memos-box");
let talksElement = document.querySelectorAll(".memos-talk");
// 得到列数和间隙空间
let info = cal();
// 该数组的长度位列数，每一项表述该列的下一个图片的纵坐标
let nextTops = new Array(info.columns);
nextTops.fill(10); // 初始化，每一项都为0
for (let i = 0; i < talksElement.length; i++) {
let talk = talksElement[i];
// 找到 nextTops最小值作为当前图片的纵坐标
let minTop = Math.min.apply(null, nextTops);
talk.style.width = `${info.talkWidth}px`;
talk.style.top = `${minTop}px`;
// 检测 talk 中是否有 images 元素
let imagesElement = talk
.querySelector(".memos-content")
.querySelector(".memos-images");
let imgWidth = (imagesElement.clientWidth - 12) / 3;
if (imagesElement.children.length === 1) {
imagesElement.children[0].style.aspectRatio = "auto";
imagesElement.children[0].style.height = `${imgWidth}px`;
imagesElement.children[0].style.width = "auto";
} else {
for (let j = 0; j < imagesElement.children.length; j++) {
imagesElement.children[j].style.width = `${imgWidth}px`;
}
}
// 更新数组这一项的的下一个top值
// 得到使用的是第几列的top值
let index = nextTops.indexOf(minTop);
nextTops[index] += talk.clientHeight + 10;
// 横坐标
let left = index * (info.talkWidth + 10);
talk.style.left = `${left}px`;
}
// 求最大值
let maxTops = Math.max.apply(null, nextTops);
// 这只容器的高度
boxElement.style.height = `${maxTops}px`;
}
// 检测窗口尺寸变化
let timeId = null;
window.onresize = function () {
if (timeId) {
clearTimeout(timeId);
}
timeId = setTimeout(setPositions, 250);
};
</script>发表说说的格式如下：
#说说 {说说}{测试}
memos说说功能测试
超链接测试
图片九宫格测试
文件上传测试
[Memos](https://memos.zhaozeyu.top)
选择标签 —> 大括号包裹自定义标签 —> 回车后开始写正文，链接和图片都是用markdown书写格式。
目前实现了文字、超链、图片、文件的展示。
清单功能
操作同上面的说说功能，嵌入代码如下：
发表清单的格式如下：
#清单 {想去的地方}
- [x] 甘坑客家小镇
- [x] 大芬油画村
- [x] 文博宫
- [x] 华为坂田研发总部
- [ ] 大小梅沙海滨公园
- [ ] 深圳湾公园
- [ ] 深圳人才公园
- [ ] 深圳天文台栈道
- [ ] 深圳博物馆
- [ ] 南山博物馆
- [ ] 梧桐山
- [ ] 长白山
- [ ] 黑龙江冰雪世界选择标签 —> 大括号写清单的标题 —> 回车开始写清单，一样使用markdown书写格式。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
WWW.ANXKJ.TOP
暂无评论内容