前言
MixBlog（拼好站）是我独立开发的首个完整项目，基于 Nuxt 构建。由于很多页面样式都参考了其他不同的网站，故命名为“拼好站”。目前仍有许多的不足之处，欢迎指出！
项目比较随意，没按版本号，要是按版本来讲，目前应该算是v4
v1：纯静态博客
v2：在原先基础上改为动态，前后端分离
v3：调整了部分接口，添加了说说和音乐页
v4：前端基本无改动，主要完善了后端并调整大量接口
使用
npm install
- 本地预览
npm run devv
配置
配置都在 /siteConfig 目录下
主要配置
/siteConfig/main.js
基本信息
| 参数 | 说明 |
|---|---|
| apiUrl | 后端API地址（重要） |
| title | 站点标题 |
| description | 站点描述 |
| keywords | 站点关键词（英文逗号分隔） |
| url | 博客地址（重要） |
图标配置
icons（可选）
| 参数 | 说明 |
|---|---|
| rel | 图标关系（如 icon、shortcut icon） |
| type | 文件类型（如 image/png、image/svg+xml） |
| href | 图标文件地址 |
| sizes | 图标尺寸（如 96x96、180x180） |
作者信息
author
| 参数 | 名称 |
|---|---|
| name | 名称 |
| avatar | 头像链接 |
| description | 自我介绍 |
社交链接
socialLinks
| 参数 | 描述 |
|---|---|
| icon | 图标名 |
| text | 显示文字 |
| href | 链接 |
| external | 是否外部链接 |
图标使用阿里巴巴图标库，选择图标加入到项目后，须更新后面的
thirdParty.iconfont，下同external：true 表示新标签打开
导航栏
navItems
| 参数 | 说明 |
|---|---|
| label | 菜单显示文字 |
| href | 路径 |
| icon | 图标类名 |
收款码
donate
用于文章底部展示赞助按钮，不填写则不显示按钮。
| 参数 | 说明 |
|---|---|
| name | 方式名称 |
| qrCode | 二维码图片（1:1最佳） |
外部链接弹窗
externalLinkConfirm
开启后跳转至外部链接时将显示弹窗确认
| 参数 | 说明 |
|---|---|
| enabled | 总开关 |
| whitelist | 白名单（支持精确域名和通配子域） |
第三方服务
thirdParty
| 参数 | 说明 |
|---|---|
| iconfont | 阿里 Iconfont 图标库地址 |
| twikoo.script | Twikoo script链接 |
| twikoo.EnvId | Twikoo 环境地址 |
| umami.url | Umami 站点地址 |
| umami.script | Umami 统计脚本地址 |
| umami.token | 只读账号token |
| umami.siteId | 站点id |
| umami.createTime | 网站建立时间，用于计算总访问量 |
iconfont
可以参考这篇文章（随便搜的） ：如何将阿里图标库的引入项目中？
twikooEnvId
评论系统，暂时只支持twikoo，计划支持更多。 部署方式见官方文档
Umami
Umami访问统计相关配置，关于页面需要使用相关数据，建议自己部署一个。
可以在 Vercel 零成本部署，教程很多，自行搜索。
部署后进入设置添加网站，然后获取跟踪代码，如下
<script defer src="https://statistics.zhengweixin.top/script.js" data-website-id="7441ce23-3587-41b6-8919-e42932fc65d7"></script>
其中，src的js链接就是统计脚本地址，
data-website-id就是网站ID。
页面配置
友链
/siteConfig/links.js
懒得写了，详情见配置文件内的注释。
关于
/siteConfig/about.js
不想写了，直接看着改吧。就说明一下部分内容，其他的应该挺通俗易懂的。
author.tags：建议左右各三个效果最佳，要增加可自行调整代码
helloCard：text为卡片里显示的文字，colors为每层圆圈的颜色，要几个圈就设置几个颜色。
umami：
| 参数 | 说明 |
|---|---|
| cover | 显示的背景图 |
| shareUrl | 共享链接 |
token获取可见我的这篇文章：在博客中添加 Umami 数据展示
建议把网站添加在团队里，然后创建一个只读账号加入团队，使用只读账号的token。
说说
Talks页面在新版本中已停止使用Memos API，采用自建API，与文章API合并。 可前往后台说说管理页面实现从Memos导入说说。
后端部署
需要的数据库：Postgres（数据存储）、Redis（缓存及存储token）
均可在Vercel上免费创建
Github：https://github.com/zhengweixin0101/Blog-API
Docker：zhengweixin/blog-api:latest
接口文档见仓库 README.md
可使用 Render、vercel、Fly.io、Zeabur 等支持node的免费平台部署，
添加环境变量：
DATABASE_URL='Postgre连接URL'
REDIS_URL='Redis连接URL'
后台部署
博客还提供一个简易的后台管理：blog-admin
可直接在 Vercel、Netlify 等各大平台免费部署。
修改配置文件site.config.js，里面都有注释，这里不解释了。
正确配置 API 地址之后，会使用首次登录提交的账号密码自动创建。
