From c8f55a1b1896c703a65ecde0bc02e698414d4112 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=86=8A=E7=8C=AB=E5=88=AB=E7=86=AC=E5=A4=9C?= <84729049+PandaNocturne@users.noreply.github.com> Date: Wed, 28 Aug 2024 13:15:46 +0800 Subject: [PATCH 1/2] add new doc --- ...32\346\234\254\346\261\207\346\200\273.md" | 21 +- ...26\350\276\221\345\212\237\350\203\275.md" | 0 ...06\345\234\210\347\274\226\345\217\267.md" | 0 ...3\276\350\204\232\346\234\254remove.bg.md" | 337 ++++++++++++++++++ 4 files changed, 356 insertions(+), 2 deletions(-) rename "10-Obsidian/Obsidian\344\275\277\347\224\250\346\212\200\345\267\247/\347\206\212\347\214\253\345\210\253\347\206\254\345\244\234/\350\207\252\345\256\232\344\271\211Excalidraw\350\204\232\346\234\254-\344\277\235\345\255\230\345\261\200\351\203\250\350\247\206\345\233\276\350\207\263Eagle\345\271\266\345\256\236\347\216\260\344\272\214\346\254\241\347\274\226\350\276\221\345\212\237\350\203\275.md" => "10-Obsidian/Obsidian\347\244\276\345\214\272\346\217\222\344\273\266/Excalidraw/\350\207\252\345\256\232\344\271\211Excalidraw\350\204\232\346\234\254-\344\277\235\345\255\230\345\261\200\351\203\250\350\247\206\345\233\276\350\207\263Eagle\345\271\266\345\256\236\347\216\260\344\272\214\346\254\241\347\274\226\350\276\221\345\212\237\350\203\275.md" (100%) rename "10-Obsidian/Obsidian\347\244\276\345\214\272\346\217\222\344\273\266/Excalidraw/ExcalidrawAutomate/\350\207\252\345\256\232\344\271\211Excalidraw\350\204\232\346\234\254-\345\217\214\345\207\273\346\267\273\345\212\240\345\234\206\345\234\210\347\274\226\345\217\267.md" => "10-Obsidian/Obsidian\347\244\276\345\214\272\346\217\222\344\273\266/Excalidraw/\350\207\252\345\256\232\344\271\211Excalidraw\350\204\232\346\234\254-\345\217\214\345\207\273\346\267\273\345\212\240\345\234\206\345\234\210\347\274\226\345\217\267.md" (100%) create mode 100644 "10-Obsidian/Obsidian\347\244\276\345\214\272\346\217\222\344\273\266/Excalidraw/\350\207\252\345\256\232\344\271\211Excalidraw\350\204\232\346\234\254-\346\212\240\345\233\276\350\204\232\346\234\254remove.bg.md" diff --git "a/10-Obsidian/Obsidian\344\275\277\347\224\250\346\212\200\345\267\247/\347\206\212\347\214\253\345\210\253\347\206\254\345\244\234/\347\206\212\347\214\253\345\210\253\347\206\254\345\244\234Excalidraw\350\204\232\346\234\254\346\261\207\346\200\273.md" "b/10-Obsidian/Obsidian\344\275\277\347\224\250\346\212\200\345\267\247/\347\206\212\347\214\253\345\210\253\347\206\254\345\244\234/\347\206\212\347\214\253\345\210\253\347\206\254\345\244\234Excalidraw\350\204\232\346\234\254\346\261\207\346\200\273.md" index db364f192..a20c99e8d 100644 --- "a/10-Obsidian/Obsidian\344\275\277\347\224\250\346\212\200\345\267\247/\347\206\212\347\214\253\345\210\253\347\206\254\345\244\234/\347\206\212\347\214\253\345\210\253\347\206\254\345\244\234Excalidraw\350\204\232\346\234\254\346\261\207\346\200\273.md" +++ "b/10-Obsidian/Obsidian\344\275\277\347\224\250\346\212\200\345\267\247/\347\206\212\347\214\253\345\210\253\347\206\254\345\244\234/\347\206\212\347\214\253\345\210\253\347\206\254\345\244\234Excalidraw\350\204\232\346\234\254\346\261\207\346\200\273.md" @@ -201,9 +201,26 @@ https://raw.githubusercontent.com/PandaNocturne/ExcalidrawScripts/master/PandaSc ``` - Author：熊猫别熬夜 -- PKMerDoc：[[自定义Excalidraw脚本-将选中元素为PNG或者SVG格式文件到本地]] +- PKMerDoc：[自定义 Excalidraw 脚本 - 将选中元素为 PNG 或者 SVG 格式文件到本地]( https://pkmer.cn/show/20240401215647 ) - Description：将选中的元素保存为 PNG 或者 SVG 格式本地文件，相当于网页版 Excalidraw 的导出仅选中图片。 - - ![2024-03-06_熊猫别熬夜Excalidraw脚本汇总-Excalidraw自动检测更新_IMG-20](https://cdn.pkmer.cn/images/202404012157074.gif!pkmer) + - ![File-20240401094628708.gif](https://raw.githubusercontent.com/PandaNocturne/ImageAssets/main/Obsidian/202408172318639.gif) + - Tip: 如果未选择元素则自动选中画板内全部元素，以及如果选中的是 Frame 框架，则自动选择 Frame 内部所有元素。 +- ChangeLog： + - 24.08.21：更新了UI + - ![Excalidraw.md](https://cdn.pkmer.cn/images/202408281302056.png!pkmer) + - 24.08.28：添加`Copy as Wiki`按钮，将图片自动生成在ob的默认附件位置，并复制`![[filename]]`文本至剪切板，相较于自带的`Copy to clipboard as PNG/SVG`，可随时调节PNG的缩放比例，调整清晰度。 + - ![Excalidraw.md](https://cdn.pkmer.cn/images/202408281302700.png!pkmer) + +### RemoveBg + +```excalidraw-script-install +https://raw.githubusercontent.com/PandaNocturne/ExcalidrawScripts/master/PandaScripts/RemoveBg.md +``` + +- Author：熊猫别熬夜 +- PKMerDoc：[[自定义Excalidraw脚本-抠图脚本remove.bg]] +- Description：采用[Remove.bg](https://www.remove.bg/zh/g/developers)的API来对Excalidraw中的图片进行抠图。 + - ![Excalidraw.md](https://cdn.pkmer.cn/images/202408281302659.png!pkmer) ## 画布演示 diff --git "a/10-Obsidian/Obsidian\344\275\277\347\224\250\346\212\200\345\267\247/\347\206\212\347\214\253\345\210\253\347\206\254\345\244\234/\350\207\252\345\256\232\344\271\211Excalidraw\350\204\232\346\234\254-\344\277\235\345\255\230\345\261\200\351\203\250\350\247\206\345\233\276\350\207\263Eagle\345\271\266\345\256\236\347\216\260\344\272\214\346\254\241\347\274\226\350\276\221\345\212\237\350\203\275.md" "b/10-Obsidian/Obsidian\347\244\276\345\214\272\346\217\222\344\273\266/Excalidraw/\350\207\252\345\256\232\344\271\211Excalidraw\350\204\232\346\234\254-\344\277\235\345\255\230\345\261\200\351\203\250\350\247\206\345\233\276\350\207\263Eagle\345\271\266\345\256\236\347\216\260\344\272\214\346\254\241\347\274\226\350\276\221\345\212\237\350\203\275.md" similarity index 100% rename from "10-Obsidian/Obsidian\344\275\277\347\224\250\346\212\200\345\267\247/\347\206\212\347\214\253\345\210\253\347\206\254\345\244\234/\350\207\252\345\256\232\344\271\211Excalidraw\350\204\232\346\234\254-\344\277\235\345\255\230\345\261\200\351\203\250\350\247\206\345\233\276\350\207\263Eagle\345\271\266\345\256\236\347\216\260\344\272\214\346\254\241\347\274\226\350\276\221\345\212\237\350\203\275.md" rename to "10-Obsidian/Obsidian\347\244\276\345\214\272\346\217\222\344\273\266/Excalidraw/\350\207\252\345\256\232\344\271\211Excalidraw\350\204\232\346\234\254-\344\277\235\345\255\230\345\261\200\351\203\250\350\247\206\345\233\276\350\207\263Eagle\345\271\266\345\256\236\347\216\260\344\272\214\346\254\241\347\274\226\350\276\221\345\212\237\350\203\275.md" diff --git "a/10-Obsidian/Obsidian\347\244\276\345\214\272\346\217\222\344\273\266/Excalidraw/ExcalidrawAutomate/\350\207\252\345\256\232\344\271\211Excalidraw\350\204\232\346\234\254-\345\217\214\345\207\273\346\267\273\345\212\240\345\234\206\345\234\210\347\274\226\345\217\267.md" "b/10-Obsidian/Obsidian\347\244\276\345\214\272\346\217\222\344\273\266/Excalidraw/\350\207\252\345\256\232\344\271\211Excalidraw\350\204\232\346\234\254-\345\217\214\345\207\273\346\267\273\345\212\240\345\234\206\345\234\210\347\274\226\345\217\267.md" similarity index 100% rename from "10-Obsidian/Obsidian\347\244\276\345\214\272\346\217\222\344\273\266/Excalidraw/ExcalidrawAutomate/\350\207\252\345\256\232\344\271\211Excalidraw\350\204\232\346\234\254-\345\217\214\345\207\273\346\267\273\345\212\240\345\234\206\345\234\210\347\274\226\345\217\267.md" rename to "10-Obsidian/Obsidian\347\244\276\345\214\272\346\217\222\344\273\266/Excalidraw/\350\207\252\345\256\232\344\271\211Excalidraw\350\204\232\346\234\254-\345\217\214\345\207\273\346\267\273\345\212\240\345\234\206\345\234\210\347\274\226\345\217\267.md" diff --git "a/10-Obsidian/Obsidian\347\244\276\345\214\272\346\217\222\344\273\266/Excalidraw/\350\207\252\345\256\232\344\271\211Excalidraw\350\204\232\346\234\254-\346\212\240\345\233\276\350\204\232\346\234\254remove.bg.md" "b/10-Obsidian/Obsidian\347\244\276\345\214\272\346\217\222\344\273\266/Excalidraw/\350\207\252\345\256\232\344\271\211Excalidraw\350\204\232\346\234\254-\346\212\240\345\233\276\350\204\232\346\234\254remove.bg.md" new file mode 100644 index 000000000..0aab0ac80 --- /dev/null +++ "b/10-Obsidian/Obsidian\347\244\276\345\214\272\346\217\222\344\273\266/Excalidraw/\350\207\252\345\256\232\344\271\211Excalidraw\350\204\232\346\234\254-\346\212\240\345\233\276\350\204\232\346\234\254remove.bg.md" @@ -0,0 +1,337 @@ +--- +uid: 20240828131108 +title: 自定义 Excalidraw 脚本 - 抠图脚本 remove.bg +tags: [图片处理, Excalidraw脚本] +description: 利用 Remove.bg 的 API 在Excalidraw绘图过程中自动去除图像背景 +author: 熊猫别熬夜 +type: other +draft: false +editable: false +modified: 20240828131331 +--- + +# 自定义 Excalidraw 脚本 - 抠图脚本 remove.bg + +![24.08.26_自定义Excalidraw脚本-抠图脚本remove.bg.md](https://cdn.pkmer.cn/images/202408281311688.gif) + +[Remove.bg](https://www.remove.bg) 是一款在线图像处理工具，专注于快速、高效地去除图像背景。它利用先进的人工智能技术，自动识别图像中的前景和背景，用户只需上传图像，系统便能在几秒钟内生成清晰的无背景图像。 + +在 Excalidraw 中，可以利用 Remove.bg 的 API 在绘图过程中自动去除图像背景，特别适用于人物角色提取。 + +Demo： + +![24.08.26_自定义Excalidraw脚本-抠图脚本remove.bg.md](https://cdn.pkmer.cn/images/202408281311355.gif!pkmer) + +## 设置 API Key + +![24.08.26_自定义Excalidraw脚本-抠图脚本remove.bg.md](https://cdn.pkmer.cn/images/202408281311951.png!pkmer) + +需要从 [Background Removal API – remove.bg](https://www.remove.bg/zh/api) 中获取 Remove.bg 的 API key 用于此脚本的调用。 + +![24.08.26_自定义Excalidraw脚本-抠图脚本remove.bg.md](https://cdn.pkmer.cn/images/202408281311619.png!pkmer) + +首次运行此脚本会弹出 API key 的输入框以及自动打开 [Background Removal API – remove.bg](https://www.remove.bg/zh/api) 网址，也可以在 Excalidraw 插件设置的 `Settings for installed Scripts` 中手动修改。 + +![24.08.26_自定义Excalidraw脚本-抠图脚本remove.bg.md](https://cdn.pkmer.cn/images/202408281311386.png!pkmer) + +> [!tip] +> 如果设置后，不选中图片也会弹出此输入框 + +## 支持格式 + +支持格式有 JPG 和 PNG，请注意，**不支持 10 兆像素以上的 PNG 图像**。如果您需要该尺寸的图像具有透明度，如果您不需要透明则为白色背景。 + +## 参数 + +![24.08.26_自定义Excalidraw脚本-抠图脚本remove.bg.md](https://cdn.pkmer.cn/images/202408281311959.png!pkmer) + +### 尺寸 (Size) + +最大输出图像分辨率，**size**设置为以下值之一： + +| 参数 | 说明 | +| --------- | --------------------------------------------------------------------------------- | +| `auto` | 使用最高可用分辨率，高达 25 兆像素（例如 6250×4000）（基于图像大小和可用积分） | +| `preview` | 将图像大小调整为 0.25 兆像素（例如 625×400 像素） | +| `full` | 使用原始图像分辨率， JPG 格式最高可达 25 兆像素（例如 6250×4000），PNG 格式最高可达 10 兆像素（例如 4000×2500） | + +### 类型 (Type) + +检测或设置前景**类型**，建议使用**type = auto**自动检测前景的**类型**。 + +![24.08.26_自定义Excalidraw脚本-抠图脚本remove.bg.md](https://cdn.pkmer.cn/images/202408281311703.png!pkmer) + +**type**设置为以下值之一： + +| 参数 | 说明 | +|:--------------: | ---- | +| `auto` | 自动检测 | +| `car` | 汽车 | +| `product` | 产品 | +| `person` | 人 | +| `animal` | 动物 | +| `graphic` | 图形 | +| `transportation` | 交通 | + +### 位置 (Position) + +抠出来的图片位于原始图片的位置： + +| 参数 | 说明 | 示意 | +| :-: | ------------ | ------------------------------------------------------------------------------------------------------- | +| 相邻 | 在原始图片右侧显示 | ![24.08.26_自定义Excalidraw脚本-抠图脚本remove.bg.md](https://cdn.pkmer.cn/images/202408281311133.png!pkmer)
| +| 相同 | 在原始图片的原始位置显示 | ![24.08.26_自定义Excalidraw脚本-抠图脚本remove.bg.md](https://cdn.pkmer.cn/images/202408281312953.gif!pkmer)
| +| 替换 | 替换原始图像 | ![24.08.26_自定义Excalidraw脚本-抠图脚本remove.bg.md](https://cdn.pkmer.cn/images/202408281312974.gif!pkmer)
| + +### 透明背景 + +默认为透明背景，如果不需要则为白底背景。 + +## 脚本安装 + +可通过 Excalidraw 插件的脚本代码块 (\`\`\`excalidraw-script-install) 来安装，里面放的是脚本 GitHub 的 RAW 链接，在 Obsidian 中会显示为按钮，脚本更新会自动检测。 + +> ![24.08.26_自定义Excalidraw脚本-抠图脚本remove.bg.md](https://cdn.pkmer.cn/images/202408281311462.png!pkmer) + +```` +```excalidraw-script-install +https://raw.githubusercontent.com/PandaNocturne/ExcalidrawScripts/master/PandaScripts/RemoveBg.md +``` +```` + +将上述代码块放到一个 **md 文件**，阅读模式下该代码块会显示为 安装脚本的按钮，点击安装之后，更新为脚本已是最新 - 点击重新安装，即当前脚本已经安装，在 Excalidraw 画布界面的侧边**Obsidian 工具面板**中可以查看。 + +### 源码 - 仅供参考 + +```js +/* + * @Author: 熊猫别熬夜 + * @Date: 2024-08-26 12:37:13 + * @Last Modified by: 熊猫别熬夜 + * @Last Modified time: 2024-08-28 11:48:06 + */ +let settings = ea.getScriptSettings(); +if (!settings["Remove.bg API Key"]?.value) { + // 自动打开https://www.remove.bg/zh/api网站 + window.open("https://www.remove.bg/zh/api", "_blank"); + const key = await utils.inputPrompt("请在 script settings 中设置Remove.bg API Key", "请在https://www.remove.bg/zh/api中获取API Key"); + settings = { + "Remove.bg API Key": { + value: key || "", + description: "请在https://www.remove.bg/zh/api中获取API Key" + }, + }; + ea.setScriptSettings(settings); + return; +} + +const fs = require("fs").promises; +const path = require("path"); + +await ea.addElementsToView(); +const imgs = ea.getViewSelectedElements().filter(el => el.type === "image"); +if (imgs.length === 0) { + new Notice("No image found"); + + const key = await utils.inputPrompt("Remove.bg API Key", "请在https://www.remove.bg/zh/api中获取API Key", settings["Remove.bg API Key"].value); + if (!key) return; + + settings = { + "Remove.bg API Key": { + value: key, + description: "请在https://www.remove.bg/zh/api中获取API Key" + }, + }; + ea.setScriptSettings(settings); + return; +} + +const inputdata = { + "filePath": "", + "size": "auto", + "type": "auto", + "key": settings["Remove.bg API Key"].value, + "format": "auto" +}; +// 图片清晰度 +const sizelist = ['auto', 'preview', 'regular', 'full']; +// 抠图类型 +const typeList = ['auto', 'car', 'product', 'person', 'animal', 'graphic', 'transportation']; +const typeList2 = ['自动识别', '汽车', '物品', '人像', '动物', '图形', '交通']; + +// 图片位置 +const positionList = ['相邻', '相同', '替换']; +let position = positionList[0]; +// 图片背景 +let isbg = true; +// 配置按钮 +const customControls = (container) => { + // 添加下拉菜单选择格式 + new ea.obsidian.Setting(container) + .setName(`大小(Size)`) + .addDropdown(dropdown => { + sizelist.forEach((item) => { + dropdown.addOption(item, item); + }); + dropdown + .setValue(sizelist[0]) + .onChange(value => { + inputdata.size = value; + }); + }); + new ea.obsidian.Setting(container) + .setName(`类型(Type)`) + .addDropdown(dropdown => { + typeList.forEach((item, index) => { + dropdown.addOption(item, typeList2[index]); + }); + dropdown + .setValue(typeList[0]) + .onChange(value => { + inputdata.type = value; + }); + }); + + new ea.obsidian.Setting(container) + .setName(`位置(Position)`) + .addDropdown(dropdown => { + positionList.forEach((item) => { + dropdown.addOption(item, item); + }); + dropdown + .setValue(positionList[0]) + .onChange(value => { + position = value; + }); + }); + + new ea.obsidian.Setting(container) + .setName(`是否透明背景`) + .setDesc(`设置为透明背景，否则为白底`) + .addToggle(toggle => { + toggle + .setValue(isbg) + .onChange(value => { + isbg = value; + }); + }); +}; + +let isSend = false; +// 创建自定义提示框 +const modal = new ea.obsidian.Modal(app); +modal.contentEl.createEl('h2', { text: 'Remove.bg - 抠图' }); +customControls(modal.contentEl); +const confirmButton = modal.contentEl.createEl('button', { text: "Confirm" }); +// 添加样式使按钮居右 +confirmButton.style.float = 'right'; +confirmButton.addEventListener('click', async () => { + isSend = true; + await modal.close(); +}); + +// 确保modal关闭后判断isSend的状态 +await new Promise(resolve => { + modal.onClose = () => { + resolve(); + }; + modal.open(); +}); + +if (!isSend) { + new Notice("❌removebg cancelled"); + return; +} +inputdata.format = isbg ? 'png' : 'jpg'; + + +const notice = new Notice("🔄removebg doing......", 0); // 0 表示通知将一直显示 + +for (let img of imgs) { + const imgPath = await ea.plugin.filesMaster.get(img.fileId).path; + const file = await app.vault.getAbstractFileByPath(imgPath); + if (!file) { + new Notice("Can't find file: " + imgPath); + continue; + } + inputdata.filePath = app.vault.adapter.getFullPath(file.path); + console.log(inputdata); + + // img转为二进制 + const filePath = inputdata.filePath; + const fileBuffer = await fs.readFile(filePath); + const fileBlob = new Blob([fileBuffer]); + + // 保存removebg图 + const timestamp = window.moment().format("YYYYMMDDHHmmss"); + let newFileName = `RemoveBg-${timestamp}${path.extname(filePath)}`; + console.log(newFileName); + + // 调用removebg API去除背景 + const rbgResultData = await removeBg(fileBlob, inputdata); + + // 图形覆盖 + if (position === positionList[2]) { + await app.vault.adapter.write(imgPath, Buffer.from(rbgResultData)); + await new Promise((resolve) => setTimeout(resolve, 200)); + await app.commands.executeCommandById("obsidian-excalidraw-plugin:save"); + continue; + } + const newFilePath = path.join(path.dirname(filePath), newFileName); + // await app.vault.adapter.write(newFilePath, Buffer.from(rbgResultData)); + await fs.writeFile(newFilePath, Buffer.from(rbgResultData)); + await new Promise((resolve) => setTimeout(resolve, 200)); + + // 获取图片在Excalidraw的位置，使removebg图位于它右侧 + let id = await ea.addImage(0, 0, newFileName); + let el = ea.getElement(id); + el.width = img.width; + el.height = img.height; + el.roundness = img.roundness; + el.angle = img.angle; + el.opacity = img.opacity; + el.link = img.link; + if (position === positionList[0]) { + el.x = img.x + img.width + 10; + el.y = img.y; + } else if (position === positionList[1]) { + el.x = img.x; + el.y = img.y; + } + await ea.addElementsToView(false, true); + await ea.moveViewElementToZIndex(el.id, 99); +} +new Notice("✅removebg done"); +notice.hide(); // 操作完成后手动关闭通知 + +async function removeBg(blob, inputdata) { + const formData = new FormData(); + formData.append("size", inputdata.size); + formData.append("type", inputdata.type); + formData.append("format", inputdata.format); + formData.append("image_file", blob); + try { + const response = await fetch("https://api.remove.bg/v1.0/removebg", { + method: "POST", + headers: { "X-Api-Key": inputdata.key }, + body: formData, + }); + if (response.ok) { + return await response.arrayBuffer(); + } else { + throw new Error(`${response.status}: ${response.statusText}`); + } + } catch (error) { + new Notice(`❌ Error: ${error.message}`); + notice.hide(); // 操作完成后手动关闭通知 + throw error; // 重新抛出错误以便上层代码处理 + } +}; + +``` + +## 参考资料 + +- [云托管的在线抠图软件 | remove.bg – remove.bg](https://www.remove.bg/zh/g/developers) +- [Background Removal API – remove.bg](https://www.remove.bg/zh/api#remove-background) + From ef6b51fadaa0fb786343eb8b6e0014edcfa9eb85 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=86=8A=E7=8C=AB=E5=88=AB=E7=86=AC=E5=A4=9C?= <84729049+PandaNocturne@users.noreply.github.com> Date: Fri, 30 Aug 2024 12:31:32 +0800 Subject: [PATCH 2/2] add new Obsidian doc --- ...77\347\224\250\346\212\200\345\267\247.md" | 1 + ...44\270\255\344\275\277\347\224\250Gist.md" | 249 ++++++++++++++++++ 2 files changed, 250 insertions(+) create mode 100644 "10-Obsidian/Obsidian\344\275\277\347\224\250\346\212\200\345\267\247/\347\206\212\347\214\253\345\210\253\347\206\254\345\244\234/\345\246\202\344\275\225\345\234\250Obsidian\344\270\255\344\275\277\347\224\250Gist.md" diff --git "a/10-Obsidian/Obsidian\344\275\277\347\224\250\346\212\200\345\267\247/Obsidian\344\275\277\347\224\250\346\212\200\345\267\247.md" "b/10-Obsidian/Obsidian\344\275\277\347\224\250\346\212\200\345\267\247/Obsidian\344\275\277\347\224\250\346\212\200\345\267\247.md" index 71a205700..a011a4819 100644 --- "a/10-Obsidian/Obsidian\344\275\277\347\224\250\346\212\200\345\267\247/Obsidian\344\275\277\347\224\250\346\212\200\345\267\247.md" +++ "b/10-Obsidian/Obsidian\344\275\277\347\224\250\346\212\200\345\267\247/Obsidian\344\275\277\347\224\250\346\212\200\345\267\247.md" @@ -111,5 +111,6 @@ modified: 20240806215746 - [[通过简悦Simpread进行网页剪藏的折腾分享]] - [[MarginNote生成页码链接与Obsidian联动]] - [[如何在浏览器中打开Markdown笔记]] +- [[如何在Obsidian中使用Gist]] diff --git "a/10-Obsidian/Obsidian\344\275\277\347\224\250\346\212\200\345\267\247/\347\206\212\347\214\253\345\210\253\347\206\254\345\244\234/\345\246\202\344\275\225\345\234\250Obsidian\344\270\255\344\275\277\347\224\250Gist.md" "b/10-Obsidian/Obsidian\344\275\277\347\224\250\346\212\200\345\267\247/\347\206\212\347\214\253\345\210\253\347\206\254\345\244\234/\345\246\202\344\275\225\345\234\250Obsidian\344\270\255\344\275\277\347\224\250Gist.md" new file mode 100644 index 000000000..140b396ef --- /dev/null +++ "b/10-Obsidian/Obsidian\344\275\277\347\224\250\346\212\200\345\267\247/\347\206\212\347\214\253\345\210\253\347\206\254\345\244\234/\345\246\202\344\275\225\345\234\250Obsidian\344\270\255\344\275\277\347\224\250Gist.md" @@ -0,0 +1,249 @@ +--- +uid: 20240830121751 +title: 如何在 Obsidian 中使用 Gist +tags: [Gist, obsidian插件, 汇总] +description: 在个人知识管理工具 Obsidian 中，用户通常需要高效地整理和分享信息，尤其是代码片段和文档。GitHub Gist 提供了一种简捷的方式来实现代码分享和版本控制，通过 Gist，用户不仅能够将代码片段以链接的形式分享给他人，还可以对其进行版本管理、修改和回溯，这为 Obsidian 用户提供了更灵活的知识管理方式。 +author: 熊猫别熬夜 +type: other +draft: false +editable: false +modified: 20240830122904 +--- + +# 如何在 Obsidian 中使用 Gist + +在个人知识管理工具 Obsidian 中，用户通常需要高效地整理和分享信息，尤其是代码片段和文档。GitHub Gist 提供了一种简捷的方式来实现代码分享和版本控制，通过 Gist，用户不仅能够将代码片段以链接的形式分享给他人，还可以对其进行版本管理、修改和回溯，这为 Obsidian 用户提供了更灵活的知识管理方式。 + +![24.08.30_如何在Obsidian中使用Gist.md](https://cdn.pkmer.cn/images/202408301227852.png!pkmer) + +## GitHub Gist + +GitHub Gist 是 GitHub 提供的一项功能，允许用户创建和共享代码片段、文档或其他文本文件。Gist 提供了一种简便的方式来保存和分享小段代码或其他文本信息，通常用于以下场景： + +1. **代码分享**：Gist 使得分享小段代码变得简单，用户只需要提供一个链接，其他人就可以查看、评论甚至 Fork 这个代码片段。 +2. **代码版本控制**：Gist 采用 Git 作为版本控制系统，每次修改都会创建一个新的版本，用户可以随时回溯查看历史版本。 +3. **公开或私密**：用户可以选择将 Gist 设置为公共（任何人都可以访问）或私密（只有知道链接的人可以访问）。私密 Gist 仍然是通过 GitHub 的基础设施进行管理，但不公开显示。 +4. **多文件支持**：一个 Gist 可以包含多个文件，适合用于需要多个相关代码文件或文档的情况。 +5. **嵌入功能**：Gist 生成的链接可以嵌入到其他网页或文档中，方便展示和引用。 + +### 使用 Gist 的基本步骤 + +![24.08.30_如何在Obsidian中使用Gist.md](https://cdn.pkmer.cn/images/202408301228187.png!pkmer) + +1. **创建 Gist**： + - ![如何在Obsidian中使用Gist.md](https://cdn.pkmer.cn/images/202408301219370.png!pkmer) + - 登录到你的 GitHub 账户。 + - 访问 Gist 页面（[Gist.github.com](https://Gist.github.com)）。 + - 点击“New Gist”按钮。 + - 输入文件名和内容，通过 Add File 按钮可以添加多个文件。 + - 注意文件名需要带有后缀，Gist 会根据后缀来渲染 md 或代码。 + - 选择是将 Gist 设置为 Public（公开）还是 Secret（私密）。 + - ![如何在Obsidian中使用Gist.md](https://cdn.pkmer.cn/images/202408301219095.png!pkmer) +2. **分享 Gist**： + - 创建完成后，将会生成一个唯一的 URL，可以将这个链接分享给别人。 + - ![如何在Obsidian中使用Gist.md](https://cdn.pkmer.cn/images/202408301219724.png!pkmer) +3. **管理 Gist**： + - 用户可以随时返回 Gist 页面编辑、删除或查看已有的 Gist。 + - ![如何在Obsidian中使用Gist.md](https://cdn.pkmer.cn/images/202408301219414.png!pkmer) + - 你可以 Fork 其他人的 Gist，进行修改然后再保存为自己的 Gist。 + - ![如何在Obsidian中使用Gist.md](https://cdn.pkmer.cn/images/202408301219172.png!pkmer) + +### 如何获取 GitHub Token(GitHub 令牌) + +- GitHub →“Setting”(设置)→“Developer settings”(开发者设置) + - ![如何在Obsidian中使用Gist.md](https://cdn.pkmer.cn/images/202408301219846.png!pkmer) +- “Personal access tokens”(个人访问令牌)→“Generate new token”(生成新令牌) + - ![如何在Obsidian中使用Gist.md](https://cdn.pkmer.cn/images/202408301219553.png!pkmer) + - 可以使用具有 gist 范围的经典个人访问令牌（PAT）或者使用对您的 Gists 具有读写访问权限的新细粒度令牌。 +- 添加该访问令牌的用途：`Gist` 以及过期日期 +- 设置令牌权限范围“Select scopes”(选择范围) + - 方案一：gist 范围的经典个人访问令牌（PAT） + - ![如何在Obsidian中使用Gist.md](https://cdn.pkmer.cn/images/202408301219283.png!pkmer) + - 方案二：Gists 具有读写访问权限的新细粒度令牌。 + - ![如何在Obsidian中使用Gist.md](https://cdn.pkmer.cn/images/202408301219068.png!pkmer) + - Account Permissions + - Gists：Read-an：write + - Repository Permissions + - Pull Request：Read-only + - Contents：Read-only + - Issues：Read-only +- 设置完成后，点击页面底部的“Generate token”(生成令牌) 按钮。 + - 注意生成后的令牌请立即复制保存！ + - ![如何在Obsidian中使用Gist.md](https://cdn.pkmer.cn/images/202408301219248.png!pkmer) + +## Obsidain 中的 Gist 插件介绍 + +Obsidian 插件市场非常丰富，Gist 的相关插件也是有的，主要有以下 4 个插件： + +![24.08.30_如何在Obsidian中使用Gist.md](https://cdn.pkmer.cn/images/202408301228349.png!pkmer) + +| 插件名称 | 功能 | +| :-----------------: | ------------------------------------------------------------------------ | +| **Obsidian Gister** | 允许用户使用笔记嵌入、创建和更新 GitHub 和 OpenGist 的 Gist，支持浅色和深色主题，提供手动或自动保存公共和私人 Gist。 | +| **Obsidian Gist** | 在 Obsidian 中渲染 GitHub Gist，支持仅使用 Gist ID 或用户名和 Gist ID 进行嵌入，能够显示单个文件内容。 | +| **Share as Gist** | 用于将笔记作为 GitHub Gist 分享，支持公开和私密分享，允许设置 Gist 描述，支持自动更新 Gist。 | +| **Image to Gist** | 将图像上传到 GitHub 秘密 Gist，支持动态调整上传图像的大小，提供拖放和剪贴板粘贴的灵活上传方式。 | + +### Obsidian Gistr + +![如何在Obsidian中使用Gist.md](https://cdn.pkmer.cn/images/202408301219821.png!pkmer) + +> [!note] [Obsidian Gistr](https://github.com/Aetherinox/obsidian-Gistr) +> +> Obsidian 插件，允许您使用笔记嵌入、创建和更新 Github 和 OpenGist 的 Gist。浅色和深色主题支持，手动或自动保存创建/更新公共和私人 Gist。 + +#### 功能介绍 + +##### Gist Code Embed + +两种嵌入模式： **Codeblock 模式**和**Website 模式**。 + +- Codeblock 模式：此选项在代码块中显示要点，并包含行号和要点文本。 +嵌入语法： + +~~~md +```gistr +https://gist.github.com/PandaNocturne/f3e643bf25f7fdbf86f1a48ffae2690c +``` +~~~ + +![如何在Obsidian中使用Gist.md](https://cdn.pkmer.cn/images/202408301219563.png!pkmer) + +- Website 模式：可以将任何网站嵌入到您的 Obsidian 笔记中，在类似浏览器的环境中显示 Gist，它允许您登录 Github 或 Opengist 站点并查看/编辑您的 Gist。 + +| 参数 | 必要性 | 说明 | +| -------- | --- | ----------------------- | +| `url` | ✅ | gist 链接 | +| `raw` | ❌ | 使用 RAW 属性激活 | +| `zoom` | ❌ | `raw` 属性，更改网站的大小 | +| `height` | ❌ | `raw` 属性，改变网站框架的高度 | +| `css` | ❌ | `raw` 属性，覆盖嵌入式网站上现有的 CSS | + +~~~md +```gistr +url: https://gist.github.com/Aetherinox/f7525990fba2cba6a3ee7b61ac626c21 +raw: true +zoom: 0.8 +height: 500 +``` +~~~ + +![如何在Obsidian中使用Gist.md](https://cdn.pkmer.cn/images/202408301219143.png!pkmer) + +##### Gist Share Code + +将 Obsidian 的笔记保存为公开或秘密 Gist + +- 需要 Github 个人访问令牌 (Token)。 + - ![如何在Obsidian中使用Gist.md](https://cdn.pkmer.cn/images/202408301219743.png!pkmer) +- 提供手动和自动保存设置 + - ![如何在Obsidian中使用Gist.md](https://cdn.pkmer.cn/images/202408301219331.png!pkmer) +- 上传信息记录在 YAML 的 Gists 属性中 + - ![如何在Obsidian中使用Gist.md](https://cdn.pkmer.cn/images/202408301219056.png!pkmer) + +##### Code Theme + +Gistr 插件提供了深浅模式切换、行编号和语法高亮、文本换行控制、快速性能和缓存、颜色自定义以及对插件和嵌入网站的全面定制功能。 + +![如何在Obsidian中使用Gist.md](https://cdn.pkmer.cn/images/202408301219605.png!pkmer) + +#### Theme 主题 + +### Obsidian Gist + +> [!note] [obsidian-Gist](https://github.com/linjunpop/obsidian-Gist) +> 这是一个在 Obsidian 中渲染 GitHub Gist 的插件，代码块的 Gist 将被呈现为嵌入式 Gist 视图。 + +![如何在Obsidian中使用Gist.md](https://cdn.pkmer.cn/images/202408301219359.png!pkmer) + +1. 仅适用 Gist ID + + ~~~md + ```Gist + 30efbfd874fb1a16176d3f638a1e712a + ``` + ~~~ + +2. 使用用户名和 Gist ID + + ~~~md + ```Gist + linjunpop/30efbfd874fb1a16176d3f638a1e712a + ``` + ~~~ + +3. 指定仅在 Gist 中显示单个文件： + + ~~~md + ```Gist + linjunpop/30efbfd874fb1a16176d3f638a1e712a#math.ex + 30efbfd874fb1a16176d3f638a1e712a#concat.ex + ``` + ~~~ + +### Share as Gist + +> [!note] [obsidian-share-as-Gist](https://github.com/timrogers/obsidian-share-as-Gist) +> 用于将您的笔记作为 GitHub Gist 分享 (私下或公开)。**私下分享**即只有知道链接的人才能看到该笔记，**公开分享**即该笔记在您的个人资料上可见，还可以选择为您的 Gist 设置描述。 +> +> > 📌注意：该插件不会自动上传笔记中本地图片以及转换 Obsidian 的 WIKI 链接。 + +> [!caution] 注意保护您的 GitHub 个人访问令牌 +> 该插件会将 GitHub Token(GitHub 访问令牌) 将存储在 Obsidian 的 `localStorage` 中。这意味着它不会存储在文件中，也不会备份或与保管库的其余部分同步。但理论上其他 Obsidian 插件也可以访问它。为了您的安全，您应该确保为您的个人访问令牌提供尽可能最低的权限。这意味着您的令牌将无法访问您的代码或其他敏感数据。 + +#### 功能介绍 + +- 共享笔记：要共享笔记，请打开命令面板并输入“Gist”。您将看到用于创建公共和私人链接的命令。 + ![如何在Obsidian中使用Gist.md](https://cdn.pkmer.cn/images/202408301219057.png!pkmer) + - 设置 Gist 描述：为您的 Gist 添加自定义描述，然后按 Enter 键。您可以跳过此步骤并立即按 Enter 键接受默认值。 + ![如何在Obsidian中使用Gist.md](https://cdn.pkmer.cn/images/202408301219808.png!pkmer) +- 自动更新：如果打开 "Enable auto-saving Gists after edit" 设置，您的更改将自动反映在 Gist 中。如果没有，您可以再次使用“在 GitHub.com 上共享为 `[public|private]` Gist”命令”来更新您的 Gist，或创建一个新的 Gist。 + - ![如何在Obsidian中使用Gist.md](https://cdn.pkmer.cn/images/202408301219451.png!pkmer) +- 打开在线 Gist：要在创建 Gist 后将其打开，请打开命令面板并找到“"Open Gist on GitHub.com”命令。如果您的笔记有多个 Gist，则必须选择要打开的一个。 + +> [!tip] +> 当 Gist Note 将被创建，用于共享的 URL 将被添加到您的剪贴板。上传后会自动在该笔记的 YAML 区添加 Gist 信息： +> ![如何在Obsidian中使用Gist.md](https://cdn.pkmer.cn/images/202408301219091.png!pkmer) + +#### 配置 GitHub 令牌 + +在插件“GitHub.com access token”选项下的配置 GitHub 个人令牌，其他的选项可以保持默认。 + +![如何在Obsidian中使用Gist.md](https://cdn.pkmer.cn/images/202408301219667.png!pkmer) + +### Image to Gist + +> [!note] [singh-inder/obsidian-images-to-Gist](https://github.com/singh-inder/obsidian-images-to-Gist) +> 将图像上传到您的 GitHub 秘密 Gist。此外，还可以动态调整上传图像的大小。 + +#### 功能 + +- 上传到 GitHub Secret Gists：将图像安全地存储在 GitHub 帐户中，确保隐私和控制。 +- 动态图像调整大小：通过向 URL 添加 `w` 和 `h` 查询参数来动态调整上传的图像大小。查看演示或阅读如何调整图像大小指南。 +- 完全控制：由于图像存储在您的 GitHub 秘密 Gist 中，因此您可以随时删除它们。 +- 灵活的上传方法：通过从剪贴板粘贴或从文件系统拖放来轻松上传图像。还可以通过拖放来支持动画 GIF。 + +#### 插件设置 + +![如何在Obsidian中使用Gist.md](https://cdn.pkmer.cn/images/202408301219258.png!pkmer) + +| 设置 | 描述 | 备注 | +| ----------------------------------- | --------------------------------------------------------------------------------- | ----------------- | +| GitHub Token
GitHub 令牌 | GitHub 用于验证 API 请求的个人访问令牌。了解如何生成一个 | 必要的 | +| Image Server URL
图像服务器网址 | 用于解码上传到 GitHub Gist 的图像的服务器 URL。您可以继续使用默认的 Images-to-Gist-server（完全私有且免费）或提供您自己的。 | 可选的 | +| Confirmation Before Upload
上传前确认 | 上传图像前提示确认。 | Default = "false" | + +## 汇总 + +个人综合体验了一下，不建议用 Gist 来当做图床，最好还是新建一个 GitHub 私人仓库来当做 Obsidian 的图床。因为图片在 Gist 中显示的是 Base64 编码，会让你的 Gist 资源库看起来很杂乱，如果想要免费的图床的话，有很多方法，这里就不进行赘述了。 + +| 插件 | Share Code | Embed Code | Upload Image | +| --------------- | ---------- | ---------- | ------------ | +| Obsidian Gister | ✅ | ✅ | ❌ | +| Obsidian Gist | ❌ | ✅ | ❌ | +| Share as Gist | ✅ | ❌ | ❌ | +| Image to Gist | ❌ | ❌ | ✅ | + +Obsidian Gist 是用来嵌入在线 Gist 代码块的，Share as Gist 用来上传笔记到 GitHub Gist。Obsidian Gister 功能是最全面，既可以上传笔记到 Gist，又可以嵌入代码在线代码块，但插件的配置选项显然有点复杂，小白刚开始的话可能摸不着头脑，喜欢折腾的话也可以去试试。 + +> 另外 VS Code 配合 Gist 更是如虎添翼，相关的插件有 Gist Pad，可以随时编辑和添加 Gist。 \ No newline at end of file