💻 硬件与系统

非容器模式 前端部署 后端部署 容器模式 在一个 VPS 上部署前后端时，最科学、最省资源的方案是：利用前端容器自带的 Nginx 兼职做全站反代。 在这种情况下，只需要 一个 Nginx（即前端容器里的那个） 就可以处理所有事情：发送 HTML、解决 SPA 路由、转发 API 请求。 以下是针对“同机部署”的两种模板： 方案一：本地构建模式 (Build 模式) 适用场景：你在 VPS 上拉取了源码，想直接根据源码生成镜像并运行。 📂 目录结构 /opt/sitebox/ ├── frontend/ # 前端源码 (含 Dockerfile 和 nginx.conf) ├── backend/ # 后端源码 (含 Dockerfile 和 server.node.js) └── docker-compose.yml 🚀 docker-compose.yml (Build) version: '3.8' services: # 前端：既是网页服务器，也是 API 网关 frontend: build: context: ./frontend dockerfile: Dockerfile container_name: sitebox-frontend restart: always ports: - "80:80" # 外部通过 80 端口访问整个项目 environment: - BACKEND_PROTO=http - BACKEND_ADDR=backend:3000 # 使用内部服务名，流量不走公网，安全且快 - BACKEND_HOST=backend networks: - sitebox-net # 后端：纯 API 服务 backend: build: context: ./backend dockerfile: Dockerfile container_name: sitebox-backend restart: always expose: - "3000" # 端口只对容器开放 # ports: # - "3000:3000" # 端口对公网开放，比如给插件使用 environment: - PORT=3000 - DB_PATH=/app/data/db/sitebox.db - DEPLOY_MODE=docker # 如果要同步到github这下面三个参数是必填项 - GITHUB_TOKEN=xxxxxxxxxxxxxxxxxxxxxxxx - GITHUB_REPO=xxxxxx/yyyyyyyy - GITHUB_PATH=backup_json/backup.json volumes: - ./data/db:/app/data/db # 持久化数据库 networks: - sitebox-net networks: sitebox-net: driver: bridge 方案二：远程镜像模式 (Image 模式) 适用场景：已经在本地打包好镜像推送到 Docker Hub，VPS 只需要一行命令直接起飞。 ...

为了保证成功，我将流程分为四个详细步骤： 第一步：准备 GitHub 访问令牌 (PAT) 你需要一个令牌让 Cloudflare 有权把文件写入你的私有仓库。 登录 GitHub，访问 Tokens (Fine-grained) 设置页面。 点击 Generate new token。 Token Name: 填 CF-D1-Backup。 Repository access: 选择 Only select repositories，并选择 用户名/仓库名。 Permissions: 点击 Repository permissions，找到 Contents，选择 Read and write。 点击 Generate token，立即复制并保存这个 Token（它只会出现一次）。 第二步：准备 Cloudflare API 令牌 Worker 需要权限来操作 D1 数据库进行导出。 访问 Cloudflare API Tokens 页面。 点击 Create Token。 选择 Create Custom Token。 Token name: D1-Export-Token。 Permissions: Account -> D1 -> Edit (导出操作需要 Edit 权限)。 Resources: Include -> 你的账号。 点击继续并生成，保存这个 Token。 同时，在 D1 数据库的控制面板页面，记录下你的 Account ID 和 Database ID。 ...

