Memos Showcase - WordPress 插件

在 WordPress 中优雅地展示 Memos 公开备忘录，拥有专业的后台设置界面，支持完全自定义样式和布局。

---

✨ 功能特点

🎨 可视化后台设置

• 6 个设置标签页：服务器、显示、样式、布局、行为、文本
• 实时颜色选择器：点击即可选择颜色
• 即时预览：查看设置效果

🎯 显示样式

• 卡片式 - 带左侧装饰条的卡片布局
• 列表式 - 简洁的列表布局
• 时间线 - 带时间轴的展示
• 极简 - 最简洁的展示

📐 布局方式

• 默认 - 单列布局
• 网格 - 多列网格布局
• 瀑布流 - 自适应高度的瀑布流

🎨 完全自定义

• 主色调 / 辅助色
• 背景颜色 / 文字颜色 / 元信息颜色
• 圆角大小
• 字体选择（5 种预设字体）
• 字体大小 / 行高
• 间距 / 内边距 / 外边距

⚡ 高级功能

• 自动缓存 - 减少 API 请求，提高性能
• 懒加载 - 滚动到可视区域才加载
• 加载动画 - 淡入 / 滑入 / 无
• 悬停效果 - 上浮 / 阴影 / 边框高亮 / 无
• 响应式设计 - 完美适配移动端

📝 短代码支持

[memos_showcase]

---

📦 文件结构

memos-showcase/
├── memos-showcase.php          # 插件主文件
├── assets/
│   ├── showcase-style.css      # 前端样式
│   └── showcase-script.js      # 前端脚本
└── README.md                   # 说明文档

---

🚀 安装方法

方法 1：WordPress 后台上传

1. 压缩插件文件夹

   zip -r memos-showcase.zip memos-showcase/

2. 上传插件

   • 登录 WordPress 后台
   • 进入 插件 → 安装插件 → 上传插件
   • 选择 memos-showcase.zip
   • 点击 立即安装

3. 启用插件

   • 安装完成后点击 启用插件

方法 2：FTP 上传

1. 使用 FTP 连接到服务器
2. 上传 memos-showcase 文件夹到 wp-content/plugins/
3. 在 WordPress 后台启用插件

---

⚙️ 配置指南

第一步：服务器设置

1. 进入 Memos → 服务器设置
2. 填写 Memos 服务器地址，例如：

   http://192.168.1.100:5230

3. 可选：填写创建者 ID（只显示特定用户）
4. 选择可见性（推荐 PUBLIC）
5. 点击 保存设置
6. 点击 行为设置 设置缓存时间，默认是1小时，这个设置是比如你在备忘录里发了一条新的备忘然后过1小时wp插件才更新。

第二步：样式设置

1. 显示样式 - 选择卡片/列表/时间线/极简
2. 颜色设置 - 使用颜色选择器设置各种颜色
3. 字体设置 - 选择字体、大小、行高
4. 圆角大小 - 设置卡片圆角

第三步：布局设置

1. 布局方式 - 选择默认/网格/瀑布流
2. 列数 - 网格或瀑布流的列数
3. 间距 - 卡片之间的间距

第四步：使用短代码

在文章或页面中添加：

[memos_showcase]

或自定义参数：

[memos_showcase limit="5" style="card" layout="grid" columns="2"]

---

📖 使用方法

短代码参数

参数	说明	默认值
limit	显示数量	全局设置
style	显示样式	card/list/timeline/minimal
layout	布局方式	default/grid/masonry
columns	列数	1/2/3
show_date	显示日期	true/false
show_tags	显示标签	true/false

---

🎨 样式示例

示例 1：科技风格

主色调：#667eea
辅助色：#764ba2
圆角：12px
样式：卡片
布局：网格（2 列）

示例 2：极简风格

主色调：#333333
辅助色：#666666
圆角：0px
样式：极简

示例 3：时间线风格

主色调：#0070a8
辅助色：#00bcd4
圆角：8px
样式：时间线

---

❓ 常见问题

Q: 显示"加载失败"？

检查清单：

• [ ] Memos 服务器是否运行
• [ ] 服务器地址是否正确
• [ ] WordPress 服务器能否访问 Memos
• [ ] 防火墙是否阻止连接

Q: 数据不更新？

解决方法：

• 在后台设置中减少缓存时间
• 或手动清除浏览器缓存

Q: 可以自定义 CSS 吗？

A: 可以！在 外观 → 自定义 → 额外 CSS 中添加自定义样式。

---

📋 更新日志

v1.0.0 (2026-05-02)

• ✅ 初始版本发布
• ✅ 6 个设置标签页
• ✅ 4 种显示样式
• ✅ 3 种布局方式
• ✅ 完全自定义颜色
• ✅ 短代码支持
• ✅ 自动缓存
• ✅ 懒加载
• ✅ 响应式设计

---

📜 许可证

GPL v2 or later

---

📧 联系方式

• 官网：https://github.com/niudashebg/memos-showcase
• 文档：https://github.com/niudashebg/memos-showcase/blob/main/README.md
• 演示：https://blog.wcld.top