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

Nesbit · 2023 年11 月 24 日 13:05

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

图片展示

功能介绍

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

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

模板的一些效果展示：

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

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

其他

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

Nesbit · 2023 年11 月 24 日 13:09

这是模板的代码

---
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;
}

潜伏神经元 · 2023 年11 月 24 日 15:02

支持哦
很好的东西。

vvzeng · 2023 年11 月 26 日 05:36

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

chenchufeng · 2024 年1 月 2 日 03:37

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

Nesbit · 2024 年1 月 2 日 10:36

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

PlayerMiller · 2024 年1 月 2 日 10:38

可使用下帖里的 CSS。

ch0c0late · 2024 年4 月 19 日 08:25

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

Nesbit · 2024 年4 月 26 日 10:39

Nesbit:

.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叫weread2，display:inline-flex表示是行内元素，效果就是callout的标题和内容会出现在一行，所以达到了图片的效果。

zyh15con · 2024 年5 月 5 日 15:43

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