VS Code 的强大之处不在于编辑器本身，而在于其庞大的插件生态。通过深度分析当前的插件配置，我们可以看到一套集成了 AI 编程辅助、深度 Markdown 写作、多语言开发 以及 高效运维 的全能型工作站。 以下是对这套配置的深度拆解，旨在帮助大家理解每个插件的核心价值，并优化自己的开发流。 一、 AI 编程助手：迈向“自动驾驶”开发 AI 插件已经从简单的代码补全演变为能够执行任务的智能 Agent。 1. GitHub Copilot Chat (github.copilot-chat) 核心功能：在 IDE 内直接与 AI 对话，解释代码、生成单元测试或修复 Bug。 独特优势：与 GitHub 生态深度集成，上下文感知能力极强。 实际应用：当你面对一段陈旧且没有文档的复杂函数时，直接右键让它“解释这段代码”。 用户价值：消除“冷启动”困难，极大提升理解新代码库的速度。 2. 通义灵码 (alibaba-cloud.tongyi-lingma) 核心功能：阿里巴巴推出的 AI 助手，支持代码补全、单元测试生成。 独特优势：针对中文语义优化，国内访问无需特殊网络环境。 实际应用：在网络不稳时作为 Copilot 的稳健替代。 用户价值：提升本土化开发体验，降低 AI 工具的使用成本。 3. Roo-Cline (rooveterinaryinc.roo-cline) & Claude-dev 核心功能：基于 Agent 架构，能自主执行文件读写、运行终端命令。 独特优势：不仅“说”，而且“做”。它可以根据一句话需求，自动修改多个文件并验证结果。 实际应用：自动化重构大型模块，或从零构建项目骨架。 用户价值：将开发者从繁琐的重复劳动中解放出来。 二、 Markdown 文档全家桶：打造专业写作工作站 这是一套将 VS Code 变成“最强 Markdown 编辑器”的组合。 1. Markdown All in One (yzhang.markdown-all-in-one) 核心功能：快捷键支持、自动补全、目录生成。 独特优势：功能最全面的基础插件，几乎是 Markdown 写作的必装。 价值：提供顺滑的写作体验。 2. Markdown Preview Enhanced (shd101wyy.markdown-preview-enhanced) 核心功能：支持 Mermaid 图表、导入外部文件、数学公式预览。 独特优势：预览效果极其精美，且支持多种渲染引擎。 应用场景：编写技术文档、绘制流程图、撰写学术笔记。 价值：一站式解决复杂文档的渲染需求。 3. VS Code Front Matter (eliostruyf.vscode-front-matter) 核心功能：可视化的博客元数据（YAML）管理。 独特优势：专为静态博客设计，提供类似 CMS 的管理面板。 应用场景：管理 Hugo, Hexo 或 Jekyll 博客。 价值：让文章发布和管理变得井然有序。 4. 辅助插件 Paste Image：截图直接粘贴为 Markdown 链接。 Markdown PDF：将文档完美导出为 PDF 格式。 Auto TOC：自动维护文档目录。 三、 语言支持与专业调试：工业级开发环境 1. Python & Jupyter 生态 核心插件：ms-python.python, ms-toolsai.jupyter 优势：官方支持，功能涵盖从代码补全到交互式数据分析的所有环节。 价值：让 VS Code 拥有不输于 PyCharm 的开发体验。 2. C# / .NET 核心 核心插件：ms-dotnettools.csdevkit 价值：跨平台 .NET 开发的核心，支持强大的重构和调试。 3. Lua 语言强化 核心插件：sumneko.lua 价值：目前市面上最强大的 Lua 语法分析插件，游戏开发者的福音。 四、 代码质量与界面美化 1. 质量卫士 Prettier：强制统一代码风格。 Code Spell Checker：检查英文拼写，避免变量名写错。 Todo Tree：在侧边栏集中管理代码中的 TODO 标记。 2. UI 增强 Indent Rainbow：用彩虹色区分缩进层级，逻辑结构一目了然。 Material Icon Theme：为不同的文件类型匹配精美图标。 五、 总结性对比建议与使用心得 1. 插件对比建议 关于 AI 助手：目前建议采用“1+1”模式：Copilot 用于高频率的代码自动补全，Roo-Cline 用于执行具体的重构任务或处理复杂指令。 关于 Markdown：如果只做简单记录，Markdown All in One 足矣；如果要出书或写深度技术稿件，Markdown Preview Enhanced 必不可少。 2. 使用心得 按需启用：90 多个插件虽然功能强大，但会占用内存。建议使用 VS Code 的 “Disable (Workspace)” 功能，在不同的项目（如：纯写作项目 vs 纯代码项目）中禁用无关插件。 同步与备份：建议开启 VS Code 的 Settings Sync，确保在不同电脑上都能获得一致的强大体验。 附录：当前环境下安装的完整插件列表 以下是系统检测到的所有插件（共 97 项）： ...

