M3DEBlog

基于 Material Design 3 的轻量个人博客模板，前后端一体，支持文章、留言、评论、点赞。

功能

• 个人主页、我的项目（Markdown 渲染）
• 文章系统（自动读取、点赞、评论、搜索）
• 友情链接、留言板、联系作者
• 暗色模式（跟随系统 / 浅色 / 深色）
• 响应式布局（桌面端 / 移动端）

技术栈

层级	技术
UI	Material Design 3（@material/web）
前端	Vue 3 + Vite
后端	Node.js + Express

快速开始

1. 安装依赖

npm run install:all

2. 启动开发服务器

同时启动前端（Vite）和后端（Express），支持热更新：

npm start

• 前端：http://localhost:5173
• 后端：http://localhost:3001

单独启动

npm run dev          # 仅前端
npm run server:dev   # 仅后端（开发模式）

内容管理

文章

在 public/content/articles/ 目录下新建 .md 文件，构建后自动出现在文章列表。文件支持 YAML frontmatter：

---
title: 文章标题
date: 2024-01-01
---

正文内容...

• title：文章标题（列表与详情页显示）
• date：发布日期（用于排序，格式 YYYY-MM-DD）

首页与项目

文件	说明
public/content/home.md	主页个人简介
public/content/myproject.md	我的项目内容

两者均为 Markdown 文件，直接编辑即可；修改后需重新构建才能生效。

数据存储

服务端数据保存在 server/data/ 下：

文件	内容
messages.json	留言数据
likes.json	点赞数据
comments.json	评论数据

站点配置

联系方式（联系作者页）

编辑 src/config/site.js，所有联系方式的显示与交互都由此文件控制：

export const siteConfig = {
  contact: [
    { key: 'email', label: '邮箱', type: 'copy', icon: 'email', value: 'your-email@example.com' },
    { key: 'qq', label: 'QQ', type: 'copy', icon: 'forum', value: '123456789' },
    { key: 'wechat', label: '微信', type: 'copy', icon: 'sms', value: 'your-wechat-id' },
    { key: 'x', label: 'X', type: 'link', icon: 'open_in_new', value: 'https://x.com/yourname' },
    { key: 'github', label: 'Github', type: 'link', icon: 'open_in_new', value: 'https://github.com/yourname' }
  ]
}

字段	说明
key	唯一标识（不要重复）
label	页面显示的名称
type	copy = 点击复制 value；link = 点击在新标签页打开 value 链接
icon	Material Symbols 图标名（图标列表）
value	联系方式的值（邮箱 / QQ 号 / 微信 ID / 链接地址）

用法：

• 改成自己的联系方式：把 value 换成你的信息即可
• 隐藏某一条：把对应 value 留空（''），该条目自动不显示
• 新增条目：按格式复制一行并修改字段；type: 'link' 的条目点击跳转，type: 'copy' 的条目点击复制
• 全部留空时，联系作者页会显示"暂未填写联系方式"提示

生产部署

1. 构建前端

npm run build

产物输出到 dist/ 目录。

2. 配置后端环境变量

编辑 server/.env：

PORT=3001
NODE_ENV=production
ADMIN_PASSWORD=你的管理员密码
JWT_SECRET=你的JWT密钥

NODE_ENV=production 是必须的，后端会根据此变量托管 dist/ 静态文件。

3. 启动生产服务器

npm run server

服务器会在 http://localhost:3001 同时提供前端页面和 API 接口。

4. 内网穿透（可选）

使用 Cloudflare Tunnel 将本地服务暴露到公网：

cloudflared tunnel --url http://localhost:3001

5. 开机自启（Windows，可选）

用 PM2 守护后端，配合 pm2-windows-startup 实现登录后自动恢复：

cd server
pm2 start index.js --name M3DEBlog
pm2 save

# 安装开机自启（登录时自动 pm2 resurrect）
npm install -g pm2-windows-startup
pm2-startup install

Cloudflare 隧道可安装为 Windows 服务，随系统启动：

cloudflared service install

注意：使用 PM2 后不要再手动 node index.js 启动后端，会抢占端口。修改启动方式后记得 pm2 save。

环境变量

后端（server/.env）

变量	说明	默认值
PORT	服务端口	3001
NODE_ENV	运行环境（生产设为 production）	development
ADMIN_PASSWORD	管理员密码	-
JWT_SECRET	JWT 密钥	-

前端（.env）

变量	说明	默认值
VITE_API_BASE_URL	API 基础地址	/api

API 接口

留言板

方法	路径	说明
GET	/api/messages	获取所有留言
POST	/api/messages	添加新留言
PUT	/api/messages/:id	更新留言
DELETE	/api/messages/:id	删除留言
POST	/api/messages/:id/like	点赞留言
POST	/api/messages/:id/reply	回复留言

文章

方法	路径	说明
GET	/api/articles/:slug/likes	获取文章点赞信息
POST	/api/articles/:slug/likes	切换文章点赞
GET	/api/articles/:slug/comments	获取文章评论
POST	/api/articles/:slug/comments	添加文章评论
DELETE	/api/articles/:slug/comments/:commentId	删除文章评论

管理员

方法	路径	说明
POST	/api/admin/login	管理员登录
GET	/api/admin/check	检查登录状态
POST	/api/admin/logout	管理员登出
DELETE	/api/admin/messages/:id	删除留言
DELETE	/api/admin/articles/:slug/comments/:commentId	删除文章评论