前言
MixBlog（拼好站）是我独立开发的首个完整项目，基于 Nuxt 构建。由于很多页面样式都参考了其他不同的网站，故命名为“拼好站”。目前仍有许多的不足之处，欢迎指出！
使用
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最佳） |
第三方服务
thirdParty
| 参数 | 说明 |
|---|---|
| iconfont | 阿里 Iconfont 图标库地址 |
| twikooEnvId | Twikoo 环境地址 |
| umami.js | Umami 统计脚本地址 |
| umami.siteID | Umami 网站 ID |
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。
页面配置
APPs
/siteConfig/apps.js
该页面也可作为一个友链页面，自行修改页面/pages/apps.vue里的标题。
| 参数 | 说明 |
|---|---|
| name | 标题 |
| description | 描述 |
| link | 链接 |
About
/siteConfig/about.js
不想写了，直接看着改吧。就说明一下部分内容，其他的应该挺通俗易懂的。
author.tags：建议左右各三个效果最佳，要增加可自行调整代码
helloCard：text为卡片里显示的文字，colors为每层圆圈的颜色，要几个圈就设置几个颜色。
umami：
| 参数 | 说明 |
|---|---|
| cover | 显示的背景图 |
| url | 站点地址 |
| shareUrl | 共享链接 |
| siteId | 站点id |
| token | 账号token |
| createTime | 网站建立时间，用于计算总访问量 |
token获取可见我的这篇文章：在博客中添加 Umami 数据展示
建议把网站添加在团队里，然后创建一个只读账号加入团队，使用只读账号的token。
Music
/siteConfig/music.js
就两个参数：
listFile.basic 音乐文件根路径
listFile.path 音乐列表文件路径（相对于 listFile.basic）
示例：
listFile: {
basic: 'https://gh-proxy.org/https://raw.githubusercontent.com/zhengweixin0101/CDN/refs/heads/music',
path: '/music/music_list.json',
}
列表文章需参照我的格式，可以向我一样使用 Github Actions 实现上传音乐文件后自动处理。 https://github.com/zhengweixin0101/CDN/blob/music/.github/workflows/flac_process.yml
Talks页面在新版本中已停止使用Memos API，采用自建API，与文章API合并。 可前往后台说说管理页面实现从Memos导入说说。
后端部署
仓库：Blog-API
可使用 Render、vercel 等支持node的平台部署，
Docker部署也可以：zhengweixin/blog-api:latest
添加环境变量：
DATABASE_URL='Postgre连接URL'
API_SECRET='访问密钥，进行写入操作需要提供'
#可选
REDIS_URL='Redis连接URL，用于缓存'
后台部署
博客还提供一个简易的后台管理：blog-admin
可直接在 Vercel、Netlify 等各大平台免费部署。
修改配置文件site.config.js，里面都有注释，这里不解释了。
进入后台需要填写访问密钥，就是前面后端环境变量设置的。
注意：密钥连续错误三次自动封禁请求IP十年！！！
本人操作可以重启服务解封
