ci(script): 添加临时禁用Git SSL验证并清理.gitignore

修改build-and-publish.bat脚本临时禁用Git SSL验证以提高兼容性
清理.gitignore文件，移除不再需要的资源路径并优化注释结构

.gitattributes

@@ -9,3 +9,6 @@
 *.tff binary
 *.woff binary
 *.woff2 binary
+*.mp4 binary
+*.webm binary
+*.mov binary

.gitignore

@@ -7,3 +7,12 @@ docs/.vuepress/dist
 .trae/
 .DS_Store
 *.log
+
+# Build and Publish output
+_publish/
+
+# Local resources storage (not uploaded)
+resources/
+
+# Ensure .gitkeep files are always tracked
+!**/.gitkeep

README.md

@@ -22,10 +22,42 @@
 
 ## 安装
 
-确保您的 Node.js 版本符合要求（^20.6.0 || >=22.0.0），然后执行以下命令：
+- 环境要求：
+  - Node.js：`^20.6.0` 或 `>=22.0.0`（推荐使用当前 LTS 或稳定版）
+  - npm：`>=10`
 
+- 安装步骤：
+  1. 在项目根目录执行依赖安装：
      ```sh
-npm i
+     npm install
+     ```
+  2. 启动开发服务器（任选其一）：
+     - 常规方式：
+       ```sh
+       npm run docs:dev
+       ```
+     - Windows 快捷方式（尝试监听 `0.0.0.0` 以便局域网访问）：
+       ```bat
+       .\start.bat
+       ```
+     - 若端口或权限受限，使用备用命令（绑定到本机并更换端口）：
+       ```sh
+       npx vuepress@2.0.0-rc.24 dev docs --port 5173 --host localhost
+       ```
+  3. 打开浏览器访问：
+     - `http://localhost:4567/`（默认）或
+     - `http://localhost:5173/`（如果使用备用命令）
+
+- 常见问题与排查：
+  - “`vuepress` 不是内部或外部命令”：通常为依赖未安装或安装失败，执行 `npm install` 后重试。
+  - “listen EACCES: permission denied 0.0.0.0:4567”：端口或绑定权限受限，改用 `--host localhost` 或更换端口（如 `--port 5173`）。
+  - 需要清理缓存后重试：
+    ```sh
+    npm run docs:dev-clean
+    ```
+  - 更换端口示例（以 8080 为例）：
+    ```sh
+    npx vuepress dev docs --port 8080 --host localhost
     ```
 
 ## 使用

docs/.vuepress/client.ts

@@ -1,22 +1,8 @@
 import { defineClientConfig } from 'vuepress/client'
-// import RepoCard from 'vuepress-theme-plume/features/RepoCard.vue'
+import RImg from './theme/components/RImg.vue'
-// import NpmBadge from 'vuepress-theme-plume/features/NpmBadge.vue'
-// import NpmBadgeGroup from 'vuepress-theme-plume/features/NpmBadgeGroup.vue'
-// import Swiper from 'vuepress-theme-plume/features/Swiper.vue'
-
-// import CustomComponent from './theme/components/Custom.vue'
-
-// import './theme/styles/custom.css'
 
 export default defineClientConfig({
   enhance({ app }) {
-    // built-in components
+    app.component('RImg', RImg)
-    // app.component('RepoCard', RepoCard)
-    // app.component('NpmBadge', NpmBadge)
-    // app.component('NpmBadgeGroup', NpmBadgeGroup)
-    // app.component('Swiper', Swiper) // you should install `swiper`
-
-    // your custom components
-    // app.component('CustomComponent', CustomComponent)
   },
 })

docs/.vuepress/config.ts

