### **项目笔记：Ark-Comms-System (A.C.S) - Waline 评论系统私有化部署与集成SOP**


#### **第一部分：后端部署——从云端 Serverless 到私有化容器**

**1.1 技术选型与演进**

*   **初步方案 (云函数)**: 探索了使用**阿里云函数计算(FC)** 和 **腾讯云云函数(SCF)** 的 Serverless 方案。
    *   **优势**: 极低的运维成本和优秀的弹性伸缩。
    *   **遇到的问题**: 模板不兼容 (`serverless init` 失败)、云厂商 SDK 版本与 Waline 依赖冲突、以及配置文件格式随 Waline 版本剧烈变化，导致调试困难。
*   **最终方案 (Docker 私有化部署)**: 决定采用**官方 Docker 镜像**，部署在自己的阿里云 ECS 上。
    *   **优势**: **环境一致性**（解决了“在我这能跑”的问题）、**高度可控性**、**日志追踪明确**，并且完美契合了我们学习 DevOps 和云原生技术的目标。

**1.2 数据库选型与踩坑**

*   **初步方案 (阿里云表格存储 Tablestore)**:
    *   **尝试**: 配置了实例，创建了数据表。
    *   **遭遇重大障碍**: 连续遇到 `OTSAuthFailed(Request denied by instance ACL policies)` 错误。通过编写独立的 Node.js 测试脚本 (`test.js`)，**最终定位并解决了**阿里云表格存储的**网络管理 (IP白名单)** 和 **安全策略 (ACL)** 问题。
    *   **根本性失败**: **通过阅读阿里云官方文档，最终确认 Waline 主流镜像【原生不支持】Tablestore**，需要进行二次开发。这是项目的一个关键转折点。
*   **最终方案 (腾讯云开发 TCB)**:
    *   **优势**: **Waline 官方原生支持**，社区验证充分，免费额度充足，且是国内服务。
    *   **操作**:
        1.  在腾讯云控制台创建了 TCB 环境，并获取了**环境ID**、**Region**、以及 **API 密钥 (`SecretId`, `SecretKey`)**。
        2.  **【关键步骤】**：在 TCB 数据库中，**手动创建**了 Waline 需要的三个集合：`Waline_Comment`, `Waline_User`, `Waline_Counter`，并将其权限设置为**“读取全部数据，修改本人数据”**。这一步解决了 Waline 无法自动初始化的问题。
    *   **字段名修正**: 通过查阅最新文档，将在 `docker-compose.yml` 中使用的腾讯云环境变量从 `TCB_SECRET_ID/KEY` 修正为 Waline v2 使用的正确字段 **`TCB_ID/KEY`**。

**1.3 Docker 容器化部署**

*   **镜像选择**: 最初尝试自构建镜像以解决配置问题，但流程复杂。最终决定使用 **Waline 官方发布的最新镜像 `walinejs/waline:latest`**，因为它对环境变量的支持是最好、最标准的。
*   **核心配置 (`docker-compose.yml`)**:
    *   创建了一个包含 `waline` 服务的 `docker-compose.yml`。
    *   **网络**: 将 Waline 容器加入自定义的 Docker bridge 网络 (`blog-network`)，以便与 Caddy 反向代理容器进行内部通信。
    *   **端口**: **不在公网暴露 `8360` 端口**，而是让 Caddy 通过内部网络访问，提升安全性。
    *   **环境变量 (`environment`)**: **最终放弃了 `.env` 文件和配置文件挂载 (`volumes`)**，因为它们在调试过程中带来了不确定性。改为在 `docker-compose.yml` 中，使用 `environment:` 块，**直接、明文地**定义了所有必需的环境变量（`TYPE=tcb`, `TCB_*`, `SITE`），实现了**最高优先级的配置注入**。

*   **启动与初始化**:
    *   通过 `docker-compose up -d` 成功启动容器。
    *   访问 `http://服务器IP:8360/ui/register`，**成功注册第一个管理员账号**，解决了前端 `500: Not initialized` 的错误，完成了服务的初始化。
*   **后台访问**: 确认了 Waline v3 的后台 UI 没有固定侧边栏，通过访问 `.../ui/comments` 或点击左上角图标的方式进入评论管理。

---



#### **第二部分：与博客前端及 Authing 的无缝集成**

**2.1 核心配置 (`_config.butterfly.yml`)**

*   **启用评论**: 在文章的 `Front-matter` 中设置 **`comments: true`** 作为开启评论的开关。在主题配置的 `comments:` 块中，设置 **`use: Waline`** 来全局指定评论提供商。
*   **Server URL 配置**:
    *   经历了从 `10.0.0.55:8360` (缺少协议头) -> `http://10.0.0.55:8360` (HTTP协议) -> **`https://waline.linuxnc.xyz` (最终HTTPS域名)** 的演进。
    *   **关键点**: `serverURL` 必须是一个**前端浏览器能够通过公网访问到**的、协议与主站一致的**绝对URL**。

