anki 初步自定义设置

用 anki 记单词还是不错的，找到了这个仁兄分享的系列日语红宝书系列（匹配官方教材发音、带例句），感觉不错，但是使用习惯上稍微有点想要自己调整的地方，遂记录下来。

anki 显示的卡片可以自定义样式和内容

编辑卡片情况下，styling 里可以自定义样式，这里就注意下暗黑模式就行.nightMode，比如：

.card {
	font-size: 25px;
	text-align: center;
	color: black;
	line-height: 25px;
	padding-top: 35px;
	background-color: white;
}

.nightMode .Word {
	color: #ddd;
}

.autoColor {
	color: #333;
}

.nightMode .autoColor {
	color: #ddd;
}

@font-face {
	font-family: kt;
	src: url('_kt.ttf');
}

@font-face {
	font-family: times;
	src: url('_times.ttf');
}

h1 {
	font-family: MS UI Gothic;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 5px;
	text-align: center;
	height: 35px;
	line-height: 35px;
	padding: 1px 0px 0px 0px;
	border: 0px solid #b7d5eb;
	border-radius: 30px;
}

.R {
	color: #b7d5eb;
	background-color: #338eca
}

.S {
	color: #c1e7b8;
	background-color: #56a844
}

.D {
	color: #f7c4b8;
	background-color: #ec6c4f
}

.POSR {
	background-color: #338eca;
	line-height: 30px;
}

.POSS {
	background-color: #56a844;
	line-height: 30px;
}

.POSD {
	background-color: #ec6c4f;
	line-height: 30px;
}

.Word {
	font-family: MS Gothic;
	letter-spacing: 1px;
	height: 35px;
	line-height: 35px;
	color: #303030;
	font-size: 32px;
}

.PhoneticSymbol {
	font-family: MS Gothic;
	text-align: center;
	color: #555555;
	font-size: 20px;
}

.nightMode .PhoneticSymbol {
	font-family: MS Gothic;
	text-align: center;
	color: #777;
	font-size: 20px;
}

h {
	font-family: calibri;
	font-size: 28px;
	color: #FFFFFF;
	padding: 2px 4px 4px 4px;
	display: inline-block;
	border-radius: 6px;
}

.Paraphrase {
	font-family: MS Gothic;
	font-size: 25px;
	text-align: center;
	color: #2d2d2d;
	line-height: 30px;
	display: inline;
}

.En {
	margin: 0em 0em 0em 0.2em;
	font-family: calibri;
	text-align: justify;
	#text-align: center;
	font-size: 20px;
	text-indent: 0em;
	color: #555555;
	line-height: 30px;
	padding: 0.5em 0.5em;
}

.nightMode .En {
	margin: 0em 0em 0em 0.2em;
	font-family: calibri;
	text-align: justify;
	#text-align: center;
	font-size: 20px;
	text-indent: 0em;
	color: #777;
	line-height: 30px;
	padding: 0.5em 0.5em;
}


.Ch {
	margin: 0em 0em 0em 0.2em;
	font-family: 微软雅黑;
	text-align: justify;
	#text-align: center;
	font-size: 18px;
	text-indent: 0em;
	color: #555555;
	line-height: 30px;
	padding: 0.5em 0.5em;
}


.Zh {
	margin: -0.5em 0em 0em 0.2em;
	font-family: 微软雅黑;
	text-align: center;
	font-size: 18px;
	text-indent: 0em;
	color: #555555;
	line-height: 18px;
	padding: 0.5em 0.5em;
}

.container {
	display: flex;
	/* 使用 Flexbox 布局 */
	justify-content: center;
	/* 水平居中 */
	width: 100%;
	/* 可以根据实际需求设置宽度 */
}

.hint {
	font-family: calibri;
	font-size: 20px;
	text-align: left;
	# text-decoration: none;
	color: #444444;
	line-height: 22px;
	# padding: 5px 10px 0px 10px;
	# display: inline;
	# border: 1px solid #dcdcdc;
	# border-radius: 5px;
}

.nightMode .hint {
	font-family: calibri;
	font-size: 20px;
	text-align: left;
	white-space: pre-wrap;
	/* 保持文本格式，并允许自动换行 */
	# text-decoration: none;
	color: #777;
	line-height: 22px;
	# padding: 5px 10px 0px 10px;
	# display: inline;
	# border: 1px solid #dcdcdc;
	# border-radius: 5px;
}

u {
	text-decoration: none;
	# background-color: #ffff75;
	border-bottom: 2px solid #ec6c4f;
	padding: 0px 2px 0px 2px;
	display: inline;
}

hr {
	height: 3px;
	border-radius: 3px;
	width: 40%;
	display: inline-block;
	border: 0px solid #ffffff;
}

.win hr {
	vertical-align: middle;
	margin-right: 0.2em;
	margin-left: 0.2em;
}

.mac hr {
	vertical-align: middle;
	margin-right: 0.2em;
	margin-left: 0.2em;
}

当然也能写 js 脚步来控制内容和样式，一般就是在卡片的正面或者反面的地方，反面多点，比如：

<div class=ss>
	{{FrontSide}}
</div>

<p><span class=Word>{{假名}}</span>
<p>
<div class=PhoneticSymbol>{{声调}}</div>
<br>
<div class=autoColor style='font-family: calibri; font-size: 20px;'>{{中文释义}}</div>

<div class=autoColor style='font-family:calibri; font-size: 20px;'>{{日文释义}}</div>
<p>
	<br>
<div class=En style="border-left: 3px solid #56a844;">{{furigana:例句}}</div>
{{#例句翻译}} <div class=Zh style="border-left: 3px solid #4c991b;">{{例句翻译}}</div>{{/例句翻译}}


{{#同音}}
<br>
<hr class=POSS style="width:100%" ; />
<div class=container>
	<div class=hint>{{同音}}</div>
</div>
{{/同音}}
{{#惯用/関係}}
<hr class=POSS style="width:100%" ; />
<div class=container>
	<div class=hint>{{惯用/関係}}</div>
</div>
{{/惯用/関係}}
{{发音}}

<script>
	//document.addEventListener('DOMContentLoaded', function() {
	var content = document.querySelector(".ss");  // 假设'.card-content'是你的卡片内容的容器
	// 首先，找到类名为 'a' 的 div

	// 然后，找到这个 div 内的第一个 a 标签
	var link = content.querySelector('a');

	// 如果确实找到了 a 标签，从其父元素中移除它
	if (link) {
		link.parentNode.removeChild(link);
	}
	//alert(content.innerHTML)
	//});
</script>