[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"post-mixblog-documentation":3},{"success":4,"message":5,"frontmatter":6,"content":13},true,"获取成功",{"slug":7,"title":8,"date":9,"description":10,"tags":11,"published":4},"mixblog-documentation","MixBlog 使用文档","2025-11-28","MixBlog  是我独立开发的首个完整项目，基于 Nuxt 构建，本文是该项目的使用文档。目前仍有许多的不足之处，欢迎指出！",[12],"其他","## 前言\n\n[MixBlog（拼好站）](https:\u002F\u002Fgithub.com\u002Fzhengweixin0101\u002FMixBlog)是我独立开发的首个完整项目，基于 Nuxt 构建。由于很多页面样式都参考了其他不同的网站，故命名为“**拼好站**”。目前仍有许多的不足之处，欢迎指出！\n\n> 项目比较随意，没按版本号，要是按版本来讲，目前应该算是v4\n>\n> v1：纯静态博客\n>\n> v2：在原先基础上改为动态，前后端分离\n>\n> v3：调整了部分接口，添加了说说和音乐页\n>\n> v4：前端基本无改动，主要完善了后端并调整大量接口\n\n## 使用\n\n1. 克隆仓库：https:\u002F\u002Fgithub.com\u002Fzhengweixin0101\u002FMixBlog\n2. 安装依赖\n\n```bash\nnpm install\n```\n\n3. 本地预览\n\n```bash\nnpm run devv\n```\n\n## 配置\n\n配置都在 `\u002FsiteConfig` 目录下\n\n### 主要配置\n\n`\u002FsiteConfig\u002Fmain.js`\n\n#### 基本信息\n\n| 参数        | 说明                       |\n| ----------- | -------------------------- |\n| apiUrl      | 后端API地址（**重要**）    |\n| title       | 站点标题                   |\n| description | 站点描述                   |\n| keywords    | 站点关键词（英文逗号分隔） |\n| url         | 博客地址（**重要**）       |\n\n#### 图标配置\n\nicons（可选）\n| 参数 | 说明 |\n| - | - |\n| rel | 图标关系（如 icon、shortcut icon） |\n| type | 文件类型（如 image\u002Fpng、image\u002Fsvg+xml） |\n| href | 图标文件地址 |\n| sizes | 图标尺寸（如 96x96、180x180） |\n\n#### 作者信息\n\nauthor\n\n| 参数        | 名称     |\n| ----------- | -------- |\n| name        | 名称     |\n| avatar      | 头像链接 |\n| description | 自我介绍 |\n\n#### 社交链接\n\nsocialLinks\n\n| 参数     | 描述         |\n| -------- | ------------ |\n| icon     | 图标名       |\n| text     | 显示文字     |\n| href     | 链接         |\n| external | 是否外部链接 |\n\n> 图标使用[阿里巴巴图标库](https:\u002F\u002Fwww.iconfont.cn\u002F)，选择图标加入到项目后，须更新后面的`thirdParty.iconfont`，下同\n>\n> external：true 表示新标签打开\n\n#### 导航栏\n\nnavItems\n\n| 参数  | 说明         |\n| ----- | ------------ |\n| label | 菜单显示文字 |\n| href  | 路径         |\n| icon  | 图标类名     |\n\n#### 收款码\n\ndonate\n\n用于文章底部展示赞助按钮，不填写则不显示按钮。\n\n| 参数   | 说明                  |\n| ------ | --------------------- |\n| name   | 方式名称              |\n| qrCode | 二维码图片（1:1最佳） |\n\n#### 第三方服务\n\nthirdParty\n\n| 参数         | 说明                     |\n| ------------ | ------------------------ |\n| iconfont     | 阿里 Iconfont 图标库地址 |\n| twikooEnvId  | Twikoo 环境地址          |\n| umami.js     | Umami 统计脚本地址       |\n| umami.siteID | Umami 网站 ID            |\n\n##### iconfont\n\n可以参考这篇文章（随便搜的） ：[如何将阿里图标库的引入项目中？](https:\u002F\u002Fblog.csdn.net\u002Fqq_40976321\u002Farticle\u002Fdetails\u002F106023738)\n\n##### twikooEnvId\n\n评论系统，暂时只支持twikoo，计划支持更多。\n部署方式见[官方文档](https:\u002F\u002Ftwikoo.js.org\u002Fintro.html)\n\n##### Umami\n\nUmami访问统计相关配置，关于页面需要使用相关数据，建议自己部署一个。\n\n可以在 Vercel 零成本部署，教程很多，自行搜索。\n\n部署后进入设置添加网站，然后获取跟踪代码，如下\n\n```html\n\u003Cscript defer src=\"https:\u002F\u002Fstatistics.zhengweixin.top\u002Fscript.js\" data-website-id=\"7441ce23-3587-41b6-8919-e42932fc65d7\">\u003C\u002Fscript>\n```\n\n其中，src的js链接就是统计脚本地址，\n\n`data-website-id`就是网站ID。\n\n### 页面配置\n\n#### 友链\n\n`\u002FsiteConfig\u002Flinks.js`\n\n懒得写了，详情见配置文件内的注释。\n\n#### 关于\n\n`\u002FsiteConfig\u002Fabout.js`\n\n不想写了，直接看着改吧。就说明一下部分内容，其他的应该挺通俗易懂的。\n\n`author.tags`：建议左右各三个效果最佳，要增加可自行调整代码\n`helloCard`：**text**为卡片里显示的文字，**colors**为每层圆圈的颜色，要几个圈就设置几个颜色。\n`umami`：\n\n| 参数       | 说明                           |\n| ---------- | ------------------------------ |\n| cover      | 显示的背景图                   |\n| url        | 站点地址                       |\n| shareUrl   | 共享链接                       |\n| siteId     | 站点id                         |\n| token      | 账号token                      |\n| createTime | 网站建立时间，用于计算总访问量 |\n\n> token获取可见我的这篇文章：[在博客中添加 Umami 数据展示](https:\u002F\u002Fzhengweixin.top\u002Fposts\u002Fuse-umami-api-on-nuxt)\n>\n> 建议把网站添加在团队里，然后创建一个只读账号加入团队，使用只读账号的token。\n\n#### 说说\n\n> Talks页面在新版本中已停止使用Memos API，采用自建API，与文章API合并。\n> 可前往后台说说管理页面实现从Memos导入说说。\n\n## 后端部署\n\n需要的数据库：**Postgres**（数据存储）、**Redis**（缓存及存储token）\n\n> 均可在**Vercel**上免费创建\n\nGithub：[https:\u002F\u002Fgithub.com\u002Fzhengweixin0101\u002FBlog-API](https:\u002F\u002Fgithub.com\u002Fzhengweixin0101\u002FBlog-API)\n\nDocker：`zhengweixin\u002Fblog-api:latest`\n\n> 接口文档见仓库 README.md\n\n可使用 **Render**、**vercel**、**Fly.io**、**Zeabur** 等支持node的免费平台部署，\n\n添加环境变量：\n\n```bash\nDATABASE_URL='Postgre连接URL'\nREDIS_URL='Redis连接URL'\n```\n\n## 后台部署\n\n博客还提供一个简易的后台管理：[blog-admin](https:\u002F\u002Fgithub.com\u002Fzhengweixin0101\u002Fblog-admin)\n\n可直接在 Vercel、Netlify 等各大平台免费部署。\n\n修改配置文件`site.config.js`，里面都有注释，这里不解释了。\n\n正确配置 API 地址之后，会使用首次登录提交的账号密码自动创建。"]