做了一个微信读书插件模板weread plugin template

因为喜欢在微信里面看书做笔记,所以做了一个笔记模板。
Weread插件真是我最高频的东西了。

图片展示


功能介绍

  1. 重新编写了模板,可以按照章节顺序展示高亮和评论。只要章节里有高亮或者评论都会创立章节目录。比如我的第二章没有评论,就只有一个高亮模块(如下图)。不过我不太懂代码的,是AI和我一起创立的(其实找了两个,chatgpt和claude,一个写一个检查)所以难免有什么纰漏,不过现在运行良好。

  2. 重新规划了页面的布局,主要是靠callout自定义css来实现的。代码我会放在后面。同样的,css我也是那种现学现卖,主要是为了好看会去倒腾一下,如果有什么问题请告诉我。

模板的一些效果展示:


当鼠标悬浮在词条上,会有卡片的效果,同时在右下角显示创建日期。

当点击卡片图片时,会跳转大图。这个功能其实没什么用,最好是能跳转书籍链接,但是我在给出的数据结构里没有找到相关元素,希望未来可以有。现在这个图片跳转其实只要更改一下代码,生成一个[[{{Title}}精读]]文件,就直接跳转库内,方便做一个二次笔记什么的。

其他

  1. 话说作者本来支持导出公众号的笔记,后来告知因为差异比较大所以不做了,真的大悲!如果有人和我一样爱这个功能麻烦一起告知作者很重要;
  2. 其实我还想再改改模板,比方说在章节内把高亮和划线按照书的顺序或者时间顺序排一排,而不是分成两类。也许我以后会弄。
5 个赞

这是模板的代码

---
isbn: {{metaData.isbn}}
category: {{metaData.category}}
lastReadDate: {{metaData.lastReadDate}}
---
>[!rnb|noicon] 
># {{metaData.title}}
>` {{metaData.author}}`

>[!nb|noicon]
>

>[!weread1|noicon] 
> {{metaData.intro}}


>[!weread2|noicon] [![cover|100]({{metaData.cover}})]({{metaData.cover}})
> - 作者: {{metaData.author}}
> - 出版时间: {{metaData.publishTime}}
> - ISBN: {{metaData.isbn}}
> - 分类: {{metaData.category}}
> - 出版社: {{metaData.publisher}}
> - 划线数量:{{metaData.noteCount}}
> - 笔记数量: {{metaData.reviewCount}}

>[!nb|noicon]
>

>[!rnb|noicon] 
>## 笔记


>[!nb|noicon]
>

{% set allChapters = [] %}
{% for highlight in chapterHighlights %}
  {% if allChapters.indexOf(highlight.chapterTitle) == -1 %} 
    {% set allChapters = allChapters.concat(highlight.chapterTitle) %}  
  {% endif %}
{% endfor %}
{% for chapterReview in bookReview.chapterReviews %}
  {% if allChapters.indexOf(chapterReview.chapterTitle) == -1 %}
    {% set allChapters = allChapters.concat(chapterReview.chapterTitle) %}
  {% endif %} 
{% endfor %}
{% for chapterTitle in allChapters %}
### {{ chapterTitle }}

{% for highlightItem in chapterHighlights %}
{% if highlightItem.chapterTitle == chapterTitle  %}
###### 高亮
{% for highlight in highlightItem.highlights %}
>[!weread4] {{ highlight.markText | trim }}
 >- {{highlight.createTime}}
 >{{ '---' }}
{% endfor %}
{% endif %}
{% endfor %}

{% for chapterReview in bookReview.chapterReviews %}
{% if chapterReview.chapterTitle == chapterTitle %}
###### 评论
{% for review in chapterReview.reviews %}
 >[!weread3] {{ review.abstract | trim }} 
 > - {{ review.content }}
 > - {{review.createTime}}
 >{{ '---' }}
{% endfor %}
{% endif %}
{% endfor %}
{% endfor %}

这是CSS代码片段,保存可以直接用

/*---callout=rnb---*//*---callout=rnb---*//*---callout=rnb---*/

/*---这个是一个无背景的靠右的悬浮框---*/
.callout[data-callout="rnb"] {
	--callout-color:transparent;
	background-color:transparent;
	width:35%;
	float:right;/*靠右悬浮*/
	border:none;
	text-align: right;
}

/*---隐藏标题栏---*/
.callout[data-callout="rnb"] .callout-title-inner {
	display: none;
}


/*---callout=weread1---*/
/*---这里用来展示书的简介abstract---*/
.callout[data-callout="weread1"] {
	--callout-color:transparent;
	background-color:transparent;
	font-size:0.95em;
	border:none;
                text-align:left;
                padding:30px;
  
               
}


.callout[data-callout="weread1"] .callout-title-inner {
	 display: none;
}

/*---首字下沉---*/
.callout[data-callout="weread1"] .callout-content  p::first-letter{
        
	 float: left;
	font-size: 3em;
	font-weight: bold;
	line-height: 1;
	margin: -0.07em 0.1em -0.1em 0;
}


/*---callout=weread2,bookcard---*//*---callout=weread2,bookcard---*//*---callout=weread2,bookcard---*/
/*---这里用来展示书的卡片---*/
.callout[data-callout="weread2"] {
	--callout-color:  245,207,194;
	display:inline-flex;
	align-items: center;
	font-size:0.9em;
	 width:90%;
	align-content:center;
	position:relative;
	left:6%;
	color:rgb(142,145,106);
   
}


