(开源)OneHome

约 1693 字大约 6 分钟

2026-09-10

OneHome

一个基于 Vue 3 + Vite 构建的粉色系个人主页 / 博客开源项目，所有页面内容（首页、公告、文章、友情链接）完全由 Markdown 驱动——不改代码、不重启服务，改 .md 文件即改页面。

项目名：One Home · 开源名：vuepress-theme-onehome

一个基于 Vue 3 + Vite 构建的粉色系个人主页 / 博客开源项目，所有页面内容（首页、公告、文章、友情链接）完全由 Markdown 驱动——不改代码、不重启服务，改 .md 文件即改页面。

特性

低饱和粉色系主题，高级不艳俗；渐变背景 + 圆润 Q 弹的微交互（站酷快乐体，加载失败自动回退系统圆体）
纯静态渲染，无重滤镜动画，性能友好
首页完全由 home.md 驱动：昵称、头像、简介、个人链接、分组链接一键编排；头像带旋转渐变边框，鼠标悬停时头像逆时针旋转 360° 并放大、边框全程跟随，移开后还原
公告栏：announcement.md 一条 Frontmatter 即可开关
文章写作：posts/ 目录放 .md 即发布，支持标签、分类、日期
文档中心模式：docs: /docs 一个字段即可把一组文章变成带侧栏的文档站（章节自动生成 /docs/1、/docs/2…）
自定义文章路径：url: /my-post 直接指定文章的访问地址，摆脱固定目录
文章加密：password 字段一键加密，输入密码才能阅读
友情链接：friends.md 声明式友链卡片，头像支持透明图白底显示、加载失败自动回退白底粉字圆标
短链接：shortlinks.md 一个文件配置，/Heflt 这样的短地址直达任意链接；站外新标签页、站内本页跳转；路径自由定义（大小写字母/数字// 等）
短链接确认页：访问短链接先显示确认卡片（防止误触、避免浏览器拦截自动弹窗），确认后跳转；标签页标题显示「短链接确认 | 网站名称」，绝不会误显示「文章不存在」
防洪提示：检测到 QQ / 微信等内置浏览器访问短链接时弹出「复制链接到浏览器打开」提示，防外链被拦截；默认仅短链接，可配置为全站生效或关闭
互动小功能：抽奖轮盘、投票，一行 Markdown 即可嵌入
代码高亮、图片灯箱、文章目录、返回顶部、一键收藏 / 分享 / 复制链接
站内链接无刷新跳转，站外链接新标签页打开
响应式布局，移动端友好；history 路由，URL 干净

环境要求

Node.js ≥ 18（Vite 5 要求）

快速开始

npm install
npm run dev

启动后访问 http://localhost:5173（端口被占用时 Vite 会自动 +1）。

常用命令

命令	作用
`npm run dev`	本地开发（热更新）
`npm run build`	生产构建（产物在 `dist/`）
`npm run preview`	本地预览构建产物

构建与部署

npm run build
npm run preview

产物在 dist/，纯静态文件可部署到任意静态托管（GitHub Pages、Vercel、Nginx、对象存储等）。项目使用 history 路由，部署时请将未知路径回退到 index.html（详见《使用文档》部署章节）。

内容管理一览

所有内容都在 src/content/ 下，纯 Markdown：

文件	作用
`home.md`	首页：昵称、头像、简介、链接分组、站点标题、顶栏按钮与功能开关、短链接开关、页脚链接
`announcement.md`	公告栏内容与开关（`enabled: false` 即可关闭）
`posts/*.md`	文章 / 文档章节，Frontmatter 支持 `title`、`date`、`tags`、`cover`、`url`、`docs`、`password` 等
`friends.md`	友情链接卡片声明
`shortlinks.md`	短链接配置（不生成页面，仅配置生效）

常用 Frontmatter 示例：

---
title: 文章标题
date: 2026-08-20
tags: 标签1, 标签2
url: /my-post          # 可选：自定义访问路径
password: 123456       # 可选：加密
---

正文……

# 文档中心（写在 docs 目录的入口文章上）
---
title: 文档中心
date: 2026-01-01
docs: /docs
---

docs: /docs 表示本文章是一组文档的入口：它本身位于 域名/docs/，同目录下的其他 .md 自动成为章节（/docs/1、/docs/2…），页面左侧自动生成文档列表。

详细字段说明见《使用文档》。

站点页面一览

页面	地址	说明
首页	`/home`（`/` 自动跳转）	个人资料 + 链接胶囊
博客	`/blog`	全部文章卡片
归档	`/archives`	按年 → 月归档
分类	`/categories`	按标签分类
友情链接	`/friends`	友链卡片墙
文章 / 文档	`/article/xxx`、`/docs/…` 或自定义 `url`	单篇 / 文档章节
短链接	`/Heflt` 等自定义路径	短链接确认页跳转

除短链接外，以上页面均由 Markdown 内容自动生成，无需手动配置路由。

文档

使用文档（在新窗口打开）——给内容作者：怎么写首页、文章、友链、文档中心、加密、部署
开发文档（在新窗口打开）——给开发者：项目结构、路由与渲染原理、Frontmatter 解析、如何扩展

目录结构

pink-profile/               # 项目文件夹（名称可自定义，与开源名无关）
├─ index.html               # 入口 HTML（引入站酷快乐体）
├─ vite.config.js
├─ src/
│  ├─ main.js               # 入口：读取 home.md 设置站点标题 / 图标
│  ├─ App.vue               # 顶层框架（顶栏 / 浮动按钮 / 公告）
│  ├─ router.js             # history 路由（含文章动态路由）
│  ├─ style.css             # 全局样式与主题变量
│  ├─ content/              # ★ 所有内容（Markdown）
│  │  ├─ home.md            # 首页
│  │  ├─ announcement.md    # 公告
│  │  ├─ friends.md         # 友情链接
│  │  ├─ shortlinks.md      # 短链接配置（不生成页面）
│  │  └─ posts/             # 文章 / 文档章节
│  ├─ components/           # 顶栏、文章卡片、友链卡片、目录、灯箱、抽奖、投票、
│  │                        # 密码弹窗、分享、短链接确认页、防洪遮罩等组件
│  ├─ utils/
│  │  ├─ markdown.js        # Frontmatter 解析、标记化、代码高亮、防 XSS
│  │  ├─ posts.js           # ★ 文章索引：加载所有 md、解析字段、生成路由表与文档列表
│  │  ├─ shortlinks.js      # 短链接解析与防洪配置
│  │  └─ usePageTitle.js    # 标签页标题（文章标题 | 网站名称）
│  └─ views/                # 首页 / 文章 / 博客列表 / 归档 / 分类 / 友链页面

技术栈

Vue 3（<script setup>）+ Vue Router（history 模式）
Vite + @vitejs/plugin-vue
marked + DOMPurify（Markdown 渲染与安全过滤）
highlight.js（代码高亮）
qrcode（分享二维码，动态加载）

开源协议

本项目基于 MIT License（在新窗口打开）开源。

免责声明： 本项目按“原样”提供，作者不提供任何明示或暗示的担保。在任何情况下，作者均不对因使用本项目而产生的任何索赔、损害或其他责任负责。