[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"header-site-profile":3,"article-adjacent-wineclouds04-website-project-introduction":14,"article-wineclouds04-website-project-introduction":27,"article-related-wineclouds04-website-project-introduction":41},{"avatarUrl":4,"signature":5,"musicEnabled":6,"musicTitle":7,"musicArtist":8,"musicUrl":9,"musicCoverUrl":10,"musicPlaylist":11,"musicVolume":13},"\u002Fimages\u002Fwineclouds-avatar.webp","本质哈基米",true,"未命名曲目","Wineclouds","https:\u002F\u002Fmedia.wineclouds.cn\u002Fblog\u002Fprod\u002F2026\u002F07\u002F9f06ede7-e57b-429e-b305-332c14869ca5.mp3","https:\u002F\u002Fmedia.wineclouds.cn\u002Fblog\u002Fprod\u002F2026\u002F07\u002F5b00ffea-7407-496d-94cc-0c91feb7b8bb.png",[12],{"title":7,"artist":8,"url":9,"coverUrl":10},100,{"previous":15,"next":16},null,{"id":17,"title":18,"slug":19,"summary":20,"categoryName":21,"categorySlug":22,"pinned":6,"readingMinutes":23,"viewCount":24,"publishedAt":25,"updatedAt":26},2,"Wineclouds Studio多窗口管理器","my-demo","主播最近使用claude code 和 codex时要多开很多窗口，但是频繁的切换使得主播的alt+tab键不堪重负罢工，遂萌生想法制作这个工具可以方便监控多个窗口。","碎碎念","0-1",16,14,"2026-07-29T08:00:00","2026-09-28T05:34:29.492",{"id":28,"title":29,"slug":30,"summary":31,"contentHtml":32,"categoryName":21,"categorySlug":22,"tags":33,"pinned":6,"allowComment":6,"wordCount":34,"readingMinutes":35,"viewCount":36,"metaTitle":37,"metaDescription":38,"canonicalUrl":15,"publishedAt":39,"updatedAt":40},1,"Wineclouds04 Website 播客介绍","wineclouds04-website-project-introduction","摘要：Wineclouds04 Website 是一套面向个人创作者的全栈自托管博客与内容运营平台。本文从公开站、管理端、后端架构、数据安全到生产部署，完整介绍这个项目如何把写作、互动与长期运营连接起来。","\u003Cp>网站搭了又拆，折腾这么久也打算静下心来做个纯洁的博客，结果越做越多最终变成这样。 \u003Cstrong>单纯记录下碎碎念和介绍自己搓的小工具\u003C\u002Fstrong> 下面是博客介绍\u003C\u002Fp>\n\u003Ch2>不只是博客页面，而是一套长期内容系统\u003C\u002Fh2>\n\u003Cp>这个项目的核心目标不是堆叠技术名词，而是让写作与运营形成一条完整链路：\u003C\u002Fp>\n\u003Col>\n \u003Cli>创作者在管理端撰写 Markdown 内容并实时预览；\u003C\u002Fli>\n \u003Cli>文章可以保存为草稿、立即发布、回溯发布时间或设置未来的定时发布；\u003C\u002Fli>\n \u003Cli>公开站通过服务端渲染输出文章、分类、标签、归档和搜索页面；\u003C\u002Fli>\n \u003Cli>访客可以阅读、点赞、评论，并在上一篇、下一篇和相关文章之间继续探索；\u003C\u002Fli>\n \u003Cli>站长可以在后台审核评论、管理媒体、查看访问趋势和调整站点资料；\u003C\u002Fli>\n \u003Cli>运维层通过容器编排、健康检查、加密备份和版本化发布保证网站长期可维护。\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>这条链路让 Wineclouds04 Website 从一个“页面项目”变成了一个能够持续生长的内容基础设施。\u003C\u002Fp>\n\u003Ch2>访客看到的公开站\u003C\u002Fh2>\n\u003Cp>公开站基于 Nuxt 与 Vue 构建，并使用服务端渲染。这样做不仅是为了首屏速度，也为了让文章内容更容易被搜索引擎理解，并在社交平台分享时呈现完整的标题、摘要和页面信息。\u003C\u002Fp>\n\u003Cp>围绕阅读体验，公开站提供了：\u003C\u002Fp>\n\u003Cul>\n \u003Cli>首页内容展示与文章列表；\u003C\u002Fli>\n \u003Cli>文章详情、上一篇与下一篇导航；\u003C\u002Fli>\n \u003Cli>分类、标签、时间归档与站内搜索；\u003C\u002Fli>\n \u003Cli>相关文章推荐；\u003C\u002Fli>\n \u003Cli>RSS、Sitemap、robots.txt 与 SEO 元数据；\u003C\u002Fli>\n \u003Cli>明暗主题、移动端布局和减少动画偏好支持；\u003C\u002Fli>\n \u003Cli>匿名点赞、两级评论与文章浏览统计；\u003C\u002Fli>\n \u003Cli>GitHub 贡献日历以及可配置的公开社交入口。\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>这些能力并不是孤立存在的。分类、标签和归档帮助读者建立内容脉络，搜索负责快速定位，相关文章与前后篇导航则让一次偶然访问变成连续阅读。\u003C\u002Fp>\n\u003Ch2>创作者使用的独立管理端\u003C\u002Fh2>\n\u003Cp>网站的另一面是一套独立的管理后台。它与公开站使用不同的访问入口和界面结构，让“阅读”和“运营”彼此分离。\u003C\u002Fp>\n\u003Cp>文章编辑器以 Markdown 为核心，同时提供实时预览、字数统计、阅读时长估算和常用排版工具。编辑内容时可以设置摘要、可见性、分类、标签、置顶、评论开关以及 SEO 信息。\u003C\u002Fp>\n\u003Cp>文章生命周期也被完整考虑：\u003C\u002Fp>\n\u003Cul>\n \u003Cli>新文章可以先保存为草稿；\u003C\u002Fli>\n \u003Cli>草稿支持持续编辑和自动保存；\u003C\u002Fli>\n \u003Cli>发布时可以使用当前时间，也可以自定义过去的发布时间；\u003C\u002Fli>\n \u003Cli>选择未来时间后，文章会进入定时状态并在到点后自动发布；\u003C\u002Fli>\n \u003Cli>已发布文章可以更新、撤回或归档；\u003C\u002Fli>\n \u003Cli>定时文章可以提前立即发布，也可以取消定时。\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>除了文章，管理端还整合了分类与标签、媒体资源、评论审核、管理员回复、站点资料、访问统计、热门内容、趋势看板和操作日志。\u003C\u002Fp>\n\u003Cp>创作者不需要频繁进入数据库或修改配置文件，就可以完成绝大多数日常运营工作。\u003C\u002Fp>\n\u003Ch2>前后端分离，但围绕同一条内容链路协作\u003C\u002Fh2>\n\u003Cp>项目将公开站、管理端和后端拆成三个清晰的应用：\u003C\u002Fp>\n\u003Cul>\n \u003Cli>\u003Cstrong>公开站\u003C\u002Fstrong>：Nuxt 4、Vue 3、TypeScript 与 Nitro SSR；\u003C\u002Fli>\n \u003Cli>\u003Cstrong>管理端\u003C\u002Fstrong>：Vue 3、Vite、Pinia、Vue Router 与 ECharts；\u003C\u002Fli>\n \u003Cli>\u003Cstrong>后端 API\u003C\u002Fstrong>：Java、Spring Boot、Spring Security、MyBatis 与 Flyway。\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>一次典型的公开访问会沿着下面的链路完成：\u003C\u002Fp>\n\u003Cblockquote>\n \u003Cp>访客浏览器 → Nginx → Nuxt SSR → Spring Boot API → MySQL \u002F Redis\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>管理端请求则是：\u003C\u002Fp>\n\u003Cblockquote>\n \u003Cp>管理员浏览器 → Nginx → Vue 管理端 → Spring Boot API → MySQL \u002F Redis\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>Nginx 负责域名路由、TLS、安全响应头和统一入口。公开站负责页面渲染与阅读体验，管理端负责内容运营，Spring Boot 则集中处理文章、鉴权、评论、媒体、通知、统计和分类标签等业务。\u003C\u002Fp>\n\u003Cp>这种拆分让每一层都能保持清晰职责，同时又通过统一 API 和共享数据模型连接起来。\u003C\u002Fp>\n\u003Ch2>数据、缓存与可选集成\u003C\u002Fh2>\n\u003Cp>MySQL 保存文章、分类、标签、评论、用户、媒体元数据、操作日志和统计等核心业务数据。数据库结构由 Flyway 迁移管理，使每次结构变化都可以随版本安全落地，而不是依赖人工执行零散 SQL。\u003C\u002Fp>\n\u003Cp>Redis 用于缓存、会话与计数等高频场景，减轻数据库压力并改善公开页面的响应速度。后端对公开内容进行缓存，在文章发布、更新或定时发布到点时主动刷新，保证读者尽快看到最新内容。\u003C\u002Fp>\n\u003Cp>项目还保留了多种可选集成：\u003C\u002Fp>\n\u003Cul>\n \u003Cli>腾讯云 COS：用于媒体文件存储；\u003C\u002Fli>\n \u003Cli>SMTP：用于评论回复等邮件通知；\u003C\u002Fli>\n \u003Cli>GitHub GraphQL API：用于同步贡献数据；\u003C\u002Fli>\n \u003Cli>Prometheus 指标：用于运行状态观测。\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>这些功能都可以按需启用。没有配置时，核心博客能力仍然可以独立运行。\u003C\u002Fp>\n\u003Ch2>安全不是上线前临时补的一层\u003C\u002Fh2>\n\u003Cp>自托管意味着自由，也意味着需要认真对待安全边界。\u003C\u002Fp>\n\u003Cp>生产环境只由 Nginx 对外暴露 80 和 443 端口，MySQL、Redis、后端、公开站和管理端都运行在内部容器网络中。管理端使用基于 JWT 的登录会话，后端同时提供会话撤销、验证码、访问限流与操作日志等防护能力。\u003C\u002Fp>\n\u003Cp>所有密码、令牌、云服务密钥和生产配置都只保存在运行环境中，不进入 Git 仓库或发布包。发布前的预检会检查占位密码、过短密钥、证书、环境文件格式和 Compose 配置，尽可能在上线之前阻止危险配置。\u003C\u002Fp>\n\u003Cp>公开交互同样有明确边界：评论需要经过校验与审核流程，匿名访问使用受控的访客标识和限流策略，后台操作则保留审计记录。\u003C\u002Fp>\n\u003Ch2>从本地开发到生产发布\u003C\u002Fh2>\n\u003Cp>整个系统通过 Docker Compose 统一编排。完整运行环境包含六个服务：\u003C\u002Fp>\n\u003Col>\n \u003Cli>MySQL；\u003C\u002Fli>\n \u003Cli>Redis；\u003C\u002Fli>\n \u003Cli>Spring Boot 后端；\u003C\u002Fli>\n \u003Cli>Nuxt 公开站；\u003C\u002Fli>\n \u003Cli>Vue 管理端；\u003C\u002Fli>\n \u003Cli>Nginx 网关。\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>每个核心服务都有健康检查，启动时会等待依赖就绪。开发者可以通过一条 Compose 命令启动完整栈，也可以分别运行前端和后端进行源码开发。\u003C\u002Fp>\n\u003Cp>生产发布使用不可变版本号。发布脚本会依次完成生产预检、数据库加密备份、镜像构建、服务重建、健康检查和版本记录。\u003C\u002Fp>\n\u003Cp>源码升级前还可以保留回滚快照，备份则支持恢复到隔离数据库进行演练。\u003C\u002Fp>\n\u003Cp>这套流程的价值在于：发布不再是一组只能靠记忆执行的命令，而是一条可以检查、验证和回退的工程化路径。\u003C\u002Fp>\n\u003Ch2>为什么选择自托管\u003C\u002Fh2>\n\u003Cp>使用现成内容平台通常更快，但自托管提供了另一种价值：\u003C\u002Fp>\n\u003Cul>\n \u003Cli>内容和数据由自己掌握；\u003C\u002Fli>\n \u003Cli>域名、页面和交互方式可以持续演进；\u003C\u002Fli>\n \u003Cli>不被单一平台的产品策略限制；\u003C\u002Fli>\n \u003Cli>可以把真实需求转化为长期迭代的工程实践；\u003C\u002Fli>\n \u003Cli>网站本身也成为个人作品和技术能力的一部分。\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Wineclouds04 Website 适合希望搭建个人主页、技术博客、作品记录或长期数字档案的人，也适合想了解现代全栈项目如何连接前端、后端、数据层和运维流程的开发者。\u003C\u002Fp>\n\u003Ch2>开源与继续生长\u003C\u002Fh2>\n\u003Cp>项目源码已经托管在 GitHub：\u003C\u002Fp>\n\u003Cp>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FWineclouds04\u002FWineclouds04-Website\" rel=\"noopener noreferrer nofollow\">Wineclouds04 Website 源码仓库\u003C\u002Fa>\u003C\u002Fp>\n\u003Cp>公开站可以直接访问：\u003C\u002Fp>\n\u003Cp>\u003Ca href=\"https:\u002F\u002Fwineclouds.cn\" rel=\"noopener noreferrer nofollow\">Wineclouds’Blog\u003C\u002Fa>\u003C\u002Fp>\n\u003Cp>这个项目仍会继续迭代。未来的重点不是盲目增加功能，而是持续改善写作体验、内容发现、访问性能、交互安全和发布可靠性，让它真正成为一套可以陪伴创作者很多年的个人内容系统。\u003C\u002Fp>\n\u003Ch2>结语\u003C\u002Fh2>\n\u003Cp>一个个人网站最迷人的地方，是它既可以是一篇文章的容器，也可以是一段长期成长轨迹的见证。\u003C\u002Fp>\n\u003Cp>Wineclouds04 Website 想做的，正是把这种自由保留下来：让创作者专注表达，让读者舒适阅读，同时让系统在看不见的地方稳定、安全、可维护地运行。\u003C\u002Fp>\n\u003Cp>如果你也在思考怎样建立自己的数字空间，希望这个项目能提供一些灵感。\u003C\u002Fp>",[],2239,8,21,"Wineclouds04 Website：全栈自托管博客与内容平台详解","深入了解 Wineclouds04 Website：一套基于 Nuxt、Vue、Spring Boot、MySQL、Redis 与 Docker Compose 构建的全栈自托管博客和内容运营平台。","2026-01-06T19:46:00","2026-09-30T22:13:51.179",[42,51,59],{"id":43,"title":44,"slug":45,"summary":15,"categoryName":21,"categorySlug":22,"pinned":46,"readingMinutes":47,"viewCount":48,"publishedAt":49,"updatedAt":50},4,"用 WSL Dashboard 打造高效的 Linux AI Agent 环境","wsl",false,9,10,"2026-08-04T14:10:00","2026-09-27T13:53:25.323",{"id":52,"title":53,"slug":54,"summary":55,"categoryName":21,"categorySlug":22,"pinned":46,"readingMinutes":17,"viewCount":56,"publishedAt":57,"updatedAt":58},3,"怎样通过工行星座信用卡（校园版）→ Google Play 订阅 ChatGPT Pro 完整教程","manbo","主播这两天一直在使用 Codex， 但是因为国内政策和 ChatGPT 等相关限制。不能通过直接通过银行卡或者是储蓄卡，包括国内的 visa 卡进行订阅。所以出这一期教程，通过 Google Play 的方式套一层支付来完成 ChatGPT 订阅。",57,"2026-07-30T06:37:00","2026-10-02T16:53:01.037",{"id":17,"title":18,"slug":19,"summary":20,"categoryName":21,"categorySlug":22,"pinned":6,"readingMinutes":23,"viewCount":24,"publishedAt":25,"updatedAt":26}]