【分享】分享一个自己定义的同步模板!(附图)

分享 MoyF • 查看433

先看效果


再看代码

---
标题: "{{title}}"
url: {{url}}
创建时间: {{createat}}
更新时间: {{createat}}
笔记ID: {{noteid}}
收藏: {{isstar}}
划线数量: {{highlightcount}}
标签: {{trimtags}}
obsidianUIMode: preview
---

# {{title}} 

#Wucai

> [阅读原文]({{ url }})
> [在五彩中查看]({{ wucaiurl }})

{% if pagenote %}
## 页面笔记
{% block pagenote %}
> [!Review]
> {{pagenote | replace("\n", "\n> ") }}
{% endblock %}
{% endif %}

## 划线列表
{% block highlights %}
{% for item in highlights %}
{% set colorSymbol %}◇  {% endset %}
{% set formattedHighlight %}
<font color="{{ item.color }}">{{ colorSymbol }}</font> {{ item.note | trim | replace("\n", "\n> ") }}{% endset %}

{% if item.annonation %}
> [!Annotation]
> {{ formattedHighlight }}
> ^{{ item.refid }}
> 
> {{ '---' }}
> 🦊 {{ item.annonation }}
{% else %}
> [!Highlight] 
> {{ formattedHighlight }}
> ^{{ item.refid }}
{% endif %}
{% endfor %}

{% endblock %}

{% if mdcontent %}
{% block mdcontent %}

---


## 全文剪藏 %% fold %%
{{mdcontent}}
{% endblock %}
{% endif %}

【调整说明】

1. 颜色标记

{% set colorSymbol %}◇ {% endset %} 把这里的菱形替换成你喜欢的字符就可以 (注意不能是 emoji——emoji 没法换颜色!)

2. 笔记前面的图标

🦊 {{ item.annonation }} 把这里的狐狸替换成你喜欢的字符,也可以改成文字,比如:「我的批注」


【高阶技巧】

1. 不同的 Callout 样式

使用 Callout Manager 给 [!Highlight] 和 [!Annotation] 做了单独的颜色和图标,所以看起来是不一样的效果:

2. 自动切换预览模式

因为五彩同步的笔记基本是不可编辑的嘛(反正编辑了也会被覆盖掉)

所以干脆用 Forcenote view mode 插件强行设定成阅读模式了。 元数据里的 obsidianUIMode: preview 就是为此准备的,如果用不到的话可以去除。

另外,你也可以直接在插件的设置页面里给整个五彩文件夹设置成「强制切换阅读模式」。

3. 自动隐藏全文

特定文章会剪藏全文,但是我又嫌全文太占位置……

所以用 Creasers 插件实现了默认隐藏「剪藏原文」标题。

标题后面的 %% fold %% 是为此准备的,你只需要在插件设置里把第一项设成 Alwyas fold creases 就能达成默认隐藏的效果啦。

同样,如果不需要的话可以把模板里的 %% fold %% 给删掉。


2023.10.18 更新

新的模板,支持图片高亮:

---
标题: "{{title}}"
url: {{url}}
创建时间: {{createat}}
更新时间: {{createat}}
笔记ID: {{noteid}}
收藏: {{isstar}}
划线数量: {{highlightcount}}
标签: {{trimtags}}
obsidianUIMode: preview
---

# {{title}} 

#Wucai

> [阅读原文]({{ url }})
> [在五彩中查看]({{ wucaiurl }})

{% if pagenote %}
## 页面笔记
{% block pagenote %}
> [!Review]
> {{pagenote | replace("\n", "\n> ") }}
{% endblock %}
{% endif %}

## 划线列表
{% block highlights %}
{% for item in highlights %}
{% set colorCode %}{{ item.slotid | replace ("1", "yellow") | replace("2", "green")  | replace("3", "red") | replace("4", "purple") | replace("5", "blue") | replace("6", "magenta") }}{% endset %}
{% set formattedHighlight %}{{ item.note | trim | replace("\n", "\n> ") }}{% endset %}

{% if item.annonation %}
> [!Annotation]
> {{ formattedHighlight }}
{% if item.imageUrl %}![图片]({{ item.imageUrl }})
{% endif %}
> ^{{ item.refid }}
> 
> {{ '---' }}
> 🦊 {{ item.annonation }}
{% else %}
> [!{{colorCode}}] Highlight
> {{ formattedHighlight }}
{% if item.imageUrl %}![图片]({{ item.imageUrl }})
{% endif %}
> ^{{ item.refid }}
{% endif %}
{% endfor %}

{% endblock %}

另外把之前的那个「代表颜色的emoji」替换成不同的 Callout 标题了,因为感觉视觉效果更好,颜色很直观:

(需要配合修改 yellow 等 Callout 样式)

共收到22条回复
【分享】分享一个自己定义的同步模板!(附图) 肥肥猫xyz
肥肥猫xyz ⚡⚡ #1 回复
挺好看~ 我们准备做个模板合集,到时候邀请你来分享啊
【分享】分享一个自己定义的同步模板!(附图) MoyF
MoyF ⚡⚡ #2 回复
@肥肥猫xyz 好的呀,需要的话也可以直接把这段添加进去,注明 ID 就好~
【分享】分享一个自己定义的同步模板!(附图) 肥肥猫xyz
肥肥猫xyz ⚡⚡ #3 回复
嗯嗯,到时候我回复你
比如到时候我们做个github,大家都可以push上去
【分享】分享一个自己定义的同步模板!(附图) W28748734
W28748734 #4 回复
大佬,如果是图片高亮,你这个模板在ob里就显示不出来高亮的图片了
【分享】分享一个自己定义的同步模板!(附图) MoyF
MoyF #5 回复
@W28748734 对的对的,之前我没怎么高亮过图片所以模板也忽略了,现在更新了一个版本支持图片高亮啦!

