Merge pull request #724 from ProudBenzene/ProudBenzene

添加了3篇文档，修复了一篇文档
PKM-er · Apr 8, 2024 · be4cd9d · be4cd9d
2 parents a5f958f + cd90fb5
commit be4cd9d
Show file tree

Hide file tree

Showing 4 changed files with 408 additions and 76 deletions.
diff --git a/10-Obsidian/Obsidian外观/CSS 片段/Admonition样式-彩色跑马灯框.md b/10-Obsidian/Obsidian外观/CSS 片段/Admonition样式-彩色跑马灯框.md
@@ -0,0 +1,125 @@
+---
+uid: 20240330182904
+title: Admonition样式：彩色跑马灯框
+tags:
+  - Admonition
+  - callout
+  - 跑马灯
+description: Callout彩色跑马灯样式
+author: ProudBenzene
+type: advanced
+draft: false
+editable: false
+modified: 20240330184023
+---
+
+# Admonition 样式：彩色跑马灯框
+
+## 需求
+
+为了给「名人名言」增加一个醒目又漂亮的框，我参考了网上跑马灯方框的代码，略作修改使其成为了一个跑马灯 Callout 样式。
+
+本来想做一个简约一点的，但是水平有限没搞出来，下次再试试。
+
+## 效果展示
+
+![](https://cdn.pkmer.cn/images/202403301833273.png!pkmer)
+
+## 配置方法
+
+复制下方代码为 CSS 文件，放入 Obsidian 的配置文件夹中的 snippets 文件夹，再在 Obsidian 外观设置中启用即可：
+
+```css
+/* From www.lingdaima.com, modified from cards to Callout by ProudBenzene */
+.callout[data-callout="dictum"] {
+ --border-radius: 15px;
+ --border-width: 4px;
+ appearance: none;
+ position: relative;
+ padding: 1em 2em;
+ border: 0;
+ background: rgb(5, 5, 22);
+ font-size: 18px;
+ font-weight: 500;
+ color: #fff;
+ z-index: 2;
+ border-radius: 15px;
+}
+
+.callout[data-callout="dictum"]::after {
+ --m-i: linear-gradient(#000, #000);
+ --m-o: content-box, padding-box;
+ content: "";
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ padding: var(--border-width);
+ border-radius: var(--border-radius);
+ background-image: conic-gradient(
+		#488cfb,
+		#29dbbc,
+		#ddf505,
+		#ff9f0e,
+		#e440bb,
+		#655adc,
+		#488cfb
+	);
+ -webkit-mask-image: var(--m-i), var(--m-i);
+ mask-image: var(--m-i), var(--m-i);
+ -webkit-mask-origin: var(--m-o);
+ mask-origin: var(--m-o);
+ -webkit-mask-clip: var(--m-o);
+ mask-composite: exclude;
+ -webkit-mask-composite: destination-out;
+ filter: hue-rotate(0);
+ animation: rotate-hue linear 500ms infinite;
+ animation-play-state: paused;
+}
+
+.callout[data-callout="dictum"]:hover::after {
+ animation-play-state: running;
+}
+
+@keyframes rotate-hue {
+ to {
+  filter: hue-rotate(1turn);
+ }
+}
+
+.callout[data-callout="dictum"],
+.callout[data-callout="dictum"]::after {
+ box-sizing: border-box;
+}
+
+.callout[data-callout="dictum"]:active {
+ --border-width: 5px;
+}
+
+/*******隐藏题头******/
+
+.callout.callout[data-callout="dictum"] .callout-title {
+  background-color: transparent;
+  display: none;  /*使callout的题头行内排布*/
+  visibility: hidden; /*不显示callout的题头*/
+}
+
+.callout.callout[data-callout="dictum"] .callout-title-inner {
+  line-height:0;
+  font-size:0;
+  overflow:hidden;
+}
+
+.callout.callout[data-callout="dictum"] .callout-title img {
+  border-radius: 1em;
+  margin: auto;
+  display: block;
+}
+.callout.callout[data-callout="dictum"] .callout-fold {
+  display: none;
+}
+.callout.callout[data-callout="dictum"] .callout-icon {
+  display: none;
+}
+```
diff --git a/10-Obsidian/Obsidian社区插件/Quickadd/QuickAdd脚本-为图片添加题注.md b/10-Obsidian/Obsidian社区插件/Quickadd/QuickAdd脚本-为图片添加题注.md
@@ -0,0 +1,126 @@
+---
+uid: 19840124160000
+title: QuickAdd脚本：为图片添加题注
+tags:
+  - quickadd
+  - 图片
+  - 题注
+description: 使用QuickAdd脚本为图片添加题注
+author: ProudBenzene
+type: advanced
+draft: false
+editable: false
+modified: 20240330184210
+---
+
+# QuickAdd 脚本：为图片添加题注
+
+## 需求
+
+由于目前我着手的库中有许多笔记经由同一个模板，且其中的图片都需要以固定格式进行题注命名，并通过图片的 metadata 控制图片大小保持一致，因此我撰写了这个脚本。
+
+## 功能
+
+- 将图片的文件名填入到图片题注中，例如 `![](assets/请保持平衡｜Balance,%20Please.assets/心相%20请保持平衡.png)` 在经过脚本转换后变为 `![心相 请保持平衡](assets/请保持平衡｜Balance,%20Please.assets/心相%20请保持平衡.png)`
+- 这是一个可选功能，在执行脚本后为图片添加上固定的 metadata 参数，如 `![心相 请保持平衡|inlL|300](assets/请保持平衡｜Balance,%20Please.assets/心相%20请保持平衡.png)`
+
+> [!warning] 注意
+> 本脚本仅限**非 Wiki 链接**形式的图片使用。
+
+效果展示：
+
+![](https://cdn.pkmer.cn/images/202403301830078.gif!pkmer)
+
+## 脚本
+
+```javascript
+// autoImageCaption.js by @ProudBenzene
+let editor;
+let activeLeaf = this.app.workspace.activeLeaf;
+if (activeLeaf.view.getViewType() === 'markdown') {
+	editor = activeLeaf.view.sourceMode.cmEditor;
+}
+// 现在你可以在这个作用域内使用editor对象了
+const { exec } = require('child_process');
+const path = require("path");
+
+let QuickAdd;
+module.exports = async function autoImageCaptions(params) {
+	QuickAdd = params;
+	new Notice(`题注自动生成完毕`, 5000);
+};
+
+// 获取笔记的基本路径
+const filePath = app.workspace.getActiveFile().path;
+const fileFullPath = app.vault.adapter.getFullPath(filePath)
+
+// 获取选中的文本
+const editors = app.workspace.activeLeaf.view.sourceMode.cmEditor;
+const selection = editors.getSelection();
+console.log(selection);
+// 分情况讨论（选中的是链接本身还是链接中的文件名）
+let selectionEmbed;
+if (selection.includes("[[")) { // 如果选中的是Wiki链接本身
+    selectionEmbed = matchSelectionEmbed(selection);
+} else { // 如果选中的是Wiki链接中的文件名
+    selectionEmbed = selection;
+}
+console.log(selectionEmbed)
+// 分情况讨论（wiki链接或是标准markdown链接）
+if (!selection.includes("(")) {
+    // Wiki: 获取库所有文件列表
+	const regex = /\/([^\/]*?)\./g;
+	let decodedSelection = decodeURIComponent(selectionEmbed);
+	let matches;
+	let wikiName;
+	while ((matches = regex.exec(decodedSelection)) !== null) {
+		wikiName = matches[1];
+	}
+	console.log(wikiName)
+	// 用wikiName替换[]中的内容
+	if (!selection.includes("]]")) {
+		const newSelection = `${selectionEmbed}|${wikiName}`;
+		console.log(newSelection);
+		editor.replaceSelection(newSelection);
+	} else {
+		const newSelection = selectionEmbed.replace(/\]\]/, `|${wikiName}]]`);
+		console.log(newSelection);
+		editor.replaceSelection(newSelection);
+	}
+
+} else {
+    // 通过正则依次获取图片路径、图片名称并将其解码为文本
+    const regex1 = /\((.*?)\)/;
+    const matches1 = regex1.exec(selection);
+    const selectionPath = matches1[1]; //去掉嵌入语法后的图片路径
+    console.log(selectionPath);
+	const regex = /.*\/(.*?)\./;
+	const decodedSelection = decodeURIComponent(selectionPath);
+	const matches2 = regex.exec(decodedSelection);
+	let imageName = '';
+	if (matches2 && matches2[1]) {
+		imageName = matches2[1]/* + "|inlL|300"*/; /*修改此处可以为图片增加固定metadata控制大小*/
+	}
+	console.log(imageName);
+	// 用imageName替换[]中的内容
+	const newSelection = selection.replace(/\[.*?\]/, `[${imageName}]`);
+	editor.replaceSelection(newSelection);
+
+}
+
+// 获取Wiki路径
+function getFilePath(files, link) {
+    let files2 = files.filter(f => path.basename(f.path).endsWith(link.replace(/\[\[/, "").replace(/\|.*]]/, "").replace(/\]\]/, "")));
+    let filePath = files2.map((f) => f.path)[0];
+    console.log(filePath);
+    return filePath;
+}
+
+function matchSelectionEmbed(text) {
+    const regex = /(\[\[.*\]\])/;
+    const matches = text.match(regex);
+    return matches ? matches[1] : "";
+}
+
+
+```