基于WeRead插件的ReadingCard模板

[ZiGmaX809]

基于WeRead插件的ReadingCard完工了，相比于Wiki里面的样式更加美观。
并且可以：

1. 以卡片的形式展示正在阅读或者已经阅读书籍；
2. 可自动遍历所有笔记，并以年、月分类展示当月所读的书籍；
3. 自定义色彩管理，可自行变更主题。

教程地址：obsidian-readingcard-template

[irisfish531]

书比较多，遍历会导致速度太慢，该如何增加范围啊，比如仅显示阅读进度在某个区间的书籍？

[ZiGmaX809]

仅显示某阅读进度的区间也是要遍历全部笔记文档里面的阅读进度才会显示，所以增加范围并不会让遍历速度加快。

[irisfish531]

非常感谢回复！原来如此。那是否可以在代码中控制比如只显示哪一年的啊？比如只想显示2024年的这样。谢谢！

[irisfish531]

以及如何可以让时间最近的显示在最前面呀？时间逆序显示。

[ZiGmaX809]

回复在下面了

[ZiGmaX809]

在
//获取每个笔记信息
的for循环中添加最后读取时间

eachfile['lastreaddate'] = bookInfo.lastReadDate

然后修改最终输出格式

//按年份输出阅读卡片
for (let y in read_years_months) {
	if( y == '2024'){
		dv.paragraph('## ' + y + '年');
		for (let m of read_years_months[y].sort()) {
			dv.paragraph('### ' + parseInt(m).toString() + '月');
			dv.table(
				['封面', '信息'],
				weReadFiles
					.sort(b => b.lastreaddate,'desc')  // [,'desc']表示逆序，需要顺序去除即可
					.map(b => {
						console.log(b)
						if (b && b.year && y === b.year && b.month && m === b.month) {
							return [b.cover, b.info];
						}
						return null; // 如果不匹配，返回 null
					})
					.filter(item => item !== null) // 过滤掉不匹配的项
			);
		}
	}
}

[irisfish531]

非常感谢！显示效果是，先是非2024年的以列表的形式罗列出来（不显示年/月标题），最后2024年是以卡片表格的形式（和之前正常的一样）进行列示。看起来似乎过滤没能起作用。

[irisfish531]

const Path = '10WereadSync/个人成长'; //读书笔记文件夹路径

//色彩管理
const color_manager = {
	yellow: 'var(--color-yellow-rgb)',
	green: 'var(--color-green-rgb)',
	red: 'var(--color-red-rgb)',
	blue: 'var(--color-blue-rgb)',
	cyan: 'var(--color-cyan-rgb)',
	purple: 'var(--color-purple-rgb)',
	orange: 'var(--color-orange-rgb)',
	pink: 'var(--color-pink-rgb)',
	pomelo: '255,111,94', //红西柚
	pulp: '235, 89, 94', //红橙
	daffodil: '224,159,71', //黄水仙
	turquoise: '70,164,115', //翡翠
	seasky: '125,201,231', //海洋天蓝
	plum: '141,191,139', //青梅
	swanlake: '60, 167, 171', //天鹅湖蓝
	pelorous: '59,176,186', //冷青
	honor: '229,140,197', //荣耀
	love: '241,138,161', //火烈鸟
};

// 遍历Path文件夹下所有读书笔记
const weReadFiles = dv
	.pages()
	.file.where(b => b.path.indexOf(Path) != -1)
	.where(b => b.path.endsWith(b.name + '.md'));
//按年、月划分阅读记录
let read_years_months = {};
// 主题颜色配置
const theme = [
	//常规配色
	[color_manager.yellow, color_manager.green, color_manager.blue],
	//莫兰迪配色
	[color_manager.pomelo, color_manager.daffodil, color_manager.seasky],
];
//阅读进度颜色
const progress_color = [
	//常规配色
	[
		color_manager.green,
		color_manager.yellow,
		color_manager.orange,
		color_manager.red,
		color_manager.pink, //已读完状态颜色
	],
	//莫兰迪配色
	[
		color_manager.plum,
		color_manager.daffodil,
		color_manager.turquoise,
		color_manager.love,
		color_manager.pulp, //已读完状态颜色
	],
];
const selected = 1; //切换主题颜色：0-常规 1-莫兰迪

