MixBlog 使用文档

ShinX 发布于 2025-08-23
其他

前言

MixBlog（拼好站）是我独立开发的首个完整项目，基于 Nuxt 构建。由于很多页面样式都参考了其他不同的网站，故命名为“拼好站”。目前仍有许多的不足之处，欢迎指出！

使用

  1. 克隆仓库：https://github.com/zhengweixin0101/MixBlog
  2. 安装依赖
pnpm install
  1. 本地预览
pnpm dev
  1. SSG静态构建
pnpm generate
  1. SSR服务端渲染（推荐，部署vercel）
pnpm build

配置

主要的配置都在 /siteConfig 目录下，正常使用无需修改代码。

主要配置

/siteConfig/main.js

基本信息

参数 说明
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 图标类名

文章接口

postsData（重要）

参数 说明
postsList 获取文章列表
postContent 获取文章内容（需拼接 slug）

使用我的API获取内容，

postsList 填写 https://你部署的api/api/list

postContent 填写 https://你部署的api/api/article?slug=

想要不用api纯静态部署以及api部署方式见后文

第三方服务

thirdParty

参数 说明
iconfont 阿里 Iconfont 图标库地址
twikooEnvId Twikoo 环境地址
memosApi Memos API 地址
umami.js Umami 统计脚本地址
umami.siteID Umami 网站 ID
iconfont

可以参考这篇文章（随便搜的） ：如何将阿里图标库的引入项目中？

twikooEnvId

评论系统，暂时只支持twikoo，后续计划支持更多。 部署方式见官方文档

Memos

说说页面需要使用，搭建方式自行查找。

由于Memos的api可能更新，如/api/v1/memos不能返回全部数据，请自行判断该填写的链接。

如不需说说页面，可删除该配置和/pages/talks.vue文件

理论上只要填写结构为下面这样的json就可以正常展示，后期计划不依赖Memos，使用本地文件或数据库。

"name": "memos/APW2in8d2nAnSk2ttpRWf7",
"createTime": "2025-08-21T12:12:39Z",
"nodes": [
  {
    "type": "PARAGRAPH",
    "paragraphNode": {
      "children": [
        {
          "type": "TEXT",
          "textNode": {
            "content": "这是第一条说说。"
          }
        }
      ]
    }
  },
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 网站建立时间，用于计算总访问量
cacheDuration 数据缓存时间

token获取可见我的这篇文章：在博客中添加 Umami 数据展示

建议把网站添加在团队里，然后创建一个只读账号加入团队，使用只读账号的token。

API部署

Fork我的这个仓库：Blog-Article-API

推荐使用 Render 部署。

启动命令填写 node server.js 然后添加环境变量：

DATABASE_URL='postgre数据库URL，可以使用 Neon'
API_SECRET='填写访问密钥，进行写操作需要提供'

为了防止render自动休眠，还需要在 uptimerobot 添加一个监控。

无API部署

博客内置了json生成脚本，generate构建时自动生成文章数据。

把文章的MD文件放在/posts目录下。

使用此方法须使用pnpm generate 构建，每次跟新文章需要重新部署两次。

你也手动执行 pnpm generate-post-json ，把生成的json数据放到其他地方。

使用这种方法需要main.js：

postsList填写：https://博客域名/data/posts-list.json

postContent填写：https://博客域名/data/posts/（斜杠结尾）

还需要修改 /pages/posts/[slug].vue 文件，

找到 //获取文章 部分，以移动至最前面，

在 ${route.params.slug} 后面添加.json，如图：

修改文章详情页面

所有的服务都可以免费部署，所所以不推荐这种方式，只是多给一种选择。

后台部署

博客还提供一个简易的后台管理：blog-admin

使用 pnpm generate 构建静态文件部署即可。

需填写环境变量：

NUXT_PUBLIC_API_BASE = 'https://API域名/api'

更新文章需要填写部署API时在环境变量填的密钥，尽可能设置复制且不要外传。

为了方便迁移数据，博客还内置了一键上传脚本，

正确填写配置文件里的文章信息后，执行 pnpm upload 即可一键上传/posts文件夹下的md文件到数据库。

注意：密钥连续错误三次自动封禁请求IP十年！！！

本人操作可以重启服务解封

© 2025 ShinX. All rights reserved.