本文档介绍如何维护和更新部署在 docs.jftcloud.cn 的移动端文章展示页面。
/home/jft/docs.jftcloud.cn/
├── index.html # 主入口文件
├── css/ # 样式文件
├── js/ # JavaScript 文件
├── content/ # 内容目录
│ ├── articles.json # 文章索引（重要！）
│ ├── *.md # Markdown 文档
│ └── images/ # 图片目录
└── 96446479b9a397f893afe68326339762.txt # 微信验证文件
/home/workspace/project/mobile_page/
├── index.html
├── README.md
├── css/
├── js/
└── content/
├── articles.json
├── *.md
└── images/
推荐在本地编辑和预览，然后再部署到服务器。
本地目录结构：
/home/workspace/project/mobile_page/
├── index.html # 主入口
├── README.md # 本文档
├── css/ # 样式文件
├── js/ # JavaScript 文件
└── content/ # 内容目录
├── articles.json # 文章索引
├── *.md # Markdown 文档
└── images/ # 图片目录
本地工作流程：
-
创建/编辑 Markdown 文件
cd /home/workspace/project/mobile_page/content nano your-article.md -
添加图片
cp /path/to/photo.jpg /home/workspace/project/mobile_page/content/images/
-
更新文章索引
nano /home/workspace/project/mobile_page/content/articles.json
-
部署到服务器
# 在项目根目录执行 cd /home/workspace/project/mobile_page rsync -avz . 220-root:/home/jft/docs.jftcloud.cn/ --exclude='.claude'
ssh 220-rootcd /home/jft/docs.jftcloud.cn将你的 .md 文件上传到服务器的 content/ 目录：
# 方式1：从本地上传（在你的本地机器执行）
rsync -avz /path/to/your/article.md 220-root:/home/jft/docs.jftcloud.cn/content/
# 方式2：直接在服务器上编辑
ssh 220-root
cd /home/jft/docs.jftcloud.cn/content
nano your-article.md
# 或者使用 vim
vim your-article.md如果有文章相关的图片，上传到 content/images/ 目录：
# 创建图片目录（如果不存在）
ssh 220-root "mkdir -p /home/jft/docs.jftcloud.cn/content/images"
# 上传图片
rsync -avz /path/to/images/*.jpg 220-root:/home/jft/docs.jftcloud.cn/content/images/
# 或者单张图片
rsync -avz /path/to/image.jpg 220-root:/home/jft/docs.jftcloud.cn/content/images/这是最重要的一步！ 必须更新 articles.json 文件，新文章才会出现在列表中。
ssh 220-root
cd /home/jft/docs.jftcloud.cn/content
nano articles.jsonarticles.json 文件格式：
[
{
"title": "文章标题",
"path": "content/your-article.md",
"date": "2026-02-24"
},
{
"title": "另一篇文章",
"path": "content/another-article.md",
"date": "2026-02-20"
}
]注意事项：
title: 文章标题，会在列表中显示path: Markdown 文件的相对路径，必须是content/xxx.md格式date: 发布日期，格式为YYYY-MM-DD- 列表按日期降序排列（最新的在前）
- 如果有多篇文章，注意逗号和 JSON 格式正确
示例：添加新文章
[
{
"title": "我的新文章",
"path": "content/my-new-article.md",
"date": "2026-02-24"
},
{
"title": "岳阳王氏重修宗谱序",
"path": "content/岳阳王氏重修宗谱序.md",
"date": "2026-02-20"
},
{
"title": "宋序",
"path": "content/宋明序.md",
"date": "2026-02-18"
},
{
"title": "三氏宗谱·凡例",
"path": "content/凡例.md",
"date": "2026-02-15"
}
]访问 https://docs.jftcloud.cn/ 查看文章列表，确认新文章已显示。
ssh 220-root "cat /home/jft/docs.jftcloud.cn/content/articles.json"ssh 220-root "ls -lh /home/jft/docs.jftcloud.cn/content/*.md"# 1. 删除 Markdown 文件
ssh 220-root "rm /home/jft/docs.jftcloud.cn/content/old-article.md"
# 2. 从 articles.json 中移除对应条目
ssh 220-root
cd /home/jft/docs.jftcloud.cn/content
nano articles.json
# 删除对应的 JSON 对象ssh 220-root
cd /home/jft/docs.jftcloud.cn/content
nano your-article.md
# 修改后保存即可，无需重启服务# 上传整个目录
rsync -avz /path/to/local/content/ 220-root:/home/jft/docs.jftcloud.cn/content/
# 上传多个文件
rsync -avz file1.md file2.md file3.md 220-root:/home/jft/docs.jftcloud.cn/content/在项目根目录执行，同步所有内容到服务器：
cd /home/workspace/project/mobile_page
rsync -avz . 220-root:/home/jft/docs.jftcloud.cn/ --exclude='.claude'参数说明：
-a归档模式，保持文件属性-v显示详细信息-z压缩传输--exclude='.claude'排除本地配置目录
- 使用中文或英文文件名
- 避免特殊字符
- 示例：
我的文章.md或my-article.md
# 文章标题
这里是文章正文...
## 二级标题
### 三级标题
- 列表项1
- 列表项2
**粗体** 和 *斜体*网站支持完整的 Markdown 标准图片语法。
content/
├── articles.json
├── example.md
└── images/ # 建议统一放在这里
├── photo1.jpg
├── photo2.png
└── ...
1. 基础语法
2. 带标题的图片
3. 网络图片
4. 本地图片（推荐）
5. 绝对路径
- ✅ 懒加载 - 自动添加
loading="lazy"，提升页面加载速度 - ✅ 响应式 - 图片自动适应屏幕宽度
- ✅ 居中显示 - 图片自动居中对齐
- ✅ 圆角美化 - 8px 圆角效果
- ✅ 异步解码 - 优化渲染性能
- ✅ 支持格式 - JPG、PNG、GIF、WebP 等常见格式
# 我的文章
文章正文内容...
## 配图
- 主页列表：https://docs.jftcloud.cn/
- 直接访问文章：https://docs.jftcloud.cn/?md=content/xxx.md
- 大字版切换：点击右下角"大"按钮
- 检查
articles.json是否正确更新 - 检查 JSON 格式是否正确（逗号、引号）
- 硬刷新浏览器（Ctrl+Shift+R）
- 检查图片路径是否正确
- 确认图片文件已上传到服务器
- 检查文件名大小写是否匹配
这是 Cloudflare CDN 缓存问题，更新 index.html 中的版本号即可解决：
ssh 220-root
cd /home/jft/docs.jftcloud.cn
nano index.html
# 找到 ?v=xxx 的部分，修改数字即可- 静态网站：纯 HTML/CSS/JS，无需数据库
- Markdown 渲染：使用 marked.js 在浏览器端渲染
- CDN 缓存：Cloudflare 自动缓存，更新内容可能需要几分钟生效
- 响应式设计：支持手机、平板、桌面设备
- 大字版模式：支持大号字体，适合老年人阅读
如有问题，请联系管理员。