Merge pull request #830 from Moyf/moy-new-articles

Moy new articles
PKM-er · Aug 6, 2024 · 1e42543 · 1e42543
2 parents b0c8c2b + 084e8b0
commit 1e42543
Show file tree

Hide file tree

Showing 4 changed files with 368 additions and 3 deletions.
diff --git a/10-Obsidian/Obsidian使用技巧/Moy/一键搞定快速操作笔记的元数据并统计最近完成事项.md b/10-Obsidian/Obsidian使用技巧/Moy/一键搞定快速操作笔记的元数据并统计最近完成事项.md
@@ -0,0 +1,130 @@
+---
+uid: 20240730214933
+title: 一键搞定快速操作笔记的元数据并统计最近完成事项
+tags: [Obsidian, OB分享]
+description: 如何在 Obsidian 里一键给笔记添加完成状态和完成时间的数据，并且统计出最近一段时间完成的所有笔记！
+author: Moy
+type: other
+draft: false
+editable: false
+modified: 20240806215523
+aliases: []
+---
+
+# 一键搞定快速操作笔记的元数据并统计最近完成事项
+
+读过 PARA 笔记法的朋友们可能会在自己的笔记中记录 Project（工程），当完成一项工程的时候，就会有满满的收获！
+
+但在刚才又一次「完成」了一条笔记的时候，我突发奇想——
+
+怎么让自己的点滴涓流汇聚成河呢？
+
+元数据。
+
+在笔记属性中添加 `done` 属性，代表这是一个 **完成了的项目**；
+
+再添加一个 `finished_date`，记录 **完成时间**。
+
+这样一来，可以借助 Dataview 非常方便地统计和回顾——自己这段时间完成了多少项目。
+
+## 添加元数据
+
+添加属性最简单但是麻烦的方式，就是手动点击「添加文档属性」，然后加上 `复选框` 类型的 done 属性，以及 `日期` 类型的 finished_date 属性。
+
+![](https://cdn.pkmer.cn/images/202408062154273.png!pkmer)
+
+然后在做完项目的时候，手动打勾并填写日期。
+
+这样太麻烦了……我们 OB 用户不能忍受这种麻烦的。
+
+![不中](https://cdn.pkmer.cn/images/202408062154580.png!pkmer)
+
+所以我用 Templater 插件写了个脚本，可以 **一键添加完成状态**。
+
+脚本如下：
+
+```js
+<%*
+/*
+- Author: Moy
+- Create Time: 2024-07-30
+- Description: 这是一个用来修改当前文件的元数据的范例脚本
+- Version: 1.0
+*/
+
+// 配置项
+
+// 两个元数据的属性名，一个是 bool 类型（打勾），另一个是日期类型
+const propDone = "done";
+const propFinishedDay  = "finished_date";
+// 这里填写日记的格式
+const dateFormat = "YYYY-MM-DD";
+
+const todayDate = moment().format(dateFormat);
+
+// 第一种获得笔记的方法，按照路径匹配，应该会更准确一些
+const notePath = tp.file.path(true);  // 这里要使用相对路径，否则下面的函数读取不到的
+const fileObj = app.vault.getAbstractFileByPath(notePath);
+
+// 第二种方法，用笔记名匹配
+const noteName = tp.file.title;
+// const fileObj = tp.file.find_tfile(noteName);
+
+function updateFM( fm ) {
+	fm[propDone] = true;
+	fm[propFinishedDay] = todayDate;
+	new Notice(`你在 ${todayDate} 完成了：\n${noteName}\n恭喜！ 🎉`);
+}
+
+if (fileObj) {
+    app.fileManager.processFrontMatter(fileObj, (fm) => {
+        if (fm[propDone]) {
+            tp.system.prompt("已存在 Done 属性，是否刷新完成日期？", "是")
+                .then((confirm) => {
+                    if (confirm == "是") {
+                        updateFM(fm);
+                    } else {
+	                    new Notice("取消更新完成时间");
+                    }
+                });
+        } else {
+            updateFM(fm);
+        }
+    });
+}
+%>
+```
+
+后续如果有更新会放在：[TP Script: Add done and finished date into Frontmatter (Property)](https://gist.github.com/Moyf/b14c3374b49ce53e1be7ca939ced611e)
+
+这个脚本就是个模板，按照 TP 通常模板的方式调用即可。
+
+效果演示：
+
+![](https://cdn.pkmer.cn/images/202408062154672.gif!pkmer)
+
+## 统计
+
+使用 Dataview 不但能列出所有「完成了的笔记」，还能计算出这个项目从创建到完成一共精力了多少天，并按照时间先后进行排序。
+
+效果：
+
+![](https://cdn.pkmer.cn/images/202408062154978.jpg!pkmer)
+
+使用的 Dataview 代码：
+
+```
+TABLE
+dateformat(date(file.frontmatter["create_date"]), "yyyy-MM-dd") AS 创建时间,
+file.frontmatter["finished_date"] AS 完成时间,
+choice(file.frontmatter["finished_date"], round((date(file.frontmatter["finished_date"]) - striptime(date(file.frontmatter["create_date"]))).days) + " 天", "无数据") AS 历经
+
+FROM ""
+WHERE done AND finished_date
+
+SORT file.frontmatter["finished_date"] DESC
+```
+
+- 这里的 `create_date` 改成你自己的「创建时间」属性名，如果没有的话，可以把 `date(file.frontmatter["create_date"])` 替换成 `cday`，这会使用文本本身的创建日期
+- 同样的，`done` 和 ` finished_date ` 换成你自己的「完成状态」、「完成时间」属性名
+
diff --git a/10-Obsidian/Obsidian使用技巧/Moy/右对齐作者的引用样式.md b/10-Obsidian/Obsidian使用技巧/Moy/右对齐作者的引用样式.md
@@ -0,0 +1,51 @@
+---
+uid: 20240731185020
+title: 右对齐作者的引用样式
+tags: [Obsidian, OB分享, css]
+description: 在引用的最下面自适应地居右文本，并添加破折号。
+author: Moy
+type: other
+draft: false
+editable: false
+modified: 20240806215350
+---
+
+# 右对齐作者的引用样式
+
+效果预览：
+
+![](https://cdn.pkmer.cn/images/202408062153244.jpg!pkmer)
+
+应用规则：
+
+1. 任何 Callout 样式都支持，只要在原类型边上加上 `|cite` 就可以 （例如原本是 `[!note]` 就写成 `[!note|cite]`）
+2. 代表作者的行和前面的内容中间要分开一个空行，这样才能区分出来
+
+书写示例：
+
+```markdown
+> [!quote|cite] 正所谓
+> 一句名人名言
+> 
+> 谁说的
+
+```
+
+使用的 css 样式：
+
+```css
+
+/* 引用（最后一行）靠右 */
+.callout[data-callout-metadata*="cite"]>.callout-content>p:last-of-type {
+    margin-right: 30px;
+    text-align: right;
+}
+
+/* 并添加引用符号前缀 */
+.callout[data-callout-metadata*="cite"]>.callout-content>p:last-of-type::before {
+    content: "― ";
+}
+
+```
+
+放进 Css Snippets 并应用即可。
diff --git a/10-Obsidian/Obsidian使用技巧/Moy/改善笔记内的链接编辑体验.md b/10-Obsidian/Obsidian使用技巧/Moy/改善笔记内的链接编辑体验.md
@@ -0,0 +1,181 @@
+---
+uid: 20240720000757
+title: 改善 Markdown 笔记的链接编辑体验
+tags: [Obsidian, OB分享]
+description: 通过 css 来大幅改善链接文本的编辑体验，尤其是在文章内有较多 link 的时候，体验提升很明显！
+author: Moy
+type: other
+draft: false
+editable: false
+modified: 20240806215715
+aliases: []
+create_date: 2024-07-20T00:07
+modified_date: 2024-08-01T00:21
+view_count: 5
+---
+
+# 改善 Markdown 笔记的链接编辑体验
+
+## 缩短过长的链接文本
+
+在 Obsidian 里，你是否被链接文本困扰过？
+
+举个栗子，有时候链接文本会非常非常长：
+
+![](https://cdn.pkmer.cn/images/202408062156175.jpg!pkmer)
+
+实时编辑模式下，一旦编辑光标移上去，它就会展开成一大串，非常影响编辑。
+
+如果链接的内容长到跨行了，还会导致你得多按几次「下」方向键才能跳到原本的下一行文本内容。
+
+像是这样糟糕的体验：
+
+![](https://cdn.pkmer.cn/images/202408062156541.gif!pkmer)
+
+然而事实上，一旦插入一个链接之后，**我几乎很少需要再次编辑它的链接地址**。
+
+那么有没有办法避免这种干扰的「展开链接」呢？
+
+有的，我在 OB 论坛上找到了这样一个帖子：
+
+[How to hide url link in edit mode until hovered on?](https://forum.obsidian.md/t/how-to-hide-url-link-in-edit-mode-until-hovered-on/82827)
+
+这里提供了一段 css，可以自动隐藏链接文本，转而显示成一个 🔗 小图标。
+
+只有当鼠标移上去的时候，才显示原来的链接：
+
+![](https://cdn.pkmer.cn/images/202408062156204.gif!pkmer)
+
+加上这个 css 之后，体验一下子就舒服多了！
+
+只有在你确实想要看到链接的时候——把鼠标移动上去——它才会显示出来，否则链接再长都只会占据一个 emoji 符号的位置，最大限度的减少链接文本展开缩短带来的干扰！
+
+### 笔记链接
+
+一不做二不休，我干脆给 Wikilink 的笔记也添加了这个特性！
+
+![](https://cdn.pkmer.cn/images/202408062156979.jpg!pkmer)
+
+这样不但看起来清爽了许多，对于带有多个链接的文本编辑也更加友好。
+
+## 临时禁用链接跳转
+
+有时候我们会需要编辑链接的显示文本，但默认点击链接会直接打开，怎么办呢？
+
+以前我都是先把光标移动到最边上的字符，聚焦到链接，再进行编辑。
+
+但这样就很麻烦，都得小心翼翼的。
+
+直到某次看到了 [链接美化](https://forum-zh.obsidian.md/t/topic/11277/3) 这个帖子，里面有一个对链接的处理很有意思！它可以通过 css 来 **禁用链接的跳转**！
+
+于是我也学了过来，在启用这个 css 的情况下，所有链接的跳转功能都会失效，可以随意进行编辑。
+
+效果演示：
+
+![](https://cdn.pkmer.cn/images/202408062156731.gif!pkmer)
+
+在借由 css 实现的「编辑链接」模式下，可以无所顾忌地直接点击链接进行想要的编辑。
+
+完成之后，再关闭这个 css 即可。
+
+## css 文件
+
+```css
+/* Moy Link Optimize.css */
+
+/* 点击链接的时候不跳转 */
+/* Style Settings 开关 */
+/* @settings
+
+name: Moy Link Mods
+id: moy-link-mods
+settings:
+    - 
+        id: link-editing-mode
+        title: Link Editing Mode
+        title.zh: 链接编辑模式
+        description: Cancel the link left mouse button click event
+        description.zh: 是否取消链接的左键点击功能
+        type: class-toggle
+        default: true
+        addCommand: true
+    - 
+        id: link-shorten
+        title: Link Shorten
+        title.zh: 缩短链接
+        description: Shorten the link, unless mouse hover
+        description.zh: 将链接缩短为 emoji，鼠标经过才完整显示
+        type: class-toggle
+        default: true
+        addCommand: true
+
+*/
+
+
+.link-editing-mode .cm-link .cm-underline,
+.link-editing-mode .cm-hmd-internal-link .cm-underline {
+  pointer-events: none;
+}
+
+
+/* 隐藏过长的链接网址部分 */
+/* Src: https://forum.obsidian.md/t/how-to-hide-url-link-in-edit-mode-until-hovered-on/82827 */
+/* Hide the URL text and show the symbol */
+.link-shorten div.cm-line .cm-string.cm-url:not(.cm-formatting) {
+    font-size: 0;
+}
+
+/* Display a symbol after the URL */
+.link-shorten div.cm-line .cm-string.cm-url:not(.cm-formatting)::after {
+    content: '🔗'; /* Replace with your desired symbol */
+    font-size: 1rem; /* Adjust font size as needed */
+    color: inherit; /* Inherit color from the parent element */
+}
+
+/* Ensure the URL text is visible when the cursor is over it */
+.link-shorten div.cm-line .cm-string.cm-url:not(.cm-formatting):hover {
+    font-size: inherit;
+}
+
+/* Hide the symbol when the cursor is over the URL */
+.link-shorten div.cm-line .cm-string.cm-url:not(.cm-formatting):hover::after {
+    content: '';
+}
+
+
+/* 修改 wikilink 格式的 */
+/* Modified by Moy */
+.link-shorten .cm-hmd-internal-link.cm-link-has-alias {
+    font-size: 0;
+}
+
+.link-shorten .cm-hmd-internal-link.cm-link-has-alias:hover {
+    font-size: inherit;
+}
+
+.link-shorten .cm-hmd-internal-link.cm-link-has-alias:not(.cm-formatting)::after {
+    content: '📜'; /* Replace with your desired symbol 📄 */
+    font-size: 1rem; /* Adjust font size as needed */
+    color: inherit; /* Inherit color from the parent element */
+}
+
+```
+
+也可以直接前往这里下载：[Obsidian CSS: Optimize the link editing experience](https://gist.github.com/Moyf/66f62a6f4b5da5b69195d371f79ff6d4)
+
+（如果有更新也会放在 Gist 里）
+
+## 快速切换功能开关
+
+如果你安装了 Style Settings 插件，可以在设置界面里快速切换这两个功能的开关：
+
+![](https://cdn.pkmer.cn/images/202408062156754.jpg!pkmer)
+
+- 链接编辑模式：禁用链接的跳转功能
+- 缩短链接：将链接显示为图标
+
+你也可以直接使用 Command 来执行这两个功能的切换：
+
+![](https://cdn.pkmer.cn/images/202408062156168.jpg!pkmer)
+
+以上！