@@ -3,25 +3,46 @@ import { plumeTheme } from 'vuepress-theme-plume'
 import { viteBundler } from '@vuepress/bundler-vite'
 import { commentPlugin } from '@vuepress/plugin-comment'
 import { umamiAnalyticsPlugin } from '@vuepress/plugin-umami-analytics'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
 
 export default defineUserConfig({
   base: '/',
   lang: 'zh-CN',
-  title: '祀梦的花园',
+  title: '仲夏夜之梦',
   description: '爱与回忆的小世界，记录生活中的每一份温暖与感动',
 
   head: [
-    // 配置站点图标
     ['link', { rel: 'icon', type: 'image/png', href: 'https://theme-plume.vuejs.press/favicon-32x32.png' }],
   ],
 
-  bundler: viteBundler(),
+  bundler: viteBundler({
-  shouldPrefetch: false, // 站点较大，页面数量较多时，不建议启用
+    viteOptions: {
+      resolve: {
+        alias: {
+        },
+      },
+    },
+  }),
+  shouldPrefetch: false,
 
   theme: plumeTheme({
+    /* 站点域名，启动 SEO 优化 */
+    hostname: 'https://www.simengweb.com',
     /* 博客文章页面链接前缀 */
     article: '/article/',
 
+    /* 启用数学公式支持和Mermaid图表 */
+    markdown: {
+      math: {
+        type: 'katex',
+      },
+      mermaid: true,
+      demo: true,
+    },
     /**
      * 编译缓存，加快编译速度
      */
@@ -29,7 +50,10 @@ export default defineUserConfig({
 
     /* 本地搜索, 默认启用 */
     search: { provider: 'local' },
-
+    footer: { 
+      message: '愿每一份温柔都被世界珍藏 ✨', 
+      copyright: '<a href="https://beian.miit.gov.cn/" target="_blank" aria-label="gongan filing address">沪ICP备2023010022号-1</a>©2025祀梦的个人博客' 
+    },
     /**
      * 博客相关配置
      */
@@ -44,7 +68,6 @@ export default defineUserConfig({
     /**
      * 文章贡献者配置
      */
-    // 修改contributors配置
     contributors: {
       mode: 'inline',
       info: [
@@ -64,12 +87,10 @@ export default defineUserConfig({
       git: true
     },
 
-    /**
-     * 代码块配置
-     */
     codeHighlighter: {
       lineNumbers: true,
     }
+
   }),
 
   plugins: [
@@ -80,9 +101,9 @@ export default defineUserConfig({
       requiredMeta: ['nick']
     }),
     umamiAnalyticsPlugin({
-      id: 'a4f0ca65-2da6-4e6b-a01b-f3b3157d05a3',
+      id: '2114ab32-5543-4be1-b5e8-c4f2c9269d0d',
       link: 'https://umami.simengweb.com/script.js',
-      domains: ['notes.simengweb.com'],
+      domains: ['www.simengweb.com'],
       cache: true
     }),
   ],

docs/.vuepress/navbar.ts

@@ -9,6 +9,15 @@ export default defineNavbarConfig([
     text: '博客',
     link: '/blog/',
   },
+  {
+    text: '学科知识',
+    items: [
+      {
+        text: '英语学习笔记',
+        link: '/subject/english/',
+      },
+    ],
+  },
   {
     text: '编程笔记',
     items: [
@@ -24,8 +33,21 @@ export default defineNavbarConfig([
         text: 'Solidity',
         link: '/programming/solidity/',
       },
+      {
+        text: 'Web 开发',
+        link: '/programming/web/',
+      }
     ],
   },
+  {
+    text:"技术理论",
+    items:[
+      {
+        text: '密码学基础',
+        link: '/theory/cryptography/',
+      },  
+    ]
+  },
   {
     text: '运维',
     items: [
@@ -37,6 +59,10 @@ export default defineNavbarConfig([
         text: 'Linux 运维',
         link: '/ops/linux/',
       },
+      {
+        text: 'Docker 运维',
+        link: '/ops/docker/',
+      },
     ],
   },
   {

docs/.vuepress/notes.ts

@@ -27,6 +27,53 @@ const cPlusPlus = defineNoteConfig({
     }
   ]
 })
+const english = defineNoteConfig({
+  dir: 'subject',
+  link: '/subject/english/',
+  sidebar: [
+    { text: "英语学习笔记", link: "/subject/english/" },
+    {
+      text: "学习环境与工具", prefix: "/basis", items: [
+        { text: "英语环境配置", link: "/subject/english/basis/" }
+      ]
+    },
+    {
+      text: "词汇与记忆", prefix: "/vocabulary", items: [
+        { text: "词汇学习与记忆法", link: "/subject/english/vocabulary/" }
+      ]
+    },
+    {
+      text: "语法与句法", prefix: "/grammar", items: [
+        { text: "核心语法与句型", link: "/subject/english/grammar/" }
+      ]
+    },
+    {
+      text: "听力与口语", prefix: "/listening-speaking", items: [
+        { text: "听力口语训练", link: "/subject/english/listening-speaking/" }
+      ]
+    },
+    {
+      text: "阅读与写作", prefix: "/reading-writing", items: [
+        { text: "阅读提升", link: "/subject/english/reading-writing/" }
+      ]
+    },
+    {
+      text: "写译", prefix: "/writing-translation", items: [
+        { text: "写作与翻译指南", link: "/subject/english/writing-translation/" }
+      ]
+    },
+    {
+      text: "考试与备考", prefix: "/exam", items: [
+        { text: "英语四级 (CET-4) 备考指南", link: "/subject/english/exam/cet-4/" }
+      ]
+    },
+    {
+      text: "资源与工具", prefix: "/resources", items: [
+        { text: "学习资源与工具", link: "/subject/english/resources/" }
+      ]
+    }
+  ]
+})
 const solidity = defineNoteConfig({
   dir: 'programming',
   link: '/programming/solidity/',
@@ -35,10 +82,34 @@ const solidity = defineNoteConfig({
     {
       text: "基础语法", prefix: "/basic-syntax", items: [
         { text: "Solidity 基础语法与数据类型", link: "/programming/solidity/basic-syntax/" }
-      ]
+      ],
+    },
+    {
+      text: "项目实例", prefix: "/basic-syntax", items: [
+        { text: "Solidity 代码实例", link: "/programming/solidity/analysis/case-analysis/" }
+      ],
+    },
+    {
+      text: "杂项", prefix: "/other", items: [
+        { text: "Hardhat 相关知识", link: "/programming/solidity/other/hardhat/" },
+        { text: "一些没分类的小知识", link: "/programming/solidity/other/miscellaneous/" }
+      ],
     }
   ]
 })
+const cryptography = defineNoteConfig({
+  dir: 'theory',
+  link: '/theory/cryptography/',
+  sidebar: [
+    { text: "密码学基础", link: "/theory/cryptography/" },
+    {
+      text: "古典加密算法", prefix: "/theory", items: [
+        { text: "替换密码", link: "/theory/cryptography/substitution-ciphers/" },
+        { text: "置换密码", link: "/theory/cryptography/permutation-encryption/" },
+      ]
+    },
+  ]
+})
 const blockchain = defineNoteConfig({
   dir: 'ops',
   link: '/ops/blockchain',
@@ -68,14 +139,56 @@ const linux = defineNoteConfig({
       text: "Linux 基础", prefix: "/linux", items: [
         { text: "Linux 基础命令详解", link: "/ops/linux/basic-commands/" }
       ]
+    },
+    {
+      text: "其他", prefix: "/linux", items: [
+        { text: "一些零散的命令", link: "/ops/linux/other/" }
+      ]
     }
   ]
 })
+const docker = defineNoteConfig({
+  dir: 'ops',
+  link: '/ops/docker/',
+  sidebar: [
+    { text: "Docker 运维笔记", link: "/ops/docker/" },
+    {
+      text: "数据库相关",
+      prefix: "/ops/docker/db/",
+      items: [
+        { text: "MongoDB 部署", link: "/ops/docker/db/mongodb/" },
+        { text: "Postgres 部署", link: "/ops/docker/db/postgres/" },
+      ]
+    },
+    {
+      text: "其他服务",
+      prefix: "/ops/docker/other/",
+      items: [
+        { text: "ETLCloud 部署", link: "/ops/docker/other/ETLCloud/" },
+      ]
+    },
+  ]
+})
+const web = defineNoteConfig({
+  dir: 'programming',
+  link: '/programming/web/',
+  sidebar: [
+    { text: "Web 开发学习笔记", link: "/programming/web/" },
+    {
+      text: "基础知识", prefix: "/basic-syntax", items: [
+        { text: "Web 前端基础讲解", link: "/programming/web/basic-syntax/html-css-js/" },
+        { text: "HTML 常用标签与属性", link: "/programming/web/basic-syntax/html-tags-attributes/" },
+        { text: "HTML 列表与语义布局", link: "/programming/web/basic-syntax/html-lists-and-semantic-layout/" },
+        { text: "JavaScript 基础知识", link: "/programming/web/basic-syntax/javascript-basics/" },
+      ],
+    },
+  ]
+})
 /**
  * 导出所有的 note
  */
 export default defineNotesConfig({
   dir: 'notes',
   link: '/',
-  notes: [LeetCode, cPlusPlus, solidity, blockchain, linux],
+  notes: [LeetCode, english, cPlusPlus, solidity, blockchain, linux, docker, cryptography, web],
 })

docs/.vuepress/theme/components/Custom.vue

@@ -1,11 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const message = ref('Hello World!')
-</script>
-
-<template>
-  <div class="my-custom-content">
-    {{ message }}
-  </div>
-</template>

docs/.vuepress/theme/components/RImg.vue

@@ -0,0 +1,27 @@
+<template>
+  <img :src="imageSrc" :alt="alt" v-bind="$attrs" />
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  src: {
+    type: String,
+    required: true
+  },
+  alt: {
+    type: String,
+    default: ''
+  }
+})
+
+// 使用 Vite 的 import.meta.glob 或简单字符串拼接
+// 由于别名在运行时不可直接动态拼接，我们这里使用一个更稳妥的方法
+// 映射到我们配置好的别名
+const imageSrc = computed(() => {
+  // 处理路径，确保指向别名
+  const path = props.src.startsWith('/') ? props.src.slice(1) : props.src
+  return new URL(`../../../resources/${path}`, import.meta.url).href
+})
+</script>

docs/README.md

@@ -7,16 +7,12 @@ config:
     full: true
     background: tint-plate
     hero:
-      name: 祀梦的花园
+      name: 仲夏夜之梦
-      tagline: 爱与回忆的小世界
+      tagline: 祀梦和小小夏的花园
       text: 在这里，每一个文字都承载着温暖与美好 🌸
       actions:
         -
           theme: brand
           text: 博客
           link: /blog/
-        -
-          theme: alt
-          text: 探索笔记 →
-          link: /notes/
 ---

docs/about.md

@@ -1,5 +1,5 @@
 ---
-title: 关于祀梦的花园
+title: 关于祀梦与他的花园
 description: 这里是爱与回忆的小世界～
 hideInBlogList: true
 article: false
@@ -7,36 +7,59 @@ createTime: 2024/10/29 12:30:00
 permalink: /about/
 ---
 
-# 👋 这里是祀梦的小窝！
+# 👋 嗨呀！这里是祀梦的小窝~
 
-泥嚎~ 欢迎来到祀梦的个人博客，这是我在这个小站发布的第一篇文章哦~ (✧ω✧)
+欢迎来到我的数字花园！这里不仅是笔记的存放处，更是我思维流转、技术成长与生活感悟的小小交汇点。希望能在这里和你分享温暖与美好~ (๑>◡<๑)
 
-## 关于站长我呀~ 🌸
+## 🏗️ 正在努力构建的未来~
 
-我是祀梦，现在在上海某大专读书，是个可爱的男孩子~ 目前是信息安全专业的学生，但是超——级喜欢编程！(๑•̀ㅂ•́)و✧
+目前我是一名大三的学生，主修**信息安全**专业。虽然专业背景在“守”，但我对“建”有着更浓厚的兴趣呢！
 
-## 我的兴趣爱好~ 🌈
+- **职业坐标**：目前正全力投入**后端开发**的学习中，正在努力准备实习，期待能在真实的代码世界里磨砺自己，成为厉害的后端大牛！(๑•̀ㅂ•́)و✧
+- **技术理念**：我崇尚简洁、高效的代码，同时也相信技术的最终目的是为了传递温暖和解决问题。
 
-我喜欢好多好多东西呀！编程、摄像、美食、旅游，还有画画~ 假期闲下来的时候，我会画一些自己喜欢的角色呢！(๑˘ᴗ˘๑)
+## 🪴 为什么会有这个“花园”？
 
-## 技术方面~ 💻
+你可能会发现这个站点的结构非常清晰（或者说，我在努力让它变得整齐一些~）。
 
-在技术方面，Python 是我最熟练的编程语言，Java 和 C 也懂一些，前后端开发和 Linux 运维我也会一点哦~ 虽然什么都感兴趣，什么都想学，但是总觉得自己不够聪明，学杂而不精呢... (╥ω╥)
+在 2025 年末，我决定将原有的博客迁移到这个新家。原因很简单：**我需要一个更具结构化的空间来安放我的笔记**。从密码学理论到后端开发实战，从英语四级备考到算法练习，我希望知识能够像小植物一样，在合适的土壤里有序生长，方便自己翻阅，也能给路过的你一点点参考呀~ 🌸
 
-## 为什么叫"祀梦"？ 🌙
+## 🚀 个人项目展示~
 
-这个名字的由来超有趣！初中的时候我很喜欢写小说，"祀梦"是我其中一本小书的主角名字~ 当时我的初中同学聊天的时候说这个名字很好听，我就一直沿用下来啦！(๑´ㅂ`๑)
+除了这个笔记站，我还维护着以下这些心血之作：
 
-## 联系方式~ 📱
+- [**祀梦的个人博客**](https://blog.simengweb.com/)：我的感性领地，记录着生活故事与长长的技术思考。
+- [**算法练习平台**](https://algorithmplatform.simengweb.com/)：为了提升算法能力而开发的小平台，欢迎来一起刷题呀！(≧∇≦)ﾉ
 
-如果您在网页访问过程中遇到什么问题，或者想要交个朋友的话，欢迎随时来找我玩哦~ 
+## 🛠️ 祀梦的小技能树~ (〃'▽'〃)
-- 邮箱：meng_si@proton.me
-- B站：[66ccff色的薰依草](https://space.bilibili.com/361714249)
 
-## 网站的成长记录~ 📝
+虽然总觉得自己学得杂杂的，但每一项技能都是我用心收集的“宝藏”哦！
 
-- 2025年9月21日：部署完网站
+- **常用的魔法咒语**：Python (最熟练啦~), C++, Java, Solidity, JavaScript
+- **探索过的奇幻领地**：后端开发、信息安全、区块链运维、Linux 系统管理 (｡･ω･｡)
+- **随身携带的口袋工具**：Docker, Git, WSL2, Hardhat
 
-## 写在最后~ 💌
+## 📸 生活的彩色一角
 
-很早之前我就总是喜欢写点东西，但是又不敢发到大的平台上，做一个属于自己的互联网小窝感觉真的超——级棒！希望大家能在这里找到有用的内容，也欢迎大家常来玩哦~ (づ￣ 3￣)づ
+在代码之外，我的世界也是五颜六色的：
+
+- **超棒的朋友**：首页提到的“小小夏”是我非常要好的朋友。我们共同守护着这个数字花园的宁静。
+- **我的小爱好**：我热爱摄像、美食与旅游。假期闲下来的时候，也会拿起画笔，勾勒出心里的角色呢~ (๑˘ᴗ˘๑)
+- **关于我呀**：一个喜欢美好事物、偶尔有点小社恐、但在技术面前总能保持好奇心的男孩子。
+
+## 🕰️ 网站的成长足迹
+
+- **2025-12-15**：完成结构化迁移，给笔记们找了个舒服的新家。
+- **2025-09-21**：笔记站初次部署。
+- **2024-10-29**：在这个小站写下了第一段关于花园的文字。
+
+## 💌 找我玩呀~
+
+如果你对我的项目感兴趣，或者只是想聊聊技术与生活，欢迎随时联系：
+
+- **邮箱**：[meng_si@proton.me](mailto:meng_si@proton.me)
+- **B站**：[66ccff色的薰依草](https://space.bilibili.com/361714249)
+
+---
+
+> “在每一个文字里，都承载着温暖与美好。” 🌸

docs/blog/collect/free_model_pai.md

@@ -0,0 +1,255 @@
+---
+title: 便宜免费的大模型 API 整合 （ 2025年11月11日 ）
+createTime: 2025/11/11 13:54:02
+cover: /images/elysia/1.jpg
+coverStyle:
+    layout: right
+permalink: /article/free_model_api/
+---
+
+百度千帆、讯飞星火、腾讯混元均有免费在线额度，SCNet 提供 0.1 元/百万 tokens 的超低价大模型，轻量任务先薅免费，量大了再掏 0.1 元，稳！
+
+<!-- more -->
+## 免费的大模型 API 整合
+
+嗨～如果你在找既温柔又省荷包的小模型，就把它们悄悄收进这里吧！它们也许不是夜空最亮的那颗星，却能在摘要、划重点、轻声问答的小角落里，给你软软又稳稳的陪伴哦～
+
+
+### 百度千帆大模型平台
+
+先从千帆开始吧～下面是常用模型的参考价格：
+
+| 模型名称 | 版本名称 | 服务内容 | 子项 | 在线推理 | 批量推理 | 单位 |
+|---|---|---|---|---|---|---|
+| ERNIE Speed | ernie-speed-128k | 推理服务 | 输入 | 0 | 0.00012 | 元/千tokens |
+| ERNIE Speed | ernie-speed-128k | 推理服务 | 输出 | 0 | 0.00024 | 元/千tokens |
+| ERNIE Lite | ernie-lite-8k | 推理服务 | 输入 | 0 | 0.0012 | 元/千tokens |
+| ERNIE Lite | ernie-lite-8k | 推理服务 | 输出 | 0 | 0.0024 | 元/千tokens |
+| ERNIE Tiny | ernie-tiny-8k | 推理服务 | 输入 | 0 | 0.00008 | 元/千tokens |
+| ERNIE Tiny | ernie-tiny-8k | 推理服务 | 输出 | 0 | 0.00016 | 元/千tokens |
+
+> 提示：单纯调用 API 接口属于在线推理，当前显示为 0 元；批量推理按量计费。
+
+#### 快速上手
+
+1. 访问控制台并获取 API Key。
+2. 使用下方示例进行快速测试。
+3. 若遇错误，请检查模型名称与凭证有效期。
+
+控制台：[https://console.bce.baidu.com/qianfan/ais/console/apiKey](https://console.bce.baidu.com/qianfan/ais/console/apiKey)
+
+```python
+import requests
+import json
+
+def main():
+    url = "https://qianfan.baidubce.com/v2/chat/completions"
+    API_KEY = 'YOUR_API_KEY'
+    payload = json.dumps({
+        "model": "ernie-speed-128k",
+        "messages": [
+            {
+                "role": "system",
+                "content": "You are a helpful assistant."
+            },
+            {
+                "role": "user",
+                "content": "你好"
+            }
+        ]
+    })
+    headers = {
+        'Content-Type': 'application/json',
+        'Authorization': F'Bearer {API_KEY}'
+    }
+    response = requests.request("POST", url, headers=headers, data=payload)
+    print(response.text)
+    
+
+if __name__ == '__main__':
+    main()
+```
+
+> 小贴士：将 `YOUR_API_KEY` 替换为你的密钥，建议使用环境变量管理凭证；请勿在公共仓库提交 Key。
+
+更多文档：[https://cloud.baidu.com/doc/qianfan-api/s/3m9b5lqft](https://cloud.baidu.com/doc/qianfan-api/s/3m9b5lqft)
+
+### 讯飞星火大模型
+
+接着，我们轻盈地来到星火～
+
+- 官网：[https://xinghuo.xfyun.cn/sparkapi](https://xinghuo.xfyun.cn/sparkapi)
+- 控制台：[https://console.xfyun.cn/services/cbm?from=desk](https://console.xfyun.cn/services/cbm?from=desk)
+- 模型说明：可见 Spark Lite，Token 余量为无限。
+
+#### 快速上手
+
+> 小贴士：如需联网检索，启用 `web_search`；流式输出可以提升交互体验。
+
+1. 在控制台获取授权凭证并替换到示例中。
+2. 选择 `Lite` 模型，按需开启 `web_search` 与 `stream`。
+3. 若需要长内容输出，注意 8K tokens 限制，合理裁剪上下文。
+
+```python
+# encoding:UTF-8
+import json
+import requests
+
+
+# 请替换XXXXXXXXXX为您的 APIpassword, 获取地址：https://console.xfyun.cn/services/bmx1
+api_key = "Bearer XXXXXXXXXX"
+url = "https://spark-api-open.xf-yun.com/v1/chat/completions"
+
+# 请求模型，并将结果输出
+def get_answer(message):
+    #初始化请求体
+    headers = {
+        'Authorization':api_key,
+        'content-type': "application/json"
+    }
+    body = {
+        "model": "Lite",
+        "user": "user_id",
+        "messages": message,
+        # 下面是可选参数
+        "stream": True,
+        "tools": [
+            {
+                "type": "web_search",
+                "web_search": {
+                    "enable": True,
+                    "search_mode":"deep"
+                }
+            }
+        ]
+    }
+    full_response = ""  # 存储返回结果
+    isFirstContent = True  # 首帧标识
+
+    response = requests.post(url=url,json= body,headers= headers,stream= True)
+    # print(response)
+    for chunks in response.iter_lines():
+        # 打印返回的每帧内容
+        # print(chunks)
+        if (chunks and '[DONE]' not in str(chunks)):
+            data_org = chunks[6:]
+
+            # print(f"DEBUG: raw data_org: {data_org}")
+            chunk = json.loads(data_org)
+            text = chunk['choices'][0]['delta']
+
+            # 判断最终结果状态并输出
+            if ('content' in text and '' != text['content']):
+                content = text["content"]
+                if (True == isFirstContent):
+                    isFirstContent = False
+                print(content, end="")
+                full_response += content
+    return full_response
+
+
+# 管理对话历史，按序编为列表
+def getText(text,role, content):
+    jsoncon = {}
+    jsoncon["role"] = role
+    jsoncon["content"] = content
+    text.append(jsoncon)
+    return text
+
+# 获取对话中的所有角色的content长度
+def getlength(text):
+    length = 0
+    for content in text:
+        temp = content["content"]
+        leng = len(temp)
+        length += leng
+    return length
+
+# 判断长度是否超长，当前限制8K tokens
+def checklen(text):
+    while (getlength(text) > 11000):
+        del text[0]
+    return text
+
+
+#主程序入口
+if __name__ =='__main__':
+
+    #对话历史存储列表
+    chatHistory = []
+    #循环对话轮次
+    while (1):
+        # 等待控制台输入
+        Input = input("\n" + "我:")
+        question = checklen(getText(chatHistory,"user", Input))
+        # 开始输出模型内容
+        print("星火:", end="")
+        getText(chatHistory,"assistant", get_answer(question))
+```
+
+### 腾讯混元大模型
+
+ - 计费与价格：[https://cloud.tencent.com/document/product/1729/97731](https://cloud.tencent.com/document/product/1729/97731)
+ - 文档与控制台：[https://cloud.tencent.com/document/product/1729/111008](https://cloud.tencent.com/document/product/1729/111008)
+ - 模型说明：`hunyuan-lite` 免费可用，适合轻量任务。
+
+```python
+import os
+from openai import OpenAI
+
+# 构造 client（建议使用环境变量管理密钥）
+api_key = os.getenv("HUNYUAN_API_KEY", "YOUR_API_KEY")
+client = OpenAI(
+    api_key=api_key,  # 混元 APIKey
+    base_url="https://api.hunyuan.cloud.tencent.com/v1",  # 混元 endpoint
+)
+
+completion = client.chat.completions.create(
+    model="hunyuan-lite",
+    messages=[
+        {
+            "role": "user",
+            "content": "泥嚎"
+        }
+    ],
+    extra_body={
+        "enable_enhancement": True,
+    },
+)
+print(completion.choices[0].message.content)
+```
+
+> 小贴士：请勿在公共仓库提交任何真实密钥；使用环境变量或密钥管理服务更安全。
+
+## 低价大模型
+
+### SCNet 平台
+
+#### 简介
+SCNet 是一个面向人工智能和科学计算的一站式算力与 AI 平台，提供从数据管理、模型训练到部署的完整链路服务，同时结合国产超算硬件和多模态模型生态，让企业和开发者能更高效地使用 AI。
+
+#### 链接与文档
+- 官网：[https://www.scnet.cn/](https://www.scnet.cn/)
+#### 价格一览
+| 模型 | 上下文长度 | 百万 tokens 输入价格 | 百万 tokens 输出价格 |
+|---|---|---|---|
+| Qwen3-235B-A22B | 32K | 0.1 元 | 0.1 元 |
+| DeepSeek-R1-Distill-Qwen-7B | 32K | 0.1 元 | 0.1 元 |
+| DeepSeek-R1-Distill-Qwen-32B | 32K | 1 元 | 4 元 |
+| DeepSeek-R1-Distill-Llama-70B | 32K | 0.1 元 | 6 元 |
+| QwQ-32B | 32K | 1 元 | 4 元 |
+| Qwen3-30B-A3B | 128K | 1 元 | 6 元 |
+| Qwen3-Embedding-8B | - | 0.1 元 | - |
+
+- 文档（计费与说明）：[https://www.scnet.cn/ac/openapi/doc/2.0/moduleapi/tutorial/modulefee.html](https://www.scnet.cn/ac/openapi/doc/2.0/moduleapi/tutorial/modulefee.html)
+
+目前看到的价格最低的 Qwen3-235B-A22B 模型的 API，相比前面的免费模型，性能更强。
+- API 接口使用样例：[https://www.scnet.cn/ac/openapi/doc/2.0/moduleapi/tutorial/apicall.html](https://www.scnet.cn/ac/openapi/doc/2.0/moduleapi/tutorial/apicall.html)
+
+## 小结
+
+把上面这些“零钱包”级别的模型都翻完啦～  
+- 百度千帆、讯飞星火、腾讯混元都给出「免费在线额度」，日常轻量问答、摘要、润色完全够用；记得把 Key 藏进环境变量，别手滑推到 GitHub。  
+- 如果任务量突然暴涨，SCNet 的 Qwen3-235B-A22B 只要 0.1 元/百万 tokens，性价比直接拉满，当“备胎”也安心。  
+
+一句话：先薅免费的，薅不动再掏 0.1 元，让荷包和模型一起“稳稳幸福”吧！

docs/blog/competition/BRICS2025-ST-132.md

@@ -1,149 +0,0 @@
----
-title: 2025 一带一路金砖 - 区块链应用开发与运维 样题详解
-createTime: 2025/09/30 19:57:14
-permalink: /article/2025-BR-BRICS-BC-App-Develop-Op-Sample-Q&A/
-# password: simeng
----
-
-## 第一部分：区块链平台运维
-### 第1题：完成 FISCO BCOS 区块链系统部署并验证
-**【要求】**
-
-登录 Linux 服务器，完成节点部署、启动、将过程结果截图，保存至做答题并点击提交。
-
-**【任务】**
-
-登录 Linux 服务器，进入指定操作目录（/root/tools）基于开发部署工具 build_chain.sh 脚本在本地搭建一条 4 节点的 FISCO BCOS 链。起始端口号为：30300,20200,8545。将节点 2 的端口号改为 30500,20400,8675。确保搭建的区块链系统能正常运行，并将执行的命令和完整的命令执行结果截图保存至作答区并点击提交。具体任务如下：
-
-**【参考答案】**
-
-使用 build_chain.sh 脚本搭建 FISCO BCOS 链：
-
-默认的 -v 会从网络中下载 FISCO BCOS，这里本地已经有了，比赛的时候肯定是断网的，这里直接调用本地的即可
-```shell
-bash build_chain.sh -l "127.0.0.1:4" -p 30300,20200,8545 -e ./fisco-bcos
-```
-![配置默认单机4节点](https://image.simengweb.com/blog/competition/BRICS2025-ST-132/20250930201715_253_27.png)
-在创建完成之后，当前目录会出现一个 nodes 文件夹，这里面就是我们的每个节点的具体配置信息等等
-
-这里推荐下载一个 tree 用来查看目录结构
-```shell
-apt install tree
-tree nodes
-```
-目录结构应该大概如下：
-```
-nodes
-├── 127.0.0.1
-│   ├── node0
-│   │   ├── ...
-│   ├── node1
-│   │   ├── ...
-│   ├── node2
-│   │   ├── ...
-│   ├── node3
-│   │   ├── ...
-```
-每个 node 文件夹都包含 `conf/`（配置文件），`log/`（日志文件），`fisco-bcos/`（二进制副本）
-
-修改节点2的端口，根据要求修改为 30500,20400,8675
-
-编辑配置文件：`vim nodes/127.0.0.1/node2/config.ini`
-
-```bash
-[rpc]
-    channel_listen_ip=0.0.0.0
-    channel_listen_port=20202 # [!code --]
-    channel_listen_port=20400 # [!code ++]
-    jsonrpc_listen_ip=127.0.0.1
-    jsonrpc_listen_port=8547 # [!code --]
-    jsonrpc_listen_port=8675 # [!code ++]
-    disable_dynamic_group=false
-[p2p]
-    listen_ip=0.0.0.0
-    listen_port=30302 # [!code --]
-    listen_port=30500 # [!code ++]
-    ; nodes to connect
-    node.0=127.0.0.1:30300
-    node.1=127.0.0.1:30301
-    node.2=127.0.0.1:30302 # [!code --]
-    node.2=127.0.0.1:30500 # [!code ++]
-    node.3=127.0.0.1:30303
-```
-不光节点2的 \[p2p\] 的 `node.2` 需要修改，其他几个节点的都需要进行修改
-
-切换到 `nodes/127.0.0.1/` 目录下，通过 `bash start_all.sh` 启动所有节点
-
-![启动所有节点](https://image.simengweb.com/blog/competition/BRICS2025-ST-132/20250930205309_254_27.png)
-
-验证端口是否生效：`ss -tuln | grep -E '30500|20400|8675'`
-
-预期输出如下：
-
-```bash
-tcp   LISTEN  0       4096          127.0.0.1:8675         0.0.0.0:*
-tcp   LISTEN  0       4096            0.0.0.0:30500        0.0.0.0:*
-tcp   LISTEN  0       4096            0.0.0.0:20400        0.0.0.0:*
-```
-
-
-主要参考文章如下：
-
-1. [搭建第一个区块链网络](https://fisco-doc.readthedocs.io/zh/latest/docs/installation.html)
-2. [开发部署工具(build_chain.sh)](https://fisco-bcos-documentation.readthedocs.io/zh-cn/latest/docs/manual/build_chain.html)
-
-### 第2题：按要求完成WeBASE-Node-Manager的安装与部署
-**【要求】**
-
-登录 Linux 服务器，部署节点管理平台，并将部署、启动、应用过程结果截图，保存至作答区并点击提交。
-
-**【任务】**
-
-登录 linux 服务器，进入指定操作目录（/root/tools/webase）中完成区块链一体化管理平台的配置部署，并检查是否安装成功，具体操作任务如下：
-1. 进入 WeBASE-Node-Manager 目录，完成数据库初始化操作；
-2. 修改 application.yml 配置文件，进行 WeBASE-Node-Manager 的服务配置，包括数据库名称，数据库用户，数据库密码等；
-3. 使用命令启动 WeBASE-Node-Manager 管理平台服务，并检查节点管理是否正常启动；
-4. 使用 swagger 对节点管理服务的 API 接口测试。
-
-**【参考答案】**
-
-切换到 WeBASE-Front 目录下，将 `dist/conf_template` 配置文件目录复制一份作为配置文件，命名为 `dist/conf`
-```bash
-# 当前工作目录为：/home/simeng/blockchain/WeBASE-Front
-cp -r dist/conf_template dist/conf
-```
-
-将节点所在目录 `nodes/{$ip}/sdk` 下的所有文件拷贝到当前的 `dist/conf` 目录下
-```bash
-cp ../nodes/127.0.0.1/sdk/* ./dist/conf/
-```
-
-编辑配置文件 : `vim dist/conf/application.yml`
-```bash
-
-```
-
-配置环境变量 JAVA_HOME
-编辑配置文件：`~/.bashrc`，添加如下内容
-```bash
-export JAVA_HOME="/usr/lib/jvm/java-1.8.0-openjdk-amd64"
-export PATH=$JAVA_HOME/bin:$PATH
-```
-刷新环境变量
-```bash
-source ~/.bashrc
-```
-
-切换到 `dist` 目录下，拉取 Solidity 开发工具 v0.8.11.js（这一步可能会很慢，建议直接把 v0.8.11.js 下载到本地，然后直接放到对应目录,WSL2 的机器是直接挂载在 Windows 上的，Windows 可以直接操作）
-```bash
-wget https://github.com/WeBankBlockchain/WeBASELargeFiles/releases/download/v3.0.0/v0.8.11.js -O static/static/js/v0.8.11.js
-```
-
-运行 `bash start.sh` 启动 WeBASE-Node-Manager 管理平台服务
-```bash
-# 当前工作目录为：/home/simeng/blockchain/WeBASE-Front/dist
-bash start.sh
-```
-
-由于 localhostForwarding 机制（具体参考：[配置WSL2资源](https://notes.simengweb.com/article/operate-wsl2/#%E7%BD%91%E7%BB%9C%E7%9B%B8%E5%85%B3%E9%85%8D%E7%BD%AE)）,我们可以直接通过localhost来访问WSL2容器的端口的服务
-访问：[http://localhost:5002/WeBASE-Front](http://localhost:5002/WeBASE-Front)

docs/blog/elysia/elysia_quotation.md

@@ -0,0 +1,298 @@
+---
+title: 爱莉希雅语录
+createTime: 2026/01/08 15:39:17
+cover: /images/elysia/2.png
+coverStyle:
+    layout: left
+permalink: /archives/a5b3ea8e-7c3c-40a1-a737-26e911623da8/
+---
+嗨，亲爱的来访者♪ 欢迎来到这片收集了“真我”与“美丽”碎片的园圃。在这里，你会读到执拗花朵在暴雨中的坚持，也会听见逐火英桀们为文明奏响的最后颂歌。请怀着期待慢慢翻阅吧，愿这些如星光般的文字能陪你开启属于自己的闪耀旅程，毕竟……你本身就是这世间最瑰丽的馈赠呢♪
+<!-- more -->
+![elysia](/images/elysia/1.jpg)
+1. 执拗的花朵永远不会因暴雨而褪去颜色，你的决心也一定能在绝境中绽放真我。
+
+2. 愿你前行的道路有群星闪耀。愿你留下的足迹有百花绽放。你即是上帝的馈赠，世界因你而瑰丽。
+
+3. 悲剧并非终结，而是希望的起始。
+
+4. 此后，将有群星闪耀，因为我如今来过。此后，将有百花绽放，因为我从未离去。
+
+5. 告别过去，是为了走向未来
+
+6. 我名为爱莉希雅……最初的律者，人之律者。
+
+7. 某一日，祂从天坠落。人们抬头仰望，于是看见了星空。星月送来神的女儿，她愿成为人的伴侣。长风化作她的轺车，四海落成她的园圃。鸟雀衔来善的种子，百花编织爱的颂歌。她便是这样降生于世，行于大地，与人类一同长大，与世界一起发芽。
+
+8. 亲爱的山雀，请将我的箭，我的花，与我的爱，带给那子然独行的旅人。然后，便让它开出永恒而无瑕的…人性之华吧。
+
+9. 压力之下的选择才能揭示一个人的真我，也将决定他最终会成为怎样的人。
+
+10. 即使未来不能改变，我也要自己决定到达那个结果的过程。
+
+11. 这是段漫长的路途，你或许会停滞不前，甚至在很长一段时间里一无所获。但这未必是件坏事，并不是一定要做到了什么，达成了什么才算前进。空虚、迷茫、犹豫、自否，对于一个人的一生，这些过程同样拥有它们的意义——就像这里的十三个人曾经历的那样。
+
+12. 天色暗了，接下来就是调皮捣蛋的时间了呢。
+
+13. 白天的我也很可爱，晚上的我也很可爱，你更喜欢哪个我呢？
+
+14. 说起粉色头发的可爱女孩，你第一个会想到谁？321回答！
+
+15. 你好像有不少问题想问我呢，别心急，我们还有很多很多时间。
+
+16. 你喜欢脚踩在落叶或是新雪上的感觉吗？我很喜欢哦。
+
+17. 你比我想象中还可爱许多呢。是不是很在意我想象了什么？
+
+18. 今天的任务都完成啦？真棒，夸夸你哦。
+
+19. 嗨！今天天气真好，和我一样闪闪发光呢。
+
+20. 嗨，早上好！一天的好心情，从见到你开始。
+
+21. 嗨，早上好呀！看见我，有没有很开心呢？
+
+22. 你该休息啦，约好了，我们明天再见哦。
+
+23. 天冷了，小心别着凉哦。我？美少女怎么会冷呢。
+
+24. 今天是我的生日哦。要一起庆祝吗？就我们两个人。
+
+25. 哎呀，你也睡不着吗？那我们来聊聊天，好不好？
+
+26. 有些事不用太在意，美丽的少女总有些小秘密，不是吗？
+
+27. 这么晚了还不睡吗？是在想我，对不对？
+
+28. 知道吗，今天是个很特别的日子。对啦，就是你的生日♪
+
+29. 好啦，冷静一下♪
+
+30. 以律者的标准，你的样子还真有些......别致呢♪
+
+31. 哎呀，别生气嘛♪
+
+32. 真是的......我会哭的哦......
+
+33. 抱歉......得让你失望啦♪
+
+34. 英桀们的谢幕，必须盛大而壮丽
+
+35. 只是你我二人独处，显然有些寂寞了♪
+
+36. 你说对不对？我的好·伊·甸♪
+
+37. 你明明也很开心嘛♪
+
+38. 英桀们也不过是心绪复杂，带有缺陷的普通人，就和当时的每个普通人一样。有自己的私心，也多半谈不上有什么大爱，但也会因为一时感动，或是心血来潮，去做一些冲动，又了不起的事。他们从来不是完美的英雄，只是因为在那个时间，出现在那里的是他们而已。
+
+39. 我相信换做其他人，也一定会做出小异大同的选择，甚至做得更好也说不定？这就是［美丽］的永恒，我所相信的［真我］。十三个人生命的全部就是如此纷繁而又美妙的事物，意义在于在这个过程中我想要相信什么。那会决定在抵达终点时你能得到什么。
+
+40. 你看，他们曾如此骄傲地活过，贯彻始终，以生命奏响了文明的颂歌，这是被称作英桀的人们的故事，是十三位逐火者未尽的旅途，但来访者，你们的道路仍将延续，不是吗，那就听凭心意前进吧，嘻，都说了要前进啦，沿着脚下的足迹，去见证这段逐火的征程，最后跨越逝者们的终幕，去创造我们所未能迎接的未来吧。
+
+41. 要流传给后世的，绝不应该只有憎恨和使命。只有领略过这个时代的光辉和灿烂，未来的人们才能理解我们为之而战的意义。
+
+42. 由英桀们来传承的，应当是身为英桀的荣耀，战斗的理由。是在这段逐火的旅途中，我们最终的灵魂所托。
+
+43. 而后来的你们，将见证我们生命的足迹，灵魂的刻印，并在其中找到自己寻求的答案。
+
+44. 但无论如何 我们的时代已经结束了，而我们也努力完成了各自的使命。
+
+45. 不是被推搡，被裹挟着向前，也不是沿着被别人选定的道路行进。而是怀着这样的想法——我想要怎么做，我应该怎么做——去决定自己的命路，自己的刻印。
+
+46. 以自我的意志，朝着自身所设下的目标，用自在的方式，竭尽全力活过“我”作为主角的一生。
+
+47. 你看，我是这样的，大家也是这样的。我所知晓的那个时代，以及它所孕育出的这十三个人，都是如此。万千的轨迹交织、萦绕，由此诞下百花齐放的奇迹。这就是“美丽”的永恒，我所相信的“真我”。
+
+48. 至此，我们的故事结束了。而从今以后，就是“你”的故事了。
+
+49. 让无人传颂的歌谣，再度启唱。
+
+50. 为历史尘封的故事，续写新章。
+
+51. 高洁而纯真的灵魂，踏上旅途。
+
+52. 愿掠集之兽爱佑其身，赐予「空梦」的自由。
+
+53. 愿渡尘之羽爱佑其身，赐予「浮生」的坚忍。
+
+54. 愿绘世之卷爱佑其身，赐予「繁星」的纯真。
+
+55. 愿噬界之蛇爱佑其身，赐予「无限」的渴求。
+
+56. 愿黎明之哨爱佑其身，赐予「旭光」的意志。
+
+57. 愿寸断之刃爱佑其身，赐予「刹那」的决绝。
+
+58. 愿善法之瞳爱佑其身，赐予「天慧」的智识。
+
+59. 愿坏劫之焱爱佑其身，赐予「鏖灭」的赤诚。
+
+60. 愿愚戏之匣爱佑其身，赐予「螺旋」的奇迹。
+
+61. 愿璀耀之歌爱佑其身，赐予「黄金」的光辉。
+
+62. 愿深罪之槛爱佑其身，赐予「戒律」的慈爱。
+
+63. 愿无烬之剑爱佑其身，赐予「救世」的理想。
+
+64. 愿无瑕之人爱佑其身，赐予「真我」的回归。
+
+65. 我们于此赞颂，始源之律者的诞生
+
+66. 我这支歌将抚摸你的前额，犹如那祝福的亲吻
+
+67. 当你独自一人时，它会坐在身旁与你耳语
+
+68. 当你陷入人群时，它又会保护你远离喧嚣。
+
+69. 我的歌将成为你梦想的羽翼，它将载着你的心到那未知的边缘
+
+70. 当黑夜遮蔽了你的路时，它又成为了照耀在你头顶的忠实星光
+
+71. 于是，「始源」的故事迎来落幕
+
+72. 于是，「始源」的故事迎来伊始
+
+73. 以我为终……
+
+74. 以我……为始。
+
+75. 而今，终焉之时将至。而今，归去之时已至。就此告别吧，美丽的世界。
+
+76. 不想前进的时候，就暂且停下脚步吧，我们永远都在这里，和当初一模一样，毕竟，美丽的女孩子什么都能做到嘛！
+
+77. 游云拂风，花染湛空，与你并肩漫步在午后街头，携手美好此刻，共赏岁月温柔。
+
+78. 经常会和别的女孩子谈论你哦。内容……是不是很想知道呀～
+
+79. 有些事不用太在意，美丽的少女总有些小秘密，不是吗？
+
+80. 这里有好多和我一样漂亮的女孩子呀，是天堂吗？
+
+81. 你会不会嫌我话多呢？可我就是有好多话想对你说呀。
+
+82. 不许叫错我的名字噢，不然……我会有小情绪的。
+
+83. 如此绚丽的花朵，不该在绽放之前就枯萎。我会赠予你璀聚的祝福，而你的灵魂，也将会绽放更耀眼的光辉。
+
+84. 嗨，想我了吗？
+
+85. 不论何时何地，爱莉希雅都会回应你的期待
+
+86. 嗨，我又来啦。多夸夸我好吗？我会很开心的～♪
+
+87. 你好！新的一天，从一场美妙的邂逅开始。
+
+88. 终于轮到我啦，这段时间我可是一直都在构思与你见面的开场白呢。
+
+89. 你可以更光明正大的看向我噢，毕竟我也直在看着你嘛。来，让我们更深入地了解彼此吧？
+
+90. 唉，要做的事好多～但焦虑可是女孩子的大敌，保持优雅得体，从容愉快地前进吧。
+
+91. 别看我这样，其实我也是很忙的。不过，我的日程上永远有为你预留的时间。
+
+92. 唉，时间真是个讨厌的东西，你不觉得吗？如果不是时间紧迫，我还想留下更多值得纪念的话语。
+
+93. 有没有觉得我的话要比别人多一点？多就对啦，我可是有在很认真地准备这件事的。
+
+94. 哇，你看那朵白白软软的云，是不是有点像我呢？
+
+95. 可爱的少女心可是无所不能的噢～♪
+
+96. 好啦可以啦，再说下去我就要哭了噢～♪
+
+97. 这束鲜花，要心怀感激的收下哦～♪
+
+98. 要好好看着我哦～♪
+
+99. 这身衣服是伊甸做的噢，喜欢吗，还是说，喜欢的是我呢～♪
+
+100. 别动噢，借你的眼睛照照镜子……好啦，我看起来怎么样？
+
+101. 嗯～和女孩子独处时，可要好好看向对方的眼晴噢～♪
+
+102. 有空多来陪陪我好吗，你一定不忍心让可爱的我孤独寂寞吧。
+
+103. 这可是你选的衣服，要好好看着，不许移开视线噢。
+
+104. 加点浪漫的气氛，如何？
+
+105. 哇谢谢！我就知道你对我最好啦！
+
+106. 爱莉希雅的贴心提示！你可以尽情的依赖爱莉希雅，而她，也会以全部的身心回应你！
+
+107. 爱莉希雅的贴心提示！如果见到凯文在大厅里，多穿点衣服，他很冷的，各种意义上呢。
+
+108. 在热情似火这件事上，我可不会输给千劫哦。
+
+109. 这一次有你想要的东西吗?没有的话，我就可以再见你一面了。
+
+110. 你应该不会嫌我话多吧？还是说，你更喜欢伊甸那种优雅文静的类型？
+
+111. 如你所见，与那个凯文齐名的第二领袖，竟是一位如花朵般娇羞的少女也就是我啦。
+
+112. 爱莉希雅的贴心提示！和樱说话时，别盯着耳朵看太久，她和我不一样，会害羞。
+
+113. 想了想我毕竟算半个文职，说“武”也不太合适。那就去掉一个字，叫“女神”吧！你觉得呢？
+
+114. 你说，我要是把头发留的和樱那么长，会不会更好看呀？嗯？
+
+115. 你战斗的样子如此绚丽，就如同漫天的飞花一般。让我再为其添点色彩吧。
+
+116. 这里埋藏着太多的历史、太多的秘密。但别担心，无论路有多长，我始终都会在你身边。
+
+117. 如果我也成为律者，会是什么样子呢？头发会再变多些吗？还是说……裙摆会突然变长？
+
+118. 说起来，为什么只有我的刻印是金色的伊甸不会生气吧?算啦，她那么好，一定不会生气的。
+
+119. 咦，到我了吗？哎呀真可惜，这次的开场白我还没想好呢，原谅我吧，下次一定给你个惊喜。
+
+120. 仔细想想，我是女孩子，战力比肩凯文，又有如神明般的聪慧与美貌。这么说来，我不也是“女武神”吗？
+
+121. 爱莉希雅的贴心提示！如果遇到千劫，千万别问他有关面具的事哦。
+
+122. 唉，不知道你见没见到这里的男孩们，他们都内向得很，还是我比较放得开吧?
+
+123. 爱莉希雅的贴心提示！伊甸就像是天使一样——温柔，美丽，又总会予人以天使般的馈赠。
+
+124. 这真是个神奇的地方，不是吗？它让我们的灵魂跨越时空于此相遇，多么浪漫呀。
+
+125. 悄悄告诉你哦，我一共准备了40种不同的开场白。
+
+126. 咦，你在看哪？哦......很在意这对耳朵？它们很漂亮对吗，我也这么觉得。
+
+127. 你一定也在期待和我相遇吧？我知道，因为我的刻印总是很实用嘛。
+
+128. 我的抉择与你的抉择，二者相遇会诞下怎样的奇迹，我想见证这一刻的到来。
+
+129. 爱莉希雅的贴心提示！如果你不想听苏说话了，悄悄走开也行，他看不见。
+
+130. 有我的刻印，你绝对不会输。输了也没关系，我会先一步去大厅等你回来。
+
+131. 不要被三次元的女人骗了呀。
+
+132. 英桀第二位，爱莉希雅，如你所见是一位像花朵般可爱的美丽少女。
+
+133. 我们会留在过去，而你将走向未来。
+
+134. 毕竟我向来不习惯太严肃的场合，也不喜欢过于拘谨的人际关系。
+
+135. 再打下去我会哭的哦
+
+136. 怎么样?喜欢我的记忆吗?有没有一种在和美丽的少女并肩作战的感觉?
+
+137. 猜猜我为你带来了什么，金色的、闪闪发光的刻印，没有人能拒绝它，不是吗?
+
+138. 见好就收哦！
+
+139. 但我永远都会在这里，为你点亮前行的灯火。
+
+140. 纵使知道文明已经覆灭，却依旧选择穷尽一切抗争到最后，只是为了将自己骄傲活过的样子永远铭刻在历史之中。
+
+141. 悲伤不会凭空消失，但温暖的感情也会永远在心底珍藏。
+
+142. 无论过去还是现在，可爱的少女心是无所不能的——只有这一点，无论如何都不会改变。
+
+143. 那个白头发的漂亮女孩就是芽衣的...嗯哼哼，被我发现喽。
+
+143.那是...华？唉，她交到了新的朋友，太好了。

docs/blog/technology/Deploying_WSL2_on_Windows_10.md

@@ -1,7 +1,7 @@
 ---
 title: 在 Windows10 上部署 WSL2 并启动 ubuntu 虚拟机
 createTime: 2025/09/29 07:13:17
-cover: https://image.simengweb.com/elysia_cover_image/1pK7sI441p7x25YV.jpg
+cover: /images/elysia/3.jpg
 coverStyle:
     layout: right
 permalink: /article/deploying-wsl2-on-windows-10/

docs/blog/technology/Operate_WSL2.md

@@ -1,7 +1,7 @@
 ---
 title: WSL2 核心操作指南
 createTime: 2025/09/30 16:08:32
-cover: https://image.simengweb.com/elysia_cover_image/2MEiWEhvsx8OtKeJ.png
+cover: /images/elysia/4.jpg
 permalink: /article/operate-wsl2/
 ---
 这篇文章主要讲WSL2虚拟机核心操作哦～它基于轻量级Hyper-V运行，像贴心小精灵默默工作～还能用命令行精细控制！接下来讲启动/关闭、实例管理、资源配置、网络操作、备份迁移这五大操作，是不是很期待呢～♪

docs/blog/technology/signed-binary-representations.md

@@ -0,0 +1,118 @@
+---
+title: 原码、反码、补码
+createTime: 2026/01/08 16:34:05
+cover: /images/elysia/6.jpg
+coverStyle:
+    layout: right
+permalink: /archives/6f41cabe-41e6-4a09-9f1c-af7dd709a35d/
+---
+
+欢迎来到 0 与 1 的魔法派对！这篇文章将带你揭开原码、反码与补码的奥秘，看计算机如何巧妙地用补码化减为加。让我们一起翻开这页，去捕捉二进制底层那份迷人的理性之美吧♪
+
+<!-- more -->
+
+## 一、 前置概念
+
+计算机底层存储数据的时候使用的是二进制数字，但是计算机在存储一个数字的时候并不是直接存储该数字对应的二进制数，而是存储该数字对应的**二进制数的补码**。
+
+在了解原码、反码和补码之前，我们要了解**机器数**和**真值**的概念。
+
+### 1) 机器数
+一个数在计算机的存储形式是二进制数，我们称这些二进制数为**机器数**。机器数是有符号的，在计算机中用机器数的最高位存放符号位，`0` 表示正数，`1` 表示负数。
+
+### 2) 真值
+因为机器数带有符号位，所以机器数的形式值不等于其真实表示的值（真值）。
+- 以机器数 `1000 0001` 为例，其真正表示的值（首位为符号位）为 `-1`，而形式值（首位就是代表 1）为 `129`。
+- 因此将带符号的机器数的真正表示的值称为机器数的**真值**。
+
+## 二、 原码、反码与补码
+
+### 1) 原码
+原码的表示与机器数真值表示的一样，即用第一位表示符号，其余位表示数值。
+- **正数**：就是它对应的二进制数。
+- **负数**：将绝对值对应的二进制最左边位变为 `1`。
+
+例如十进制的正负 1，用 8 位二进制的原码表示如下：
+- `[+1]` = 原: `[ 0000 0001 ]`
+- `[-1]` = 原: `[ 1000 0001 ]`
+
+### 2) 反码
+- **正数**：和原码相同。
+- **负数**：在其原码的基础上，**符号位不变，其余各位取反**。
+
+示例：
+- `[+1]` = 原: `[ 0000 0001 ]` = 反: `[ 0000 0001 ]`
+- `[-1]` = 原: `[ 1000 0001 ]` = 反: `[ 1111 1110 ]`
+
+### 3) 补码
+- **正数**：补码是其原码本身。
+- **负数**：补码是在其原码的基础上，**符号位不变，其余各位取反后加 1**（即在反码的基础上加 1）。
+
+示例：
+- `[+1]` = 原: `[ 0000 0001 ]` = 反: `[ 0000 0001 ]` = 补: `[ 0000 0001 ]`
+- `[-1]` = 原: `[ 1000 0001 ]` = 反: `[ 1111 1110 ]` = 补: `[ 1111 1111 ]`
+
+## 三、 数据在计算机中的存储形式
+
+计算机实际上只存储**补码**，所以说原码转换为补码的过程，也可以理解为数据存储到计算机内存中的过程。
+
+在原、反、补码中，正数的表示是一模一样的，而负数的表示是不相同的。因此对于负数的补码来说，我们不能直接用进制转换将其转换为十进制数值，因为这样是得不到计算机真正存储的十进制数的。**应该将其转换为原码后，再将转换得到的原码进行进制转换为十进制数**（机器数包含符号位）。
+
+## 四、 为什么会使用原码、反码、补码
+
+对于人脑来说，知道机器数的第一位是符号位是一件很轻松的事情，但对于计算机基础电路设计来说判别第一位是符号位是非常难和复杂的事情。
+
+为了让计算机底层设计更加简单，于是设计将符号位参与运算，并且**只保留加法**的方法，通过**加上一个负数的方式来实现减法**。这样让计算机运算更加简单，并且也让符号位参与到运算中去。
+
+## 五、 使用原码、反码与补码进行运算
+
+### 1) 使用原码运算
+计算十进制表达式：`1 - 1 = 0`
+```text
+1 - 1 = 1 + (-1)
+      = 原:[ 0000 0001 ] + 原:[ 1000 0001 ]
+      = 原:[ 1000 0010 ] = -2
+```
+**结论**：如果用原码表示，让符号位也参与计算，对于减法来说，结果是不正确的。这也是计算机内部在存储数据时不使用原码的原因。为了解决这一问题，出现了反码。
+
+### 2) 使用反码运算
+计算十进制表达式：`1 - 1 = 0`
+```text
+1 - 1 = 1 + (-1)
+      = 原:[ 0000 0001 ] + 原:[ 1000 0001 ]
+      = 反:[ 0000 0001 ] + 反:[ 1111 1110 ]
+      = 反:[ 1111 1111 ] = 原:[ 1000 0000 ] = -0
+```
+**结论**：通过计算我们发现用反码计算减法，结果的真值部分是正确的。唯一的问题出现在 "0" 这个特殊的数值上。虽然人们理解上 `+0` 和 `-0` 是一样的，但是 0 带符号是没有任何意义的，而且会有 `[0000 0000]原` 和 `[1000 0000]原` 两个编码表示 0。为了解决这一问题，出现了补码。
+
+### 3) 使用补码运算
+计算十进制表达式：`1 - 1 = 0`
+```text
+1 - 1 = 1 + (-1)
+      = 原:[ 0000 0001 ] + 原:[ 1000 0001 ]
+      = 补:[ 0000 0001 ] + 补:[ 1111 1111 ]
+      = 补:[ 0000 0000 ] = 原:[ 0000 0000 ] = 0
+```
+**结论**：这样 0 用 `[0000 0000]` 表示，而以前出现问题的 `-0` 则不存在了。而且人们还发现可以用 `[1000 0000]` 表示 `-128`。
+
+**-128 的推算过程如下**：
+```text
+(-1) + (-127) = -128
+              = 原:[ 1000 0001 ] + 原:[ 1111 1111 ]
+              = 补:[ 1111 1111 ] + 补:[ 1000 0001 ]
+              = 补:[ 1000 0000 ]
+```
+> **注意**：因为实际上是使用以前的 `-0` 的补码来表示 `-128`，所以 `-128` 并没有原码和反码表示。只要补码是 `[1000 0000]`，其十进制数值就为 `-128`。
+
+### 4) 小结
+因为补码能多存储一个 `-128`，而且在计算机底层中存储的是补码，所以在计算机中一个 8 位的二进制数的存储范围是用补码表示的 `[-128, 127]`，而不是用原码或反码表示的 `[-127, 127]`。这也可以解释为什么计算机中一个字节的取值范围是 `[-128, 127]`。
+
+## 六、 总结（牢记）
+
+- **二进制的最高位是符号位**：`0` 表示正数，`1` 表示负数。
+- **正数三码合一**：正数的原码、反码、补码都一样。
+- **负数反码**：它的原码符号位不变，其它位取反。
+- **负数补码**：它的反码 + 1；反之，负数反码 = 负数补码 - 1。
+- **0 的表示**：`0` 的反码、补码都是 `0`。
+- **运算方式**：在计算机运算的时候都是以 **“补码”** 的方式来运算的。
+- **查看结果**：当我们看运算结果的时候，要看它的**原码**（重点）。

docs/blog/website/EdgeOne_Pages_Images.md

@@ -1,7 +1,7 @@
 ---
 title: 通过 EdgeOne Pages 搭建图床
 createTime: 2025/09/29 02:28:17
-cover: https://image.simengweb.com/elysia_cover_image/0lQviAbmMCVGN0Y6.png
+cover: /images/elysia/5.jpg
 permalink: /article/8gihio2v/
 ---
 

docs/friends.md

@@ -22,4 +22,9 @@ list:
     link: https://www.ajohn.top/
     avatar: https://github.com/zzyAJohn.png
     desc: 我希望正在读这句话的人永远开心
+  -
+    name: 小小夏
+    link: https://notes.simengweb.com
+    avatar: https://image.simengweb.com/images/xxx.jpg
+    desc: Kawasaki天下第一！
 ---

docs/notes/ops/blockchain/theory/fisco-bcos-node-type.md

@@ -1,5 +1,5 @@
 ---
-title: fisco-bcos-node-type
+title: 区块链的节点
 createTime: 2025/10/05 13:07:05
 permalink: /ops/blockchain/theory/fisco-bcos-node-type/
 ---

docs/notes/ops/docker/ETLCloud.md

@@ -0,0 +1,78 @@
+---
+title: ETLCloud
+createTime: 2025/12/24 17:13:36
+permalink: /ops/docker/other/ETLCloud/
+---
+
+## 前置环境
+这里安装之前，需要先安装 mongodb 数据库，可以参考 [使用 Docker 部署 MongoDB](mongodb.md)
+
+## 安装 ETLCloud
+
+拉取社区版本镜像：
+```bash
+docker pull ccr.ccs.tencentyun.com/restcloud/restcloud-etl:V4.0
+```
+
+### 部署容器
+
+如果您已经运行过同名容器，请先删除：
+```bash
+docker rm -f restcloud-etl-V4.0
+```
+
+使用以下命令进行部署（包含授权绑定、数据持久化和端口映射）：
+```bash
+docker run -d \
+  --restart=always \
+  --privileged=true \
+  --name restcloud-etl-V4.0 \
+  --mac-address=01:D2:F4:18:B8:67 \
+  -v /data/tomcat:/usr/tomcat \
+  -p 9527:8080 \
+  ccr.ccs.tencentyun.com/restcloud/restcloud-etl:V4.0
+```
+
+**参数说明：**
+- `--restart=always`: 容器退出时总是重启（如系统重启）。
+- `--privileged=true`: 赋予容器特权模式，确保初始化正常。
+- `--mac-address`: 固定 MAC 地址，用于绑定 License 授权（**注意：第一个字节必须为偶数，建议使用 02 开头**）。
+- `-v /data/tomcat:/usr/tomcat`: 将 Tomcat 目录挂载到宿主机，实现数据持久化。
+- `-p 9527:8080`: 访问端口映射，宿主机访问端口为 9527。
+
+拷贝容器中的 tomcat 目录到主机上
+```bash
+docker cp e0419ad8a2bf31743ec17368cf4098e293c36761842a7dcff8280fbc34195fba:/usr/tomcat /data/
+```
+删除之前创建的简单容器
+```bash
+docker rm -f e0419ad8a2bf31743ec17368cf4098e293c36761842a7dcff8280fbc34195fba
+```
+在 /data/tomcat 路径下，编辑ETLCloud mongo相关的配置文件，这里的信息参考之前创建的 MongoDB 实例。
+这里我额外修改了 server.port ,这里太容易和其他的服务端口冲突，所以这里修改为 9527。
+```bash
+sudo vim ./webapps/ROOT/WEB-INF/classes/application.properties
+
+server.port=9527
+...
+#集群服务器之间同步用的公共配置数据库,空表示和配置库一起
+spring.data.mongodb.host=127.0.0.1:27018
+spring.data.mongodb.repositories.enabled=true
+#MongoDb的数据库认证用户名及密码,没有可以为空
+spring.data.mongodb.username=admin
+spring.data.mongodb.password=admin
+...
+```
+然后可以启动容器，样例如下：
+```bash
+docker run -d --restart=always --restart=on-failure:5 --privileged=true --name restcloud-etl-V4.0 --mac-address=自定义mac地址 -v /home/tomcat:/usr/tomcat -p 8080:8080 镜像id
+```
+具体命令，这里的MAC地址参数一定是要有的，不然每次重新创建之后MAC地址会变就需要重新生成SN码
+
+这里的MAC地址不要和博主写一样的...自己随机一个或者随便写一个就行
+```bash
+docker run -d --restart=always --restart=on-failure:5 --privileged=true --name restcloud-etl-V4.0 --mac-address=02:D2:00:00:00:67 -v /data/tomcat:/usr/tomcat -p 9527:8080 4a5c0ed2a5b2
+```
+然后访问 服务器IP:9527/restcloud/admin/login 就可以啦
+
+后面的话就是去官网申请一个SN码，然后就可以开始使用啦。

docs/notes/ops/docker/Postgres.md

@@ -0,0 +1,69 @@
+---
+title: 使用 Docker 部署 Postgres
+createTime: 2025/12/25 10:52:34
+permalink: /ops/docker/db/postgres/
+---
+
+## 在 Ubuntu 上部署 Postgres 实例
+
+拉取 Postgres 镜像：
+```bash
+docker pull postgres
+```
+
+> [!IMPORTANT] 注意事项
+> 从 **PostgreSQL 18+** 版本开始，官方镜像建议将数据目录挂载到 `/var/lib/postgresql` 而非 `/var/lib/postgresql/data`。如果你是从旧版本升级镜像，直接挂载旧目录会导致启动失败。
+
+### 极简运行 Postgres 实例
+```bash
+docker run --restart=always -itd --name postgres -p 5432:5432 -e POSTGRES_PASSWORD=postgres postgres
+```
+解析：
+- `--restart=always`：容器重启时自动启动。
+- `-itd`：交互式模式运行容器，后台模式。
+- `--name postgres`：为容器命名为 postgres。
+- `-p 5432:5432`：将主机的 5432 端口映射到容器的 5432 端口。
+- `-e POSTGRES_PASSWORD=postgres`：设置 Postgres 数据库的密码为 postgres。
+- `postgres`：使用 Postgres 镜像。
+
+### 配置 Postgres 持久化实例
+
+#### 方案一：使用最新版本 (18+)
+创建一个目录用于存储 Postgres 数据：
+```bash
+mkdir -p /data/postgres/
+```
+运行 Postgres 容器：
+```bash
+docker run --restart=always -itd \
+  --name postgres \
+  -p 5432:5432 \
+  -e POSTGRES_PASSWORD=postgres \
+  -v /data/postgres/:/var/lib/postgresql \
+  postgres
+```
+
+#### 方案二：固定使用旧版本 (如 17)
+如果你有现存的 `/var/lib/postgresql/data` 格式数据，建议固定版本：
+```bash
+docker run --restart=always -itd \
+  --name postgres \
+  -p 5432:5432 \
+  -e POSTGRES_PASSWORD=postgres \
+  -v /data/postgres/:/var/lib/postgresql/data \
+  postgres:17
+```
+解析：
+- `-v /data/postgres/:/var/lib/postgresql/data`：将主机的 /data/postgres/ 目录挂载到容器的 /var/lib/postgresql/data 目录，用于持久化存储数据。
+
+#### 进入容器之后修改 postgres 用户密码
+进入 Postgres 容器：
+```bash
+docker exec -it postgres psql -U postgres
+```
+解析：
+- `docker exec -it postgres psql -U postgres`：进入 Postgres 容器的 psql 命令行界面，使用 postgres 用户进行登录。
+修改 postgres 用户密码为 postgres：
+```sql
+ALTER USER postgres PASSWORD 'postgres';
+```

docs/notes/ops/docker/README.md

@@ -0,0 +1,39 @@
+---
+title: Docker 部署运维
+createTime: 2025/12/24 16:39:34
+permalink: /ops/docker/
+---
+
+欢迎来到 Docker 运维笔记！✨
+
+在这里，我们将一起探索那些神奇的“小盒子”——Docker 容器。它们就像是装满惊喜的礼盒，把复杂的程序都整整齐齐地收纳在一起，是不是很有趣呢？♪
+
+不管是部署数据库，还是搭建各种好玩的应用，只要有了这些小盒子，一切都会变得像魔法一样简单又优雅呢～真期待看到你在运维的道路上，也能像花朵一样绽放光彩呢。🌸
+
+好啦，让我们开始这段美妙的旅程吧～如果遇到困难，这里会一直提供帮助的哦～
+
+## 常用基础命令 🛠️
+
+为了更顺畅地开启这段旅程，这里准备了一些常用的魔法指令：
+
+### 容器管理
+- `docker ps`：查看正在运行的小盒子。
+- `docker ps -a`：查看所有的小盒子（包括休息中的）。
+- `docker stop <ID>`：让小盒子暂时休息一下。
+- `docker start <ID>`：唤醒休息中的小盒子。
+- `docker rm <ID>`：送走不再需要的小盒子。
+
+### 镜像管理
+- `docker images`：查看我们收集的所有魔法镜像。
+- `docker pull <name>`：从云端下载新的魔法镜像。
+- `docker rmi <ID>`：清理不再需要的魔法镜像。
+
+### 日志与调试
+- `docker logs -f <ID>`：实时查看小盒子里的悄悄话。
+- `docker exec -it <ID> /bin/bash`：亲自钻进小盒子里面看看。
+
+## 部署清单 📋
+
+- [MongoDB 部署魔法](./mongodb.md)
+- 更多惊喜，敬请期待～✨
+

docs/notes/ops/docker/mongodb.md

@@ -0,0 +1,69 @@
+---
+title: 使用 Docker 部署 MongoDB
+createTime: 2025/12/24 16:34:00
+permalink: /ops/docker/db/mongodb/
+---
+
+本教程将介绍如何使用 Docker 快速部署一个 MongoDB 实例。
+
+## 在 Ubuntu 上部署 MongoDB:4.2 实例
+
+我们先拉取 MongoDB:4.2 镜像：
+
+```bash
+docker pull mongo:4.2
+```
+
+创建一个目录用于存储 MongoDB 数据：
+
+```bash
+mkdir -p /data/mongo/
+```
+
+启动 MongoDB 容器：
+```bash :wrap
+sudo docker run --restart=always -itd --name mongo -p 27018:27017 -v /data/mongo/:/data/db  mongo:4.2 --auth
+```
+命令详解：
+- `--restart=always`：容器重启时自动启动。
+- `-itd`：交互式模式运行容器，后台模式。
+- `--name mongo`：为容器命名为 mongo。
+- `-p 27018:27017`：将主机的 27018 端口映射到容器的 27017 端口。
+- `-v /data/mongo/:/data/db`：将主机的 /data/mongo/ 目录挂载到容器的 /data/db 目录，用于持久化存储数据。
+- `mongo:4.2`：使用 MongoDB:4.2 镜像。
+- `--auth`：启用身份验证功能。
+
+进入 MongoDB 容器：
+```bash
+docker exec -it mongo mongo admin
+```
+
+### 在 MongoDB 容器中创建管理员用户
+先进入 admin 数据库
+```bash
+use admin;
+```
+创建管理员用户 admin, 密码 root, 角色为 root。
+```bash
+db.createUser( { user: "root", pwd: "root", roles:['root'] });
+```
+退出 MongoDB 容器：
+```bash
+exit
+```
+使用 root 用户进行登录
+```bash
+docker exec -it mongo mongo admin -u root -p root
+```
+这里还能创建一个 admin 用户，用密码 admin，角色为 readWriteAnyDatabase, dbAdminAnyDatabase。
+```bash
+db.createUser( { user: "admin", pwd: "admin", roles:['readWriteAnyDatabase','dbAdminAnyDatabase'] } );
+```
+验证用户，这里会登录到 admin
+```bash
+db.auth("admin","admin");
+```
+删除用户的话可以使用，注意这里要切换回 root 用户
+```bash
+db.dropUser("admin");
+```

docs/notes/ops/linux/other.md

@@ -0,0 +1,12 @@
+---
+title: 一些零散的命令
+createTime: 2025/12/31 10:00:30
+permalink: /ops/linux/other/
+---
+
+## 文件处理相关
+
+统计当前目录下的所有文件加起来有多少行
+```
+wc -l * | tail -n 1
+```

docs/notes/programming/solidity/README.md

@@ -7,3 +7,15 @@ permalink: /programming/solidity/
 
 ## Solidity 智能合约概述
 
+Solidity 是一种用于编写智能合约的静态类型编程语言，它运行在以太坊虚拟机（EVM）上。
+
+## 推荐的资料
+推荐的编辑器
+
+Remix IDE：[https://remix.ethereum.org/](https://remix.ethereum.org/)
+
+有在线版本，也可以下载之后使用，而且可以通过 Docker 部署，很方便
+
+Solidity 学习资料：
+- [Solidity 官方文档](https://docs.soliditylang.org/zh-cn/latest/index.html)
+- [cryptozombies](https://cryptozombies.io/zh/course)

docs/notes/programming/solidity/basic-syntax.md

@@ -6,180 +6,83 @@ permalink: /programming/solidity/basic-syntax/
 
 # Solidity 基础语法与数据类型～(≧∇≦)ﾉ
 
-嗨～欢迎来到 Solidity 基础语法的学习时间！今天我们要一起探索 Solidity 这门神奇语言的基本结构和数据类型哦～准备好了吗？Let's go！(๑>◡<๑)
+## Solidity 文件基础框架
 
-## 智能合约的基本结构 🏗️
+Solidity 文件的基础框架通常包含以下几个部分：
 
-让我们先来看一个最简单的 Solidity 智能合约是什么样子的吧：
+1.  **SPDX 许可证标识符 (SPDX License Identifier)**：为了避免法律问题和明确智能合约的开源许可证，建议在合约的开头添加 SPDX 许可证标识符。
+2.  **Solidity 版本声明 (Pragma)**：这会告诉编译器您希望使用哪个版本的 Solidity 来编译您的代码。
+3. **ABI编码编译指示**：通过`pragma abicoder v1`或`pragma abicoder v2`来指定ABI编码版本。
+4.  **合约定义 (Contract Definition)**：这是您编写智能合约代码的主体部分。
+
+下面是一个基础的 Solidity 文件框架示例，您可以直接使用：
 
 ```solidity
 // SPDX-License-Identifier: MIT
-pragma solidity ^0.8.0;
+pragma solidity ^0.8.20;
+pragma experimental ABIEncoderV2;
 
-contract HelloWorld {
-    // 状态变量
-    string public greeting = "Hello, World!";
-    
-    // 函数
-    function setGreeting(string memory _greeting) public {
-        greeting = _greeting;
-    }
-    
-    function getGreeting() public view returns (string memory) {
-        return greeting;
-    }
-}
-```
-
-是不是看起来有点像其他编程语言呀？让我们来一点一点地了解它吧～
-
-## 版本声明和许可证 📜
-
-在 Solidity 合约的最开始，我们需要添加两行重要的声明：
-
-```solidity
-// SPDX-License-Identifier: MIT
-pragma solidity ^0.8.0;
-```
-
-- **许可证声明**：告诉别人你的代码使用什么许可证，可以自由使用吗？
-- **版本声明**：指定合约使用的 Solidity 编译器版本，`^0.8.0` 表示可以使用 0.8.0 及以上的版本哦～
-
-## 数据类型 🌈
-
-Solidity 有很多有趣的数据类型，让我们来认识一下它们吧～
-
-### 值类型
-
-这些类型在赋值时会直接复制值哦～
-
-#### 布尔型 (Boolean)
-
-```solidity
-bool public isActive = true;
-bool public isPaused = false;
-```
-
-布尔型只有两个值：`true` 和 `false`，就像开关一样简单！(๑˘ᴗ˘๑)
-
-#### 整型 (Integer)
-
-```solidity
-int public negativeNumber = -42;
-uint public positiveNumber = 42;
-
-// 你还可以指定位数哦～
-uint8 public smallNumber = 255;  // 0-255
-uint256 public bigNumber = 1000000000000000000;  // 这是 1 以太币的 wei 值哦～
-```
-
-整型分为有符号（`int`）和无符号（`uint`）两种，可以存储正数和负数呢～
-
-#### 地址型 (Address)
-
-```solidity
-address public owner = 0x71C7656EC7ab88b098defB751B7401B5f6d8976F;
-
-// 可以转账的地址类型
-address payable public recipient = payable(0x71C7656EC7ab88b098defB751B7401B5f6d8976F);
-```
-
-地址类型非常特别，它用于存储以太坊账户的地址，就像是账户的身份证号码一样～`address payable` 还可以接收以太币转账呢！
-
-### 引用类型
-
-这些类型在赋值时只会传递引用，而不是复制整个值哦～
-
-#### 字符串 (String)
-
-```solidity
-string public message = "Hello, Solidity!";
-string public name = "祀梦";
-```
-
-字符串用于存储文本数据，就像你平时写的便签一样～
-
-#### 数组 (Array)
-
-```solidity
-// 固定大小的数组
-uint[5] public fixedArray = [1, 2, 3, 4, 5];
-
-// 动态大小的数组
-uint[] public dynamicArray;
-
-// 你还可以在函数中这样使用哦～
-function addNumber(uint _number) public {
-    dynamicArray.push(_number);
-}
-```
-
-数组就像是一个收纳盒，可以按顺序存放多个相同类型的数据呢～
-
-#### 映射 (Mapping)
-
-```solidity
-// 映射：地址 => 余额
-mapping(address => uint) public balances;
-
-// 使用方式
-function deposit() public payable {
-    balances[msg.sender] += msg.value;
-}
-```
-
-映射是 Solidity 中非常强大的数据结构，就像是一个魔法字典，可以通过键快速找到对应的值～
-
-## 变量作用域 🔍
-
-在 Solidity 中，变量有不同的作用域哦：
-
-### 状态变量
-
-```solidity
 contract MyContract {
-    // 状态变量：存储在区块链上的
+    // 在这里编写您的合约代码
-    uint public myStateVariable = 42;
 }
 ```
 
-状态变量是存储在区块链上的，所有合约函数都可以访问它们，就像是合约的公共记忆一样～
+## Solidity 基础数据类型
 
-### 局部变量
+- 布尔类型（bool）：值为 `true` 和 `false`
+    - 运算符：`!`（逻辑非）、`&&`（逻辑与）、`||`（逻辑或）、`==`（等于）、`!=`（不等于）
+- 整形（int/uint）：
+    - 有符号整数（int）：可以表示负数和零。
+    - 无符号整数（uint）：只能表示非负数。
+    - 整数类型可以是8位、16位、32位、64位或256位。（只要是八的倍数都可以）
+    - 例如：`int8`、`uint256`等。
+    - 运算符：
+        - 比较运算符：`<=`,`<`,`>=`,`>`
+        - 位运算符：`&`（按位与）、`|`（按位或）、`^`（按位异或）、`~`（按位取反）
+        - 移位运算符：`<<`（左移）、`>>`（右移）
+        - 算数运算符：`+`（加法）、`-`（减法）、`*`（乘法）、`/`（除法）、`%`（取余）
+        - 对于一个整数类型`X`，可以使用`type(X).min`和`type(X).max`来获取其最小值和最大值。
+
+
+
+## Solidity 基础语法结构
+
+## Solidity 基础操作
+
+### 导入其他源文件
+
+Solidity 支持导入其他源文件，使用`import`语句。例如：
 
 ```solidity
-function myFunction() public {
+import "filename.sol";
-    // 局部变量：只在函数内部可见
-    uint myLocalVariable = 100;
-}
 ```
 
-局部变量只在定义它们的函数内部可见，函数执行结束后就会消失哦～
+这将导入`filename.sol`文件中的合约代码。
 
-### 全局变量
+还可以创建一个新的全局符号
 
 ```solidity
-function getSender() public view returns (address) {
+import * as NewName from "filename.sol"
-    // msg.sender 是一个全局变量，包含当前调用者的地址
-    return msg.sender;
-}
 ```
 
-全局变量是 Solidity 内置的特殊变量，可以在任何地方使用，它们提供了关于区块链和交易的重要信息呢～
+这将创建一个新的全局符号`NewName`，您可以在合约中使用它来引用`filename.sol`文件中的合约,例如`NewName.ContractName`。
 
-## 小练习 🏋️‍♀️
+还可以在导入的同时重命名符号：`import {symbol1 as alias, symbol2} from "filename";`
 
-现在让我们来做一个小练习吧！试着编写一个简单的计数器合约，包含以下功能：
+### 注释
 
-1. 一个状态变量来存储计数值
+Solidity 支持两种类型的注释：
-2. 一个函数来增加计数
-3. 一个函数来减少计数
-4. 一个函数来获取当前计数值
 
-你可以做到吗？相信自己，你一定可以的！(๑•̀ㅂ•́)و✧
+1.  **行注释**：使用`//`来注释单行代码。
+2.  **块注释**：使用`/*`和`*/`来注释多行代码。
 
-## 写在最后～💌
+例如：
 
-今天我们学习了 Solidity 的基础语法和数据类型，这些都是构建智能合约的基石哦～虽然一开始可能会觉得有点复杂，但只要多练习，你一定会越来越熟练的！下节课我们将学习 Solidity 的函数和修饰器，敬请期待吧～
+```solidity
+// 这是一个行注释
 
-如果有任何问题，欢迎随时提问哦～让我们一起在区块链的世界里快乐地探索吧！(づ￣ 3￣)づ
+/*
+这是一个
+块注释
+*/
+```

docs/notes/programming/solidity/case-analysis.md

@@ -0,0 +1,922 @@
+---
+title: 十份代码实例
+createTime: 2025/10/10 11:07:11
+permalink: /programming/solidity/analysis/case-analysis/
+password: simeng
+---
+
+## 题目一
+
+原题：
+
+1.食品信息（FoodInfoItem）的接口编码
+
+（1）编写食品信息实体的接口，完成可溯源食品信息初始化，实现可追溯的原始生产商食品信息上链功能
+
+（2）编写分销商食品上链信息接口，根据食品溯源智能合约地址获取分销商上链食品的信息
+
+（3）编写超市进行食品上链信息的接口，根据食品溯源智能合约地址获取超市上链食品信息。
+
+2.食品溯源(Trace)的接口编码
+
+（1）编写食品溯源智能合约生产商Producer添加食品接口，必须生产商才能添加可溯源的食品，实现溯源功能
+
+（2）编写食品溯源智能合约分销商Distributor添加食品接口，必须分销商才能添加可溯源的食品，实现溯源功能
+
+（3）编写食品溯源智能合约超市Retailer添加食品接口，必须超市才能添加可溯源的食品，实现溯源功能
+
+3.角色（Role）管理的接口编码
+
+（1）编写食品溯源增加角色接口，必须是未增加的角色才能被添加，实现添加角色的功能
+
+（2）编写食品溯源移除角色接口，必须是已增加的角色才能被移除，实现移除角色的功能
+
+（3）编写食品溯源角色授权接口，必须是授权的角色地址，实现角色权限管理功能
+
+::: code-tabs
+@tab Distributor.sol
+```solidity
+pragma solidity ^0.4.25;
+
+import "./Roles.sol";
+
+//中间商角色
+contract Distributor {
+    using Roles for Roles.Role;
+
+    event DistributorAdded(address indexed account);
+    event DistributorRemoved(address indexed account);
+
+    Roles.Role private _distributors;
+
+    constructor (address  distributor ) public {
+        _addDistributor(distributor);
+    }
+
+    modifier onlyDistributor() {
+        require(isDistributor(msg.sender), "DistributorRole: caller does not have the Distributor role");
+        _;
+    }
+
+    function isDistributor(address account) public view returns (bool) {
+        return _distributors.has(account);
+    }
+
+    function addDistributor(address account) public onlyDistributor {
+        _addDistributor(account);
+    }
+
+    function renounceDistributor() public {
+        _removeDistributor(msg.sender);
+    }
+
+    function _addDistributor(address account) internal {
+        _distributors.add(account);
+        emit DistributorAdded(account);
+    }
+
+    function _removeDistributor(address account) internal {
+        _distributors.remove(account);
+        emit DistributorRemoved(account);
+    }
+}
+```
+@tab FoodInfoItem.sol
+```solidity
+pragma solidity >=0.4.22 <0.5.0;
+pragma experimental ABIEncoderV2;
+
+//食品信息管理合约
+// 1.	保存食品基本信息:时间戳(流转过程中),用户名(流转过程中),用户地址信息(流转过程中),食品质量(流转过程中),食物名称,当前用户名称,质量,状态.
+// 2.	对食品基本信息进行初始化
+// 3.	实现两个方法:中间商添加食品信息;超市添加食品信息
+// 4.	实现显示食品信息的方法
+
+contract FoodInfoItem{
+    uint[] _timestamp;//①保存食品流转过程中各个阶段的时间戳
+    string[] _traceName;//②保存食品流转过程各个阶段的用户名
+    address[] _traceAddress;//③保存食品流转过程各个阶段的用户地址信息（和用户一一对应）
+    uint8[] _traceQuality;//④保存食品流转过程中各个阶段的质量
+    string _name;//⑤食品名称
+    string _currentTraceName;//⑥当前用户名称
+    uint8 _quality;//⑦质量（0=优质 1=合格 2=不合格）
+    uint8 _status;//⑧状态（0:生产 1:分销 2:出售）
+    address _owner;//⑨初始化owner
+
+  constructor (string name, string traceName, uint8 quality, address producer) public {
+        _timestamp.push(now);
+        _traceName.push(traceName);
+        _traceAddress.push(producer);
+        _traceQuality.push(quality);
+        _name = name;
+        _currentTraceName = traceName;
+        _quality = quality;
+        _status = 0;
+        _owner = msg.sender;
+    }
+
+    function addTraceInfoByDistributor(string traceName,address distributor, uint8 quality) public returns(bool) {
+        require(_status == 0 , "status must be producing");
+        require(_owner == msg.sender,"only trace contract can invoke")
+        //②
+        _timestamp.push(now);
+        _traceName.push(traceName);
+        _currentTraceName = traceName;
+        _traceAddress.push(distributor);
+        _quality = quality;
+        //③
+        //④
+        _traceQuality.push(_quality);
+        _status = 1;
+        return true;
+    }
+
+    function addTraceInfoByRetailer(string traceName,address retailer, uint8 quality) public returns(bool) {
+        require(_status == 1 , "status must be distributing");
+        require(_owner == msg.sender,"only trace contract can invoke")
+        //②
+        _timestamp.push(now);
+        _traceName.push(traceName);
+        _currentTraceName = traceName;
+        _traceAddress.push(retailer);
+        _quality = quality;
+        //③
+        //④
+        _traceQuality.push(_quality);
+        _status = 2;
+        return true;
+    }
+    function getTraceInfo() public constant returns(uint[], string[], address[], uint8[]) {
+        return(_timestamp, _traceName, _traceAddress, _traceQuality);
+    }
+
+    function getFood() public constant returns(uint, string, string, string, address, uint8) {
+        return(_timestamp[0], _traceName[0], _name, _currentTraceName, _traceAddress[0], _quality);
+    }
+
+}
+```
+@tab Producer.sol
+```solidity
+pragma solidity ^0.4.25;
+
+import "./Roles.sol";
+
+//生产者角色
+contract Producer {
+    using Roles for Roles.Role;
+
+    event ProducerAdded(address indexed account);
+    event ProducerRemoved(address indexed account);
+
+    Roles.Role private _producers;
+
+    constructor (address producer) public {
+        _addProducer(producer);
+    }
+
+    modifier onlyProducer() {
+        require(isProducer(msg.sender), "ProducerRole: caller does not have the Producer role");
+        _;
+    }
+
+    function isProducer(address account) public view returns (bool) {
+        return _producers.has(account);
+    }
+
+    function addProducer(address account) public onlyProducer {
+        _addProducer(account);
+    }
+
+    function renounceProducer() public {
+        _removeProducer(msg.sender);
+    }
+
+    function _addProducer(address account) internal {
+        _producers.add(account);
+        emit ProducerAdded(account);
+    }
+
+    function _removeProducer(address account) internal {
+        _producers.remove(account);
+        emit ProducerRemoved(account);
+    }
+}
+```
+@tab Retailer.sol
+```solidity
+pragma solidity ^0.4.25;
+
+import "./Roles.sol";
+
+//零售商角色（超市）
+contract Retailer {
+    using Roles for Roles.Role;
+
+    event RetailerAdded(address indexed account);
+    event RetailerRemoved(address indexed account);
+
+    Roles.Role private _retailers;
+
+    constructor (address retailer) public {
+        _addRetailer(retailer);
+    }
+
+    modifier onlyRetailer() {
+        require(isRetailer(msg.sender), "RetailerRole: caller does not have the Retailer role");
+        _;
+    }
+
+    function isRetailer(address account) public view returns (bool) {
+        return _retailers.has(account);
+    }
+
+    function addRetailer(address account) public onlyRetailer {
+        _addRetailer(account);
+    }
+
+    function renounceRetailer() public {
+        _removeRetailer(msg.sender);
+    }
+
+    function _addRetailer(address account) internal {
+        _retailers.add(account);
+        emit RetailerAdded(account);
+    }
+
+    function _removeRetailer(address account) internal {
+        _retailers.remove(account);
+        emit RetailerRemoved(account);
+    }
+}
+```
+@tab Roles.sol
+```solidity
+pragma solidity ^0.4.25;
+//角色库（管理所有角色地址）
+// 1. 实现增加角色地址
+// 2. 移除角色地址
+// 3. 判断角色地址是否被授权
+library Roles {
+    struct Role {
+        mapping (address => bool) bearer;
+    }
+    function add(Role storage role, address account) internal {
+        require(!has(role, account), "Roles: account already has role");
+        role.bearer[account] = true;
+    }
+    function remove(Role storage role, address account) internal {
+        require(has(role, account), "Roles: account does not have role");
+        role.bearer[account] = false;
+    }
+    function has(Role storage role, address account) internal returns (bool) {
+        require(account != address(0), "Roles: account is the zero address");
+        return role.bearer[account];
+    }
+    
+}
+```
+@tab Trace.sol
+```solidity
+pragma solidity >=0.4.22 <0.7.0;
+pragma experimental ABIEncoderV2;
+import "./FoodInfoItem.sol";
+import "./Distributor.sol";
+import "./Producer.sol";
+import "./Retailer.sol";
+
+//食品溯源合约（负责具体食品溯源信息的生成）
+//  1.实现生产食品的方法(新建食品信息)
+//  2.实现食品分销过程中增加溯源信息的接口
+//  3.实现食品出售过程中增加溯源信息的接口
+//  4.实现获取食品溯源信息接口
+
+contract Trace is Producer, Distributor, Retailer{
+
+        mapping (uint256 => address)  foods;//食品溯源id到具体食品溯源合约的映射表
+        uint[]  foodList;
+
+        //构造函数
+        constructor(address producer, address distributor, address retailer)
+	public Producer(producer)
+	Distributor(distributor)
+	Retailer(retailer){
+
+        }
+        //生成食品溯源信息接口
+        //只有Producer能调用
+        //name 食品名称
+        //traceNumber 食品溯源id
+        //traceName 当前用户名称
+	    //quality 当前食品质量
+        function newFood(string name,uint256 traceNumber, string traceName, uint8 quality)
+	public onlyProducer returns(uint)
+        {
+            require(foods[traceNumber] == address(0),"traceName already exist");//④
+            FoodInfoItem food = new FoodInfoItem(name,traceName,quality,msg.sender);//⑤
+            foods[traceNumber] = food;//⑥
+            foodList.push(traceNumber);//⑦
+            retur food;//⑧
+        }
+
+        //食品分销过程中增加溯源信息的接口
+        //只有Distributor能调用
+        //traceNumber 食品溯源id
+        //traceName 当前用户名称
+        //quality 当前食品质量
+        function addTraceInfoByDistributor(uint256 traceNumber,string traceName, uint8 quality)
+	public onlyRetailer returns(bool) {
+            require(foods[traceNumber] != address(0),"traceNumber does not exist");
+            //③
+            return FoodInfoItem(foods[traceNumber]).addTraceInfoByDistributor(traceName,msg.sender, quality);
+        }
+
+        //食品出售过程中增加溯源信息的接口
+        //只有Retailer能调用
+        //traceNumber 食品溯源id
+        //traceName 当前用户名称
+        //quality 当前食品质量
+        function addTraceInfoByRetailer(uint256 traceNumber,string traceName, uint8 quality)
+	public onlyRetailer returns(bool) {
+            require(foods[traceNumber != address(0)], "traceNumber does not exist");
+            return FoodInfoItem(foods[traceNumber]).addTraceInfoByRetailer(traceName,msg.sender, quality);
+        }
+
+        //获取食品溯源信息接口
+        //string[] 保存食品流转过程中各个阶段的相关信息
+        //address[] 保存食品流转过程各个阶段的用户地址信息（和用户一一对应）
+        //uint8[] 保存食品流转过程中各个阶段的状态变化
+        function getTraceInfo(uint256 traceNumber) public constant returns(uint[], string[], address[], uint8[]) {
+            require(foods[traceNumber] != address(0), "traceNumber does not exist");
+            return FoodInfoItem(foods[traceNumber]).getTraceInfo();
+        }
+
+        function getFood(uint256 traceNumber) public constant returns(uint, string, string, string, address, uint8) {
+            require(foods[traceNumber] != address(0), "traceNumber does not exist");
+            return FoodInfoItem(foods[traceNumber]).getFood();
+        }
+
+        function getAllFood() public constant returns (uint[]) {
+            return foodList;
+        }
+}
+```
+:::
+## 题目二
+
+题目：
+
+1.供应链金融实体信息编码（6分）
+
+（1）编写供应链金融智能合约的实体接口，完成实体通用数据的初始化，实现企业和票据实体信息上链的功能；（2分）
+
+（2）编写企业上链信息接口，实现供应链金融的企业信息上链；（2分）
+
+（3）基于给定的智能合约代码以及注释，完成银行向企业交易的接口函数；（2分）
+
+2.供应链金融公司与公司接口编码（6分）
+
+（1）编写公司与公司之间进行交易的历史存证上链接口，实现公司与公司之间的交易功能；（2分）
+
+（2）编写创建存证的接口，实现创建存证的功能；（2分）
+
+（3）编写交易金额数量变化的接口，实现凭证交易双方资金的变化功能；（2分）
+
+3.供应链金融公司与银行交易的接口编码（4分）
+
+（1）编写公司与银行之间进行交易的历史存证上链接口，实现公司与银行之间的交易功能；（2分）
+
+（2）编写创建存证的接口，实现创建存证的功能；（1分）
+
+（3）编写交易金额数量变化的接口，实现凭证交易双方资金的变化功能；（1分）
+
+::: code-tabs
+@tab xxx.sol
+```solidity
+```
+@tab xxx.sol
+```solidity
+```
+@tab xxx.sol
+```solidity
+```
+:::
+## 题目三
+
+题目：
+
+子任务2-2-1：太阳能板管理接口编码
+
+1. 根据文档要求，编写太阳能板新增接口功能，必须将新增太阳能板数据存入指定表中，在存储完成后需触发后事件并返回存储与否的标识；
+
+2. 根据文档要求，编写太阳能板修改接口，必须通过指定表修改完成数据更新，在完成更新后需触发事件并返回更新与否的标识。
+
+子任务2-2-2：能源管理接口编码
+
+1. 根据文档要求，编写能源新增接口功能，必须将新增能源数据存入指定表中，在存储完成后需触发后事件并返回存储与否的标识；
+
+2. 根据文档要求，编写能源修改接口，必须通过指定表修改完成数据更新，在完成更新后需触发事件并返回更新与否的标识。
+
+子任务2-2-3：合约部署和调用
+
+1. 解决代码错误和警告，正确编译并部署合约，成功获取部署的合约地址和ABI；
+
+2. 调用太阳能板查询合约接口，完整验证业务流程；
+
+3. 调用能源查询合约接口，完整验证业务流程。
+
+::: code-tabs
+@tab xxx.sol
+```solidity
+```
+@tab xxx.sol
+```solidity
+```
+@tab xxx.sol
+```solidity
+```
+:::
+## 题目四
+
+原题：
+
+1.编写原材料接口newMaterial，初始化原材料信息，返回合约地址，并实现原材料信息上链功能。
+
+2.编写获取存原材料接口getMaterial，根据合约地址获取原材料信息
+
+3.编写食品物流上链接口addLogistic，实现食品物流信息上链功能
+
+4.编写获取食品物流信息的接口getLogistics，根据食品产品编号获取物流信息
+
+::: code-tabs
+@tab Logistics.sol
+```solidity
+pragma solidity 0.6.10;
+
+pragma experimental ABIEncoderV2;
+
+contract Logistics {
+    
+    struct LogisticsData {
+        address cargo; //货物合约地址
+        address orgin; //货物上级合约地址
+        address destination; //货物下级合约地址
+        string memo; //备注信息
+        uint createdAt; //创建时间
+        uint queryCount; //已查询次数
+    }
+    
+    LogisticsData[] private _logisticsData; //全部物流信息数组
+    
+    uint public recordCount;//所有记录条数
+    uint public queryCount;//所有查询次数
+    
+    //可自行添加形参和返回值
+    function addLogistics(address _cargo,address _orgin,【请补充】) public {
+        //TODO：”请补充缺失代码
+    }
+    
+    //可自行添加形参和返回值
+    function getLogisticsInfo(address _cargo) public returns(LogisticsData[] memory _cargoLogisticsData) {
+        
+        //TODO：”请补充缺失代码
+        
+    }
+    
+}
+```
+@tab Material.sol
+```solidity
+pragma solidity 0.6.10;
+
+contract Material {
+    struct Material {
+        address owner;
+        string name;
+        string id;
+        string memo;
+        uint createdAt;
+        bool exist;
+    }
+    
+    mapping(string => Material) public materials;
+    //可自行添加形参和返回值
+    function newMaterial(string memory _name,string memory _id,【请补充】) public {
+        
+        //TODO：”请补充缺失代码
+    }
+
+
+    //可自行添加形参和返回值
+    function getMaterial(string memory id) public view returns(【请补充】) {
+    
+        //TODO：”请补充缺失代码
+    }
+    
+}
+```
+:::
+
+参考答案：
+
+::: code-tabs
+@tab Logistics.sol
+```solidity
+pragma solidity 0.6.10;
+
+pragma experimental ABIEncoderV2;
+
+contract Logistics {
+    
+    struct LogisticsData {
+        address cargo; //货物合约地址
+        address orgin; //货物上级合约地址
+        address destination; //货物下级合约地址
+        string memo; //备注信息
+        uint createdAt; //创建时间
+        uint queryCount; //已查询次数
+    }
+    
+    LogisticsData[] private _logisticsData; //全部物流信息数组
+    
+    uint public recordCount;//所有记录条数
+    uint public queryCount;//所有查询次数
+    
+    //可自行添加形参和返回值
+    function addLogistics(address _cargo,address _orgin,【请补充】) public {
+        //TODO：”请补充缺失代码
+    }
+    
+    //可自行添加形参和返回值
+    function getLogisticsInfo(address _cargo) public returns(LogisticsData[] memory _cargoLogisticsData) {
+        
+        //TODO：”请补充缺失代码
+        
+    }
+    
+}
+```
+@tab Material.sol
+```solidity
+pragma solidity 0.6.10;
+
+contract Material {
+    struct Material {
+        address owner;
+        string name;
+        string id;
+        string memo;
+        uint createdAt;
+        bool exist;
+    }
+    
+    mapping(string => Material) public materials;
+    //可自行添加形参和返回值
+    function newMaterial(string memory _name,string memory _id,【请补充】) public {
+        
+        //TODO：”请补充缺失代码
+    }
+
+
+    //可自行添加形参和返回值
+    function getMaterial(string memory id) public view returns(【请补充】) {
+    
+        //TODO：”请补充缺失代码
+    }
+    
+}
+```
+:::
+
+## 题目五
+
+题目：
+
+1.个人签章信息接口编码
+
+（1）编写个人签章智能合约的实体接口，完成实体通用数据的初始化，实现签章和用户实体信息上链的功能
+
+（2）编写签章信息上链的接口，实现Seal合约的构造函数；
+
+（3）基于给定的智能合约代码以及注释，完成ElectronicSeal合约判断多人签章文件编号是否存在的函数。
+
+2.电子印章接口编码
+
+（1）基于给定的智能合约代码以及注释，完成ElectronicSeal合约获取多人签章信息函数；
+
+（2）基于给定的智能合约代码以及注释，完成ElectronicSeal合约多人签章函数。
+
+::: code-tabs
+@tab xxx.sol
+```solidity
+```
+:::
+## 题目六
+
+题目：
+
+1.食品信息（Food）、成员信息(Member)、生产订单信息(Productions)的结构体功能编码（6分）
+
+（1）编写食品信息实体功能。（2分）
+
+（2）完善智能合约中用户结构体内容（2分）
+
+（3）编写生产订单(Productions)结构体信息。（2分）
+
+2.食品溯源(Trace)的接口编码（6分）
+
+（1）根据食品信息结构体，完成食品信息添加相应功能（2分）
+
+（2）编写食品溯源收购商创建收购订单功能。
+
+（3）编写食品溯源创建运输订单功能。
+
+3.角色（Role）管理的接口编码（4分）
+
+（1）编写食品溯源增加角色接口，实现添加角色的功能。（1分）
+
+（2）编写食品溯源获取角色功能。（1分）
+
+（3）编写食品溯源修改角色功能。（2分）
+
+::: code-tabs
+@tab xxx.sol
+```
+```
+:::
+## 题目七
+
+原题：
+**子任务2-2-1：航班延误保险购买合约编码（5分）**
+
+（1）编写航班保险购买上链接口，完成只有购买机票的用户可以购买保险、必须缴纳正确的保费金额、购买保险的时间不能超过购买机票后的0.5小时的功能，符合条件则用户可以购买保险，将用户购买保险状态上链；（3分）
+
+（2）编写退保接口，完成保险公司预存赔偿金后，用户无法退保，反之用户可退保的功能，将用户退保状态上链，并退还用户保费功能。（2分）
+
+**子任务2-2-2：航班信息存证上链合约编码**
+
+（1）编写获取航班信息接口，实现依据航班号获得航班号对应的计划起飞时间、实际起飞时间、到达时间、是否延误状态的功能；
+
+（2）编写判断航班是否延误接口，实现依据航班号获得航班号对应的航班是否延误，得到航班是否延误的结果功能。
+
+**子任务2-2-3：航班延误险理赔合约编码**
+
+（1）编写客户理赔接口，实现如果航班延误超过4小时，将赔偿金赔偿给乘客的功能；
+
+（2）编写保险公司收取保费接口，实现如果航班没有延误或者延误时间少于4小时，将保费转账给保险公司，并退还赔偿金的功能。
+
+::: code-tabs
+@tab Claims.sol
+```solidity
+pragma solidity ^0.6.10;
+
+import "./FlightDelayInsurance.sol";
+
+contract Claims is  FlightDelayInsurance{
+  
+    // 定义航班信息结构体
+    struct Flight {
+        uint256 departureTime; // 航班出发时间
+        uint256 delayTime; // 航班延误时间
+        bool isDelayed; // 航班是否延误
+        bool isInsured; // 航班是否购买保险
+    }
+    
+    // 定义保险公司地址
+    address public insuranceCompany;
+    
+    // 定义航班信息映射
+    mapping(bytes32 => Flight) public flights;
+    
+    // 定义购买保险事件
+    event BuyInsurance(bytes32 flightKey, address passenger, uint256 premium);
+
+    // 定义航班延误事件
+    event FlightDelay(bytes32 flightKey, uint256 delayTime);
+    
+    // 定义理赔事件
+    event Claim(bytes32 flightKey, address passenger, uint256 amount);
+
+    // 定义保险公司预存的赔偿金
+    uint256 public compensationNew;
+    
+    // 构造函数，初始化保险公司地址和赔偿金
+    constructor() FlightDelayInsurance(platformS,airlineV,insuranceCompanyC,premium,compensation) public {
+        insuranceCompany = msg.sender;
+        compensationNew = compensation;
+    }
+    
+    // 更新航班信息函数
+    function updateFlight(bytes32 flightKey, uint256 departureTime, uint256 delayTime, bool isDelayed) payable public {
+        // 判断调用者是否为保险公司
+        require(msg.sender == insuranceCompany, "Only insurance company can update flight information");
+        // 更新航班信息
+        flights[flightKey].departureTime = departureTime;
+        flights[flightKey].isDelayed = isDelayed;
+        
+/*********** 客户理赔接口 **********/
+    //任务2-2-3，请编写合约代码
+
+
+
+/********** 客户理赔接口 ***********/   
+
+/*********** 保险公司收取保费接口开发 **********/
+    //任务2-2-3，请编写合约代码
+
+
+
+
+/********** 保险公司收取保费接口开发 ***********/  
+  // 触发航班延误事件
+        emit FlightDelay(flightKey, delayTime); 
+    }
+}
+
+```
+@tab FlightDelayInsurance.sol
+```solidity
+pragma solidity ^0.6.10;
+
+contract FlightDelayInsurance {
+    address public platformS; // 平台S的地址
+    address public airlineV; // 航空公司V的地址
+    address public insuranceCompanyC; // 保险公司C的地址
+    uint public premium; // 保险费
+    uint public compensation; // 赔偿金额
+    uint public purchaseTime; // 购买保险的时间
+    uint public depositTime; // 存入赔偿金额的时间
+    bool public purchased; // 是否购买了保险
+    bool public deposited; // 是否存入了赔偿金额
+    mapping(address => bool) public insured; // 已退保的用户
+    mapping(address => bool) public policy; // 已生成保单的用户
+    mapping(address => bool) public purchasedTicket; // 已购买机票的用户
+
+    constructor(address _platformS, address _airlineV, address _insuranceCompanyC, uint _premium, uint _compensation) public {
+        platformS = _platformS; // 初始化平台S的地址
+        airlineV = _airlineV; // 初始化航空公司V的地址
+        insuranceCompanyC = _insuranceCompanyC; // 初始化保险公司C的地址
+        premium = _premium; // 初始化保险费
+        compensation = _compensation; // 初始化赔偿金额
+    }
+    
+    function purchaseTicket() public {
+        require(!purchasedTicket[msg.sender], "Ticket has already been purchased"); // 该用户已购买机票
+        purchasedTicket[msg.sender] = true; // 标记该用户已购买机票
+        purchaseTime = block.timestamp;
+    }
+/*********** 航班保险购买上链接口开发 **********/
+    //任务2-2-1，请编写合约代码
+
+
+
+
+/********** 航班保险购买上链接口开发 ***********/    
+    function depositCompensation() public payable {
+        require(msg.sender == insuranceCompanyC, "Only insurance company C can deposit compensation"); // 只有保险公司C可以存入赔偿金额
+        require(msg.value == compensation, "Compensation amount is incorrect"); // 赔偿金额不正确
+        require(block.timestamp < depositTime + 2 hours, "Deposit time has expired"); // 存入赔偿金额的时间已过期
+        deposited = true; // 标记已存入赔偿金额
+    }
+
+/*********** 退保接口开发 **********/
+    //任务2-2-1，请编写合约代码
+    
+
+
+
+
+/********** 退保接口开发 ***********/   
+    
+    function generatePolicy() public {
+        require(deposited, "Compensation has not been deposited"); // 赔偿金额未存入，无法生成保单
+        require(msg.sender == platformS, "Only platform S can generate policy"); // 只有平台S可以生成保单
+        require(!policy[msg.sender], "Policy has already been generated"); // 该用户已生成保单
+        policy[msg.sender] = true; // 标记该用户已生成保单
+    }
+}
+
+```
+@tab FlightManagement.sol
+```solidity
+pragma solidity ^0.6.10;
+
+contract FlightManagement {
+    
+    // 航班结构体
+    struct Flight {
+        string flightNumber; // 航班号
+        uint256 scheduledDepartureTime; // 计划起飞时间
+        uint256 actualDepartureTime; // 实际起飞时间
+        uint256 arrivalTime; // 到达时间
+        bool delayed; // 是否延误
+    }
+    
+    // 航班号到航班信息的映射
+    mapping(string => Flight) flights;
+    
+    // 添加航班
+    function addFlight(string memory _flightNumber, uint256 _scheduledDepartureTime, uint256 _arrivalTime) public {
+        flights[_flightNumber] = Flight(_flightNumber, _scheduledDepartureTime, 0, _arrivalTime, false);
+    }
+    
+    // 更新实际起飞时间
+    function updateActualDepartureTime(string memory _flightNumber, uint256 _actualDepartureTime) public {
+        flights[_flightNumber].actualDepartureTime = _actualDepartureTime;
+    }
+        
+/*********** 获取航班信息接口开发 **********/
+    //任务2-2-2，请编写合约代码
+   
+
+
+
+/********** 获取航班信息接口开发 ***********/   
+
+/*********** 编写判断航班是否延误接口开发 **********/
+    //任务2-2-2，请编写合约代码
+   
+
+
+
+/********** 编写判断航班是否延误接口开发 ***********/   
+}
+
+```
+:::
+## 题目八
+
+题目：
+子任务2-2-1：信息管理合约编码
+1. 编写检索个人信息接口，完成患者通过身份证号检索其姓名、性别、年龄的功能；
+2. 编写信息管理接口，完成允许患者与医院和科室进行信息管理，通过身份证号检索到患者的个人信息，将预约信息显示给患者，并发送到患者的账户地址中的功能；
+子任务2-2-2：病历管理合约编码
+1. 编写新建病历接口，实现检索病人对应科室既往病历，授权医生查看，如果没有既往病历则创建一个新的病历功能；
+2. 编写结束就诊接口，实现检查病历是否已经填写，并结束病历咨询的功能。
+子任务2-2-3：病历查看合约编码
+根据需求用例文档在待补充源码中完成病历查看合约的编码，解决代码错误和警告，正确编译合约，功能调试正确，运行合约中的检查退款请求状态、自动批准退款请求接口功能。
+1．编写查看病人个人信息接口，实现获取指定病人个人信息功能；
+2．编写查看病人病情描述接口，实现获取指定病人病情描述功能。
+::: code-tabs
+@tab xxx.sol
+```
+```
+:::
+## 题目九
+
+题目：
+
+子任务2-2-1：合同管理合约编码
+
+（1）编写房东签署合同接口，完成本合同位置只允许房东签署，通过合同中的信息生成租赁合同的链上哈希，触发协议签署合同的功能，其中合同中的信息包括房东链上账户、租客链上账户、租赁开始时间、租赁结束时间、月租金额、押金金额、交租时间；
+
+（2）编写租金支付接口，完成只允许租客支付租金的规则，检查支付的租金金额是否正确，触发记录租金支付情况的功能。
+
+子任务2-2-2：违约管理合约编码
+
+（1）编写房东终止合同接口，实现房东终止合同判断，如果租客已经终止合同则合同无效，如果合同有效，对合同终止状态进行标记，将剩余押金退还给租客的功能；
+
+（2）编写租客终止合同接口，实现租客终止合同判断，如果房东已经终止合同则合同无效，如果合同有效，对合同终止状态进行标记，将剩余押金退还给房东的功能。
+
+子任务2-2-3：押金管理合约编码
+
+根据需求用例文档在待补充源码中完成押金管理合约的编码，解决代码错误和警告，正确编译合约，功能调试正确，运行合约中的租客缴纳押金情况查询、房东收取押金情况查询接口功能。
+
+（1）编写租客缴纳押金情况查询接口，实现查询租客是狗已缴纳押金功能；
+
+（2）编写房东收取押金情况查询接口，实现房东是否已收到押金的功能。
+
+::: code-tabs
+@tab xxx.sol
+```
+```
+:::
+## 题目十
+
+题目：
+
+子任务2-2-1：账户管理合约编码
+
+根据需求用例文档在待补充源码中完成账户管理合约的编码，解决代码错误和警告，正确编译合约，功能调试正确。需要编写生成账户接口，完成从外部部门检索姓名、年龄、雇主、开始日期、工资、缴费基数，将人员信息进行综合存储功能。
+
+子任务2-2-2：费用管理合约编码
+
+根据需求用例文档在待补充源码中完成费用管理合约的编码，解决代码错误和警告，正确编译合约，功能调试正确，运行添加新职工账户、添加新雇主账户。
+
+1．编写添加新职工账户接口，实现当账户不存在，只有管理员可以添加职工账户，职工新账户中账户余额为0，未被赞助的功能；
+
+2．编写添加新雇主账户接口，实现当账户不存在，只有管理员可以添加雇主账户，雇主新账户中账户余额为0，已被赞助的功能；
+
+子任务2-2-3：保险转移合约编码
+
+根据需求用例文档在待补充源码中完成保险转移合约的编码，解决代码错误和警告，正确编译合约，功能调试正确，运行合约中的申请转移关系、接收账户转移接口。
+
+1．编写申请转移关系接口，实现创建申请、添加到申请列表功能，其中创建申请需要设置申请人地址、原城市、目标城市、停缴状态、批准状态；
+
+2．编写接收账户转移接口，实现获取账户，进行账户授权状态、接收状态、个人账户基金、统筹账户基金、养老保险账户的信息设置；
+
+::: code-tabs
+@tab xxx.sol
+```
+```
+:::

docs/notes/programming/solidity/other/hardhat.md

@@ -0,0 +1,56 @@
+---
+title: Hardhat 相关知识
+createTime: 2025/10/14 14:57:06
+permalink: /programming/solidity/other/hardhat/
+---
+
+## HardHat2 部署
+### Node.js v16 安装
+HardHat2 需要 Node.js v16 及以上的版本
+这里给出的是通过 npm 来将旧版本升级到 Node.js v16 的，如果想要直接安装的话通过 `yum install nodejs` 或者 `apt install nodejs` 来即可。
+```bash
+npm config set registry https://registry.npmmirror.com
+sudo npm install -g n
+sudo n 16
+``` 
+安装完成之后可以查看版本，如果没有更新可以重新刷新一下环境（直接退出重连最简单）
+```bash
+node -v
+# v16.20.2
+npm -v
+# 6.14.15
+```
+### 安装 Hardhat2
+创建一个 hardhat2-project 目录，初始化 npm 项目，注意这里不要用 hardhat 作为项目名
+```bash
+mkdir ~/hardhat2-project
+cd ~/hardhat2-project
+npm init -y
+```
+安装 Hardhat 2
+```bash
+npm install --save-dev hardhat@^2.23.0
+```
+初始化 Hardhat2 项目
+```bash
+npx hardhat init
+```
+选择
+```bash
+✔ What do you want to do? · Create a JavaScript project
+✔ Hardhat project root: · /root/hardhat2-project
+✔ Do you want to add a .gitignore? (Y/n) · y
+✔ Help us improve Hardhat with anonymous crash reports & basic usage data? (Y/n) · y
+✔ Do you want to install this sample project's dependencies with npm (@nomicfoundation/hardhat-toolbox)? (Y/n) · y
+```
+## 使用 Hardhat2 编译测试合约
+在 hardhat2-project 目录下，执行以下命令来编译合约
+合约都会放在 `contracts` 目录下，这里我们选择了一个默认的合约，因此可以直接编译
+```bash
+# 测试编译
+npx hardhat compile
+# 运行测试
+npx hardhat test
+# 查看可用任务
+npx hardhat help
+```

docs/notes/programming/solidity/other/miscellaneous.md

@@ -0,0 +1,88 @@
+---
+title: 一些没分类的小知识
+createTime: 2025/10/12 15:34:38
+permalink: /programming/solidity/other/miscellaneous/
+---
+
+## 关于 memory 和 storage 存储类型
+
+- `storage`：合约的持久化状态数据，保存在链上状态。对 `storage` 的写入最昂贵，读取也比内存贵；修改会永久生效。
+- `memory`：函数调用期间的临时数据，函数返回后即释放。对 `memory` 的更改不会持久化。
+- （补充）`calldata`：外部函数参数的只读数据位置，零拷贝、不可修改，用于节省 gas。
+
+### 生命周期与成本
+- `storage` 写入昂贵、读取较贵；适合保存需要长期存在的状态。
+- `memory` 在函数结束时释放，读取/写入相对便宜；适合临时计算与返回值。
+- 复杂引用类型（数组、`struct`、`mapping`、`string`、`bytes`）在函数参数或局部变量处通常必须显式标注数据位置。
+
+### 默认与必须声明
+- 状态变量总是位于 `storage`（例如 `User[] public users;`）。
+- 外部函数（`external`）的复杂类型参数默认是 `calldata`；内部/公共函数需要显式标注 `memory` 或 `storage`。
+- 局部变量的复杂类型必须指定数据位置，否则编译报错。
+
+### 拷贝与引用语义
+- 从 `storage` 读取到 `memory` 会“复制”数据；修改 `memory` 副本不影响原始 `storage`。
+- 使用 `storage` 局部变量可以得到对状态数据的“引用”，对其赋值会持久化。
+
+```solidity
+pragma solidity ^0.8.20;
+
+contract Users {
+    struct User { string name; uint age; }
+    User[] public users;
+
+    function add(string memory name, uint age) external {
+        users.push(User(name, age)); // 写入 storage
+    }
+
+    function updateName(uint i, string memory newName) external {
+        User storage u = users[i];   // storage 引用（指向链上状态）
+        u.name = newName;            // 修改持久化生效
+    }
+
+    function tryUpdate(uint i) external {
+        User memory u = users[i];    // 从 storage 复制到 memory
+        u.age = 99;                  // 仅修改副本，不会影响链上状态
+    }
+}
+```
+
+### 在内部函数传递 storage 引用
+- 仅内部/私有函数可以接收 `storage` 引用参数，从而直接修改状态；外部函数参数不能是 `storage`。
+
+```solidity
+pragma solidity ^0.8.20;
+
+contract Users2 {
+    struct User { string name; uint age; }
+    User[] public users;
+
+    function _inc(User storage u) internal { u.age += 1; }
+
+    function birthday(uint i) external {
+        _inc(users[i]); // 传递 storage 引用，持久化修改
+    }
+}
+```
+
+### 动态 memory 数组与限制
+- 可在 `memory` 中构造动态数组：`new uint[](n)`；适合作为返回值或临时计算。
+- `mapping` 只能存在于 `storage`，不能在 `memory` 中创建或拷贝。
+
+```solidity
+pragma solidity ^0.8.20;
+
+contract Arrays {
+    function make(uint n) external pure returns (uint[] memory a) {
+        a = new uint[](n);
+        for (uint i = 0; i < n; i++) a[i] = i;
+    }
+}
+```
+
+### 常见坑与实践建议
+- 给 `storage` 变量整体赋值会进行深拷贝或引用变更（依据类型），要明确拷贝成本与语义。
+- 修改 `memory` 副本不会持久化；要修改链上状态请使用 `storage` 引用。
+- 大型 `string/bytes/数组` 在 `memory↔storage` 间复制成本高，尽量减少不必要的复制。
+- 外部函数能用 `calldata` 的地方尽量使用（只读参数），节省 gas。
+

docs/notes/programming/web/README.md

@@ -0,0 +1,90 @@
+---
+title: Web 概览与学习路径
+permalink: /programming/web/
+createTime: 2025/10/28 22:20:00
+---
+
+# Web 是什么？
+
+Web（万维网）是一个基于浏览器与服务器的“信息与应用平台”。用户通过浏览器访问网站，浏览器通过 **HTTP/HTTPS** 与服务器交互，服务器返回页面或数据，最终在浏览器中呈现并产生交互。
+
+- 浏览器：渲染页面（HTML/CSS/JS）、执行脚本、发起网络请求。
+- 服务器：处理业务逻辑、读写数据库、对外提供 API。
+- 数据库：持久化存储（MySQL/PostgreSQL/MongoDB 等）。
+
+简而言之：浏览器负责“看与用”，服务器负责“算与存”。
+
+## 前端基础概念
+
+- HTML：结构与语义（页面“骨架”）。
+- CSS：表现与布局（页面“外观”）。
+- JavaScript：交互与逻辑（页面“大脑”）。
+- 现代前端：模块化、构建工具、组件化框架（Vue/React/Svelte 等）。
+
+入门建议：先掌握原生 HTML/CSS/JS，再学习框架。你可以从本站文章开始：
+- 基础教程 → `/programming/web/basic-syntax/html-css-js/`
+
+## 后端基础概念
+
+- 服务器与框架：Node.js（Express/NestJS）、Python（Flask/Django/FastAPI）、Java（Spring Boot）、Go（Gin/Fiber）。
+- API 风格：REST（常见）、GraphQL（灵活查询）。
+- 数据库与 ORM：MySQL/PostgreSQL（关系型）、MongoDB（文档型）；ORM 如 Prisma/TypeORM/SQLAlchemy。
+- 常见能力：认证授权（Session/JWT/OAuth）、文件上传、任务队列、缓存、日志与监控。
+
+## 前后端如何协作
+
+- 约定接口：路径、方法（GET/POST/PUT/DELETE）、参数与返回 JSON。
+- 跨域与安全：CORS、CSRF/XSS/SQL 注入防护、HTTPS。
+- 开发流程：
+  1) 需求与原型 → 2) API 设计 → 3) 前端页面与交互 → 4) 后端实现与测试 → 5) 联调与验收 → 6) 部署与监控。
+
+## 学习路径（从 0 到 1）
+
+1. 基础三件套：HTML + CSS + JavaScript（建议用 VSCode + Live Server）。
+2. 工具与方法：Git/GitHub、浏览器开发者工具、HTTP/REST、请求调试（Postman/Insomnia）。
+3. 进阶前端：布局（Flex/Grid）、响应式、ES6+、模块化、打包与构建（Vite/Webpack）。
+4. 后端入门：选择一种语言与框架（如 Node.js + Express），完成 CRUD 与认证。
+5. 数据库：会建表、会写基本查询；理解事务与索引。
+6. 部署与上线：Nginx 反向代理、Docker、环境变量、日志与监控。
+
+建议开发一个“待办清单 + 登录 + 数据持久化”的完整小项目，贯穿前后端与部署。
+
+## 推荐学习资源
+
+通用与入门：
+- [MDN Web Docs（HTML/CSS/JS 全面权威）](https://developer.mozilla.org/)
+- [freeCodeCamp（系统课程与练习）](https://www.freecodecamp.org/)
+- [Roadmap.sh（前端/后端学习路径图）](https://roadmap.sh/)
+
+前端：
+- [HTML/CSS 基础（MDN）](https://developer.mozilla.org/en-US/docs/Learn)
+- [CSS-Tricks（样式与布局技巧）](https://css-tricks.com/)
+- [JavaScript 基础与进阶（MDN）](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
+- [Vue 官方文档](https://vuejs.org/)
+
+后端：
+- [Node.js 文档](https://nodejs.org/en/docs)
+- [Express](https://expressjs.com/)
+- [NestJS](https://docs.nestjs.com/)
+- [Spring Boot](https://spring.io/projects/spring-boot)
+- [Django](https://docs.djangoproject.com/)
+- [Flask](https://flask.palletsprojects.com/)
+- [FastAPI](https://fastapi.tiangolo.com/)
+
+数据库与 ORM：
+- [MySQL](https://dev.mysql.com/doc/)
+- [PostgreSQL](https://www.postgresql.org/docs/)
+- [MongoDB](https://www.mongodb.com/docs/)
+- [Prisma（Node.js ORM）](https://www.prisma.io/docs)
+- [TypeORM](https://typeorm.io/)
+
+工具：
+- [VSCode](https://code.visualstudio.com/)
+- [Postman](https://www.postman.com/)
+- [Insomnia](https://insomnia.rest/)
+- [Docker](https://docs.docker.com/)
+
+## 本站相关内容
+
+- Web 前端基础讲解 → `/programming/web/basic-syntax/html-css-js/`
+- 后续将补充：前端工程化、接口联调、部署与运维实战等专题。

docs/notes/programming/web/basic-syntax/html-css-js.md

@@ -0,0 +1,535 @@
+---
+title: Web 前端基础讲解
+createTime: 2025/10/28 21:23:48
+permalink: /programming/web/basic-syntax/html-css-js/
+---
+
+## 前端开发到底是什么？
+
+前端开发，简单来说，就是**你能在网页上看到和互动的一切**。
+
+想象一下你正在看一个网站：
+
+*   **文字、图片、按钮、菜单**：这些都是前端开发人员用代码“画”出来的。
+*   **点击按钮会发生什么、输入框能打字、图片能放大缩小**：这些互动效果也是前端开发人员用代码实现的。
+
+所以，前端开发就是负责把设计师画好的网站样子，用代码变成用户可以在浏览器里真实看到、摸到、用的东西。它主要涉及三种技术：
+
+1.  **HTML**：就像网页的“骨架”，决定了网页上有什么内容（标题、段落、图片等）。
+2.  **CSS**：就像网页的“衣服”，决定了网页看起来怎么样（颜色、字体、布局等）。
+3.  **JavaScript**：就像网页的“大脑”，决定了网页能做什么（动画、交互、数据处理等）。
+
+总而言之，前端开发就是让网站变得好看、好用、能互动。
+
+## 开发工具
+
+进行前端开发，我们需要一个好用的“工具箱”。其中，**Visual Studio Code (VS Code)** 是一个非常受欢迎且功能强大的选择。
+
+VsCode 官网：[https://code.visualstudio.com/](https://code.visualstudio.com/)
+
+**为什么推荐 VS Code？**
+
+*   **免费且开源**：你可以免费使用它，并且它的代码是公开的，有很多人一起维护和改进。
+*   **轻量级但功能强大**：它启动速度快，占用资源少，但通过安装各种“插件”，可以实现非常多的功能，比如代码高亮、智能提示、调试、版本控制等等。
+*   **支持多种语言**：不仅对 HTML、CSS、JavaScript 有很好的支持，也支持其他很多编程语言。
+*   **丰富的生态系统**：有大量的插件可以帮助你提高开发效率，比如 Live Server（实时预览网页）、Prettier（代码格式化）等。
+*   **跨平台**：无论你使用 Windows、macOS 还是 Linux，都可以安装和使用 VS Code。
+
+### VsCode 前端开发插件推荐
+- **Chinese (Simplified) Language Pack for Visual Studio Code**：中文语言包，方便中文用户使用。
+- **Live Server**：实时预览网页，修改代码后自动刷新。
+- **Prettier**：代码格式化，保持代码风格统一。
+- **HTML CSS Support**：HTML 和 CSS 代码智能提示。
+
+参考文章：
+1. [VSCode安装配置使用教程（最新版超详细保姆级含插件）一文就够了](https://blog.csdn.net/2303_82176667/article/details/137193809)
+2. [快速上手web前端开发（超详细教程）](https://blog.csdn.net/2303_82176667/article/details/137193809)
+
+## HTML5 基础知识讲解
+
+HTML 是一种用来描述网页的语言，用于描述网页的结构和内容。
+
+HTML 并不是一种编程语言，而是一种标记语言。它使用标签来描述网页上的不同元素，比如标题、段落、图片、链接等。
+
+标签指的是由尖括号 `<` 和 `>` 包围的关键词，通常成对出现，用来表示元素的开始和结束。
+
+一个简单的 HTML 实例，用于初步的了解效果：
+```html title='index.html'
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>仲夏夜之梦(notes.simengweb.com)</title>
+</head>
+<body>
+<h1>我的第一个标题</h1>
+<p>我的第一个段落。</p>
+</body>
+</html>
+```
+
+小提示：可以将代码复制到 VsCode 中，然后使用 Live Server 插件就可以实时预览效果啦。
+
+### HTML5 文档分析
+我们以前面的样例代码为例，来对 HTML 文档进行讲解
+
+第一行：`<!DOCTYPE html>`，这是一个文档类型声明，用于告诉浏览器这是一个 HTML5 文档。
+
+第二行：`<html>`，这是 HTML 文档的根元素，所有其他元素都必须嵌套在这个元素中，`<html>` 和 `</html>` 之间的内容就是文档的主体。
+
+第三行到第六行：`<head>`，这是文档的头部元素，用于包含文档的元数据（比如标题、字符编码、外部资源引用等）。
+
+第四行：`<meta charset="utf-8">`，这是一个元数据标签，用于指定文档的字符编码为 UTF-8。UTF-8 是一种常用的字符编码，能够表示世界上几乎所有的字符。如果不写的话可能会导致中文乱码的问题。
+
+第五行：`<title>仲夏夜之梦(notes.simengweb.com)</title>`，这是文档的标题，会显示在浏览器的标题栏或标签页上。
+
+第七行：`<body>`，这是文档的主体元素，用于包含文档的可见内容（比如文字、图片、按钮等），`<body>` 和 `</body>` 之间的内容就是文档的主体内容。
+
+第八行：`<h1>我的第一个标题</h1>`，这是一个一级标题元素，用于表示文档的主要主题。`h1` 元素的内容会显示为较大的字体，通常用于页面的主标题。
+
+第九行：`<p>我的第一个段落。</p>`，这是一个段落元素，用于表示文档中的一个段落。`p` 元素的内容会显示为普通的段落文本。
+
+小提示：在浏览器中打开 F12 开启开发者工具，就可以查看和调试 HTML 文档啦。
+
+## CSS3 基础知识讲解
+
+CSS 是一种用来描述 HTML 文档“长什么样”的语言，专门负责网页的样式、排版与视觉效果。
+
+CSS 也不是编程语言，而是一种“样式表”语言。它通过“选择器”找到 HTML 元素，再给它挂上一条或多条“声明”，告诉浏览器“这个元素应该是什么颜色、多大字号、放在哪里”。
+
+一条 CSS 声明由“属性”和“值”组成，用冒号分隔，以分号结尾；多条声明放在花括号里，就组成了一条“样式规则”。
+
+一个最简单的 CSS 示例，让页面里的标题变成红色、居中显示：
+::: code-tabs
+@tab index.html
+```html
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>仲夏夜之梦(notes.simengweb.com)</title>
+<link rel="stylesheet" href="style.css">
+</head>
+<body>
+<h1>我的第一个标题</h1>
+<p>我的第一个段落。</p>
+</body>
+</html>
+```
+@tab style.css
+```css
+body {
+    background-color:#d0e4fe;
+}
+h1 {
+    color:orange;
+    text-align:center;
+}
+p {
+    font-family:"Times New Roman";
+    font-size:20px;
+}
+```
+:::
+这里的 index.html 中需要添加一条语句，用于引入 CSS 样式表。
+```html
+<link rel="stylesheet" href="style.css">
+```
+然后通过浏览器打开 index.html 就可以看到效果啦。
+
+### CSS 文档分析
+
+我们以前面的样例代码为例，来对 CSS 文档进行讲解
+
+第一到三行：`body { background-color:#d0e4fe; }`，这是一条针对 `<body>` 元素的样式规则。  
+- `body` 是“选择器”，表示要把样式应用到整个网页主体。  
+- `background-color` 是属性，用来设置背景颜色；`#d0e4fe` 是一个淡蓝色色值，因此整个页面会呈现淡蓝色背景。
+
+第四行到第七行：`h1 { color:orange; text-align:center; }`，这是一条针对 `<h1>` 元素的样式规则。  
+- `h1` 是“选择器”，对应 HTML 中的一级标题。  
+- `color:orange;` 把标题文字设为橙色。  
+- `text-align:center;` 让标题在水平方向上居中显示。
+
+第八行到第十一行：`p { font-family:"Times New Roman"; font-size:20px; }`，这是一条针对 `<p>` 元素的样式规则。  
+- `p` 是“选择器”，对应 HTML 中的段落。  
+- `font-family:"Times New Roman";` 指定段落使用 Times New Roman 字体。  
+- `font-size:20px;` 把段落文字大小设为 20 像素，让文字看起来更大、更清晰。
+
+小提示：在 VsCode 中安装“Live Server”插件后，修改并保存 CSS 文件，浏览器会自动刷新，立即看到样式变化，方便调试。
+
+## JavaScript 基础知识讲解
+
+JavaScript（简称 JS）是让网页“动起来、能互动”的语言。它可以：
+- 响应用户操作（点击、输入、滚动等）
+- 修改页面内容与样式（增删节点、改文字/颜色）
+- 与服务器通信、处理数据与状态
+- 实现动画与复杂交互逻辑
+
+下面用一个小示例，演示 JS 如何让页面产生交互效果：
+::: code-tabs
+@tab index.html
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>仲夏夜之梦(notes.simengweb.com)</title>
+  <link rel="stylesheet" href="style.css">
+  <!-- 样式写在外部 CSS 中 -->
+  <!-- JavaScript 推荐放在 body 末尾，或使用 defer 属性 -->
+  <!-- 这里在 body 末尾通过 src 引入外部脚本 -->
+</head>
+<body>
+  <h1>我的第一个标题</h1>
+  <p id="message">我的第一个段落。</p>
+
+  <button id="btn">点我试试</button>
+  <input id="name" placeholder="输入你的名字" />
+
+  <script src="script.js"></script>
+</body>
+</html>
+```
+@tab script.js
+```js
+// 等页面元素加载完成后再执行（避免找不到节点）
+document.addEventListener('DOMContentLoaded', () => {
+  const msg = document.getElementById('message'); // 选择段落节点
+  const btn = document.getElementById('btn');     // 选择按钮
+  const nameInput = document.getElementById('name'); // 选择输入框
+
+  // 点击按钮，修改段落文本与颜色
+  btn.addEventListener('click', () => {
+    msg.textContent = '你点击了按钮！';
+    msg.style.color = 'green';
+    console.log('按钮被点击'); // 打开浏览器控制台可见
+  });
+
+  // 输入时，实时更新欢迎语
+  nameInput.addEventListener('input', (e) => {
+    const name = e.target.value.trim();
+    msg.textContent = name ? `你好，${name}！` : '我的第一个段落。';
+  });
+});
+```
+:::
+
+### JavaScript 文档分析
+我们以前面的样例代码为例，来对 JS 的关键点进行讲解：
+
+- `<script src="script.js"></script>`：在 HTML 中通过 `script` 标签引入外部 JS 文件。常见放置位置是 `</body>` 之前，避免脚本执行时页面元素尚未加载。
+- `document.addEventListener('DOMContentLoaded', ...)`：等待文档结构加载完成再运行 JS，确保能获取到页面元素。
+- `document.getElementById('...')`：选择页面中的元素节点，便于后续读写或绑定事件。
+- `addEventListener('click'/'input', ...)`：给元素绑定事件监听器，描述“发生什么事时要做什么”。
+- `textContent / style`：修改文本与内联样式，从而即时改变页面显示效果。
+- `console.log(...)`：在开发者工具控制台输出调试信息，便于观察程序执行。
+
+### 小提示
+- 打开浏览器开发者工具（F12），切到“Console”能查看 `console.log` 输出；在 “Elements”/“Inspector” 面板能查看并调试 DOM 结构与样式。
+- 在 VSCode 中使用 “Live Server”，保存 `script.js` 后浏览器会自动刷新，方便快速迭代。
+- 现代 JS 推荐使用 `const` 与 `let` 替代 `var`；多用箭头函数与模板字符串（如 `` `你好，${name}` ``）让代码更简洁。
+
+到这里，我们已经分别了解了 HTML（结构）、CSS（样式）与 JavaScript（交互）三者如何协同工作。接下来可以尝试把它们组合起来，做一个小页面练手。
+
+## 动手练习：小作业（只改 HTML/CSS，JS 已提供）
+
+目标：做一个“欢迎卡片”，包含标题、说明文字、输入框与按钮。
+- 点击按钮时切换页面主题（浅色/深色），JS 会自动完成；
+- 输入名字时实时显示欢迎语；
+- 你只需要修改 HTML 和 CSS 来达到视觉与布局效果。
+
+### 作业要求（验收标准）
+- 卡片居中显示，具有圆角、阴影与内边距；
+- 标题居中，段落有合适的行高与间距；
+- 按钮有悬停（hover）与按下（active）的视觉反馈；
+- 输入框获得焦点（focus）时有明显强调样式；
+- 在移动端（窄屏）不溢出，布局能自适应；
+- 深色主题下文字可读、对比度合理。提示：JS 会在 `<body>` 上切换 `theme-dark` 类，你可以在 CSS 中基于该类进行主题覆盖。
+
+### 起步模板
+将以下三份代码保存为同目录下的 `index.html`、`style.css` 与 `script.js`，用 VSCode 的 Live Server 打开 `index.html` 进行预览。完成作业时，请只修改 HTML 和 CSS（保留 JS 的 id 与类名依赖）。
+
+::: code-tabs
+@tab index.html
+```html
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <title>小作业：欢迎卡片</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div class="page">
+    <div class="card" id="card">
+      <h1 class="card__title">欢迎来到我的页面</h1>
+      <p class="card__text" id="message">请点击按钮或输入你的名字</p>
+      <div class="card__actions">
+        <input id="name" class="input" placeholder="输入你的名字" />
+        <button id="btn" class="btn btn--primary">点我切换主题</button>
+      </div>
+    </div>
+  </div>
+  <script src="script.js" defer></script>
+  <!-- 注意：JS 依赖 #message、#btn、#name 这几个 id，请不要改动它们的命名 -->
+  <!-- 你可以新增或调整 class 名，或增删结构，来实现更好的视觉与布局 -->
+</body>
+</html>
+```
+@tab style.css
+```css
+/* 目标：只通过 CSS 实现卡片的视觉与响应式，并支持深色主题 */
+/* 建议：使用 CSS 变量管理主题；在 .theme-dark 上覆盖变量 */
+
+:root {
+  --bg: #f7f9fc;
+  --text: #222;
+  --primary: #ff7a45; /* 可调整为你的品牌色 */
+  --card-bg: #fff;
+  --card-shadow: 0 10px 20px rgba(0,0,0,0.08);
+}
+
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--text);
+  font-family: system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial;
+}
+
+.page {
+  min-height: 100vh;
+  display: grid;
+  place-items: center;
+  padding: 24px;
+}
+
+.card {
+  width: min(640px, 100%);
+  background: var(--card-bg);
+  border-radius: 16px;
+  box-shadow: var(--card-shadow);
+  padding: 24px;
+}
+
+.card__title {
+  margin: 0 0 12px;
+  text-align: center;
+}
+
+.card__text {
+  margin: 0 0 16px;
+  line-height: 1.6;
+  text-align: center;
+}
+
+.card__actions {
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.input {
+  padding: 10px 12px;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  outline: none;
+  min-width: 220px;
+}
+
+.input:focus {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px rgba(255, 122, 69, 0.2);
+}
+
+.btn {
+  padding: 10px 16px;
+  border: none;
+  border-radius: 999px;
+  cursor: pointer;
+  transition: transform .08s ease, box-shadow .2s ease, background-color .2s ease;
+}
+
+.btn--primary {
+  background: var(--primary);
+  color: #fff;
+  box-shadow: 0 6px 12px rgba(255, 122, 69, .3);
+}
+
+.btn--primary:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 8px 16px rgba(255, 122, 69, .4);
+}
+
+.btn--primary:active {
+  transform: translateY(0);
+  box-shadow: 0 4px 8px rgba(255, 122, 69, .3);
+}
+
+/* 任务：为深色主题定义样式。JS 会在 <body> 上切换 `.theme-dark` 类。*/
+body.theme-dark {
+  --bg: #0f172a;
+  --text: #e5e7eb;
+  --primary: #60a5fa; /* 深色下可更柔和 */
+  --card-bg: #1f2937;
+  --card-shadow: none;
+}
+
+/* 可选：为移动端优化 */
+@media (max-width: 480px) {
+  .card { padding: 18px; }
+  .input { min-width: 100%; }
+}
+```
+@tab script.js
+```js
+// JS 已提供：负责交互逻辑，切换主题与显示欢迎语
+// 你只需要改 HTML 和 CSS 即可达成作业要求
+document.addEventListener('DOMContentLoaded', () => {
+  const msg = document.getElementById('message');
+  const btn = document.getElementById('btn');
+  const nameInput = document.getElementById('name');
+
+  // 切换深色主题（在 <body> 上切换 theme-dark 类）
+  btn.addEventListener('click', () => {
+    document.body.classList.toggle('theme-dark');
+    const dark = document.body.classList.contains('theme-dark');
+    msg.textContent = dark ? '深色主题已开启' : '浅色主题已开启';
+  });
+
+  // 实时欢迎语
+  nameInput.addEventListener('input', (e) => {
+    const name = e.target.value.trim();
+    msg.textContent = name ? `你好，${name}！` : '请点击按钮或输入你的名字';
+  });
+});
+```
+:::
+
+### 提示与加分项
+- 可以用 `:root`+CSS 变量统一管理主题色，在 `.theme-dark` 中覆盖变量即可完成切换；
+- 尝试为按钮增加平滑过渡与阴影层次感；
+- 在移动端下让输入框占满一行，按钮在下一行显示；
+- 可自行优化字体、字号与间距，让视觉更加舒适；
+- 加分：实现卡片在深色主题下的微动效（例如背景色淡入）。
+
+## 入门版（更简单，建议先做这个）
+
+目标：做一个“欢迎卡片”，内容包括标题、说明文字、一个输入框和一个按钮。
+- 点击按钮时高亮卡片（JS 已完成，你只需让 `.card.highlight` 在 CSS 里更显眼）。
+- 输入名字时实时显示欢迎语（JS 已完成）。
+- 你只需要修改 HTML 和 CSS，让页面好看、布局合理即可。
+
+验收标准（入门）
+- 卡片居中、圆角、阴影、内边距，整体观感舒适。
+- 按钮有 `hover/active` 反馈，输入框 `focus` 有强调样式。
+- 窄屏下不溢出，内容能自适应。
+
+::: code-tabs
+@tab index.html
+```html
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <title>入门版小作业</title>
+  <link rel="stylesheet" href="style.css">
+  <!-- 保留以下 id：message / btn / name / card -->
+</head>
+<body>
+  <div class="page">
+    <div class="card" id="card">
+      <h1>欢迎</h1>
+      <p id="message">在输入框里写下你的名字</p>
+      <input id="name" placeholder="输入你的名字">
+      <button id="btn">高亮卡片</button>
+    </div>
+  </div>
+  <script src="script.js"></script>
+  <!-- 用 VSCode Live Server 打开 index.html 预览效果 -->
+  <!-- 完成作业时，请只修改 HTML 和 CSS -->
+  <!-- 你可以自由调整颜色、间距、字体与布局，使页面更美观 -->
+</body>
+</html>
+```
+@tab style.css
+```css
+/* 极简样式：你可以在此基础上美化与调整 */
+body {
+  margin: 0;
+  background: #f5f7fa;
+  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
+}
+
+.page {
+  min-height: 100vh;
+  display: grid;
+  place-items: center;
+  padding: 16px;
+}
+
+.card {
+  width: min(360px, 100%);
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 6px 12px rgba(0,0,0,0.08);
+  padding: 16px;
+  text-align: center;
+}
+
+input {
+  width: 100%;
+  padding: 8px 10px;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  outline: none;
+  margin-bottom: 12px;
+}
+
+input:focus {
+  border-color: #1677ff;
+  box-shadow: 0 0 0 2px rgba(22,119,255,.2);
+}
+
+button {
+  padding: 8px 12px;
+  border: none;
+  border-radius: 8px;
+  background: #1677ff;
+  color: #fff;
+  cursor: pointer;
+}
+
+button:hover { filter: brightness(1.05); }
+button:active { filter: brightness(0.95); }
+
+/* JS 点击按钮时会在卡片上切换 .highlight 类 */
+.card.highlight {
+  background: #fffbe6; /* 浅黄色高亮 */
+  box-shadow: 0 8px 16px rgba(0,0,0,0.10);
+}
+```
+@tab script.js
+```js
+// JS 已提供：负责简单交互。请只改 HTML/CSS。
+document.addEventListener('DOMContentLoaded', () => {
+  const msg = document.getElementById('message');
+  const btn = document.getElementById('btn');
+  const nameInput = document.getElementById('name');
+  const card = document.getElementById('card');
+
+  // 实时欢迎语
+  nameInput.addEventListener('input', (e) => {
+    const name = e.target.value.trim();
+    msg.textContent = name ? `你好，${name}！` : '在输入框里写下你的名字';
+  });
+
+  // 切换卡片高亮
+  btn.addEventListener('click', () => {
+    card.classList.toggle('highlight');
+  });
+});
+```
+:::
+
+

docs/notes/programming/web/basic-syntax/html-lists-and-semantic-layout.md

@@ -0,0 +1,468 @@
+---
+title: html 列表与语义布局
+createTime: 2025/11/02 20:47:50
+permalink: /programming/web/basic-syntax/html-lists-and-semantic-layout/
+---
+## 四、列表（UL/OL/LI）
+
+无序列表（圆点）：
+```html title="index.html"
+<ul>
+  <li>学习笔记</li>
+  <li>工具推荐</li>
+  <li>友情链接</li>
+</ul>
+```
+
+有序列表（数字）：
+```html title="index.html"
+<ol>
+  <li>需求与原型</li>
+  <li>API 设计</li>
+  <li>联调与验收</li>
+</ol>
+```
+
+**小案例：展示清单与步骤**
+::: code-tabs
+@tab index.html
+```html
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <title>列表案例</title>
+    <link rel="stylesheet" href="style.css">
+    <script defer src="app.js"></script>
+  </head>
+  <body>
+    <h2>我的清单</h2>
+    <ul>
+      <li>学习笔记</li>
+      <li>工具推荐</li>
+      <li>友情链接</li>
+    </ul>
+    <h2>项目步骤</h2>
+    <ol>
+      <li>需求与原型</li>
+      <li>API 设计</li>
+      <li>联调与验收</li>
+    </ol>
+  </body>
+</html>
+```
+@tab style.css
+```css
+ul, ol { margin: .5rem 0 1rem; padding-left: 1.5rem; }
+li { margin: .25rem 0; }
+```
+@tab app.js
+```js
+document.querySelectorAll('li').forEach(li => li.addEventListener('click', () => li.classList.toggle('done')));
+```
+:::
+
+**小作业：做一个“今日任务清单”**
+::: code-tabs
+@tab index.html
+```html
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <title>今日任务清单</title>
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+    <h1>今天要做的事</h1>
+    <ul>
+      <li>阅读 30 分钟</li>
+      <li>练习 1 个算法题</li>
+      <li>整理房间</li>
+    </ul>
+  </body>
+</html>
+```
+@tab style.css
+```css
+body { font-family: system-ui; margin: 2rem; }
+li { cursor: pointer; }
+.done { text-decoration: line-through; color: #888; }
+```
+:::
+
+## 五、语义化布局（Header/Nav/Main/Section/Article/Aside/Footer）
+
+语义化标签让结构更清晰，搜索引擎更友好：
+```html title="index.html"
+<header>
+  <h1>我的网站</h1>
+  <nav>
+    <a href="/blog/">博客</a>
+    <a href="/notes/">笔记</a>
+  </nav>
+  <!-- 注意：更复杂的导航通常配合 CSS/JS 做响应式菜单 -->
+  <!-- 小提示：块级容器的外层仍可使用 <div> 来做网格或栅格布局 -->
+  <!-- 例如 <div class="container"> 包裹全站 -->
+  <!-- 只是这些语义标签会让搜索引擎更理解结构 -->
+  <!-- 语义标签与 <div> 并不冲突，可以配合使用 -->
+  <!-- 选择语义标签能让你的 HTML 更“有含义”而非只是分区 -->
+  <!-- 如果仅用于布局、无明确语义，用 <div> 即可 -->
+  <!-- 这段说明旨在帮助你建立语义化与布局之间的直觉 -->
+  <!-- 逐步养成好的结构化写法 -->
+  <!-- 让内容更可维护，更易被机器理解 -->
+  <!-- （继续往下看，还会介绍 Article/Section 等） -->
+```
+
+> 语义化标签的要点：这些标签表达了“这是什么内容”，而不是“怎么显示”。更容易被搜索引擎和读屏工具理解。
+
+**小案例：语义化布局入门**
+::: code-tabs
+@tab index.html
+```html
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <title>语义化布局案例</title>
+    <link rel="stylesheet" href="style.css">
+    <script defer src="app.js"></script>
+  </head>
+  <body>
+    <header>
+      <h1>我的网站</h1>
+      <nav>
+        <a href="#home">首页</a>
+        <a href="#blog">博客</a>
+      </nav>
+    </header>
+    <main>
+      <section>
+        <h2>最新文章</h2>
+        <article>
+          <h3>用语义标签改造你的页面</h3>
+          <p>示例段落：用 header/nav/main/section/article/aside/footer 组织结构。</p>
+        </article>
+      </section>
+      <aside>
+        <h2>侧栏</h2>
+        <p>这里可以放导航、标签云或广告位。</p>
+      </aside>
+    </main>
+    <footer>© 2025 祀梦</footer>
+  </body>
+</html>
+```
+@tab style.css
+```css
+body { font-family: system-ui; margin: 0; }
+header, footer { padding: 1rem 2rem; background: #f7f7f7; }
+nav { display: flex; gap: 1rem; }
+main { display: grid; grid-template-columns: 1fr 240px; gap: 1rem; padding: 1rem 2rem; }
+article { background: #fff; padding: 1rem; border: 1px solid #eee; border-radius: 8px; }
+aside { background: #fff; padding: 1rem; border: 1px solid #eee; border-radius: 8px; }
+```
+@tab app.js
+```js
+document.querySelectorAll('nav a').forEach(a => a.addEventListener('click', () => {
+  document.querySelectorAll('nav a').forEach(x => x.classList.remove('active'));
+  a.classList.add('active');
+}));
+```
+:::
+
+**小作业：用语义标签搭一个博客首页**
+::: code-tabs
+@tab index.html
+```html
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <title>博客首页</title>
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+    <header>
+      <h1>博客名称</h1>
+      <nav>
+        <a href="#">首页</a>
+        <a href="#">归档</a>
+        <a href="#">关于</a>
+      </nav>
+    </header>
+    <main>
+      <section>
+        <article>
+          <h2>第一篇文章标题</h2>
+          <p>摘要内容……</p>
+        </article>
+        <article>
+          <h2>第二篇文章标题</h2>
+          <p>摘要内容……</p>
+        </article>
+      </section>
+      <aside>
+        <h2>侧栏</h2>
+        <p>分类、标签或个人简介。</p>
+      </aside>
+    </main>
+    <footer>© 2025 你的名字</footer>
+  </body>
+</html>
+```
+@tab style.css
+```css
+/* 与案例类似的栅格布局样式 */
+main { display: grid; grid-template-columns: 1fr 240px; gap: 1rem; padding: 1rem 2rem; }
+article { background: #fff; padding: 1rem; border: 1px solid #eee; border-radius: 8px; }
+aside { background: #fff; padding: 1rem; border: 1px solid #eee; border-radius: 8px; }
+```
+:::
+
+## 六、表格（Table/TR/TH/TD）
+
+```html title="index.html"
+<table>
+  <thead>
+    <tr>
+      <th>姓名</th>
+      <th>职业</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>祀梦</td>
+      <td>开发者</td>
+    </tr>
+  </tbody>
+</table>
+```
+小提示：表格样式通常用 CSS 来美化（边框、间距、对齐等）。
+
+**小案例：信息表格**
+::: code-tabs
+@tab index.html
+```html
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <title>信息表格案例</title>
+    <link rel="stylesheet" href="style.css">
+    <script defer src="app.js"></script>
+  </head>
+  <body>
+    <table>
+      <thead>
+        <tr><th>姓名</th><th>职业</th><th>城市</th></tr>
+      </thead>
+      <tbody>
+        <tr><td>祀梦</td><td>开发者</td><td>上海</td></tr>
+        <tr><td>小李</td><td>产品经理</td><td>杭州</td></tr>
+        <tr><td>小王</td><td>设计师</td><td>北京</td></tr>
+      </tbody>
+    </table>
+  </body>
+</html>
+```
+@tab style.css
+```css
+table { border-collapse: collapse; width: 100%; }
+th, td { border: 1px solid #ddd; padding: .5rem .75rem; text-align: left; }
+thead th { background: #f7f7f7; }
+tbody tr:nth-child(odd) { background: #fafafa; }
+```
+@tab app.js
+```js
+document.querySelectorAll('tbody tr').forEach(tr => tr.addEventListener('click', () => tr.classList.toggle('highlight')));
+```
+:::
+
+**小作业：制作“课程表”**
+::: code-tabs
+@tab index.html
+```html
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <title>课程表</title>
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+    <table>
+      <thead>
+        <tr><th>时间</th><th>课程</th><th>教室</th></tr>
+      </thead>
+      <tbody>
+        <tr><td>周一 9:00</td><td>数学</td><td>A101</td></tr>
+        <tr><td>周三 14:00</td><td>英语</td><td>B302</td></tr>
+        <tr><td>周五 10:00</td><td>计算机</td><td>C210</td></tr>
+      </tbody>
+    </table>
+  </body>
+</html>
+```
+@tab style.css
+```css
+table { border-collapse: collapse; width: 100%; }
+th, td { border: 1px solid #ddd; padding: .5rem .75rem; }
+thead th { background: #f0f0f0; }
+```
+:::
+
+
+## 七、媒体（Audio/Video/Source）
+
+```html title="index.html"
+<audio src="bgm.mp3" controls loop></audio>
+
+<video src="intro.mp4" controls width="480" poster="cover.jpg" muted></video>
+<!-- 常用属性：controls / autoplay / loop / muted / poster（封面） -->
+```
+
+补充说明：
+- `controls` 提供播放控制；一般不建议隐藏，保证可用性。
+- `autoplay` 可能被浏览器限制；若需自动播放，通常需同时设置 `muted`。
+- `preload` 控制预加载策略（`none`/`metadata`/`auto`），根据页面性能需求选择。
+- `poster` 为视频未播放时的封面图；音频没有封面属性。
+- 使用 `<source>` 指定多种格式与 MIME 类型，提升兼容性：`<source src="xxx.mp4" type="video/mp4">`。
+
+**小案例：嵌入音视频**
+::: code-tabs
+@tab index.html
+```html
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <title>媒体案例</title>
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+    <h2>背景音乐</h2>
+    <audio src="bgm.mp3" controls loop></audio>
+    <h2>介绍视频</h2>
+    <video src="intro.mp4" controls width="480" poster="cover.jpg" muted></video>
+  </body>
+</html>
+```
+@tab style.css
+```css
+video { display: block; margin-top: .5rem; }
+```
+:::
+
+**小作业：添加一段你喜欢的音乐与视频**
+::: code-tabs
+@tab index.html
+```html
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <title>我的媒体</title>
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+    <audio src="music.mp3" controls></audio>
+    <video src="movie.mp4" controls width="480" poster="cover.jpg"></video>
+  </body>
+</html>
+```
+@tab style.css
+```css
+audio, video { display: block; margin: .5rem 0; }
+```
+:::
+
+
+## 八、全局常用属性（任何标签几乎都能用）
+
+- `id`：唯一标识，用于 JS/CSS 精确选择。
+- `class`：分组与样式选择（上一课已讲）。
+- `style`：内联样式（不推荐大量使用，建议写到 CSS 文件）。
+- `title`：悬停提示文字。
+- `data-*`：自定义数据属性（如 `data-user-id="42"`）。
+- `aria-*`：无障碍相关属性，帮助读屏工具理解（如 `aria-label`）。
+
+**小案例：使用 id/class/data/title/aria**
+::: code-tabs
+@tab index.html
+```html
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <title>全局属性案例</title>
+    <link rel="stylesheet" href="style.css">
+    <script defer src="app.js"></script>
+  </head>
+  <body>
+    <button id="likeBtn" class="btn" title="点赞一下" data-count="0" aria-label="点赞">👍 喜欢</button>
+    <p id="msg" class="note" aria-live="polite">点击按钮试试。</p>
+  </body>
+</html>
+```
+@tab style.css
+```css
+.btn { padding: .5rem .75rem; border: 1px solid #ccc; border-radius: 6px; background: #fff; }
+.note { color: #555; }
+```
+@tab app.js
+```js
+const btn = document.getElementById('likeBtn');
+const msg = document.getElementById('msg');
+btn.addEventListener('click', () => {
+  const count = Number(btn.dataset.count || 0) + 1;
+  btn.dataset.count = String(count);
+  msg.textContent = `已点赞 ${count} 次`;
+});
+```
+:::
+
+**小作业：做一个带计数的按钮**
+::: code-tabs
+@tab index.html
+```html
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <title>计数按钮</title>
+    <link rel="stylesheet" href="style.css">
+    <script defer src="app.js"></script>
+  </head>
+  <body>
+    <button id="counter" class="btn" title="点击增加" data-count="0">点击我</button>
+    <p id="status" class="note">当前计数：0</p>
+  </body>
+</html>
+```
+@tab style.css
+```css
+.btn { padding: .5rem .75rem; border: 1px solid #ccc; border-radius: 6px; background: #fff; }
+.note { margin-top: .5rem; }
+```
+@tab app.js
+```js
+const counter = document.getElementById('counter');
+const statusEl = document.getElementById('status');
+counter.addEventListener('click', () => {
+  const count = Number(counter.dataset.count || 0) + 1;
+  counter.dataset.count = String(count);
+  statusEl.textContent = `当前计数：${count}`;
+});
+```
+:::
+
+## 结尾：先结构清晰，再上样式与交互
+
+写网页像搭房子：先把房间（结构标签）安排好，再选家具颜色（CSS），最后加智能设备（JS）。
+
+建议你先用这些常用标签做一个“个人名片页”，含标题、段落、头像图片、导航链接和一个简单表单。练熟后再加样式与交互。
+
+**延伸阅读**：
+- HTML 规范与参考（MDN）：https://developer.mozilla.org/en-US/docs/Web/HTML
+- 无障碍与语义化：https://developer.mozilla.org/en-US/docs/Glossary/Semantics

docs/notes/programming/web/basic-syntax/html-tags-attributes.md

@@ -0,0 +1,424 @@
+---
+title: HTML 常用标签与属性
+createTime: 2025/11/2 19:30:00
+permalink: /programming/web/basic-syntax/html-tags-attributes/
+---
+
+## 文本与标题（H/P/Span/Strong/Em/Div）
+
+**标题**：从重要到不重要，`<h1>` ~ `<h6>`。
+```html title="index.html"
+<h1>我的网站</h1>
+<h2>关于我</h2>
+<h3>联系方式</h3>
+```
+
+### 认识div标签
+
+**什么是 `<div>`？**
+
+`<div>` 是 "division"（分区）的缩写，可以理解为网页中的"容器"或"盒子"。
+
+想象一下搬家时的纸箱：
+
+* 网页 = 整个房间
+* `<div>` = 一个个纸箱
+* 箱子里 = 可以放各种物品（文字、图片、按钮等）
+
+### `<div>` 的基本特点
+
+1. 块级元素
+`<div>` 是块级元素，这意味着：
+
+* 默认会占据整行的宽度
+* 前后会自动换行
+* 就像段落一样，每个`<div>`都会从新的一行开始
+
+**`<div>` 本身没有特定含义，它只是用来分组和布局。**
+
+### 为什么要使用 `<div>`？
+
+没有`<div>`的情况：
+```html title='index.html'
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>仲夏夜之梦</title>
+</head>
+<body>
+<h1>我的网站</h1>
+<p>欢迎来到我的个人网站！</p>
+<img src="photo.jpg" alt="我的照片">
+<p>这是我的个人介绍...</p>
+<button>联系我</button>
+</body>
+</html>
+```
+
+所有元素都堆在一起，很难分别控制样式。
+
+使用 `<div>` 的情况：
+```html title='index.html'
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>仲夏夜之梦</title>
+</head>
+<body>
+<div class="header">
+  <h1>我的网站</h1>
+  <p>欢迎来到我的个人网站！</p>
+</div>
+<div class="content">
+  <img src="photo.jpg" alt="我的照片">
+  <p>这是我的个人介绍...</p>
+</div>
+<div class="footer">
+  <button>联系我</button>
+</div>
+</body>
+</html>
+```
+这样我就可以分别控制每个部分的样式啦！
+
+这个时候又有聪明的小朋友问了：这个class是什么呀？难道说？！是**起的名字！！**
+
+太好了，恭喜你答对了，那么我们为什么要用class呢？
+
+### Class
+
+Class 可以理解为给 HTML 元素起的"组名"或"类别名"，让 CSS 能够精确地找到并美化特定的元素。
+
+想象一个学校：
+* HTML 元素 = 学生
+* Class = 学生的身份（如"三年级一班"、"篮球队员"）
+* CSS = 老师，根据身份给学生安排不同的任务和服装
+
+class基本用法此处就不举例了，详情参照上面的代码。
+
+如果没有class的情况：
+```html title='index.html'
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>仲夏夜之梦</title>
+</head>
+<body>
+<h1>我的网站</h1>
+<p>普通段落</p>
+<p>个人介绍</p>
+<p>重要提示</p>
+<button>普通按钮</button>
+<button>重要按钮</button>
+</body>
+</html>
+```
+
+如果我们想给"重要提示"和"重要按钮"设置特殊样式，很难精确选择！像之前我教的一样css直接用p或者h1来选择的话就无法区分具体每一段的区别了。
+
+这时候就可以用class了！
+::: code-tabs
+@tab index.html
+```html
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>仲夏夜之梦</title>
+</head>
+<body>
+<h1>我的网站</h1>
+<p class="normal">普通段落</p>
+<p class="intro">个人介绍</p>
+<p class="warning">重要提示</p>
+<button class="normal-btn">普通按钮</button>
+<button class="important-btn">重要按钮</button>
+</body>
+</html>
+```
+@tab style.css
+```css
+.warning {
+  color: red;
+  font-weight: bold;
+}
+.important-btn {
+  background-color: red;
+  color: white;
+}
+```
+:::
+**现在自己动手尝试一下**
+
+## 动手练习：小作业
+
+运用所学的 HTML 和 CSS 知识，创建一个美观的个人名片页面。不确定的时候翻翻文档
+
+```html title='index.html'
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <!-- 在这里添加字符编码和标题 -->
+</head>
+<body>
+    <!-- 创建一个名片容器 div，class 为 "card" -->
+    
+        <!-- 在卡片内部分为三个区域： -->
+        
+        <!-- 1. 头部区域：包含姓名和职位 -->
+        <div class="card-header">
+            <!-- 添加 h1 标题显示你的姓名 -->
+            <!-- 添加 p 段落显示你的职位或专业 -->
+        </div>
+        
+        <!-- 2. 主体区域：包含联系信息 -->
+        <div class="card-body">
+            <!-- 添加至少3个联系信息，使用 p 标签 -->
+            <!-- 例如：电话、邮箱、地址等 -->
+        </div>
+        
+        <!-- 3. 底部区域：包含个人简介 -->
+        <div class="card-footer">
+            <!-- 添加一个个人简介段落 -->
+        </div>
+    
+</body>
+</html>
+```
+
+css样式自定，发挥自己的创作力，创建一个独特的个人名片页面。
+
+**段落与换行**：
+```html title="index.html"
+<p>这是一个段落，里面可以有<strong>加粗</strong>和<em>强调</em>。</p>
+<p>这是另一个段落。<br>需要换行时用 <code>&lt;br&gt;</code>。</p>
+<hr> <!-- 水平分割线 -->
+```
+
+**行内 vs 块级**：
+- `<div>` 是块级元素（换行占整行），用于分区布局；
+- `<span>` 是行内元素（不换行），用于强调局部文字。
+
+使用建议与解释：
+- 语义优先：`<strong>` 表示“语义上的重点”，`<b>` 仅表示“加粗外观”；`<em>` 表示“语气强调”，`<i>` 仅表示“斜体外观”。优先使用语义标签，样式交给 CSS。
+- 标题层级：通常一个页面只有一个 `<h1>`，下面按层级组织为 `<h2>/<h3>...`。不要为求大小随意跳级或用标题替代普通文本。
+- 段落与换行：换行请优先使用分段（`<p>`），只有在同段内需要视觉换行时使用 `<br>`。`<hr>` 适合用于内容分隔或主题切换。
+
+**小案例：文本与标题**
+::: code-tabs
+@tab index.html
+```html
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <title>文本与标题案例</title>
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+    <h1>我的网站</h1>
+    <h2>关于我</h2>
+    <p>我是一名<strong>前端开发者</strong>，喜欢<em>简洁的设计</em>与清晰的结构。</p>
+    <hr>
+    <h3>联系方式</h3>
+    <p>Email: hello@example.com</p>
+  </body>
+</html>
+```
+@tab style.css
+```css
+body { font-family: system-ui; margin: 2rem; }
+h1 { font-size: 2rem; margin-bottom: .5rem; }
+h2 { margin-top: 1.5rem; }
+p { margin: .5rem 0; }
+```
+:::
+
+**小作业：写一段个人简介**
+::: code-tabs
+@tab index.html
+```html
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <title>个人简介</title>
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+    <h1>你的名字</h1>
+    <h2>一句话介绍</h2>
+    <p>用两段文字，分别写你现在在做什么、你感兴趣的方向。</p>
+    <p>使用 <strong>strong</strong> 与 <em>em</em> 做重点强调。</p>
+  </body>
+</html>
+```
+@tab style.css
+```css
+body { font-family: system-ui; margin: 2rem; line-height: 1.8; }
+p { max-width: 60ch; }
+```
+:::
+
+## 三、链接与图片（A/IMG）
+
+### 什么是 `<img>` 标签
+
+`<img>` 标签用于在网页中插入图片，它是自闭合标签（不需要结束标签）。
+
+### `<img>` 标签的基本属性
+
+* src：指定图片的路径（必填）
+* alt：指定图片的替代文本（必填，用于图片加载失败时显示）
+* width：指定图片的宽度（可选）
+* height：指定图片的高度（可选）
+
+基本语法：
+```html title='index.html'
+<img src="photo.jpg" alt="我的照片" width="200" height="300">
+```
+
+### HTML 超链接
+
+HTML 链接（Anchor）是网页之间跳转的核心部分。
+
+HTML 使用链接与网络上的另一个文档相连。
+
+HTML中的链接是一种用于在不同网页之间导航的元素。
+
+链接通常用于将一个网页与另一个网页或资源（如文档、图像、音频文件等）相关联。
+
+链接允许用户在浏览网页时单击文本或图像来跳转到其他位置，从而实现网页之间的互联。
+
+HTML 链接 通过 `<a>` 标签创建，通常用于将用户从一个页面导航到另一个页面、从一个部分跳转到页面中的另一个部分、下载文件、打开电子邮件应用程序或执行 JavaScript 函数等。
+
+超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
+
+当把鼠标指针移动到网页中的某个链接上时，箭头会变为**一只小手**。
+
+## `<a>` 标签的基本属性
+
+* href：指定链接的目标 URL（必填）
+* target：指定链接在何处打开（可选）
+  * _blank：在新窗口或标签页中打开链接
+  * _self：在当前窗口或标签页中打开链接（默认）
+  * _parent：在父框架中打开链接
+  * _top：在顶部框架中打开链接
+
+基本语法：
+```html title='index.html'
+<a href="https://www.example.com">链接文本</a>
+```
+- `<a>` 标签：定义了一个超链接（anchor）。它是 HTML 中用来创建可点击链接的主要标签。
+- href 属性：指定目标 URL，当点击链接时，浏览器将导航到此 URL。
+
+**这里还有一个target 属性**：
+- _blank：在新窗口或标签页中打开链接
+- _self：在当前窗口或标签页中打开链接（默认）
+- _parent：在父框架中打开链接
+- _top：在顶部框架中打开链接
+
+```html title='index.html'
+<!DOCTYPE html>
+<html>
+<head>
+    <title>target属性示例</title>
+</head>
+<body>
+    <h2>target属性示例</h2>
+    
+    <!-- 在当前窗口打开（默认） -->
+    <a href="https://www.baidu.com" target="_self">当前窗口打开</a>
+    
+    <!-- 在新窗口打开 -->
+    <a href="https://www.baidu.com" target="_blank">新窗口打开</a>
+    
+    <!-- 在父窗口打开 -->
+    <a href="https://www.baidu.com" target="_parent">父窗口打开</a>
+    
+    <!-- 建议：新窗口打开外部链接 -->
+    <a href="https://www.example.com" target="_blank" rel="noopener">
+        外部网站（安全的新窗口）
+    </a>
+</body>
+</html>
+```
+复制代码到自己的html文件中，尝试一下不同的target属性值。
+
+常用属性：
+- `href`：目标地址；
+- `target="_blank"`：新窗口打开；
+- `rel="noopener"`：安全与性能（避免旧窗口被新页面控制）。
+
+补充说明：
+- 链接安全：外链新窗口打开时同时设置 `rel="noopener"` 或 `rel="noreferrer"`，避免安全与性能问题。
+- 图片可使用 `loading="lazy"` 懒加载，减少首屏资源压力；`alt` 请写出图片用途或内容摘要。
+- 设定 `width/height` 可以预留占位，减少页面布局抖动（CLS）。复杂场景可考虑 `<picture>` + `<source>` 做响应式图片。
+- 与图片相关的配套标签：`<figure>` + `<figcaption>` 用于图片与说明文字的组合。
+
+**小案例：链接与图片**
+::: code-tabs
+@tab index.html
+```html
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <title>链接与图片案例</title>
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+    <nav>
+      <a href="/" >首页</a>
+      <a href="https://developer.mozilla.org/" target="_blank" rel="noopener">MDN</a>
+    </nav>
+    <img src="avatar.jpg" alt="我的头像" width="160" height="160">
+  </body>
+</html>
+```
+@tab style.css
+```css
+nav { display: flex; gap: 1rem; margin-bottom: 1rem; }
+nav a { color: #06c; text-decoration: none; }
+nav a:hover { text-decoration: underline; }
+img { border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.1); }
+```
+:::
+
+**小作业：做一个“友链”与头像区块**
+::: code-tabs
+@tab index.html
+```html
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <title>友链与头像</title>
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+    <section>
+      <h2>友情链接</h2>
+      <p>
+        <a href="https://notes.simengweb.com" target="_blank" rel="noopener">祀梦笔记</a>
+        ·
+        <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue.js</a>
+      </p>
+    </section>
+    <section>
+      <h2>头像</h2>
+      <img src="avatar.jpg" alt="你的头像" width="160" height="160">
+    </section>
+  </body>
+</html>
+```
+@tab style.css
+```css
+section { margin-bottom: 1rem; }
+img { border: 2px solid #eee; border-radius: 50%; }
+```
+:::
+

docs/notes/programming/web/basic-syntax/javascript-basics.md

@@ -0,0 +1,606 @@
+---
+title: JavaScript 基础知识
+createTime: 2025/11/2 21:30:00
+permalink: /programming/web/basic-syntax/javascript-basics/
+---
+
+## JavaScript 是什么？
+
+JavaScript 是一种广泛用于网页开发的脚本语言，它使网页能够实现交互式功能。与 HTML（负责结构）和 CSS（负责样式）不同，JavaScript 专注于**行为**，可以让网页变得动态和响应式。
+
+
+## 第一个 JavaScript 程序
+
+JavaScript 代码可以直接写在 HTML 文件中，通常放在 `<body>` 标签的底部，使用 `<script>` 标签包裹。
+
+```html title="index.html"
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <title>我的第一个 JavaScript 程序</title>
+</head>
+<body>
+  <h1>你好，世界！</h1>
+  
+  <script>
+    // 这是注释，不会被执行
+    console.log('Hello, JavaScript!'); // 在控制台输出文本
+    alert('欢迎学习 JavaScript！'); // 弹出提示框
+  </script>
+</body>
+</html>
+```
+
+**提示**：你可以在浏览器中按下 F12 打开开发者工具，然后切换到 "Console" 标签查看 `console.log()` 的输出。
+
+`console.log()` 是 JavaScript 中最常用、最重要的调试工具，可以说是每个开发者的"最佳朋友"！
+
+### 基本输出 ###
+
+```javascript
+// 输出字符串
+console.log("Hello World!");
+
+// 输出变量
+const name = "小明";
+console.log(name);
+
+// 输出多个值
+const age = 18;
+const isStudent = true;
+console.log("学生信息:", name, age, isStudent);
+```
+
+### 输出不同类型的数据 ###
+
+```javascript
+// 各种数据类型
+console.log("字符串:", "Hello");
+console.log("数字:", 42);
+console.log("布尔值:", true);
+console.log("数组:", [1, 2, 3]);
+console.log("对象:", {name: "李华", age: 20});
+console.log("函数:", function() {});
+console.log("undefined:", undefined);
+console.log("null:", null);
+```
+
+### 字符串插值 ###
+
+```javascript
+const userName = "张三";
+const userAge = 25;
+const score = 95.5;
+
+// 传统方式
+console.log("用户 " + userName + " 年龄 " + userAge + " 分数 " + score);
+
+// 模板字符串（推荐）
+console.log(`用户 ${userName} 年龄 ${userAge} 分数 ${score}`);
+
+// 带表达式的插值
+console.log(`${userName} 是 ${userAge >= 18 ? "成年人" : "未成年人"}`);
+```
+
+### 格式化输出 ###
+
+```javascript
+const product = {
+    name: "笔记本电脑",
+    price: 5999,
+    brand: "Dell",
+    inStock: true
+};
+
+// %s - 字符串
+console.log("产品名称: %s", product.name);
+
+// %d - 数字
+console.log("价格: %d 元", product.price);
+
+// %f - 浮点数
+console.log("折扣价: %f", product.price * 0.9);
+
+// %o - 对象
+console.log("完整产品信息: %o", product);
+
+// %c - CSS样式
+console.log("%c重要信息!", "color: red; font-size: 20px; font-weight: bold;");
+```
+
+## JavaScript 变量
+
+变量是用来存储信息的容器。在 JavaScript 中，我们使用 `let`、`const` 或 `var` 关键字来声明变量。
+
+### 变量声明方式
+
+```javascript
+// 使用 let 声明可变变量
+let name = "小明";
+name = "小红"; // 可以修改
+
+// 使用 const 声明常量（不可变）
+const PI = 3.14159;
+// PI = 3.14; // 错误！常量不能修改
+
+// 使用 var 声明变量（旧方式，现在推荐使用 let 和 const）
+var age = 25;
+```
+
+**注意**：
+- 使用 `let` 声明的变量可以重新赋值
+- 使用 `const` 声明的变量不能重新赋值（常量）
+- 尽量避免使用 `var`，因为它有一些奇怪的作用域规则
+
+
+## 数据类型
+
+JavaScript 有几种基本数据类型：
+
+### 1. 字符串（String）
+
+用于表示文本，可以使用单引号或双引号。
+
+```javascript
+const greeting = "你好";
+const name = 'JavaScript';
+const message = `${greeting}, ${name}!`; // 使用模板字符串（ES6 特性）
+console.log(message); // 输出：你好, JavaScript!
+```
+
+### 2. 数字（Number）
+
+用于表示数值。
+
+```javascript
+const age = 25;
+const price = 99.99;
+const PI = 3.14159;
+```
+
+### 3. 布尔值（Boolean）
+
+用于表示真或假，只有两个值：`true` 和 `false`。
+
+```javascript
+const isStudent = true;
+const hasGraduated = false;
+```
+
+### 4. 数组（Array）
+
+用于存储多个值的集合。
+
+```javascript
+const fruits = ["苹果", "香蕉", "橙子"];
+console.log(fruits[0]); // 输出：苹果（数组索引从0开始）
+
+// 添加元素
+fruits.push("葡萄");
+console.log(fruits); // 输出：["苹果", "香蕉", "橙子", "葡萄"]
+```
+
+### 5. 对象（Object）
+
+用于存储键值对集合。
+
+```javascript
+const person = {
+  name: "小明",
+  age: 25,
+  isStudent: true,
+  greet: function() {
+    console.log(`你好，我是${this.name}！`);
+  }
+};
+
+console.log(person.name); // 输出：小明
+person.greet(); // 输出：你好，我是小明！
+```
+
+## 运算符
+
+### 算术运算符
+
+```javascript
+const a = 10;
+const b = 5;
+
+console.log(a + b); // 15 加法
+console.log(a - b); // 5 减法
+console.log(a * b); // 50 乘法
+console.log(a / b); // 2 除法
+console.log(a % b); // 0 取余
+console.log(a ** b); // 100000 幂运算（ES6）
+```
+
+### 赋值运算符
+
+```javascript
+const x = 10;
+
+x += 5; // 等同于 x = x + 5
+console.log(x); // 15
+
+x -= 3; // 等同于 x = x - 3
+console.log(x); // 12
+```
+
+### 比较运算符
+
+```javascript
+const a = 10;
+const b = 5;
+
+console.log(a > b); // true
+console.log(a < b); // false
+console.log(a >= b); // true
+console.log(a <= b); // false
+console.log(a === b); // false（严格相等，比较值和类型）
+console.log(a == b); // false（宽松相等，只比较值）
+console.log(a !== b); // true（严格不相等）
+```
+
+## 条件语句
+
+### if 语句
+
+```javascript
+const age = 18;
+
+if (age >= 18) {
+  console.log("你已经成年了！");
+} else if (age >= 13) {
+  console.log("你是青少年。");
+} else {
+  console.log("你还是个孩子。");
+}
+```
+
+
+## 循环
+
+### for 循环
+
+```javascript
+// 打印1到5
+for (const i = 1; i <= 5; i++) {
+  console.log(i);
+}
+
+// 遍历数组
+const fruits = ["苹果", "香蕉", "橙子"];
+for (const i = 0; i < fruits.length; i++) {
+  console.log(fruits[i]);
+}
+
+// 使用 for...of 遍历（ES6）
+for (const fruit of fruits) {
+  console.log(fruit);
+}
+```
+
+### while 循环
+
+```javascript
+const count = 1;
+while (count <= 5) {
+  console.log(count);
+  count++;
+}
+```
+
+## 函数
+
+函数是一段可重复使用的代码块，可以接受输入（参数），执行操作，并返回输出（返回值）。
+
+### 函数声明
+
+```javascript
+function greet(name) {
+  return `你好，${name}！`;
+}
+
+const message = greet("小明");
+console.log(message); // 输出：你好，小明！
+```
+
+格式如下
+
+```javascript
+function 函数名(参数1, 参数2, ...参数N) {
+    // 函数体：要执行的代码
+    return 返回值;  // 可选
+}
+```
+
+### 箭头函数（ES6）
+
+```javascript
+const sum = (a, b) => {
+  return a + b;
+};
+
+// 简化写法（当只有一行返回语句时）
+const multiply = (a, b) => a * b;
+
+console.log(sum(3, 4)); // 7
+console.log(multiply(3, 4)); // 12
+```
+
+## DOM 操作
+
+DOM（文档对象模型）是 HTML 和 XML 文档的编程接口。JavaScript 可以通过 DOM 来操作网页元素。
+
+### 选择元素
+
+```javascript
+// 通过 id 选择元素
+const title = document.getElementById("title");
+
+// 通过 class 选择元素（返回元素集合）
+const items = document.getElementsByClassName("item");
+
+// 通过标签名选择元素
+const paragraphs = document.getElementsByTagName("p");
+
+// 通过 CSS 选择器选择元素（ES5+）
+const header = document.querySelector("header"); // 选择第一个匹配的元素
+const allLinks = document.querySelectorAll("a"); // 选择所有匹配的元素
+```
+
+### 修改元素内容
+
+```javascript
+// 修改文本内容
+const title = document.getElementById("title");
+title.textContent = "新标题";
+
+// 修改 HTML 内容
+title.innerHTML = "<strong>加粗的新标题</strong>";
+```
+
+### 修改元素样式
+
+```javascript
+const element = document.getElementById("box");
+element.style.color = "red";
+element.style.fontSize = "20px";
+element.style.backgroundColor = "#f0f0f0";
+```
+
+### 添加事件监听器
+
+```javascript
+const button = document.getElementById("myButton");
+
+button.addEventListener("click", function() {
+  console.log("按钮被点击了！");
+  alert("你好，欢迎使用！");
+});
+```
+
+## 小案例：交互式计算器
+
+下面是一个简单的交互式计算器示例，演示如何结合 HTML、CSS 和 JavaScript。
+
+::: code-tabs
+@tab index.html
+```html
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <title>简易计算器</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div class="calculator">
+    <h2>简易计算器</h2>
+    <input type="number" id="num1" placeholder="输入第一个数字">
+    <select id="operation">
+      <option value="add">+</option>
+      <option value="subtract">-</option>
+      <option value="multiply">×</option>
+      <option value="divide">÷</option>
+    </select>
+    <input type="number" id="num2" placeholder="输入第二个数字">
+    <button id="calculate">计算</button>
+    <div id="result">结果将显示在这里</div>
+  </div>
+  
+  <script src="script.js"></script>
+</body>
+</html>
+```
+@tab style.css
+```css
+.calculator {
+  max-width: 300px;
+  margin: 2rem auto;
+  padding: 1.5rem;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  text-align: center;
+  font-family: system-ui;
+}
+
+input, select, button {
+  margin: 0.5rem 0;
+  padding: 0.5rem;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+button {
+  background: #007bff;
+  color: white;
+  border: none;
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+button:hover {
+  background: #0056b3;
+}
+
+#result {
+  margin-top: 1rem;
+  padding: 1rem;
+  background: #f8f9fa;
+  border-radius: 4px;
+}
+```
+@tab script.js
+```javascript
+// 获取DOM元素
+const num1Input = document.getElementById('num1');
+const num2Input = document.getElementById('num2');
+const operationSelect = document.getElementById('operation');
+const calculateButton = document.getElementById('calculate');
+const resultDiv = document.getElementById('result');
+
+// 添加点击事件监听器
+calculateButton.addEventListener('click', function() {
+  // 获取输入值
+  const num1 = parseFloat(num1Input.value);
+  const num2 = parseFloat(num2Input.value);
+  const operation = operationSelect.value;
+  const result;
+  
+  // 检查输入是否有效
+  if (isNaN(num1) || isNaN(num2)) {
+    resultDiv.textContent = '请输入有效的数字！';
+    return;
+  }
+  
+  // 执行计算
+  switch (operation) {
+    case 'add':
+      result = num1 + num2;
+      break;
+    case 'subtract':
+      result = num1 - num2;
+      break;
+    case 'multiply':
+      result = num1 * num2;
+      break;
+    case 'divide':
+      // 检查除数是否为0
+      if (num2 === 0) {
+        resultDiv.textContent = '除数不能为0！';
+        return;
+      }
+      result = num1 / num2;
+      break;
+  }
+  
+  // 显示结果
+  resultDiv.textContent = `计算结果：${result}`;
+});
+```
+:::
+
+## JavaScript 的异步编程
+
+JavaScript 是单线程的，但它可以通过异步编程模型来处理耗时操作，如网络请求、定时器等。
+
+### setTimeout 和 setInterval
+
+```javascript
+// setTimeout - 延迟执行一次
+setTimeout(function() {
+  console.log('2秒后执行');
+}, 2000);
+
+// setInterval - 定期重复执行
+const count = 0;
+const timer = setInterval(function() {
+  count++;
+  console.log(`执行第 ${count} 次`);
+  
+  if (count >= 5) {
+    clearInterval(timer); // 清除定时器
+    console.log('定时器已停止');
+  }
+}, 1000);
+```
+
+### Promise（ES6）
+
+Promise 是异步编程的一种解决方案，用于处理异步操作。
+
+```javascript
+// 创建一个Promise
+const fetchData = new Promise((resolve, reject) => {
+  // 模拟网络请求
+  setTimeout(() => {
+    const success = true;
+    if (success) {
+      resolve('数据获取成功');
+    } else {
+      reject('数据获取失败');
+    }
+  }, 2000);
+});
+
+// 使用Promise
+fetchData
+  .then(data => {
+    console.log(data);
+  })
+  .catch(error => {
+    console.error(error);
+  });
+```
+
+## 常见错误和调试技巧
+
+### 常见错误
+
+1. **语法错误**：代码不符合 JavaScript 语法规则
+2. **引用错误**：使用了未定义的变量或函数
+3. **类型错误**：对错误类型的值进行操作
+4. **范围错误**：数值超出有效范围
+
+### 调试技巧
+
+1. **使用 console.log()**：在控制台输出变量值或执行流程
+2. **使用断点**：在浏览器开发者工具中设置断点，逐步执行代码
+3. **检查错误信息**：仔细阅读错误提示，找出问题所在
+4. **检查变量类型**：使用 `typeof` 操作符检查变量类型
+
+```javascript
+console.log(typeof "hello"); // "string"
+console.log(typeof 42); // "number"
+console.log(typeof true); // "boolean"
+console.log(typeof {}); // "object"
+console.log(typeof []); // "object"（数组也是对象的一种）
+```
+
+## 实践练习
+
+### 练习1：创建一个简单的待办事项列表
+
+使用 HTML、CSS 和 JavaScript 创建一个待办事项列表，包含添加、删除和标记完成功能。
+
+提示：
+- 使用数组存储待办事项
+- 使用 DOM 操作动态更新列表
+- 为按钮添加事件监听器
+
+### 练习2：实现一个数字猜谜游戏
+
+计算机随机生成一个1到100之间的数字，玩家通过输入框猜测，程序提示"猜大了"或"猜小了"，直到猜对为止。
+
+提示：
+- 使用 `Math.random()` 生成随机数
+- 使用条件语句判断猜测结果
+- 记录并显示猜测次数
+
+## 总结
+
+JavaScript 是现代 web 开发的核心技术之一，它可以让网页变得动态和交互。通过学习变量、数据类型、运算符、条件语句、循环、函数和 DOM 操作等基础知识，你已经迈出了学习 JavaScript 的第一步。
+
+继续练习和探索，你会发现 JavaScript 的强大功能和灵活性！

docs/notes/subject/english/README.md

@@ -0,0 +1,22 @@
+---
+title: 英语学习笔记
+createTime: 2025/10/20 16:34:20
+permalink: /subject/english/
+---
+
+# 英语学习笔记
+
+这是一个英语学习笔记的总览页。下面是目录与分区入口：
+
+## 目录
+- 学习环境与工具 → `/subject/english/basis/`
+- 词汇与记忆 → `/subject/english/vocabulary/`
+- 语法与句法 → `/subject/english/grammar/`
+- 听力与口语 → `/subject/english/listening-speaking/`
+- 阅读 → `/subject/english/reading-writing/`
+- 考试与备考（含四级） → `/subject/english/exam/cet-4/`
+- 学习资源与工具 → `/subject/english/resources/`
+- 写译 → `/subject/english/writing-translation/`
+
+
+你可以从以上入口进入对应的专题，随时扩展各章节内容。

docs/notes/subject/english/basis/README.md

@@ -0,0 +1,15 @@
+---
+title: 英语环境配置
+createTime: 2025/10/20 16:34:20
+permalink: /subject/english/basis/
+---
+
+# 英语环境配置
+
+这里是英语学习的入门环境配置示例模版：
+
+- 推荐词典与工具
+- 输入法与语音资源
+- 常用学习网站与 App
+
+你可以按需补充具体内容。

docs/notes/subject/english/exam/cet-4.md

@@ -0,0 +1,42 @@
+---
+title: 英语四级 (CET-4) 备考指南
+createTime: 2025/10/20 16:42:00
+permalink: /subject/english/exam/cet-4/
+---
+
+# 英语四级 (CET-4) 备考指南
+
+## 考试结构概览
+- 听力 (25%)：新闻、长对话、讲座/采访
+- 阅读 (35%)：仔细阅读、选词填空
+- 翻译 (15%)：汉译英
+- 写作 (25%)：应用文与观点写作
+
+## 核心备考策略
+- 词汇：高频词与真题语块，使用 SRS 间隔重复
+- 语法：时态、非谓语、从句，针对写作与翻译的准确表达
+- 听力：精听 + 跟读（shadowing），积累场景表达
+- 阅读：结构化分析段落逻辑，题型定位与干扰项识别
+- 写作：模板+素材库+改写练习，关注连贯与准确
+
+## 时间分配建议
+- 写作 30 分钟：审题→列纲→写作→快速校对
+- 阅读 40 分钟：定位→分析→作答→标记不确定
+- 听力 按机考节奏：提前熟悉说明与做题界面
+- 翻译 20 分钟：分句翻译→语法检查→润色
+
+## 真题与模拟
+- 使用近 3-5 年真题按套训练；分析错因并归档到词汇/语法/方法类别
+- 每周至少一次全真模拟，记录分配与状态调整
+
+## 考场技巧
+- 先易后难；不确定题目标记后回看
+- 注意题干限制词与语义线索（especially/only/not/except 等）
+- 写作与翻译建议使用简单准确句式，避免长难句错误
+
+## 推荐资源
+- 真题：教育部考试中心官方题库与解析
+- 听力：BBC 6 Minute English、VOA Learning English
+- 写作：常用应用文格式与常见开头结尾句
+
+> 后续我会补充各模块的详细练习清单与示例。

docs/notes/subject/english/grammar/README.md

@@ -0,0 +1,84 @@
+---
+title: 核心语法与句型
+createTime: 2025/10/20 16:40:00
+permalink: /subject/english/grammar/
+---
+
+# 核心语法与句型
+
+## 时态与语态
+- 16 种时态的构成与用法（一般/进行/完成/完成进行 × 现在/过去/将来/过去将来）
+- 被动语态的转换规则与适用场景
+- 时态一致原则（主将从现、过去时一致等）
+- 情态动词 + 完成体（must have done / should have done 等）的推测与虚拟含义
+
+## 从句
+### 名词性从句
+- 主语从句（That he failed surprised us. / Whether she comes matters.）
+- 宾语从句（I think (that) you are right.）
+- 表语从句（The truth is that he lied.）
+- 同位语从句（The fact that he lied shocked us.）
+
+### 定语从句
+- 限定性 vs. 非限定性
+- 关系代词（who / whom / whose / which / that）与关系副词（when / where / why）
+- 介词 + 关系代词（the house in which I live）
+- 省略与替代（the book (that) I bought; the place (where) we met）
+
+### 状语从句
+- 时间（when / while / before / after / as soon as / until）
+- 条件（if / unless / provided that / on condition that）
+- 让步（though / although / even if / while）
+- 原因（because / since / as / now that）
+- 结果（so...that / such...that）
+- 目的（so that / in order that）
+- 比较（than / as...as / the more...the more）
+
+## 非谓语动词
+- 不定式（to do）：作主语、宾语、定语、状语、补语
+- 动名词（doing）：作主语、宾语、表语、定语
+- 现在分词（doing）与过去分词（done）：作定语、状语、补语、表语
+- 独立主格结构（with + O + OC; N + doing / done...）
+- 非谓语动词的时态与语态（to be doing / to have done / being done / having been done）
+
+## 倒装与虚拟
+### 倒装
+- 否定副词置前（Never have I seen...）
+- Only + 状语置前（Only then did I realize...）
+- So / Such 置前（So fast did he run that...）
+- 方位/时间副词置前（Out rushed the children.）
+- 虚拟条件句省略 if（Were I you... / Had I known...）
+
+### 虚拟语气
+- 与现在事实相反（If I were you, I would...）
+- 与过去事实相反（If I had known, I would have...）
+- 与将来事实相反（If it should rain tomorrow...）
+- 省略 if 的倒装（Were / Should / Had...）
+- 含蓄虚拟（without / but for / otherwise）
+- 名词性从句中的虚拟（insist that... (should) do; It is important that... (should) do）
+
+## 句式与信息焦点
+### 强调结构
+- It is / was...that / who...（It was John that/who broke the window.）
+- 助动词 do / does / did（She did tell me the truth.）
+- 副词强调（absolutely / definitely / simply）
+
+### 分裂句（Cleft Sentence）
+- 主语分裂（What I need is time.）
+- 宾语分裂（What he bought was a Ferrari.）
+- 状语分裂（Where we met was in Paris.）
+
+### 平行与省略
+- 并列结构中的省略（He likes tea and she coffee.）
+- 比较结构中的省略（I like her better than him.）
+- 替代（do / so / one / that / those）
+
+### 插入语与同位语
+- 破折号、括号、逗号插入（The book—which I bought yesterday—is amazing.）
+- 同位语短语（Mr. Smith, CEO of the company, will attend.）
+
+### 长难句拆解策略
+- 找谓语，定主干
+- 划从句，标连接词
+- 去插入，还省略
+- 调语序，还原文

docs/notes/subject/english/listening-speaking/README.md

@@ -0,0 +1,89 @@
+---
+title: 听力口语训练
+createTime: 2025/10/20 16:40:00
+permalink: /subject/english/listening-speaking/
+---
+
+# 听力口语训练
+
+- 音素与连读弱读
+- 听力材料选择与精听泛听
+- 跟读与复述（shadowing & retelling）
+- 场景对话与表达
+
+## 自然拼读法Phonics
+
+Phonics自然拼音，或叫“英语自然拼读法”更容易理解。拼读什么？就是看到英文字母或字母的组合能自然地读出、读对它的发音。这里，首先要区分“读音”(Name)与“发音”(Sound)。A-Z的26个字母几乎大家都认识、都能念出来，而念出来的就是字母本身的“读音”；而自然发音指的是字母的“发音”。发音不同于读音。看到字母后，不管读音，找对发音。这就Phonics要学的。理论可以讲很多很深，但Phonics注重的是方法与实践。因此，知道怎么正确发音就行了。
+
+下面给你放一个基本发音规则的表，虽然看不到完整版但是足够了也足够大致理解发音规律了
+
+```
+https://wenku.so.com/tfd/b97611df865df13967a3b93a66d9e904?src=360ss&ocpc_id=139916&plan_id=2327941041&group_id=687803892&keyword=%E8%8B%B1%E8%AF%AD%E8%87%AA%E7%84%B6%E6%8B%BC%E8%AF%BB%E5%AD%97%E6%AF%8D%E7%BB%84%E5%90%88%E5%8F%91%E9%9F%B3&qhclickid=2ee0322320520786
+```
+
+英文的26个字母，分为元音和辅音，其中元音只有5个，即a，e，i，o，u，其余字母均为辅音。
+
+对于大多数辅音来说，它们的发音是一对一的，而有少数几个辅音字母，每个字母有两个或以上的发音。
+
+### 二、有多个发音的辅音
+
+#### c 字母
+c后面接a，o，u的时候，c的发音与字母k发音相同，叫做“hard c sound”：
+```
+cat, cap，call，coat，cup
+```
+
+当字母c后面接e，i，或y的时候，通常c的发音与字母s发音相同，叫做“soft c sound” ：
+```
+city, ice, rice, face, cell, cent, voice, pencil, juice
+```
+
+有时在e或i前面，c会发/sh/音：
+```
+ocean, racial, social
+```
+
+#### g 字母
+g后面接a，o，u的时候，所发的音叫做“hard g sound”：
+```
+girl, gas, get, give, go
+```
+
+当字母g后面接e，i，或y的时候，有时g的发音与字母j的发音相同，叫做“soft g sound”
+```
+age, change, ginger, Egypt, gentle, giraffe, badge
+```
+
+特例：forget, give, girl中的g发hard sound。
+
+#### x 字母
+x在单词中间或结尾时发/ks/音：
+```
+box, next, fix, mix, tax
+```
+
+x在单词中间时有时发/gz/音：
+```
+exit, exam, exact
+```
+
+x在单词起始位置时发/z/音：
+```
+xylophone, xerox。
+```
+
+#### y 字母
+y在单词起始位置时发音为辅音：
+```
+yes, you, yard, year, yell
+```
+
+y在单词或音节中间或结尾时被当做元音；
+
+y在结尾，单词只有一个音节时y发长/i/音，y在结尾，单词有两个或以上音节时y发长/e/音，y在单词或音节中间时，发短/i/音。
+
+- 小测试：
+- my, cry, fly, sky, baby, happy
+- puppy, hurrygym, nymph
+
+

docs/notes/subject/english/reading-writing/README.md

@@ -0,0 +1,11 @@
+---
+title: 阅读提升
+createTime: 2025/10/20 16:40:00
+permalink: /subject/english/reading-writing/
+---
+
+# 阅读提升
+
+- 阅读策略（略读、扫读、精读）
+- 篇章结构与逻辑（指代、连接、修饰）
+

docs/notes/subject/english/vocabulary/README.md

@@ -0,0 +1,12 @@
+---
+title: 词汇学习与记忆法
+createTime: 2025/10/20 16:40:00
+permalink: /subject/english/vocabulary/
+---
+
+# 词汇学习与记忆法
+
+- 高频词与词根词缀
+- 主题词汇（校园、科技、社会等）
+- 间隔重复（SRS）与记忆曲线
+- 固定搭配与语块（collocations & chunks）

docs/notes/subject/english/writing-translation/README.md

@@ -0,0 +1,11 @@
+---
+title: 写译
+createTime: 2025/10/22 10:26:07
+permalink: /subject/english/writing-translation/
+---
+
+# 写译
+
+- 写作模板与常用句式
+- 改写与润色（句式多样化、语法准确性）
+- 翻译（语法、词汇、上下文）

docs/notes/theory/cryptography/README.md

@@ -0,0 +1,193 @@
+---
+title: 密码学基础
+createTime: 2025/10/27 10:38:57
+permalink: /theory/cryptography/
+---
+
+# 密码学基础
+
+## 1. 密码学的定义
+
+### 1.1 基本概念
+
+**密码学（Cryptography）** 是一门研究信息安全的学科，主要关注如何在不安全的环境中实现安全通信。其核心是通过数学方法对信息进行变换，使得只有授权方能够理解信息内容。
+
+### 1.2 核心目标
+
+密码学追求以下四个主要安全目标：
+
+- **机密性（Confidentiality）**：确保信息只能被授权的人访问
+- **完整性（Integrity）**：确保信息在传输过程中不被篡改
+- **认证性（Authentication）**：确认通信双方的身份真实性
+- **不可否认性（Non-repudiation）**：防止发送方事后否认发送过信息
+
+### 1.3 重要作用
+
+密码学在现代信息安全中扮演着至关重要的角色：
+
+- 保护个人隐私和商业机密
+- 确保金融交易的安全性
+- 维护国家安全和军事通信
+- 支撑互联网基础设施的安全运行
+
+### 1.4 主要应用场景
+
+- **网络安全**：HTTPS、VPN、SSL/TLS协议
+- **数字身份认证**：数字证书、数字签名、双因素认证
+- **区块链技术**：加密货币、智能合约、分布式账本
+- **移动通信**：SIM卡加密、移动支付安全
+- **物联网安全**：设备身份认证、数据传输加密
+
+### 1.5 基础概念与术语（入门）
+
+为方便初学者快速建立直觉，先认识密码学中最核心的几个概念：
+
+**明文（Plaintext）与密文（Ciphertext）**
+- 明文：未加密的原始消息，例如“HELLO”。
+- 密文：加密后的消息，人类或未授权系统难以直接理解。
+
+**加密（Encryption）与解密（Decryption）**
+- 加密：用密钥将明文转换为密文，记为：
+
+$$
+C = E_k(P)
+$$
+
+- 解密：用密钥将密文还原为明文，记为：
+
+$$
+P = D_k(C)
+$$
+
+其中，$P$ 表示明文，$C$ 表示密文，$k$ 表示密钥，$E$ 为加密算法，$D$ 为解密算法。
+
+**密钥（Key）：对称密钥 vs 非对称密钥**
+- 对称密钥：加密和解密使用相同的密钥，速度快，但密钥分发与管理是难点。
+- 非对称密钥（公钥密码）：加密使用“公钥”，解密使用“私钥”，便于密钥分发，还能支持数字签名。
+
+对称加密流程示意（同一把密钥）：
+
+```mermaid
+flowchart LR
+  S[发送者] -- 使用共享密钥 K 加密 --> C[(密文)]
+  C -- 使用共享密钥 K 解密 --> R[接收者]
+```
+
+非对称加密流程示意（公钥/私钥）：
+
+```mermaid
+flowchart LR
+  S[发送者] -- 使用接收者公钥加密 --> C[(密文)]
+  C -- 使用接收者私钥解密 --> R[接收者]
+```
+
+在典型的 RSA 公钥体制中，还可以用一个简洁的数学表达式表示加解密：
+
+$$
+\begin{aligned}
+ c &= m^{e} \bmod n,\\
+ m &= c^{d} \bmod n,
+\end{aligned}
+$$
+
+其中 $(e, n)$ 为公钥，$(d, n)$ 为私钥，$m$ 为明文，$c$ 为密文。
+
+**常见攻击模型简介（只需直观理解）**
+- 唯密文攻击（COA）：攻击者只有密文，尝试恢复明文或密钥。
+- 已知明文攻击（KPA）：攻击者拥有部分“明文-密文”对，用于分析算法或密钥。
+- 选择明文攻击（CPA）：攻击者可选择明文并获取其密文，用于推断密钥或算法结构。
+- 选择密文攻击（CCA）：攻击者可选择密文并得到其解密结果，进一步分析系统弱点。
+
+直观结论：设计良好的现代密码系统，应当在这些攻击模型下仍保持安全（在合理的参数与假设下）。
+
+## 2. 密码学历史简述
+
+### 2.1 古代密码学（公元前-15世纪）
+
+**凯撒密码（Caesar Cipher）**
+- 时间：公元前1世纪
+- 原理：字母移位加密
+- 示例：将字母向后移动3位，A→D，B→E
+
+**斯巴达密码棒（Scytale）**
+- 时间：公元前5世纪
+- 原理：缠绕在特定直径木棒上的皮条
+
+古典密码简述：
+- 核心思路：替换或移位（重新排列）字符。
+- 代表示例：凯撒（替换）、栅栏（移位）、维吉尼亚（多表替换）。
+- 直觉目标：混淆结构、增加猜测难度；但易受频率分析。
+
+### 2.2 文艺复兴时期（15-18世纪）
+
+**维吉尼亚密码（Vigenère Cipher）**
+- 时间：16世纪
+- 原理：多表替换密码
+- 特点：比单表替换更安全
+
+**博福特密码（Beaufort Cipher）**
+- 时间：18世纪
+- 原理：改进的维吉尼亚密码
+
+### 2.3 近代密码学（19-20世纪中期）
+
+**恩尼格玛密码机（Enigma）**
+- 时间：二战时期
+- 原理：机械转子密码机
+- 重要性：推动了现代密码分析的发展
+
+**香农的信息论**
+- 时间：1949年
+- 贡献：为密码学奠定了数学理论基础
+
+### 2.4 现代密码学（1970年代至今）
+
+**DES算法**
+- 时间：1977年
+- 意义：第一个公开的加密标准
+
+**RSA算法**
+- 时间：1977年
+- 意义：第一个实用的公钥密码系统
+
+**AES算法**
+- 时间：2001年
+- 意义：取代DES的新一代加密标准
+
+现代密码简述：
+- 对称加密：同一密钥加解密，适合大量数据（示例：AES/DES/3DES）。
+
+$$
+C = E_k(P), \quad P = D_k(C)
+$$
+
+- 非对称加密：公钥加密、私钥解密，便于密钥分发与数字签名（示例：RSA/ECC）。
+
+$$
+c = m^{e} \bmod n, \quad m = c^{d} \bmod n
+$$
+
+- 密钥交换：Diffie–Hellman 在不安全信道建立共享密钥。
+- 数字签名：私钥签名、公钥验证，保障真实性与不可否认性。
+
+### 2.5 关键历史时间线
+
+```
+公元前5世纪：斯巴达密码棒
+公元前1世纪：凯撒密码
+16世纪：维吉尼亚密码
+1918年：一次一密密码本
+1949年：香农信息论
+1977年：DES和RSA算法
+2001年：AES标准
+```
+
+
+
+## 总结
+
+密码学作为信息安全的基石，经历了从简单替换到复杂数学算法的漫长发展历程。现代密码学建立在严格的数学基础之上，通过对称加密、非对称加密等多种技术手段，为数字世界提供了可靠的安全保障。
+
+理解密码学的基本原理和分类，有助于我们更好地应用这些技术来保护信息安全，同时也为深入学习更高级的密码学概念奠定基础。
+
+本篇笔记的所有代码开源于：[https://gitea.simengweb.com/si-meng-spec/cryptography-example-code](https://gitea.simengweb.com/si-meng-spec/cryptography-example-code)

docs/notes/theory/cryptography/classical-encryption/permutation-encryption.md

@@ -0,0 +1,107 @@
+---
+title: 置换密码 - 等待完善
+createTime: 2025/10/29 13:50:49
+permalink: /theory/cryptography/permutation-encryption/
+---
+
+# 置换密码（Permutation / Transposition Ciphers）
+
+置换密码的核心思想不是“把字母换成别的字母”（替换），而是**重新排列明文字符的位置**。也就是说：
+- 明文字母的集合不变，顺序发生了改变；
+- 由于字母频率不变，置换密码依然会暴露统计特征，但单词的结构与位置模式被打散。
+
+与“替换密码”相比，置换密码更像是“洗牌”：把原本顺序排列的牌重新打乱。单独使用时并不安全，但与替换联合使用（乘积密码）能显著增强安全性。
+
+```mermaid
+flowchart LR
+  P[明文] --> A{根据密钥生成位置}
+  A --> B[重新排列字符]
+  B --> C[密文]
+```
+
+## 一、栅栏密码（Rail Fence Cipher）
+
+**工作原理**：
+将明文按“Z字形”写入若干行（称为“栅栏/轨道”），再按行依次读出即得到密文。轨道数即为密钥。
+
+**示意**（以 3 轨为例）：
+```
+轨1: 0       4       8      ...
+轨2: 1    3  5    7  9      ...
+轨3:   2       6              ...
+```
+
+**示例**：
+明文：`HELLOWORLD`
+轨道数：`3`
+- 轨1（索引 0,4,8）：`H O L`
+- 轨2（索引 1,3,5,7,9）：`E L W R D`
+- 轨3（索引 2,6）：`L O`
+
+密文为各轨串联：`HOL` + `ELWRD` + `LO` → `HOLELWRDLO`
+
+**数学表示**：
+设明文 $P = p_0 p_1 \dots p_{n-1}$，根据密钥生成一个位置序列 $s_0, s_1, \dots, s_{n-1}$（即置换次序），则：
+$$
+C_j = p_{s_j}, \quad j = 0,1,\dots,n-1
+$$
+解密使用逆序列 $t = s^{-1}$：
+$$
+p_i = C_{t_i}, \quad i = 0,1,\dots,n-1
+$$
+
+**特点**：
+- 实现简单，直观“打乱顺序”
+- 频率不变，难以抵抗纯统计分析；但位置模式被破坏，较难直接猜词
+- 作为教学与与替换密码的组合（乘积密码）更有价值
+
+## 二、列移位置换（Columnar Transposition）
+
+**工作原理**：
+选择一个关键词，将明文按列填入表格，再按关键词的字母排序对列进行重排，最终按列或按行读出密文。
+
+```mermaid
+flowchart LR
+  A[明文填入表格] --> B{按关键词排序列}
+  B --> C[重排读取]
+  C --> D[密文]
+```
+
+**简例（概念演示）**：
+明文：`ATTACKATDAWN`
+关键词：`ZEBRA`（按字母表排序为 `A B E R Z`）
+1) 将明文逐行填入 5 列表格；
+2) 按关键词排序（A→B→E→R→Z）重排列；
+3) 按重排后的列依次读出密文。
+
+（实际实现时需要处理明文长度不足一整行的填充策略，如使用 `X` 或留空。）
+
+**数学表示（一般置换模型）**：
+关键词决定一个列置换 $\pi$，其作用是重新排列列索引。若把明文按列读取为序列 $P$，加密可抽象为：
+$$
+C = \operatorname{Permute}_{\pi}(P), \quad P = \operatorname{Permute}_{\pi^{-1}}(C)
+$$
+
+**特点**：
+- 比栅栏更灵活，关键词让置换更“难猜”
+- 仍保留频率分布，易受已知明文/选择明文的结构分析攻击
+- 常与替换结合形成更强的乘积密码（如 ADFGX/ADFGVX 密码）
+
+## 三、联合与加固：置换 × 替换
+
+将“替换”与“置换”组合（先替换后置换，或多轮交替）能显著增强安全性：
+- 替换打乱统计特征（字母频率分布变平）
+- 置换打乱位置结构（模式与相邻关系被破坏）
+
+这种思路在现代密码设计中仍然常见（“混淆与扩散”理念），尽管算法形式已经大为不同。
+
+## 四、安全性与弱点（直观理解）
+- 单独的置换密码不改变字母频率，抵抗统计攻击能力有限
+- 容易受到已知明文/选择明文攻击（通过结构猜测置换）
+- 多轮、复杂置换能提高攻击成本，但不建议单独用于实际安全场景
+
+## 五、小练习（可选）
+试着把你自己的名字用 3 轨栅栏加密；然后写出解密过程（先确定轨道索引，再按逆序重建原文）。
+
+## 附件：
+具体的使用样例代码请参考：[https://gitea.simengweb.com/si-meng-spec/cryptography-example-code](https://gitea.simengweb.com/si-meng-spec/cryptography-example-code)

docs/notes/theory/cryptography/classical-encryption/substitution-ciphers.md

@@ -0,0 +1,170 @@
+---
+title: 替换密码
+createTime: 2025/10/27 10:47:42
+permalink: /theory/cryptography/substitution-ciphers/
+---
+
+# 替换密码（Substitution Ciphers）
+
+我们一起来系统梳理古典加密算法（Classical Ciphers）。这些算法虽然在现代已不再安全，但它们是密码学发展的基石，蕴含了替换、置换、密钥等核心思想，非常适合理解密码学的基本原理。
+
+替换密码的核心思想是“一对一”或“多对一”的字符映射：把明文中的每一个字母（或符号）按照事先约定好的规则，替换成另一个字母（或符号）。  
+
+这种映射可以是固定不变的（如凯撒密码的“统一移位”），也可以是依赖密钥动态变化的（如维吉尼亚密码的“周期移位”）。
+  
+由于密文保留了原始字母的出现频率，只是“换了一张皮”，所以替换密码在本质上没有改变字母的统计特性，这也为频率分析攻击留下了突破口。  
+
+替换操作可以手工完成，也可以通过查表、转盘、甚至机械电路实现，是后续更复杂多表替换与乘积密码的雏形。
+
+## 一、凯撒密码（Caesar Cipher）
+
+**工作原理**：
+凯撒密码是一种循环移位密码，将字母表视为一个环形结构。加密时每个字母向后移动固定位置 $k$，解密时向前移动相同位置。
+
+**数学表示**：
+设字母 A-Z 对应数字 0-25，则：
+
+加密公式：
+$$E(x) = (x + k) \mod 26$$
+
+解密公式：
+$$D(x) = (x - k) \mod 26$$
+
+其中 $x$ 是明文字母编号，$k$ 是密钥（0 ≤ k ≤ 25）。
+
+**特点**：
+- 实现简单，易于理解
+- 密钥空间仅 $26$ 种可能，安全性极低
+- 易受频率分析攻击
+- 主要具有教学价值
+
+
+## 二、单表替换密码（Simple Substitution Cipher）
+
+**工作原理**：
+单表替换密码是凯撒密码的泛化形式，它使用一个随机的字母替换表，而不是固定的移位。每个明文字母都被唯一地映射到一个密文字母，形成一对一的替换关系。
+
+```mermaid
+graph LR
+    A[明文字母] --> B{替换表}
+    B --> C[密文字母]
+```
+
+**数学表示**：
+设字母表 $\Sigma = \{A,B,C,...,Z\}$，替换函数 $f: \Sigma \rightarrow \Sigma$ 是一个双射（一一对应），则：
+
+加密公式：
+$$E(x) = f(x)$$
+
+解密公式：
+$$D(y) = f^{-1}(y)$$
+
+其中 $f^{-1}$ 是 $f$ 的逆函数。
+
+**密钥空间**：
+单表替换密码的密钥空间是所有可能的字母排列，大小为：
+$$|K| = 26! \approx 4.03 \times 10^{26}$$
+
+这个巨大的密钥空间使得暴力破解在计算上不可行。
+
+**示例**：
+假设替换表为：
+```
+A→Q, B→W, C→E, D→R, E→T, F→Y, G→U, H→I, I→O, J→P,
+K→A, L→S, M→D, N→F, O→G, P→H, Q→J, R→K, S→L, T→Z,
+U→X, V→C, W→V, X→B, Y→N, Z→M
+```
+
+```mermaid
+flowchart LR
+    A[明文: HELLO] --> B[替换加密]
+    B --> C[密文: ITSSG]
+    C --> D[逆替换解密]
+    D --> E[明文: HELLO]
+```
+
+**安全性分析**：
+虽然单表替换密码的密钥空间巨大，但它仍然易受**频率分析攻击**。因为：
+
+1. **字母频率保留**：高频字母（如E、T、A）在密文中仍然是高频
+2. **单词模式保留**：常见单词模式（如"THE"、"ING"）在密文中保持相同模式
+3. **双字母频率**：常见字母对（如"TH"、"ER"）的频率特征仍然存在
+
+**攻击方法**：
+- 单字母频率分析
+- 双字母频率分析
+- 单词长度和模式分析
+- 已知明文攻击
+
+**特点**：
+- 密钥空间巨大（$26!$），理论上难以暴力破解
+- 仍然易受统计攻击
+- 是密码学历史上重要的里程碑
+- 为现代密码学提供了重要启示
+
+
+
+## 三、维吉尼亚密码（Vigenère Cipher）
+
+**工作原理**：
+维吉尼亚密码是一种多表替换密码，它使用一个关键词来决定每次替换的凯撒密码移位量。关键词的每个字母对应一个移位量，明文的每个字母根据关键词的循环使用进行替换。
+
+```mermaid
+graph LR
+    A[明文] --> B{关键词循环扩展}
+    B --> C[明文与关键词按位组合]
+    C --> D{多表替换}
+    D --> E[密文]
+```
+
+**数学表示**：
+设字母 A-Z 对应数字 0-25。
+明文 $P = p_0 p_1 ... p_{n-1}$
+关键词 $K = k_0 k_1 ... k_{m-1}$ (长度为 $m$)
+
+加密公式：
+$$E(p_i) = (p_i + k_{i \pmod m}) \mod 26$$
+
+解密公式：
+$$D(c_i) = (c_i - k_{i \pmod m}) \mod 26$$
+
+其中 $p_i$ 是明文第 $i$ 个字母的数字表示，$k_{i \pmod m}$ 是关键词循环后对应第 $i$ 个字母的数字表示，$c_i$ 是密文第 $i$ 个字母的数字表示。
+
+**示例**：
+明文：`ATTACKATDAWN`
+关键词：`LEMON`
+
+1.  **关键词循环扩展**：
+    将关键词 `LEMON` 循环扩展至与明文等长：`LEMONLEMONLE`
+
+2.  **明文与关键词按位组合（数字表示）**：
+    将明文和扩展后的关键词转换为数字 (A=0, B=1, ..., Z=25)。
+    明文数字: `0 19 19 0 2 10 0 19 3 0 22 13`
+    关键词数字: `11 4 12 14 13 11 4 12 14 13 11 4`
+
+3.  **加密运算**：
+    对每对明文数字 $p_i$ 和关键词数字 $k_{i \pmod m}$ 执行 $(p_i + k_{i \pmod m}) \mod 26$ 运算。
+    例如：
+    - 第一个字母：明文 A (0) + 关键词 L (11) = $(0 + 11) \mod 26 = 11 \rightarrow L$
+    - 第二个字母：明文 T (19) + 关键词 E (4) = $(19 + 4) \mod 26 = 23 \rightarrow X$
+    - 第三个字母：明文 T (19) + 关键词 M (12) = $(19 + 12) \mod 26 = 5 \rightarrow F$
+    ...
+    最终密文：`LXFOPVEFRNHR`
+
+
+**安全性分析**：
+维吉尼亚密码比单表替换密码更安全，因为它引入了**多表替换**，使得密文的字母频率分布趋于平坦，从而抵抗了简单的频率分析攻击。
+
+然而，它并非绝对安全，主要弱点在于**关键词的周期性**：
+1.  **Kasiski 测试**：通过分析密文中重复出现的字母组，可以推断出关键词的长度。
+2.  **频率分析（针对子密码）**：一旦关键词长度确定，密文可以被分成若干个凯撒密码，然后对每个子密码进行频率分析。
+
+**特点**：
+-   多表替换，比单表替换密码更安全
+-   引入了关键词的概念，增强了密钥的复杂性
+-   易受Kasiski测试和频率分析的组合攻击
+-   在历史上曾被认为是“牢不可破的密码”
+
+
+## 附件：
+具体的使用样例代码请参考：[https://gitea.simengweb.com/si-meng-spec/cryptography-example-code](https://gitea.simengweb.com/si-meng-spec/cryptography-example-code)

package.json

@@ -25,6 +25,7 @@
     "vuepress-theme-plume": "1.0.0-rc.164"
   },
   "dependencies": {
-    "@waline/client": "^3.6.0"
+    "@waline/client": "^3.6.0",
+    "mermaid": "^11.12.1"
   }
 }

script/build-and-publish.bat

@@ -0,0 +1,153 @@
+@echo off
+setlocal EnableExtensions EnableDelayedExpansion
+
+REM ==========================================
+REM  Configuration
+REM ==========================================
+chcp 65001 >nul
+
+REM Move to project root
+cd /d "%~dp0.."
+set "PROJECT_DIR=%CD%\"
+
+set "DIST_DIR=%PROJECT_DIR%docs\.vuepress\dist"
+set "CACHE_DIR=%PROJECT_DIR%docs\.vuepress\.cache"
+set "TEMP_DIR=%PROJECT_DIR%docs\.vuepress\.temp"
+set "PUBLISH_DIR=%PROJECT_DIR%_publish"
+set "REMOTE_URL=https://gitea.simengweb.com/si-meng-spec/build_notes_simengweb.git"
+set "BRANCH=main"
+
+REM High memory limit for better performance/stability (8GB)
+set "NODE_OPTIONS=--max-old-space-size=8192"
+
+REM Disable Git SSL Verification for this session
+git config --global http.sslVerify false
+git config --global http.sslBackend openssl
+
+REM Args
+set "COMMIT_MSG=%~1"
+if "%COMMIT_MSG%"=="" set "COMMIT_MSG=Build: %DATE% %TIME%"
+
+echo ==========================================
+echo  Start Build and Publish
+echo  Project Dir: %PROJECT_DIR%
+echo  Memory Limit: 8192 MB
+echo ==========================================
+
+REM ==========================================
+REM  1. Cleanup
+REM ==========================================
+echo [1/5] Cleaning up old artifacts...
+
+if exist "%DIST_DIR%" (
+    echo   - Removing %DIST_DIR%
+    rd /s /q "%DIST_DIR%"
+)
+if exist "%CACHE_DIR%" (
+    echo   - Removing %CACHE_DIR%
+    rd /s /q "%CACHE_DIR%"
+)
+if exist "%TEMP_DIR%" (
+    echo   - Removing %TEMP_DIR%
+    rd /s /q "%TEMP_DIR%"
+)
+REM Clean node_modules for a fresh install every time (Ensures clean state)
+if exist "%PROJECT_DIR%node_modules" (
+    echo   - Removing node_modules (Fresh Install Mode)
+    rd /s /q "%PROJECT_DIR%node_modules"
+)
+
+REM ==========================================
+REM  2. Install Dependencies
+REM ==========================================
+echo [2/5] Installing dependencies (npm ci)...
+call npm ci
+if %ERRORLEVEL% NEQ 0 (
+    echo [Error] npm ci failed.
+    exit /b 1
+)
+
+REM ==========================================
+REM  3. Build
+REM ==========================================
+echo [3/5] Building docs...
+call npm run docs:build
+if %ERRORLEVEL% NEQ 0 (
+    echo [Error] Build failed.
+    exit /b 1
+)
+
+if not exist "%DIST_DIR%" (
+    echo [Error] Dist directory not found after build.
+    exit /b 1
+)
+
+REM ==========================================
+REM  4. Prepare Publish Directory
+REM ==========================================
+echo [4/5] Preparing publish directory...
+
+if not exist "%PUBLISH_DIR%\.git" (
+    echo   - Cloning publish repo...
+    if exist "%PUBLISH_DIR%" rd /s /q "%PUBLISH_DIR%"
+    git clone "%REMOTE_URL%" "%PUBLISH_DIR%"
+    if !ERRORLEVEL! NEQ 0 exit /b 1
+) else (
+    echo   - Updating publish repo...
+    pushd "%PUBLISH_DIR%"
+    git fetch --all
+    git checkout "%BRANCH%"
+    git reset --hard "origin/%BRANCH%"
+    popd
+)
+
+echo   - Cleaning publish directory content (preserving .git)...
+pushd "%PUBLISH_DIR%"
+for /f "delims=" %%F in ('dir /a /b') do (
+  if /I not "%%F"==".git" (
+    if exist "%%F" (
+      attrib -R "%%F" >nul 2>&1
+      rd /s /q "%%F" 2>nul
+      del /f /q "%%F" 2>nul
+    )
+  )
+)
+popd
+
+echo   - Copying new build artifacts...
+robocopy "%DIST_DIR%" "%PUBLISH_DIR%" *.* /E /NFL /NDL /NP /NJH /NJS >nul
+if %ERRORLEVEL% GEQ 8 (
+    echo [Error] Robocopy failed.
+    exit /b 1
+)
+
+REM ==========================================
+REM  5. Push to Remote
+REM ==========================================
+echo [5/5] Pushing changes...
+pushd "%PUBLISH_DIR%"
+
+if defined GIT_USERNAME git config user.name "%GIT_USERNAME%"
+if defined GIT_EMAIL git config user.email "%GIT_EMAIL%"
+
+git add -A
+git diff --cached --quiet
+if %ERRORLEVEL% EQU 0 (
+    echo [Info] No changes to commit.
+) else (
+    git commit -m "%COMMIT_MSG%"
+    echo   - Pushing to %BRANCH%...
+    git push origin "%BRANCH%"
+    if !ERRORLEVEL! NEQ 0 (
+        echo [Error] Git push failed.
+        popd
+        exit /b 1
+    )
+    echo [Success] Pushed successfully.
+)
+popd
+
+echo ==========================================
+echo  All Done!
+echo ==========================================
+exit /b 0

script/start.bat

@@ -0,0 +1,3 @@
+@echo off
+cd /d "%~dp0.."
+npm run docs:dev -- --host 0.0.0.0 --port 8888

script/start.sh

@@ -1 +1,2 @@
+cd "$(dirname "$0")/.."
 npm run docs:dev -- --host 0.0.0.0 --port 8888