Update docs and sort content

src/content/post/日记/2024/11/2024-11-29.md

@@ -7,20 +7,13 @@ tags:
   - 日记
 description: >-
   Qube可以集成到GitHub上，详细了解如何进行集成请参考YouTube上的视频。  
-
   如果出现HTTP 409错误，首先删除使用该码的容器，然后再删除相关容器。  
-
   在深度学习工具中，Ollama是一个非常好的沉浸式翻译工具。  
-
   区分重启和刷新按钮时需要注意到不同操作的差异。在Windows系统上，虽然没有macOS类似的窗口管理工具，但仍可以使用Raycast等第三方应用进行任务
   automation。  
-
   Adobe Express可以帮助我们将图片转换为SVG格式，并提供了一个简单易用的工具。  
-
   在使用ECharts时，Canvas和SVG两个渲染器的选择主要取决于软硬件环境、数据量和功能需求。在需要优化性能的问题场景下，尝试结合实验来确定使用哪种渲-render器更合适。  
-
   只有在你熟悉用canvas手搓图表时，你才能在网页上创建这种图。  
-
   最近的工作包括编辑器图片上传重构、移动端应用程序的开发以及学习VTK和图形学。
 slug: diary-2024-11-29
 published: true
@@ -41,7 +34,9 @@ Image HTTP code 409 is in use. Delete the container that's using it and try agai
 windows 有没有像 macos 一样的窗口管理工具，loop raycast 之类的
 
 [Adobe Express](https://new.express.adobe.com/tools/convert-to-svg)
+
 covnert image to svg (需要登录)
+
 ![image.png](https://pictures.kazoottt.top/2024/11/20241129-771df278cae6c89066af0a9a882f3ff9.png)
 
 [Canvas vs. SVG - 最佳实践 - 使用手册 - Apache ECharts](https://echarts.apache.org/handbook/zh/best-practices/canvas-vs-svg/)
@@ -55,12 +50,16 @@ covnert image to svg (需要登录)
 >   - 数据量较大（经验判断 > 1k）、较多交互时，建议选择 Canvas 渲染器。
 
 我什么时候可以做到用 canvas 手搓这种图
+
 ![image.png](https://pictures.kazoottt.top/2024/11/20241129-60d83ca2693fd5e9774743f352039c2b.png)
 
 最近可以做的事情：
+
 编辑器图片上传重构  
 编辑器高度修改
+
 行间高度调整
+
 用 rn 重写移动端  
 ml 资源整合  
 vtk、图形学学习  

src/content/post/日记/2024/11/2024-11-30.md

@@ -8,8 +8,6 @@ tags:
 description: >-
   为了更快地启动 Visual Studio Code（VSCode）extention，先按下 Ctrl+Shift+P或Cmd+Shift+P进入
   Command Pallete。然后输入“Startup Performance”并选择相关选项，完成后记得激活功能以保持其设置。
-
-
   如果存在占用特定端口的程序，请使用命令“lsof -i :<PORT>”识别端口对应的进程ID（PID），再使用命令“kill -9
   <PID>”终止该进程。也可以使用更方便的方式“kill -9 $(lsof -t -i :<PORT>)”，即直接杀死占用端口的进程。
 slug: diary-2024-11-30
@@ -17,6 +15,7 @@ published: true
 toAstro: true
 category: 日记-2024-11
 ---
+
 vscode extention 启动时间
 
 按下 Ctrl+Shift+P（Windows/Linux）或 Cmd+Shift+P（macOS），输入 “Startup Performance” 并选择该选项。 关注：Finish Activate

src/content/post/编程/前端/node/__dirname is not defined in ES module scope.md

@@ -19,41 +19,20 @@ link-notionnext: >-
 rinId: 14
 description: >-
   # ES Module 问题：__dirname 不定义
-
-
   在使用
   TypeScript创建的ESM文件中，遇到__dirname不定义的问题通常是因为使用了module的语法，应该改为ESM的写法。两种解决方法分别是改为module的写法和改为ESM的写法。
-
-
   ## 改为module的写法
-
-
   在这种方法中需要把import改为require，将后缀从ts改为cts。
-
-
   但这种方式并不推荐，因为它可能会导致文件相对路径的问题。
-
-
   ## 改为ESM的写法
-
-
   可以通过利用import.meta.url和fileURLToPath函数，获取当前模块的目录路径来解决__dirname不定义的问题。
-
   ```typescript
-
   import { fileURLToPath } from "url"
-
   import path from "path"
-
-
   // 获取当前模块的目录路径
-
   const __filename = fileURLToPath(import.meta.url)
-
   const __dirname = path.dirname(__filename)
-
   ```
-
   这种方法推荐使用，避免了相对路径的问题。
 toAstro: true
 ---

src/content/post/编程/前端/search params 请求参数的获取与更新.md

@@ -16,13 +16,9 @@ slug: search-params
 description: >-
   React Router 的 `useSearchParams` Hook 提供了一个内建的 API，允许直接获取查询参数的值，比如 `.get()`,
   `.set()`, `.append()` 等。该 hook 可以帮助开发者轻松地处理 URL 中的 query parameters。
-
-
   使用 `qs` 库和 `window.location.search` 的方法也是可以实现解析 query parameters
   的效果。但需要注意的是，`qs.parse(window.location.search)`
   会将带有问号的字符串直接返回，而不对其进行处理。在正确的情况下，将需要手动去掉问号，以得到期望的结果。
-
-
   React Router 的 `useSearchParams` Hook 和 `qs` 库结合使用，可以帮助开发者更容易地管理 URL 中的 query
   parameters。
 NotionID-notionnext: 13d55568-fd75-81f5-be1b-e0a4f8137355

src/content/post/编程/前端/使用github action定时同步obsidian内容到astro博客仓库.md

@@ -15,22 +15,12 @@ category: 编程-前端
 description: >-
   这个 GitHub Action 通过 Node.js 脚本在每次推送到 content 目录和 build_docs.cjs
   脚本时更新博客内容，并将其复制到另一个目标仓库。它支持多个环境，包括本地和服务器。该过程依赖于 Obsidian 模板和 Gray Matter 脚本。
-
-
   此 Action 通过在每次推送中运行其特定步骤来保持 blog 内容的最新。这些步骤包括：
-
-
   - 运行 npm install 和 npm run build:docs:server 批量安装并构建博客内容。
-
   - 复制更新的 content 到目标仓库。
-
   - 运行 npm install 和 npm run sort 批量安装和排序博客内容。
-
-
   该 Action 通过使用 Gray Matter 脚本来处理 Markdown文件，并根据其 frontMatter
   信息决定是否需要将其复制到目标仓库中。它还支持从特定目录忽略某些文件或文件夹。
-
-
   该 Action 的主要功能是自动化 blog 内容的更新和复制，确保 content ALWAYS 是最新的。
 toAstro: true
 ---

src/content/post/编程/前端/浏览器/网页端判断是什么系统，从而显示不同的组件。.md

@@ -0,0 +1,55 @@
+---
+description: b 站投稿页右上角有一个下载投稿工具的按钮，但当点开这个按钮时，发现是.exe文件，目前我的电脑使用的是macos系统。
+tags:
+  - userAgent
+slug: the-web-side-determines-what-system-it-is-so-that-the-different-components-are-displayed
+title: 网页端判断是什么系统，从而显示不同的组件。
+date: 2024-12-17
+author: KazooTTT
+type: Post
+status: Published
+finished: true
+published: true
+category: 编程-前端-浏览器
+toAstro: true
+---
+
+看到 b 站投稿页的右上角有一个下载投稿工具的按钮。
+
+![image.png](https://pictures.kazoottt.top/2024/12/20241211-20241211213004.png)
+
+点了之后发现是.exe 文件，而我的电脑是 macos 的系统。所以这次的下载算是无效操作。
+
+![image.png](https://pictures.kazoottt.top/2024/12/20241211-20241211211526.png)
+
+体验要做的更好一点的话，应该根据系统来显示不同的组件。（在这里如果不是 windows，就不要显示 exe 相关的文件夹下载）
+
+``` js
+function getOperatingSystem() {
+  const userAgent = navigator.userAgent || navigator.vendor || window.opera;
+
+  if (/windows/i.test(userAgent)) {
+    return "Windows";
+  } else if (/macintosh|mac os x/i.test(userAgent)) {
+    return "macOS";
+  } else if (/linux/i.test(userAgent)) {
+    return "Linux";
+  } else if (/android/i.test(userAgent)) {
+    return "Android";
+  } else if (/iphone|ipad|/i.test(userAgent)) {
+    return "iOS";
+  } else {
+    return "Unknown";
+  }
+}
+```
+
+userAgent 的例子：
+
+> 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36'
+
+## 参考
+
+[User-Agent - HTTP \| MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent)
+
+[What are the latest user agents for popular web browsers?](https://www.whatismybrowser.com/guides/the-latest-user-agent/)