Design

设计本博客时, 我认为有一些值得分享的巧思

更轻松的引用

我写文章时喜欢加一些引用, 但是Quartz默认的引用样式非常大, 你可以将鼠标放在「一些引用」和「Quartz」上看到默认样式与轻松引用样式的差异.

轻松引用靠这样一小段 css 生效:

/* 只作用于 id 里包含 "/aside/" 的弹窗 */
.popover[id^="popover-/aside/"] {
  .popover-inner {
    padding: 2px 4px;
    width: auto;
  }
  div.popover-hint {
    display: none;
  }
  p {
    margin: 0;
  }
}
 
/* 隐藏 aside 文件夹 */
li:has(.folder-container[data-folderpath="aside/index"]) {
  display: none;
}

我本来还尝试写了插件和组件代码, 最终发现这就是最简单的方案! 不过, 我期待中的写法可能更接近于某种单独的协议:

[短文本](aside://稍长的注释)

并期待鼠标放上起后会有弹窗, 类似 Quartz 自带那个样式. 但是扩展协议以及修改obsidian展示可能有些困难.

另外, aside/里的东西会参与关系图谱, 我不太喜欢. 在找到方法解决之前, 我会隐藏关系图谱.

英文标点替换为中文展示

为了写代码方便, 我的中文输入法长期使用英文标点, 但是排版时英文标点+空格混在中文里又很不美观, 我希望一个个儿的都一样宽. 于是本博客将会把p:lang(zh)里的英文标点自动替换成中文标点. 核心代码如下:

const elems = ['p', 'h1', 'h2', 'h3', 'li', 'h5', 'h6', 'li'].map(
  p => root.querySelectorAll(p+':lang(zh)')
).reduce((a, b) => [...a, ...b], [])
 
elems.forEach(p => {
  p.childNodes.forEach(node => {
	if (node.nodeType === Node.TEXT_NODE) {
	  const text = node.textContent;
	  const after = text.replace(/,\\s*/g, '，').replace(/[.]\\s*|[.]$/g, '。');
	  // console.log('node.textContent', text, '->', after);
	  node.textContent = after;
	}
  });
});

让原始博客的链接跳转到现在真正的地址

参考 quartz/plugins/emitters/aliases.ts 写了个插件, 对all-posts下的所有博文, 生成一个直接放在根目录的假身, 假身会跳转到当前的路径.