Markdonw All in one 粘贴的说明 如果你已经选中了一段文字，直接在文字上按 Ctrl + V 粘贴一个 URL。 结果： 它不会覆盖文字，而是直接把文字变成一个超链接格式：选中的文字。 "markdown.editor.pasteUrlAsFormattedLink.enabled": "smartWithSelection" 列表自动补全 按tap键进入子列表 按tap键进入一下层子列表 按删除键回到上层列表 任务列表自动补全 按tap键进入一下层子列表 alt+c自动切换任务状态 这是在新一行的时候按删除键回到上层列表 序号自动修复 如果都是有序列表，可以遵从tap进入子列表，删除回到上层列表 如果有序列表和非有序列表混着用，从子列表就回不到了上层列表 引用链接 这是一个引用链接 这是链接 文内引用 语法: []() []内是描述性文字 ()内是锚点，是#+锚点名字 锚点名字可以是某个标题，如果是标题的话，前面的#就可以不要，比如Markdonw All in one。在括号里先输入#就会有提示 锚点名字可以是文章中的某段文字，在这里随意填写。在括号里先输入#没有提示，得记得之前自己设置的锚点 锚点名字可以是跨文件中的某段文字，在这里随意填写。在括号里先输入文件名字，然后输入#，然后输入自定义锚点名字或者标题 indent-rainbow 大部分功能vscode已经可以取代，保留的原因是它可以进行空白区域块着色，更显目 markdown-header-coloring颜色样板 颜色样板一 [ "markdown-header-coloring.userDefinedHeaderColor": {// 方案一 "enabled": true, "Header_1": { "color": "", "backgroundColor": "background: linear-gradient(to right, rgba(245, 189, 6, 0.3), transparent); opacity: 0.5", "textDecoration": "font-weight: 800; font-size: 1.8em; background: -webkit-linear-gradient(0deg, #FFFFFF, #f5bd06, #FF8F00); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 2px 2px 4px rgba(0,0,0,0.3);" }, "Header_2": { "color": "", "backgroundColor": "background: linear-gradient(to right, rgba(238, 16, 190, 0.2), transparent); opacity: 0.5", "textDecoration": "font-weight: 700; font-size: 1.6em; background: -webkit-linear-gradient(0deg, #FF80AB, #ee10be, #880E4F); -webkit-background-clip: text; -webkit-text-fill-color: transparent;" }, "Header_3": { "color": "", "backgroundColor": "background: linear-gradient(to right, rgba(5, 226, 255, 0.2), transparent); opacity: 0.5", "textDecoration": "font-weight: 600; font-size: 1.4em; background: -webkit-linear-gradient(0deg, #80DEEA, #05e2ff, #01579B); -webkit-background-clip: text; -webkit-text-fill-color: transparent;" }, "Header_4": { "color": "", "backgroundColor": "background: linear-gradient(to right, rgba(55, 255, 19, 0.15), transparent); opacity: 0.5", "textDecoration": "font-weight: 600; font-size: 1.3em; background: -webkit-linear-gradient(0deg, #C5E1A5, #37FF13, #1B5E20); -webkit-background-clip: text; -webkit-text-fill-color: transparent;" }, "Header_5": { "color": "", "backgroundColor": "background: linear-gradient(to right, rgba(255, 106, 0, 0.15), transparent); opacity: 0.5", "textDecoration": "font-weight: 600; font-size: 1.2em; background: -webkit-linear-gradient(0deg, #FFCC80, #ff6a00, #BF360C); -webkit-background-clip: text; -webkit-text-fill-color: transparent;" }, "Header_6": { "color": "", "backgroundColor": "background: linear-gradient(to right, rgba(163, 190, 140, 0.1), transparent); opacity: 0.5", "textDecoration": "font-weight: 600; font-size: 1.1em; background: -webkit-linear-gradient(0deg, #D1D1D1, #A3BE8C, #4F5B46); -webkit-background-clip: text; -webkit-text-fill-color: transparent;" } }, ] 颜色样板二 "markdown-header-coloring.userDefinedHeaderColor": { "enabled": true, "Header_1": { "color": "#f5bd06", // 纯 6 位 Hex，不要带透明度后缀 "backgroundColor": "#f5bd06", "textDecoration": "font-size: 1.2em; font-weight: bold; text-shadow: 2px 2px 3px rgba(0,0,0,0.5)", "overviewRulerColor": "4" }, "Header_2": { "color": "#ee10be", "backgroundColor": "#ee10be", "textDecoration": "font-size: 1.1em; font-weight: bold; text-shadow: 2px 2px 3px rgba(0,0,0,0.5)", "overviewRulerColor": "4" }, "Header_3": { "color": "#05e2ff", "backgroundColor": "#05e2ff", "textDecoration": "font-weight: bold; text-shadow: 2px 2px 3px rgba(0,0,0,0.5)", "overviewRulerColor": "4" }, "Header_4": { "color": "#37FF13", "backgroundColor": "#37FF13", "textDecoration": "font-weight: bold; text-shadow: 2px 2px 3px rgba(0,0,0,0.5)", "overviewRulerColor": "4" }, "Header_5": { "color": "#ff6a00", "backgroundColor": "#ff6a00", "textDecoration": "font-weight: bold; text-shadow: 2px 2px 3px rgba(0,0,0,0.5)", "overviewRulerColor": "4" }, "Header_6": { "color": "#A3BE8C", "backgroundColor": "#A3BE8C", "textDecoration": "font-weight: bold; text-shadow: 2px 2px 3px rgba(0,0,0,0.5)", "overviewRulerColor": "4" } },