**2.2 实现游客评论 + Authing 登录**

*   **Waline Option 配置**:
    *   `login: false`: **允许游客评论**，同时保留登录按钮。
    *   `requiredMeta: ['nick', 'mail']`: 设置游客评论时，昵称和邮箱为必填项。
    *   `avatar: 'qq'`: 开启QQ邮箱自动获取头像昵称的功能。
    *   **`provider:`**: 添加 Authing 作为第三方登录提供商，并填入从 Authing 应用获取的 `appId` 和 `appDomain`。

*   **明日方舟化定制**:
    *   利用 `locale:` 配置项，将评论框的所有提示语（`placeholder`, `nick`, `submit` 等）都**深度定制**为“罗德岛”风格，极大地增强了博客的沉浸感。

**2.3 高级互动功能**

*   **文章反应 (`reaction: true`)**: 开启了文章底部的 Emoji “点赞”表态功能，增加了轻量级互动。
*   **表情包 (`emoji: [...]`)**: 配置了多个来自公共 CDN 的表情包（微博、Bilibili等），丰富了评论表达方式。

---

**最终成果**: 成功搭建了一套架构清晰、功能强大的前后端分离评论系统。前端用户体验流畅，支持游客评论和多种社交登录；后端服务稳定运行在私有云服务器的 Docker 容器中，数据安全地存储在高性能的国内云数据库里。整个系统实现了高度的自主可控和个性化定制。

4.评论实现

### **项目笔记：Ark-Identity-System (A.I.S) - 基于 Authing 的身份认证集成SOP**


#### **第一部分：Authing 核心概念与选型**

**1.1 什么是 Authing？**

*   Authing 是一个**中心化的身份认证解决方案**。它将复杂的“用户注册、登录、密码管理、社交登录集成、安全策略”等功能，全部打包成一个独立的云服务。
*   **类比**: 它就像为你的所有应用（博客、未来的APP等）提供了一个统一的“**鹰角网络通行证**”系统。

**1.2 为什么选择 Authing？**

* **国内优先**: 服务器在国内，访问速度快，稳定性高，符合项目要求。

* **功能全面**: 免费版已提供足够强大的功能，包括社会化登录（GitHub）、自定义UI、安全策略等。

* **解耦**: 将用户身份管理从我们的 Waline 后端服务中剥离出来，实现了**专业化分工**。Waline 只负责评论，Authing 只负责身份，架构更清晰。

* **强大的兼容性**: 与 Waline 等现代应用有良好的集成支持。

  

  

  ---

  

  

#### **第二部分：Authing 平台配置**

**2.1 创建用户池 (User Pool)**

* **操作**: 登录 Authing 控制台 -> 创建用户池。

* **关键选择**: 选择 **`B2C (Business to Customer)`** 类型的用户池。`B2E` 适用于企业内部员工，不符合我们面向广大读者的场景。

* **命名**: 用户池命名为 `arknights-blog-users`。这个池子就是存放所有博客读者的**独立“档案室”**。

  <img src="https://raw.githubusercontent.com/suxiao3316/myblog-images/main/test/image-20250730174115324.png" alt="image-20250730174115324" style="zoom:33%;" />

**2.2 创建自建应用**

*   **操作**: 在 `arknights-blog-users` 用户池下 -> 应用 -> 自建应用 -> 创建。
*   **作用**: 这个“应用”是我们的 Waline 评论系统在 Authing 中的**唯一身份**。Waline 就是通过这个应用的 `App ID` 来和 Authing 对话的。
*   **关键信息提取**: 在应用的“配置”页面，**必须**记录下以下两个核心参数：
    *   **`App ID`**: 一长串唯一字符串。
    *   **`应用域名 (appDomain)`**: 形如 `your-app-domain.authing.cn`。

<img src="https://raw.githubusercontent.com/suxiao3316/myblog-images/main/test/image-20250730174932144.png" alt="image-20250730174932144" style="zoom:33%;" />



**2.3 配置登录回调 URL (最关键的安全配置)**

*   **作用**: 定义用户在 Authing 成功登录后，**被允许**安全跳转回的目标地址。如果目标地址不在此列表中，Authing会拒绝跳转。
*   **配置**: 在“应用配置”->“登录回调 URL”中，添加**所有**可能的访问路径：
    *   线上生产域名: `https://linuxnc.xyz`
    *   线上 www 域名: `https://www.linuxnc.xyz`
    *   本地测试IP: `http://10.0.0.55:4000`
    *   本地测试域名: `http://localhost:4000`

