Merge pull request #731 from xhuajin/main

提交三篇插件介绍

10-Obsidian/Obsidian社区插件/Obsidian社区插件.md

@@ -88,7 +88,6 @@ Obsidian 非常重视你的数据安全，这使得我们非常重视安全问
 - [[vscode-editor]]：提供查看和编辑**各种代码文件**和代码块的功能
 - [[prozen]]：禅模式启动！
 
-
 ### 格式化
 
 描述格式化是指通过使用不同的格式技巧和标点符号排版等方式来提高文本的可读性和视觉效果，使得文本更清晰易读、更美观易懂，同时也提高了文本质量和可读性。在 Obsidian 中，有多种插件可以帮助用户对文本进行描述格式化。
@@ -118,6 +117,7 @@ Obsidian 非常重视你的数据安全，这使得我们非常重视安全问
 - [[multi-column-markdown]]：在 Obsidian 的预览模式下创建包含多列内容的 Markdown 文档
 - [[Obsidian样式-MCL Multi Column]]
 - [[obsidian-timeline]]：用于构建漂亮的时间轴/时间线
+- [[obsidian-sticky-heading]]：让当前内容的标题始终处于页面上方
 
 ### 标题增强
 
@@ -209,6 +209,7 @@ Obsidian 非常重视你的数据安全，这使得我们非常重视安全问
 - [[codeblock-tabs]]：将连续的 CodeBlocks 创建标签组样式
 - [[obsidian-code-tab]]：创造类似 leetcode 样式的混合代码块，且不仅限于代码块
 	- [[code-tab还能这么玩]]：codetab 插件的活用文章
+- [[obsidian-shiki]]：为超过 100 种语言提供更好的语法高亮显示等一系列功能
 
 ### 搜索
 
@@ -406,6 +407,7 @@ Obsidian 最具吸引力的特点之一，就是它拥有一个丰富的、逐
 - [[obsidian-dynamic-background]]：为 Obsidian 添加动态背景
 - [[obsidian-minimal-settings]]：为你 Minimal 主题提供自定义选项
 - [[obsidian-chat-view-qq]]：chat-view-qq 保存 QQ 消息到 Obsidian 中
+- [[obsidian-wallpaper]]：为库添加动态背景图
 
 ### 恢复&备份
 

10-Obsidian/Obsidian社区插件/obsidian-shiki.md

