Merge branch 'main' of https://github.com/yJader/JinBlog

Author: yJader

.gitignore

@@ -1,7 +1,10 @@
 /docs/test
-/.vscode
-/.obsidian
+.vscode
+.obsidian
 .DS_Store
 
 # 虚拟环境
-/blog
+/blog
+
+# build
+site/

TODOList.md

@@ -1,16 +1,32 @@
 # 博客搭建 TODOList
 
+## 便捷管理
+
+通过symlink在docs中创建链接, 链接到笔记文件夹
+平时在笔记文件夹中编辑, 在完成一段后回到Blog仓库进行格式检查(同时反映到笔记原文件上), commit, push
+
+- Q: 在我的多设备环境下, 链接是否会带来一些bug?(如git存储链接而非链接背后的实际文件)
+
 ## 格式显示bug
+
+- [x] [高亮](#高亮): 已集成到tools/transferMD/transfer.py
+- [x] [LaTeX显示](#LaTeX显示): 已集成到tools/transferMD/transfer.py
 - [ ] 配置到action中
+
+---
+
 ### 高亮
+
 - 编写一个脚本, 将`==text==`语法修改为 html`<mark>text</mark>`, 并配置 github action
   - 原因: 高亮语法(`==text==`)在 PyMdown 中存在 bug
 
 ### LaTeX显示
+
 - 修复类似`$ ax+b $`中因为`$`前后有空格导致的 latex 渲染出错
 - 修复方式: `\$(.*?)\$`匹配 latex, 用`${$1}$`替换
   - mark: $$会被上面的匹配, 记得排除掉
 - note: 问题发现: latex框格渲染有些问题
+
   ```
     # 渲染错误
     text
@@ -28,6 +44,7 @@
   
     text
   ```
+
 - note1: 暂时还不能处理 text$$text$$text 中有换行符的情况, 但是这种不应该出现, 手动修复吧
   - 但是修复了LaTeX段中的换行符, 将`\n+`替换为`\n`
 
@@ -65,10 +82,11 @@ $$
 ![image-20240623131634016](./TODOList.assets/image-20240623131634016.png)
 
 ### 跳转失效
+
 问题: 类似`[泳道图](# 2.1.3 泳道图 ※)`的跳转语法失效
 
 问题原因: 标准markdown语法会转换标题中的符号, 而mkdocs(或者说Python Markdown 渲染引擎)似乎更极端(直接删掉了中文, 只保留英文), 因此标题跳转不可用
 
 解决方案: 暂无
 
-- 或许这个应该算渲染引擎的bug, 毕竟改我heading又不该引用
+- 或许这个应该算渲染引擎的bug, 毕竟改我heading又不改引用

docs/assests/jade_light.svg

@@ -1,3 +1 @@
-# 博客随笔
-
-平时记的一些暂时不知道怎么分类的小玩意
+# Blog

docs/blog/index.md

@@ -6,6 +6,7 @@ categories:
   - 踩坑记录
 comments: true 
 ---
+# mkdocs踩坑记录
 
 # MkDocs踩坑记录
 
@@ -161,6 +162,58 @@ test
 1. 不要熬夜改 bug, 会变得神志不清
 2. 早该上 StackoverFlow 搜的 QAQ
 
+## 博客(blog/posts)引用图片资源出错
+
+### 问题描述
+
+在presentation.md中, 我为了节约空间, 引用了fzu_cs_course/毕业设计/FZU-SINTEF-Beamer-Template.assets/preview_page-0001.jpg等图片
+文件树如下
+
+```text
+docs
+├── blog
+│   ├── index.md
+│   └── posts
+│       └── presentation.md
+└── fzu_cs_course
+    └── 毕业设计
+        └── FZU-SINTEF-Beamer-Template.assets
+            ├── preview_page-0001.jpg
+            └── ...
+```
+
+在presentation.md使用的相对路径引用为`../../fzu_cs_course/毕业设计/FZU-SINTEF-Beamer-Template.assets/preview_page-0001.jpg`
+但是部署到服务器后, 图片无法显示
+
+### 分析
+
+检查编译出的`site/blog`可以发现文件夹结构发生了改变
+
+```text
+site
+├── blog
+│   └── presentation.html # 没有posts文件夹了
+└── fzu_cs_course
+    └── 毕业设计
+        └── FZU-SINTEF-Beamer-Template.assets
+            ├── preview_page-0001.jpg
+            └── ...
+```
+
+最终导致了相对路径解析出错
+
+### 解决方案
+
+用onerror事件来处理, 在解析错误时更换为正确的相对路径
+
+```html
+<img src="../../fzu_cs_course/毕业设计/FZU-SINTEF-Beamer-Template.assets/preview_page-0001.jpg" 
+  alt="Beamer Template Preview Page 1" 
+  width="45%" 
+  onerror="this.onerror=null;this.src='../fzu_cs_course/毕业设计/FZU-SINTEF-Beamer-Template.assets/preview_page-0001.jpg'"
+/>
+```
+
 ## Blog 配置
 
 [Mkdocs Material 使用记录 - shafish.cn](https://shafish.cn/blog/mkdocs/#14-blog)

docs/blog/posts/mkdocs踩坑记录.md

@@ -0,0 +1,131 @@
+---
+date:
+  created: 2024-06-09
+  updated: 2025-11-13
+description: 使用纯文本制作演示文稿的优缺点及工具推荐
+categories:
+  - 杂项
+comments: true 
+---
+<!-- markdownlint-disable MD033 -->
+# Plain Text is All You Need (for Presentations)
+
+面对课程汇报 / 学术报告 / 组会等场景, 使用演示文稿进行Presentation是常见的方式
+
+但是使用PowerPoint / Keynote等软件制作的演示文稿, 往往会有以下问题:
+
+- 操作复杂, 需要学习软件的使用 (虽然大家信息课都学习过)
+- 跨平台兼容差 (经常要导出为pdf)
+- 富文本文稿, 不利于版本控制&同步
+- **LLM支持不够好**
+
+此时使用纯文本(Plain Text)来制作是一个不错的选择
+<!-- more -->
+但是同样有一定缺点
+
+- 不易编辑:
+  - 导出为PDF后, 需要重新编辑源文件才能修改内容
+  - 不能像PPT那样即时&可视化地修改配图(流程图)和图片位置
+
+## 编写
+
+### LaTeX-Beamer
+
+LaTeX-[Beamer包](https://zh.wikipedia.org/zh-cn/Beamer_(LaTeX))是一个基于LaTeX的演示文稿制作工具, 导出为PDF
+
+**优点**:
+
+- **模板丰富, 可定制**: 可以通过修改模板和样式来定制演示文稿的外观
+  - [overleaf: LaTeX templates and examples — Beamer](https://www.overleaf.com/gallery/tagged/beamer)
+- **版本控制**: 使用文本文件编写, 方便使用Git等版本控制工具进行管理
+- **跨平台**: LaTeX-Beamer可以在任何支持LaTeX的操作系统上运行, 生成的PDF文件可以在任何PDF阅读器上查看
+- **数学公式**: 支持LaTeX的数学公式, 适合需要展示复杂公式的场景
+
+**缺点**:
+
+- 环境配置较为复杂, 编译较慢
+  - 使用overleaf等在线编辑器可以简化配置, 但是如果用的是普通版, 很容易编译超时
+- 语法较为繁琐, 需要学习LaTeX语法
+  - 但是不动模板, 只修改内容上手还是很快的
+
+- 不支持动画效果, 只能通过切换幻灯片来实现
+
+#### Beamer模板推荐
+
+- [SINTEF Presentation](https://www.overleaf.com/latex/templates/sintef-presentation/jhbhdffczpnx)
+- [College Beamer](https://github.com/liu-qilong/college-beamer): 基于SINTEF Presentation修改, 适配了不同学校的模板合集
+- [FZU-SINTEF-Beamer-Template](https://github.com/yJader/FZU-SINTEF-Beamer-Template): 基于SINTEF Presentation修改, 适配了福州大学的模板, 我在毕设答辩最终选择这个模板进行演示
+
+<p align="center">
+  <img src="../../fzu_cs_course/毕业设计/FZU-SINTEF-Beamer-Template.assets/preview_page-0001.jpg" alt="Beamer Template Preview Page 1" width="45%" onerror="this.onerror=null;this.src='../fzu_cs_course/毕业设计/FZU-SINTEF-Beamer-Template.assets/preview_page-0001.jpg'"/>
+  <img src="../../fzu_cs_course/毕业设计/FZU-SINTEF-Beamer-Template.assets/preview_page-0019.jpg" alt="Beamer Template Preview Page 19" width="45%" onerror="this.onerror=null;this.src='../fzu_cs_course/毕业设计/FZU-SINTEF-Beamer-Template.assets/preview_page-0019.jpg'"/>
+</p>
+<p align="center">
+  <img src="../../fzu_cs_course/毕业设计/FZU-SINTEF-Beamer-Template.assets/preview_page-0012.jpg" alt="Beamer Template Preview Page 12" width="45%" onerror="this.onerror=null;this.src='../fzu_cs_course/毕业设计/FZU-SINTEF-Beamer-Template.assets/preview_page-0012.jpg'"/>
+  <img src="../../fzu_cs_course/毕业设计/FZU-SINTEF-Beamer-Template.assets/preview_page-0002.jpg" alt="Beamer Template Preview Page 2" width="45%" onerror="this.onerror=null;this.src='../fzu_cs_course/毕业设计/FZU-SINTEF-Beamer-Template.assets/preview_page-0002.jpg'"/>
+</p>
+<p align="center">
+  <img src="../../fzu_cs_course/毕业设计/FZU-SINTEF-Beamer-Template.assets/preview_page-0020.jpg" alt="Beamer Template Preview Page 20" width="45%" onerror="this.onerror=null;this.src='../fzu_cs_course/毕业设计/FZU-SINTEF-Beamer-Template.assets/preview_page-0020.jpg'"/>
+  <img src="../../fzu_cs_course/毕业设计/FZU-SINTEF-Beamer-Template.assets/preview_page-0021.jpg" alt="Beamer Template Preview Page 21" width="45%" onerror="this.onerror=null;this.src='../fzu_cs_course/毕业设计/FZU-SINTEF-Beamer-Template.assets/preview_page-0021.jpg'"/>
+</p>
+<p align="center">
+  <img src="../../fzu_cs_course/毕业设计/FZU-SINTEF-Beamer-Template.assets/preview_page-0026.jpg" alt="Beamer Template Preview Page 26" width="45%" onerror="this.onerror=null;this.src='../fzu_cs_course/毕业设计/FZU-SINTEF-Beamer-Template.assets/preview_page-0026.jpg'"/>
+</p>
+
+### Typst-touying
+
+> [**touying: A powerful package for creating presentation slides in Typst.**](https://typst.app/universe/package/touying/)
+
+typst与LaTeX相似, 都是基于纯文本的排版系统, 使用rust编写, 很好地解决的LaTeX编译慢&语法冗长且复杂的问题
+
+**缺点**:
+
+- 尽管简化了语法, 但是LaTeX在科研界更常用, 额外多学一个有些没必要了...
+- 模板相对LaTeX较少
+
+### Markdown-Marp
+
+!!! note
+    强烈推荐, 快速完成PPT, 应付汇报专用
+
+Marp是一个基于Markdown的演示文稿制作工具, 具有以下优点:
+
+- **简单易用**: 使用Markdown语法编写, 上手快, 适合快速制作演示文稿
+- **跨平台**: Marp for VS Code可以在任何支持VSCode的操作系统上运行, 生成的HTML和PDF文件可以在任何浏览器和PDF阅读器上查看
+- **版本控制**: 使用文本文件编写, 方便使用Git等版本控制工具进行管理
+- **便于LLM生成和编辑**: 没有在Markdown和html语法上做过多改造, LLM可以很好地理解和生成
+
+面对高强度的交流汇报需求, 我现在也迁移到了Marp, 搭配上Awesome-Marp模板后, 能达到Beamer模板的效果
+
+#### 模板推荐
+
+- [Awesome Marp](https://github.com/favourhong/Awesome-Marp): 原始的Awesome Marp模板, 但是官方使用的是有衬线字体, 感觉不适合演示
+- [Awesome Marp XMU](https://github.com/yJader/Awesome-Marp-XMU): 基于Awesome Marp修改, 修复了一些bug, 同时适配了厦门大学的模板
+
+## 放映方式
+
+### 基于PDF的演讲者视图
+
+放映工具:
+
+1. **MacOS用户限定**：使用 [Présentation.app](http://iihm.imag.fr/blanch/software/osx-presentation)
+2. 使用基于Python的 [pympress](https://github.com/Cimbali/pympress)
+
+演讲者视图:
+
+- 对于beamer: 使用`\pdfnote{"备注内容"}`添加备注
+- 对于Marp: 参考[Apply metadata and presenter notes to PDF \#369](https://github.com/marp-team/marp-cli/pull/369), 使用`<!-- 演讲内容 -->`添加备注, 并在导出时添加`--pdf-notes`参数
+  - 注: 对于Marp for VS Code, 需要在设置中开启`markdown.marp.pdf.noteAnnotations`选项
+
+### 转为PowerPoint
+
+- 将PDF转为纯图的PowerPoint
+  - 可以使用我编写的 [pdf2pptx脚本](https://github.com/yJader/pdf2pptx) 或其他类似工具
+  - 将生成的PDF转换为PowerPoint格式，利用PowerPoint的演讲者模式显示备注
+
+- 针对Marp, 可以直接选择导出为PowerPoint格式
+  - 使用`<!-- 演讲内容 -->`可以添加备注, 导出为pptx时会自动识别并添加到备注中
+
+备注: Marp 不能直接通过VS Code放映, sad :(
+> <https://github.com/marp-team/marp-vscode/issues/87>
+> We understand requests for this feature, but since the Marp for VS Code extension is primary designed for previewing the appearance of slides, currently there are no plans to work on this by Marp team. We are very cautious about doing that because it could potentially cause scope creep.

docs/blog/posts/presentation.md

@@ -23,15 +23,14 @@ comments: true
   - 99.9999% 是自己的问题
   - 有亿点点概率是编译器错了 (但你可以知道)
   - 有亿点点点点概率是处理器错了 (你也可以知道)
+<!-- more -->
 
 ### 公理 2：**未测代码永远是错的**
 
 - 未反复测试过的代码都是错的
   - 快速地测试→测试框架&&测试用例
 - 你以为最不可能出 bug 的地方，往往 bug 就在那躺着
 
-<!-- more -->
-
 ## Why is there bug?
 
 > 每个鏖战的夜晚都会发出的怒吼QAQ
@@ -91,7 +90,7 @@ comments: true
 
 - printf → 自定义 log 的 trace
   - 灵活可控、能快速定位问题大概位置、适用于大型软件
-    -  用多个log将程序的运行状态分隔, 进行bug定位
+    - 用多个log将程序的运行状态分隔, 进行bug定位
   - 无法精确定位、大量的 logs 管理起来比较麻烦
 - gdb → 指令/语句级 trace
   - 精确、指令级定位、任意查看程序内部状态
@@ -108,8 +107,6 @@ comments: true
 3. 我们能从状态机的运行中从易到难得到什么信息？
 4. 如何二分检查这些信息和 error 之间的关联？
 
-
-
 ## 调试一切
 
 ### Computer world: 一切皆可调试
@@ -155,8 +152,8 @@ UNIX 世界里你做任何事情都是在**<mark>编程</mark>**
 
 - **出错原因报告不准确**
   - 也可能是没看懂
-  - 对于大型项目(如Spring)更是这样, 对于一种Failure有多种可能的Fault, 当STFW时, 很可能会搜到多种不相干的Fault:disappointed: 
-  - 这个时候把这些报错信息丢给LLM不失为一个好选择:smile: 
+  - 对于大型项目(如Spring)更是这样, 对于一种Failure有多种可能的Fault, 当STFW时, 很可能会搜到多种不相干的Fault:disappointed:
+  - 这个时候把这些报错信息丢给LLM不失为一个好选择:smile:
 - **程序执行的过程看不到**
   - 那我们想办法 “看到” 状态机的执行过程就好了！
 
@@ -176,7 +173,7 @@ UNIX 世界里你做任何事情都是在**<mark>编程</mark>**
 - (这看起来是用 `perror()` 打印出来的！)
 - 问题分析
   - `#include` = 复制粘贴，自然会经过路径解析
-  - 明明 `/usr/include/x86_64-linux-gnu/sys/cdefs.h` 是存在的 (`man 1 locate`) 
+  - 明明 `/usr/include/x86_64-linux-gnu/sys/cdefs.h` 是存在的 (`man 1 locate`)
 
 ##### 两种方法
 
@@ -248,8 +245,6 @@ UNIX 世界里你做任何事情都是在**<mark>编程</mark>**
 >
 > 如果一个系统在有限的范围（有限的大小或配置）内对某个特定属性没有反例（即错误或漏洞），那么它在更大的范围内也不太可能有反例。
 
-
-
 ### 调试理论：推论 (3)
 
 #### 需求 → 设计 → 代码 → Fault → <font style="color:blue">Error → Failure</font>
@@ -266,6 +261,3 @@ UNIX 世界里你做任何事情都是在**<mark>编程</mark>**
 >
 > - **简单到无懈可击**：第一种方法是设计一个极其简单明了的系统，简单到没有任何明显的缺陷或漏洞
 > - **复杂到难以察觉缺陷**：第二种方法是创建一个如此复杂和深奥的设计，以至于缺陷并不明显
-
-
-