<img src="https://raw.githubusercontent.com/suxiao3316/myblog-images/main/test/image-20250730175049374.png" alt="image-20250730175049374" style="zoom:25%;" />

**2.4 配置社会化登录 (以 GitHub 为例)**

*   **目标**: 让用户可以在 Authing 登录框中看到“使用 GitHub 登录”的按钮。
*   **双向配置流程**:
    1.  **在 Authing 端**:
        *   进入 **社会化身份源** -> 添加/配置 **GitHub**。
        *   Authing 会**提供**一个专用的**“回调地址”**，形如 `https://core.authing.cn/connections/social/.../callback`。
        *   **复制**这个地址。
    2.  **在 GitHub 端**:
        *   登录 GitHub -> Settings -> Developer settings -> **OAuth Apps** -> New OAuth App。
        *   填写应用名称和主页URL。
        *   **将从 Authing 复制的那个回调地址，精确地粘贴**到 "Authorization callback URL" 输入框中。
        *   创建应用，**获取 `Client ID` 和 `Client Secret`**。
    3.  **回到 Authing 端**:
        *   将从 GitHub 获取的 `Client ID` 和 `Client Secret` **填回**到 Authing 的 GitHub 身份源配置页面。
        *   **设置 Scopes (授权范围)**：只保留最核心的 `user:email` 和 `read:user` 权限，避免过度索权。
        *   **关联应用**: 在该身份源的“应用连接”中，**开启你的博客应用**。

---



#### **第三部分：与 Waline 前端的最终集成**

这一步是在**博客主题的配置文件 `_config.butterfly.yml`** 中，告诉 Waline 前端如何与我们配置好的 Authing 服务进行交互。

**3.1 核心配置 (`_config.butterfly.yml -> waline.option`)**

```yaml
option:
  # 1. 允许游客评论，同时提供登录选项
  login: false
  requiredMeta: ['nick', 'mail']
  avatar: 'qq'

  # 2. [关键] 定义 Authing 为第三方登录提供商
  provider:
    - name: Authing
      # 填入从 Authing 应用配置中获取的信息
      appId: '你的Authing应用的AppID'
      appDomain: '你的Authing应用域名'
      # (可选) 定义你希望请求的用户信息
      scope: 'openid profile email phone' 
```

**3.2 用户体验流程**

*   未登录用户看到评论框和昵称/邮箱输入框。
*   点击“登录”按钮。
*   Waline 前端脚本读取 `provider` 配置，将页面**重定向到 Authing** 的托管登录页。
*   用户在 Authing 页面选择 GitHub 登录，授权后，被 Authing **安全地重定向回**博客的评论区。
*   Waline 脚本拿到 Authing 返回的凭证，完成登录，评论框切换到“已登录”状态。

3.认证体系

### **项目笔记：Ark-Static-Hexo-Blog (ASHB) - 前端构建与美化SOP**


#### **第一部分：基础环境搭建 (地基工程)**

**1.1 环境依赖与初始化**