//获取每个笔记信息
for (let eachfile of weReadFiles) {
	//获取作者、简介、阅读日期等
	const bookInfo = eachfile.frontmatter;
	let name = eachfile.link;
	let author =
		bookInfo.author != null
			? '\r`[!!|book-user|book-user:作者：' + bookInfo.author + '|' + theme[selected][0] + ']`'
			: '\r`[!!|book-user|book-user:作者：-|]`';
	//let intro = bookInfo.intro != null ? '\r简介：' + bookInfo.intro.substring(0,50) + '……' : '\r简介：-'
	let readdate =
		'\r`[!!|calendar-range|calendar-range:阅读日期：' +
		bookInfo.lastReadDate +
		'|' +
		theme[selected][1] +
		']`';
	let readtime =
		'\r`[!!|timer|timer:阅读时长：' + bookInfo.readingTime + '|' + theme[selected][2] + ']`';

	const covertInfo = name + author + readdate + readtime;

	//获取封面
	eachfile['cover'] = dv.paragraph('![](' + bookInfo.cover + ')');

	//2024-05-07：按ZIGMAX809指点在“//获取每个笔记信息”的for循环中添加最后读取时间
	eachfile['lastreaddate'] = bookInfo.lastReadDate

	//获取阅读年份&月份
	const regex = /(\d{4})-(\d{1,2})-(\d{1,2})/g;
	let lastReadDate = regex.exec(bookInfo.lastReadDate);
	if (lastReadDate !== null) {
		let year = lastReadDate[1];
		let month = lastReadDate[2];
		if (read_years_months.hasOwnProperty(year)) {
			if (!read_years_months[year].includes(month)) {
				read_years_months[year].push(month);
			}
		} else {
			read_years_months[year] = [month];
		}
		eachfile['year'] = year;
		eachfile['month'] = month;
	}

	//获取阅读进度或者是否读完状态
	const readProgress = bookInfo.progress == -1 ? '0%' : bookInfo.progress;
	const readStatus = bookInfo.readingStatus
	//添加彩虹猫进度条样式
	const progress = readStatus == '读完' ? 100 : parseFloat(readProgress);
	const readProgressBar =
		"<div class='nyan-cat-progress-container'><div class='nyan-cat-progress-bar' value=" +
		progress +
		" ><div class='nyan-cat-rainbow'><div class='nyan-cat-img'></div></div></div></div>";

	if (progress < 100) {
		let p_color = progress_color[selected][Math.floor(progress / 25)];
		eachfile['info'] = dv.paragraph(
			covertInfo +
				'\r`[!!|book-marked|book: 阅读进度：' +
				readProgress +
				'|' +
				p_color +
				']`' +
				readProgressBar
		);
	} else {
		eachfile['info'] = dv.paragraph(
			covertInfo +
				'\r`[!!|book-check|book:已读完|' +
				progress_color[selected][4] +
				']`' +
				readProgressBar
		);
	}
}

//按年份输出阅读卡片（倒序）
for (let y in read_years_months) {
	if( y == '2024'){
		dv.paragraph('## ' + y + '年');
		for (let m of read_years_months[y].sort()) {
			dv.paragraph('### ' + parseInt(m).toString() + '月');
			dv.table(
				['封面', '信息'],
				weReadFiles
					.sort(b => b.lastreaddate,'desc')  // [,'desc']表示逆序，需要顺序去除即可
					.map(b => {
						console.log(b)
						if (b && b.year && y === b.year && b.month && m === b.month) {
							return [b.cover, b.info];
						}
						return null; // 如果不匹配，返回 null
					})
					.filter(item => item !== null) // 过滤掉不匹配的项
			);
		}
	}
}

[ZiGmaX809]

非常感谢！显示效果是，先是非2024年的以列表的形式罗列出来（不显示年/月标题），最后2024年是以卡片表格的形式（和之前正常的一样）进行列示。看起来似乎过滤没能起作用。

那回头看看，我没有非2024的文件，所以没做测试

[ZiGmaX809]

非常感谢！显示效果是，先是非2024年的以列表的形式罗列出来（不显示年/月标题），最后2024年是以卡片表格的形式（和之前正常的一样）进行列示。看起来似乎过滤没能起作用。

代码我重构了一下，现在应该会比之前性能要好一点而且可以自定义显示年度，你重新拉取一下dataviewjs代码

[ZiGmaX809]

更新 2024.12.27

笔记数量多于5个时，使用插件Badges会导致渲染时间大幅度增加，因此使用了css对效果进行了重写并优化了代码，相较于之前的2700+ms的渲染时间，现在仅需700+ms。