@@ -0,0 +1,87 @@
+---
+uid: 20240406172825
+title: Obsidian Shiki Plugin
+tags: [obsidian, code]
+description: 为超过100种语言提供更好的语法高亮显示等一系列功能
+author: Huajin
+type: other
+draft: false
+editable: false
+modified: 
+---
+
+# Obsidian Shiki Plugin
+
+> [!Note] 插件名片
+>
+> - 插件名称：Shiki Highlighter
+> - 插件版本：0.3.0
+> - 插件作者：Moritz Jung
+> - 插件描述：让当前内容的标题始终处于页面上方
+> - 插件项目地址：[点我跳转](https://github.com/imshenshen/obsidian-sticky-heading)
+
+这个插件通过 Expressive Code 将 shiki 集成到 Obsidian 中，为超过 100 种语言提供更好的语法高亮显示。
+
+这个插件在阅读，实时预览和编辑模式下能正常使用。
+
+## 功能展示
+
+添加带有行号、自定义标题、行突出显示
+
+![image.png](https://cdn.pkmer.cn/images/20240406173058.png!pkmer)
+
+## 对比 ob 默认渲染
+
+默认渲染结果
+
+![image.png](https://cdn.pkmer.cn/images/20240406173235.png!pkmer)
+
+shiki 插件渲染
+
+![image.png](https://cdn.pkmer.cn/images/20240406173247.png!pkmer)
+
+## 使用方法
+
+**基本结构**
+
+````示例代码
+```语言 配置
+代码内容
+```
+````
+
+### **添加行号 showLineNumbers**
+
+````示例代码
+```python showLineNumbers
+代码内容
+```
+````
+
+### **自定义标题 title="..."**
+
+````示例代码
+```python title="a-title-for-this-code-block"
+代码内容
+```
+````
+
+**特定行高亮**
+
+有两种方式，对特定行高亮（行号），或者对某个范围的行高亮（用短线连接），中间用逗号分隔。
+
+````示例代码
+```python {1, 5-10}
+代码内容
+```
+````
+
+### Diff 高亮
+
+像 GitHub 那样分别为新增内容添加绿色高亮（用 ins={}），为删除行添加红色高亮（用 del={}）
+
+````示例代码
+```python ins={1} del={5-10}
+代码内容
+```
+````

10-Obsidian/Obsidian社区插件/obsidian-sticky-heading.md

@@ -0,0 +1,41 @@
+---
+uid: 20240406170421
+title: obsidian-sticky-heading
+tags: [obsidian, 标题]
+description: 让当前内容的标题始终处于页面上方
+author: Huajin
+type: other
+draft: false
+editable: false
+modified: 
+---
+
+# obsidian-sticky-heading
+
+> [!Note] 插件名片
+>
+> - 插件名称：Sticky Headings
+> - 插件版本：1.0.6
+> - 插件作者：Shen Shen
+> - 插件描述：让当前内容的标题始终处于页面上方
+> - 插件项目地址：[点我跳转](https://github.com/imshenshen/obsidian-sticky-heading)
+
+sticky heading 插件可以让当前内容的标题始终处于页面上方
+
+![image.png](https://cdn.pkmer.cn/images/20240406170755.png!pkmer)
+
+## 设置
+
+插件只提供了一个设置，就是标题固定后距离顶部的空间大小，默认为 0 像素，你可以设置为例如五像素 5px 等，还可以设置其他单位例如 相对单位 rem
+
+![image.png](https://cdn.pkmer.cn/images/20240406170934.png!pkmer)
+
+## 已知问题
+
+- 内容过长时标题会消失
+
+这是因为 obsidian 用的是 codemirror 编辑器，codemirror 编辑器采用只渲染可见范围内的内容的方式以此做到能够无压打开超大文本。每当用户滚动浏览文档或文档本身发生更改时，当前视窗会重新渲染。正因为这个原因，当标题距离当前页面太远时，标题不会被编辑器渲染，自然会消失。（[Viewport - Developer Documentation (obsidian.md)](https://docs.obsidian.md/Plugins/Editor/Viewport)）
+
+- 阅读模式下不工作
+
+这个插件主要是为了解决这样的问题: 当我在碎片化的时间里写作时，我经常忘记我目前在哪个标题级别，或者我应该使用哪个级别作为下一个标题。如果在阅读模式下对这个特性有很大的需求，我们会考虑实现它。拉取请求是受欢迎的。

10-Obsidian/Obsidian社区插件/obsidian-wallpaper.md

@@ -0,0 +1,76 @@
+---
+uid: 20240406174439
+title: Obsidian Wallpaper
+tags: [obsidian, 背景图, 动态]
+description: 为库添加动态背景图
+author: Huajin
+type: other
+draft: false
+editable: false
+modified: 
+---
+
+# Obsidian Wallpaper
+
+> [!Note] 插件名片
+>
+> - 插件名称：Obsidian Wallpaper
+> - 插件版本：1.0.3
+> - 插件作者：Huajin
+> - 插件描述：为库添加动态背景图
+> - 插件项目地址：[点我跳转](https://github.com/xhuajin/obsidian-wallpaper)
+
+本插件不需要配置，只需要在设置中选择你想要用的壁纸即可。
+
+![setting.png](https://cdn.pkmer.cn/images/setting.png!pkmer)
+
+## 效果展示
+
+### Sky and Sea
+
+![skyandsea.png](https://cdn.pkmer.cn/images/skyandsea.png!pkmer)
+
+![[skyandsea.mp4]]
+
+### Stars1
+
+![stars1.png](https://cdn.pkmer.cn/images/stars1.png!pkmer)
+
+![[stars1.mp4]]
+
+### Stars2
+
+![stars2.png](https://cdn.pkmer.cn/images/stars2.png!pkmer)
+
+![[stars2.mp4]]
+
+### Stars3
+
+![stars3.png](https://cdn.pkmer.cn/images/stars3.png!pkmer)
+
+![[stars3.mp4]]
+
+### Campfire
+
+![campfire.png](https://cdn.pkmer.cn/images/campfire.png!pkmer)
+
+![[campfire.mp4]]
+
+## 如何增加新背景
+
+现有五个背景改自 [codepen.io](https://codepen.io/) 的五个项目
+
+- Sky and Sea: [CodePen HomeCSS Illustration 'Sky and Sea'](https://codepen.io/WhitePallet/details/YYmZEK)
+- Stars1: [Parallax Star background in CSS](https://codepen.io/sarazond/pen/LYGbwj)
+- Stars2: [CodePen Home Stars #Codevember_08](https://codepen.io/johnbgarcia/pen/qqdgGp)
+- Stars3: [A sky full of stars](https://codepen.io/jlnljn/pen/gRrOxM)
+- Campfire: [Campfire Colony](https://codepen.io/jackiezen/pen/gOOgvOO?editors=1000)
+
+如果你想添加你喜欢的壁纸，你可以在 GitHub 上给作者提一个 [Issues](https://github.com/xhuajin/obsidian-wallpaper/issues)。
+
+或者如果你有足够的动手能力，你也可以尝试修改源码添加壁纸：
+
+- fork 原项目并且安装依赖 npm i, npm run dev
+- 在文件夹 'src/style' 中添加一个 css 文件存放你的动态壁纸需要的 css。同时补全 'src/style/styles.css'。
+- 在文件夹 'src/wallpaper/' 中创建一个 ts 文件，用于绘制你的动态壁纸。同时在文件 'src/wallpaper/wallpaperPainter.ts' 中新增一个你的新壁纸的 cases。
+- 在 settings.js 文件中添加上你的新壁纸，以便你能够在 obsidian 的 wallpaper 设置中找到你的壁纸。