我给添加到主楼去!

不过更新的版本我把高亮颜色的显示也换了,所以如果你想要原来的话,可以只添加图片高亮的那一部份:

```nunjucks

> {{ formattedHighlight }}
`{% if item.imageUrl %}![图片 】({{ item.imageUrl }})`

```

这边回复不能回图片的格式,会自动转换。
你需要把 “】(” 替换回 “](” 哈


(在原来的两个 formattedHighlight 底下都加上这个!还有其他问题的话可以再戳我!)
【分享】分享一个自己定义的同步模板!(附图) Lethe
Lethe #6 回复
@肥肥猫xyz 请问下有模板合集了吗,求指路~
【分享】分享一个自己定义的同步模板!(附图) 肥肥猫xyz
肥肥猫xyz ⚡⚡ #7 回复
@Lethe 目前还没有呢,没来得及处理
可以用 MoyF 的,这个效果看起来还不错
【分享】分享一个自己定义的同步模板!(附图) Lethe
Lethe #8 回复
@肥肥猫xyz 哦哦谢谢!感谢大佬分享(´;ω;`)
【分享】分享一个自己定义的同步模板!(附图) 肥肥猫xyz
肥肥猫xyz #9 回复
@MoyF 请提供一个名字给我吧
还有,您是否有自己的站点呢,可以给个链接
我们在梳理模板合集:Link


@Lethe 模板合集我们准备梳理到这里,目前在编写之中
【分享】分享一个自己定义的同步模板!(附图) 肥肥猫xyz
肥肥猫xyz ⚡⚡ #10 回复
@MoyF 请提供一个名字给我吧
还有,您是否有自己的站点呢,可以给个链接
我们在梳理模板合集:Link


@Lethe 模板合集我们准备梳理到这里,目前在编写之中
【分享】分享一个自己定义的同步模板!(附图) Lethe
Lethe #11 回复
@肥肥猫xyz 好滴 谢谢 去做第一个star了!
【分享】分享一个自己定义的同步模板!(附图) 肥肥猫xyz
肥肥猫xyz #12 回复
@MoyF
@Lethe 第一个版本的模板出来了,感谢你们

Link
Link
【分享】分享一个自己定义的同步模板!(附图) W28748734
W28748734 #13 回复
大佬,用新的可以高亮图片的模板进行图片高亮时

```
> [!{{colorCode}}] Highlight
> {{ formattedHighlight }}
{% if item.imageUrl %}![图片]({{ item.imageUrl }})
{% endif %}
```

能把图片前的链接去掉吗?
比如在ob里显示的是:

```
> [!yellow] Highlight
> ?x-oss-process=image/resize,w_670
![图片](?x-oss-process=image/resize,w_670)
>
```
在![图片]前面的那个链接,看着感觉挺难受的😂

---

比如我尝试了自己修改:
```
> [!{{colorCode}}] Highlight
> {{ formattedHighlight }}
![图片]({% if item.imageUrl %})
{% endif %}
```
然而是不对的😂

求助,感恩的心♥️~~


【分享】分享一个自己定义的同步模板!(附图) 肥肥猫xyz
肥肥猫xyz ⚡⚡ #14 回复
@W28748734 这里有几个梳理后的模板
Link
【分享】分享一个自己定义的同步模板!(附图) 肥肥猫xyz
肥肥猫xyz ⚡⚡ #15 回复
现在论坛里的评论看不到你的代码,我猜测格式应该这样

```code
!\[\]\(这里是图片地址\)
```
【分享】分享一个自己定义的同步模板!(附图) W28748734
W28748734 #16 回复
@肥肥猫xyz
感谢~!
已解决
【分享】分享一个自己定义的同步模板!(附图) MoyF
MoyF #17 回复
@肥肥猫xyz ID 就是 Moy 哈,暂时没有自己的站点~
【分享】分享一个自己定义的同步模板!(附图) 肥肥猫xyz
肥肥猫xyz ⚡⚡ #18 回复
@MoyF 好的,那我之前的写错了,我改一下
【分享】分享一个自己定义的同步模板!(附图) W44294834
W44294834 #19 回复
@肥肥猫xyz
@MoyF
请教下,如果给想法(批注的内容),在Obsidian中设置颜色来区分,请问该怎么设置呢?
希望达到下面的效果:



ob中对应字体颜色是通过html标识设置的,代码块如下



请问能在模板中设置对应html的标识字段吗?或者更方便的,直接指定颜色代码?
【分享】分享一个自己定义的同步模板!(附图) 肥肥猫xyz
肥肥猫xyz #20 回复
@W44294834 这个颜色是固定的,还是根据划线颜色来呢?
【分享】分享一个自己定义的同步模板!(附图) W44294834
W44294834 #21 回复
@肥肥猫xyz
设置成固定颜色,和划线颜色无关吧

正在测试:

{% set anno = "<font color='#ED7001'> - </font>" %}
{{ item | style1({prefix:"- ", suffix:suffix, anno:anno}) }}

但遇到了一些问题。。。

【分享】分享一个自己定义的同步模板!(附图) 肥肥猫xyz
肥肥猫xyz #22 回复
@W44294834 style1 里还不能这样用,有换行问题
这个我们想一下
登录后即可参与回复