* **核心依赖**: [Node.js](https://nodejs.org/) (LTS版本) and [Git](https://git-scm.com/)

* **Hexo CLI 安装**:

  ```bash
  npm install hexo-cli -g
  ```

* **项目初始化**:

  ```bash
  hexo init <project-name>
  cd <project-name>
  npm install
  ```

  *此步骤创建了一个标准的、包含默认主题 `landscape` 的Hexo项目。*

**1.2 主题集成：Butterfly**

* **选择理由**: Butterfly 主题拥有极其丰富的配置项、活跃的社区和强大的扩展性，是实现高度定制化视觉效果的最佳选择。

* **安装**:

  ```bash
  # 从GitHub克隆最新稳定版主题
  git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
  ```

* **启用**: 修改 **Hexo 主配置文件 (`_config.yml`)** 的 `theme` 字段：
  `theme: butterfly`

* **安装渲染器**: Butterfly 的模板和样式依赖 `pug` 和 `stylus`。

  ```bash
  npm install hexo-renderer-pug hexo-renderer-stylus --save
  ```

* **创建主题配置文件**: 将 `themes/butterfly/_config.yml` 复制到项目根目录，重命名为 `_config.butterfly.yml`，以实现配置与主题的分离。

**1.3 核心插件安装**

*   **评论系统**:
    `npm install hexo-tag-aplayer --save` *(即使我们最终用注入法，安装此插件也能解决一些依赖问题)*
*   **文章功能**:
    `npm install hexo-wordcount --save`
    `npm install hexo-generator-searchdb --save`

**至此，一个功能基础、可运行的 Butterfly 博客搭建完成。**

---

**第二部分：视觉特效与环境优化 (装修工程)**

**2.1 “罗德岛UI”视觉风格植入**

*   **核心理念**: 采用**深色模式 (Dark Mode)** + **玻璃拟态 (Glassmorphism)** + **科技感点缀**的设计语言。
*   **深色模式配置 (`_config.butterfly.yml`)**:
    *   `dark_mode: enable: true`
    *   `display_mode: dark` (设为默认)
*   **主题配色 (`_config.butterfly.yml -> theme_color`)**:
    *   定义一套明日方舟风格色板，主色调 (main) 使用标志性**橙黄色** (`#F09022`)，链接和强调色 (paginator) 使用**科技蓝** (`#00BFFF`)。
*   **字体配置 (`_config.butterfly.yml -> font`)**:
    *   引入科技感无衬线字体，如 Google Fonts 的 `Exo 2`。
        `font_link: "https://fonts.googleapis.com/...`
        `font_family: "'Exo 2', sans-serif"`

**2.2 玻璃拟态 (Glassmorphism) 效果实现**

* **原理**: 通过**全局背景图** + **半透明模糊前景**实现。

* **步骤**:

  1. 在 `_config.butterfly.yml` 中设置一个**全局背景图**:
     `background: url(/img/ark-background-blur.jpg)`

  2. 创建**自定义样式表 `source/css/custom.css`**。

  3. 在 `_config.butterfly.yml` 的 `inject.head` 中**注入**此CSS文件。

  4. 在 `custom.css` 中，**强制主内容容器 `#body-wrap` 背景透明**，让 `body` 背景图得以显现。这是**最关键**的一步，解决了“一片漆黑”的问题。

     ```css
     [data-theme="dark"] #body-wrap { background: transparent !important; }
     ```

  5. 在 `custom.css` 中，为所有卡片元素 (`.card-widget`, `#recent-posts > .recent-post-item` 等) 添加半透明背景、背景模糊 (`backdrop-filter`) 和边缘高光样式。

**2.3 动态与交互特效**

*   **首页打字机效果 (`_config.butterfly.yml -> subtitle`)**:
    *   `enable: true`, `effect: true`。
    *   在 `sub:` 列表中写入明日方舟风格的短语，如“你好，博士。”
*   **动态粒子背景 (`_config.butterfly.yml -> canvas_nest`)**:
    *   `enable: true`，并将 `color` 设置为主题橙黄色。
*   **加载动画 (`_config.butterfly.yml -> preloader`)**:
    *   `enable: true`，选择 `source: 2` (Pace.js 进度条)，更具科技感。
*   **页面无刷新切换 (PJAX)**:
    *   **作用**: 实现切换页面时，**背景音乐不中断**，并提供更流畅的过渡动画。
    *   **配置 (`_config.butterfly.yml -> pjax`)**: `enable: true`。
    *   **配合**: 确保音乐播放器的 HTML 结构中包含 `class="no-destroy"`，防止其在页面切换时被销毁。

**2.4 代码块高级美化**

* **切换渲染器**: 弃用默认的 `highlight.js`，改为功能更强大、样式更稳定的 **`PrismJS`**。

  *   在**主配置 `_config.yml`** 中，设置 `highlight: enable: false`，并开启 `prismjs: enable: true`。

* **主题与样式 (`_config.butterfly.yml -> code_blocks`)**:

  *   设置 `macStyle: true`，实现带有**仿 macOS 红绿灯按钮**的头部。
  *   选择一个优秀的暗色 `theme`，如 `darker` (旧版) 或 `tomorrow`/`a11y-dark` (新版)。

* **解决换行问题**: 在 `custom.css` 中添加强制换行规则，以解决超长代码行（如 `wget` URL）无法自动换行的问题。

  ```css
  pre, code { white-space: pre-wrap !important; word-break: break-all !important; }
  ```

**2.5 可选趣味性插件**

* **全局吸底音乐播放器 (APlayer)**:

  *   通过 `_config.yml` 中开启 `aplayer: { meting: true, asset_inject: false }`。
  *   在 `_config.butterfly.yml` 中开启 `aplayerInject: { enable: true, per_page: false }`。
  *   最终在 `inject.bottom` 中，使用**官方文档推荐**的 `<div class="aplayer no-destroy"...>` 语法，并配置歌单ID。

  


ingress的映射http案例

1.为什么要学习Ingress

helm环境快速部署实战

一、阶段总结—安装配置

**项目笔记：Ark-Comms-System (A.C.S) - Waline 评论系统私

**项目笔记：Ark-Identity-System (A.I.S) - 基于 Authin

**项目笔记：Ark-Static-Hexo-Blog (ASHB) - 前端构建与美化SO