使用 OpenClaw + GitHub 实现博客自动化部署与性能优化
背景作为一个技术博客作者,每次写完文章都要手动执行一系列命令来部署: 12345678git add .git commit -m "new post"git pushssh servercd /path/to/bloggit pullhexo clean && hexo generate# 重启服务... 这个过程不仅繁琐,而且容易出错。更重要的是,每次部署都要手动操作,无法实现真正的持续集成。 为了解决这个问题,我引入了 OpenClaw 作为自动化助手,配合 GitHub 和 自动化部署脚本,实现了: ✅ 本地写完文章后一键提交 ✅ GitHub 自动触发服务器拉取最新代码 ✅ 自动执行 Hexo 生成和部署 ✅ 性能优化(Gzip 压缩、图片优化、缓存策略) ✅ 部署完成后自动通知 本文将详细介绍整个自动化部署流程的实现细节。 什么是 OpenClawOpenClaw 是一个开源的 AI 代理框架,能够: 访问本地文件系统 执行 Shell 命令 控制浏览器 管理 Git...
Space-V2 UI 重构 — Element Plus 迁移与 Speckit 规范流程实践
背景个人空间项目(Space)最初使用 Ant Design Vue 构建,随着时间推移,组件风格与设计诉求产生了明显偏差——界面偏重、配色不够统一,缺乏整体的「简约科技风」质感。因此发起了这次 UI 全量重构,核心目标: 组件库从 Ant Design Vue 迁移至 Element Plus 主色调统一为淡蓝(#409EFF 系列)+ 白色 建立完整的 SCSS 设计 Token 系统 不新增业务功能,仅重构样式与交互 整个过程严格遵循 Speckit 工程规范,从立项到交付形成了完整的文档链路。 什么是 SpeckitSpeckit 是一套面向 AI 辅助开发场景的结构化工程流程,核心理念是:先规范需求,再编码实现。它将一个功能的完整生命周期拆成五个有序阶段: 1Constitution → Specify → Plan → Tasks → Implement 每个阶段都有对应的脚本与文档模板,确保 AI 的每一步行为都有据可查、可复盘。 Speckit...
QUICK_START
个人空间项目 - 快速开始指南🎉 项目完成度已完成: 65% (5/8 核心阶段完成) ✅ Phase 1: Design System (完成)✅ Phase 2a: Database Schema (完成)✅ Phase 2b: Backend API Modules (完成)✅ Phase 3a: Frontend API Services (完成)✅ Phase 3b: Comment Components (完成)✅ Phase 4a: Markdown UI (完成)✅ Phase 4b: Posts UI (完成)✅ Phase 5: Router & Menu (完成)✅ Phase 6: Tools & News UI (完成)⏳ Phase 7: Home & Animation 优化 (下一步)⏳ Phase 8: 集成测试优化 (最后) 🚀 立即开始 (5分钟启动)步骤 1: 安装依赖1234567# 前端依赖cd /Users/yiyeliangxia/selfProject/spacenpm install...
test-blog-admin
Blog-Admin 系统测试文章这是通过 Blog-Admin 管理系统上传的测试文章。 功能测试本次测试验证以下功能: 文件上传 - 通过 Web 界面上传 Markdown 文件 自动处理 - 系统自动添加 Front Matter Git 操作 - 自动提交并推送到 GitHub 部署触发 - 触发服务器自动部署 技术栈 前端: HTML5 + CSS3 + Vanilla JS 后端: Express + Multer + Simple-git 部署: Hexo + GitHub Pages 测试时间测试时间:2026-03-03 总结如果你看到这篇文章,说明 Blog-Admin 系统运行正常! 本文由 Blog-Admin 自动上传
小技巧
小技巧1.template模板中使用对象和函数在vue3中无法使用filter,所以当需要对数据进行处理的时候,可以选择传入一个函数(因为函数是有返回值的) 同样的,对于类似下面的需求 123456789101112131415161718192021222324const examFilters = (item: any) => { switch (item.examFinish) { case 0: return "待考试"; break; case 1: return "未参加"; break; case 2: return "考试中"; break; case 3: return "未通过"; break; case 4: return "通过"; break; case 5: return...
通用小工具
遍历所有key123Object.keys(this.form).forEach((key) => { this.form[key] = this.selection[0][key]; });
大数据量树结构渲染卡死
大数据量树结构卡死背景考试人员选择中成员在管理员登录的情况下是全部部门可见的,此时成员可能有几万到十几万,因为现有组件是对全部数据一次性渲染成树结构,在大数据量的情况下就会导致页面卡死的情况 可选解决方案方案一:虚拟列表方案 + 重构el-tree 优点: 性能优化: 虚拟列表方案可以有效减小DOM渲染,只渲染可见区域的节点,降低了浏览器的渲染压力,提高了页面的性能。 可定制性: 通过对el-tree的重构,可以更灵活地定制树组件,根据具体需求进行功能增强或修改。 缺点: 工作量较大: 对el-tree进行重构可能需要大量的工作,包括对组件结构的调整、对现有功能的适配、可能的样式调整等,工作量相对较大。 依赖关系: 如果项目中已经大量使用el-tree,重构可能导致对项目其他部分的影响,需要谨慎处理。 方案二:使用vue-giant-tree组件 优点: 专注性能: vue-giant-tree是专门为大数据量树结构设计的组件,其核心目标是提供更好的性能。采用了虚拟滚动等技术,适用于处理大规模数据,减轻前端渲染压力。 易集成:...
上传详细设计
上传文件详细设计设计背景 老文件上传为jquery编写的,需要引入jquery文件以及核心js文件 文件上传依赖的库很多年没有更新维护,可能会遇到难以维护的bug 重构基于vue3,使用组件化开发模式,使得代码更加模块化和可维护,避免引入jquery等额外库和依赖 使用TypeScript能够更好地进行代码提示和静态类型检查 增加上传的可定制化能力和可扩展能力 使上传文件模块更加轻量化,保留核心必要逻辑 需求背景 支持多线程进行文件上传,文件上传等候排队 支持分片上传,可通过配置开启关闭 支持文件秒传 定制化文件上传url,以及文件上传完成通知接口url 支持文件上传进度实时回调,文件总进度分进度 支持文件错误重传 支持文件自定义校验 支持上传文件个性化区域定制 兼容旧版文件文件上传服务,可以实现无感替换 整体设计框架外部交互流程 上传文件系统对外主要就是初始化配置以及文件合规校验: 用户token,用于调起上传接口 可接受的文件类型,array类型有几种类型”Image”, “Video”,”Audio”, “PDF”,”Word”, “Excel”,...
海南系统详细设计
海南系统详细设计技术选型vue3+ts+vite+element plus 初始化项目基本需求 动态路由权限验证 按钮权限 接口代理转发 响应请求拦截处理 ui框架处理 侧栏菜单以及面包屑 通用组件封装 技术选型充分发挥了 Vite 的模块化和快速热更新的特性,结合 Vue 3 和 TypeScript 构建了一个基于单文件组件和组合式 API 的前端架构。这种结构允许我们充分利用 Vite 的即时开发体验,并使用 TypeScript 强大的类型检查功能,提高了代码的可维护性和可读性 动态路由设计1234567router├── routes│ ├── index.ts│ ├── notFoundRoute.ts│ └── userInfoRoute.ts├── index.ts└──...
深层表格封装
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127<!-- * @Description: 特征使用设置 * @Author: jmguo2 * @Date: 2023-10-12 11:28:59 * @LastEditors: jmguo2 * @LastEditTime: 2023-10-18 10:46:34--><template> <div> <!-- <el-button...








