🏗️ 网站建设

AriaNg 是一个纯静态的前端单页应用（HTML/CSS/JS），它本身不需要任何后端环境（PHP、Node 等），它只负责在浏览器里运行，然后通过 WebSocket/HTTP 请求去连接 aria2 服务端的 RPC 接口。 因此，用 Nginx 托起 AriaNg 非常简单，本质上就是多托管一个静态文件夹。 有两种常见的方式来实现： 子目录访问（推荐）：比如通过 http://你的IP/ariang 访问。 新开一个端口：比如通过 http://你的IP:8080 访问。 方法一（子目录访问）是最完美且方便的。下面是修改好的配置： 修改后的 Nginx 配置（子目录方式） 假设你将 AriaNg 的网页文件解压到了 /usr/share/nginx/html/ariang 文件夹下。 server { listen 80; server_name localhost; # 监听域名，可以根据需要修改 root /usr/share/nginx/html; # 前端静态文件根目录 index index.html; # ======================================================= # 处理 favicon.ico 请求（直接提供文件） location = /favicon.ico { expires 30d; add_header Cache-Control "public, immutable"; } # ================= 新增：AriaNg 的配置 ================= # 访问 http://IP/ariang/ 就会打开 AriaNg location ^~ /ariang/ { # 这里复用外层的 root 目录，Nginx 会自动去寻找 /usr/share/nginx/html/ariang root /usr/share/nginx/html; index index.html; # AriaNg 是 hash 路由（带有 # 的 URL），所以不需要像主页那样重定向 /index.html try_files $uri $uri/ =404; } # ======================================================= # 个人导航主站 (必须放在特定的 location 后面) location / { try_files $uri $uri/ /index.html; # SPA 应用，处理路由问题 } location /api/ { # 直接代理到变量地址，完美支持 IP 或 域名 proxy_pass ${BACKEND_PROTO}://${BACKEND_ADDR}; # 强制设置 Host 头，对云服务/外部域名极其重要 proxy_set_header Host ${BACKEND_HOST}; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; # 开启 SNI 支持：如果是 https 域名，这行保命；如果是 http IP，这行无副作用 proxy_ssl_server_name on; } } 具体操作步骤 下载并解压 AriaNg： 去 AriaNg Github Releases 下载最新版的 AriaNg-x.x.x.zip。 ...

本文介绍在 PaperMod 博客中撰写文章的注意事项。 文章页面字段-必填项 每篇文章开头的 front matter 必须包含以下字段： --- title: "文章标题" # 必填：文章标题 date: 2026-03-16 # 必填：发布日期 --- 文章页面字段-常用可选项 --- # ===== 基础信息 ===== title: "文章标题" # 必填：文章标题 date: 2026-03-16 # 必填：发布日期（YYYY-MM-DD） lastmod: 2026-03-17 # 最后修改日期 description: "文章简介" # 文章描述，用于 SEO 和社交媒体分享 author: "作者名" # 作者名，覆盖默认设置 keywords: ["关键词1", "关键词2"] # SEO 关键词 # ===== 分类与标签 ===== tags: ["标签1", "标签2"] # 标签，细粒度分类，可多个 categories: ["分类名"] # 分类，粗粒度分类，通常一个 series: ["系列名"] # 系列文章，用于关联多篇相关文章 # ===== 发布状态 ===== draft: false # false = 发布，true = 草稿（不显示） publishDate: 2026-03-16 # 发布日期（可用于定时发布） expiryDate: 2026-12-31 # 过期日期，过期后文章不显示 # ===== 排序与置顶 ===== weight: 1 # 排序权重，数字越小越靠前（用于置顶） pinned: true # PaperMod 特有：置顶文章 # ===== 封面图片 ===== cover: image: "images/cover.jpg" # 封面图片路径（相对 static 目录） alt: "图片描述" # 图片 alt 文本（无障碍访问） caption: "图片说明" # 图片下方说明文字 relative: false # true = 相对于文章目录，false = 相对于 static # ===== 功能开关（覆盖全局设置）===== ShowToc: true # 是否显示目录 TocOpen: true # 目录是否默认展开 ShowReadingTime: true # 是否显示阅读时间 ShowShareButtons: true # 是否显示分享按钮 ShowBreadCrumbs: true # 是否显示面包屑导航 ShowPostNavLinks: true # 是否显示上一篇/下一篇导航 ShowCodeCopyButtons: true # 是否显示代码复制按钮 ShowWordCount: true # 是否显示字数 comments: false # 是否启用评论 # ===== 其他设置 ===== slug: "custom-url" # 自定义 URL 别名（默认用文件名） url: "custom-path/" # 自定义完整 URL 路径 type: "posts" # 内容类型（默认根据目录自动判断） layout: "custom-layout" # 自定义布局模板 --- 标签与分类 标签（tags）和分类（categories）的区别： ...

在搭建个人博客时，很多人会将博客的框架代码（如 Hugo/Hexo）、主题文件和文章的 Markdown 文件混在一个 GitHub 仓库里。这虽然简单，但随着文章越来越多，你的写作环境会被各种前端配置文件干扰；而且，如果你想写一些不公开的私密草稿，公开的仓库也无法满足需求。 为了获得最纯粹的写作体验，我采用了 「代码与内容分离」 的架构。今天这篇文章，就来详细聊聊如何基于 Hugo + PaperMod 主题，配合 Cloudflare Pages 部署这样一个现代化的博客。 🏗️ 架构概览：双仓库联动 我的博客由两个 GitHub 仓库组成： 引擎仓库 (公开)：PaperMod-Blog-Cloudflare 角色：博客的“打印机”与“骨架”。 内容：包含 Hugo 的配置文件、PaperMod 主题、自定义 CSS 等。没有实质性的文章内容。 内容仓库 (私有)：blog-content 角色：博客的“燃料”与“血肉”。 内容：纯净的 Markdown 文件和图片资源。 优势：设置为 Private (私有)，确保草稿和私密笔记的安全。写作时只需在本地使用 Obsidian 或 Typora 即可。 这两个仓库通过 Hugo Modules（Go Modules 底层）连接。当云端开始构建时，引擎会自动把内容仓库拉取过来，合并渲染成最终的网页。 在 config.yml 中添加如下配置： module: imports: - path: github.com/adityatelange/hugo-PaperMod - path: github.com/monstercjz/blog-content mounts: - source: blog-paper # 内容仓库的blog-paper目录 target: content/posts # 挂载到 content/posts 🛠️ 部署痛点一：Cloudflare 如何拉取私有内容？ 将公开的引擎仓库绑定到 Cloudflare Pages 非常简单，但在执行 hugo 构建命令时，如何拉取私有的 blog-content 仓库是核心难点。 ...

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" } },