分享一个weread plugin的模版和被我当可视化目录用的伪卡片css

(其实跟原来的并没有本质上的改变)
(目前我的笔记只有高亮划线,其他的没改,就不放上来了)

长这样:

> [!note] {{metaData.title}}
> ![ {{metaData.title}}|200]({{metaData.cover}})
> > [!note] 作者: {{metaData.author}}
>
> > [!summary]- 简介 
> {{metaData.intro}}
>
> >[!info]- 元数据
> 出版时间 {{metaData.publishTime}}
> ISBN: {{metaData.isbn}}
> 分类: {{metaData.category}}
> 出版社: {{metaData.publisher}}

---

# 高亮划线

{% for chapter in chapterHighlights %}
## {{chapter.chapterTitle}}
{% for highlight in chapter.highlights %}
{% if highlight.reviewContent %}{% else %}

> [!cite]   <small>{{highlight.createTime}}</small>%%{{highlight.bookmarkId}}%%
{{ highlight.markText |trim }} 

{% endif %} {% endfor %}{% endfor %}

然后我就想着做一个目录,好看一点的
这一篇给了我灵感和代码,谢谢nfc大佬(震声)

但是这个和我的主题兼容不太好,所以我折腾了一下,删了一点内容
长这样:


(我目前的书比较少)
效果我还是比较满意的,想着就把css放上来分享一下
首先声明:

  • 我完全不会css
  • 下面的所有片段都是以上那个帖子里面扒的
  • 我完全不知道我删了什么东西
  • 我甚至不知道我扒下来了什么东西

cssClasses: cards cards-align-bottom,cards-cols-3

/*边框?*/
:root {
  --cards-max-width:1fr;
  --cards-mobile-width:120px;
  --cards-image-height:400px;
  --cards-background:transparent;
  --cards-border-width:1px; }

/*间隔大小*/
.cards table.dataview tbody {
  padding: 0.5rem 0.5rem;
  display: grid;
  grid-column-gap: 0.75rem;
  grid-row-gap: 0.75rem; }

/*标题文字加粗*/
.cards table.dataview tbody > tr > td:first-child {
  font-weight: var(--bold-weight); }

/*非标题文字*/
.cards table.dataview tbody > tr > td:not(:first-child) {
  font-size: 90%;
  color: var(--text-muted); }

/*置底?*/
.cards-align-bottom.cards table.dataview tbody > tr > td:last-child {
  align-items: flex-end;
  flex-grow: 1; }

/*分3栏*/
@media (min-width: 100pt) {
  .cards-cols-3 table.dataview tbody {
    grid-template-columns: repeat(3, minmax(0, 1fr)); }

/*链接下划线去除*/
.cards table.dataview tbody > tr > td a {
  text-decoration: none; }

/*去表头*/
.cards table.dataview thead > tr {
  display: none; }

/*阴影动画*/
.cards table.dataview > tbody > tr:hover {
  border: var(--cards-border-width) solid var(--background-modifier-border-hover);
  box-shadow: 0 4px 6px 0px rgba(0, 0, 0, 0.05), 0 1px 3px 1px rgba(0, 0, 0, 0.025);
  transition: box-shadow 0.15s linear; }

/*置底?*/
.markdown-source-view.mod-cm6.cards .dataview.table-view-table > tbody > tr > td,
.cards table.dataview tbody > tr > td {
  display: flex; }

/*边线和圆角*/
.cards table.dataview > tbody > tr {
  border: var(--cards-border-width) solid var(--background-modifier-border);
  display: flex;
  flex-direction: column;
  margin: 0;
  border-radius: 10px;

(其实在插件模版里的封面前面加上封面::,再在dataview里面引用到可以更像书架。但是我自己没这个需求:D)
希望对大家有用~

效果很好啊,我去试试。

大佬 怎么添加封面啊? 如果在dataview里直接添加cover只会显示链接啊 怎么预览显示图片啊

我还不怎么会用dataview :upside_down_face:
之前的想法是这样:




(我这是手动引用,只显示一两张。在模板里加字就可以一次性显示所有封面了。)
但是图片大小可能还需要随卡片大小调整,这我就不会了哈哈哈哈

之前用楼主改的代码同步了一些书,最近去引用微信读书笔记里的段落时发现了一个问题,就是
引用后,微信读书笔记那边的段落会新增一串唯一id,这样下次再同步笔记的时候这串id不就没了嘛?后来我用默认代码同步笔记后对比,默认同步好的笔记,是自带这串唯一id的,被引用的时候也直接会引用这串id。我不懂代码,是否是下列的对比中,这一行的不同产生的问题呢:

[!cite] {{highlight.createTime}}%%{{highlight.bookmarkId}}%%
{{ highlight.markText |trim }}

原版:

# 高亮划线
{% for chapter in chapterHighlights %}
## {{chapter.chapterTitle}}
{% for highlight in chapter.highlights %}
{% if highlight.reviewContent %}{% else %}
- 📌 {{ highlight.markText |trim }} ^{{highlight.bookmarkId}}
    - ⏱ {{highlight.createTime}}{% endif %} {% endfor %}{% endfor %}

此贴版:

# 高亮划线
{% for chapter in chapterHighlights %}
## {{chapter.chapterTitle}}
{% for highlight in chapter.highlights %}
{% if highlight.reviewContent %}{% else %}

> [!cite]   <small>{{highlight.createTime}}</small>%%{{highlight.bookmarkId}}%%
{{ highlight.markText |trim }} 

{% endif %} {% endfor %}{% endfor %}

你说的是不是{{highlight.bookmarkId}},就是引用过来的一串数字,中间有几个横杠。
如果是这个的话,因为我不太清楚它可以充当什么作用,所以用md注释语法在阅读视图上隐藏了。你看看在编辑模式下选中那个段落,id有没有出现。

这个我刚刚折腾处理出来了,具体可以看dataview的文档里的说明
需要用embed把链接转化成插入

在dv里

embed(link(cover)) as cover

在笔记的FM里,正常插入图片链接就行了

cover: [[Pasted image 20221015190826.png]]

对,是这行,我看插件作者默认的代码,这行是给每一条划线一个block引用唯一id,如^41984720-4-811-958
不过按照你改的这行,编辑模式里这个id不是如上的格式(我已经按照默认重新同步了,你可以看下你的),如果被引用,会新增如^u35b68这样的唯一id,这样就有两种唯一id了。

试了几次,好像解决问题了,就是把%%换成^,

# 高亮划线
{% for chapter in chapterHighlights %}
## {{chapter.chapterTitle}}
{% for highlight in chapter.highlights %}
{% if highlight.reviewContent %}{% else %}
> [!cite]   <small>{{highlight.createTime}}</small> 
{{ highlight.markText |trim }} 
^{{highlight.bookmarkId}}
{% endif %} {% endfor %}{% endfor %}

现在同步后就是生成好的block ID了,如图:

1 个赞

LZ用的什么主题,看着很不错

primary。不过现在好像还没适配最新版。