/*---callout=weread3,notes---*//*---callout=weread3,notes---*//*---callout=weread3,notes---*/
/*---设定划线评论样式---*/
.callout[data-callout="weread3"] {
	--callout-color: 238,231,187;
	--callout-icon: quote;
	border:none;
	transition: box-shadow 0.3s ease-in-out;
}

/*---设定标题的样式---*/
.callout[data-callout="weread3"] .callout-title-inner {
	margin-left: 1em;
	font-size:0.9em;
	font-weight:500;
	font-family:"猫啃网糖圆体";
/*这是我自带的字体,可以任意换成喜爱的样式*/
}

/*---设定划线笔记的样式---*/
.callout[data-callout="weread3"] .callout-content  {
	
	font-family:"ChiuKong Gothic CL";/*这是我自带的字体,可以任意换成喜爱的样式*/
	font-weight: 300;
	color:rgb(70,66,52);
	font-size:1.01em;
	padding:5px;
	

}


 /*---设定下划线的样式---*/ 
.callout[data-callout="weread3"] .callout-content hr {
	border: 0;
	height: 0;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

 /*---设定悬浮框样式---*/ 
.callout[data-callout="weread3"]:hover {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	

}

 /*---设定日期预览不显示---*/ 
.callout[data-callout="weread3"] .callout-content ul li:nth-child(2) {
 	display: none;
}

 /*---设定日期悬浮显示---*/ 
.callout[data-callout="weread3"]:hover  .callout-content ul li:nth-child(2){
 	display:inline-flex;
                float:right;
	background-color:rgb(15,26,121);
	color:rgb(220,227,208);
	font-size:0.7em;
}


/*---callout=weread4,notes---*//*---callout=weread4,notes---*//*---callout=weread4,notes---*/
/*---设定整天callout的样式---*/
.callout[data-callout="weread4"] {
	--callout-color: 225,217,228;
	--callout-icon: pencil;
	border:none;
	transition: box-shadow 0.3s ease-in-out;

}

/*---设定标题的样式---*/
.callout[data-callout="weread4"] .callout-title-inner {
	margin-left: 1em;
	font-size:0.9em;
	font-weight:500;
	font-family:"猫啃网糖圆体";
/*这是我自带的字体,可以任意换成喜爱的样式*/
	
}

 /*---设定下划线的样式---*/ 
.callout[data-callout="weread4"] .callout-content hr {
 
	border: 0;
	height: 0;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);

}

.callout[data-callout="weread4"]:hover {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	
}


.callout[data-callout="weread4"] .callout-content ul li:first-child {
 	display: none;
}
	

.callout[data-callout="weread4"]:hover .callout-content ul li:first-child {
 	display:inline-flex;
                float:right;
	background-color:rgb(15,26,121);
	color:rgb(220,227,208);
	font-size:0.7em;

}

/*---callout=nb---*//*---callout=nb---*//*---callout=nb---*/
/*---这个是一个无背景无边框的全行悬浮框---*/
/*---我拿来换行的,你也可以用别的办法---*/


.callout[data-callout="nb"] {
	--callout-color:transparent;
	background-color:transparent;
	border:none;
	width:100%;
   
}

.callout[data-callout="nb"] .callout-title-inner {
	 display: none;
}


/*---callout=metadata---*//*---callout=metadata---*//*---callout=metadata---*/
/*---这是一个去icon写法,在写callout类型时加|noicon就可以,对任何callout包括默认的都适用---*/
/*---有别的写法---*/
.callout:is([data-callout-metadata^="noicon"]) .callout-icon {
	display: none;
}
3 个赞

支持哦
很好的东西。

我试试,大力支持好插件模版

太强了,请问楼主会实现这个功能吗 使用Dataview进行书籍管理 · zhaohongxuan/obsidian-weread-plugin Wiki (github.com),我达不到demo的效果,哭了

你用minimal主题吗?
这个dataview的查询功能是结合minimal主题自带的表格转卡片的css实现的效果,如果你不是这个主图,需要额外的css片段才有卡片效果

可使用下帖里的 CSS。

我比较关注《怪得和我一样的怪人》那张封面图片是怎么居左的,看代码用代码也没弄明白。

在这里,我自定义了一个callout叫weread2,display:inline-flex表示是行内元素,效果就是callout的标题和内容会出现在一行,所以达到了图片的效果。

求教。字体颜色特别浅是怎么回事

应该是你用的主题的问题,因为高亮部分的文字我没有改颜色,所以会显示我在ob中使用的主题的颜色。
你可以在css里找到.callout[data-callout="weread4"] .callout-title-inner 这一块,然后替换一下
(就是加了改字体颜色的 color:rgb(67,74,112);

/*---设定标题的样式---*/
.callout[data-callout="weread4"] .callout-title-inner {
	padding:15px;
	font-size:0.9em;
	font-weight:500;
	font-family:"猫啃网糖圆体";
    color:rgb(67,74,112)!important;

/*这是我自带的字体,可以任意换成喜爱的样式*/
	
}
1 个赞


大佬,你好。我这边有两个问题,希望大佬能够帮忙瞧瞧。第一是高亮两个字有办法给处理掉吗。我看似乎在模板里面,但是我把模板里面的(高亮)二字删掉不太顶用。第二是时间这个底纹似乎歪掉里。我不太能够找到修改的地方。提前谢谢大佬了