最新文章
这里会显示最新的几篇文章摘要。
anki折腾记
这周开始坚持使用anki，但之前一直觉得anki制作闪卡太麻烦，这两天又折腾了一阵子，制卡效率大大提升，反而是记卡变成了主要难点:-)
下面是配置方法：
制卡
- 使用anki for vscode插件
- 看插件使用方法，没次制卡发动到note卡组就可以了，使用markdown效率很高，还支持代码高亮和公式
问答题卡片模板
苦于插件模板太简，于是没次把把卡片先发到note卡组，再更改模板就可以了，
这里附上好看的卡片模板：
<link rel="stylesheet" href="_vscodeAnkiPlugin.css" />是为了适配插件的代码高亮
正面：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Anki Front Template</title>
<link rel="stylesheet" href="_vscodeAnkiPlugin.css" />
<style>
body {
margin: 0;
padding: 0;
background-color: #323232; /* 整体深色背景 */
font-family: "Helvetica", "Arial", sans-serif;
line-height: 1.5;
color: #f0f0f0;
}
.card-container {
max-width: 600px;
background-color: #2c2c2c; /* 较深色的卡片背景 */
margin: 5% auto;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}
.front-field {
font-size: 1.2em;
margin-bottom: 20px;
}
.example-field {
font-size: 0.95em;
color: #cccccc;
margin-top: 10px;
padding: 10px;
background-color: #1f1f1f; /* 示例区域的底色，可按需调整 */
border-radius: 5px;
}
</style>
</head>
<body>
<div class="card-container">
<!-- 显示 Front 字段 -->
<div class="front-field">
{{Front}}
</div>
<!-- 如果 Example 字段不为空，则显示作为附加部分 -->
{{#Example}}
<div class="example-field">
<strong>Example:</strong> {{Example}}
</div>
{{/Example}}
</div>
</body>
</html>
反面：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Anki Back Template</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #323232;
font-family: "Helvetica", "Arial", sans-serif;
line-height: 1.5;
color: #f0f0f0;
}
.card-container {
max-width: 600px;
background-color: #2c2c2c;
margin: 5% auto;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}
.back-field {
font-size: 1.0em;
}
.example-field {
font-size: 0.95em;
color: #cccccc;
margin-top: 10px;
padding: 10px;
background-color: #1f1f1f;
border-radius: 5px;
}
hr {
margin: 2em 0;
border: none;
border-top: 1px solid #444;
}
</style>
</head>
<body>
<div class="card-container">
<!-- 将前面内容一起显示 (FrontSide) -->
{{FrontSide}}
<hr>
<!-- 显示 Back 字段内容 -->
<div class="back-field">
{{Back}}
</div>
<!-- 如果 Example 字段不为空，则背面同样可以展示或补充示例 -->
{{#Example}}
<div class="example-field">
<strong>Example:</strong> {{Example}}
</div>
{{/Example}}
</div>
</body>
</html>
样式：
/* 🌙 深色护眼背景 */
.card {
font-size: 20px;
text-align: center;
line-height: 1.5;
padding: 20px;
border-radius: 15px;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
background: linear-gradient(135deg, #1e1e1e, #2c2c2c); /* 深色护眼背景 */
color: #d4d4d4; /* 浅色文字 */
}
这样就可以愉快地制卡了
新增填空题模板：
正面：
<!-- front template -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Anki Cloze Template (Front)</title>
<link rel="stylesheet" href="_vscodeAnkiPlugin.css" />
<style>
body {
margin: 0;
padding: 0;
background-color: #323232;
font-family: "Helvetica", "Arial", sans-serif;
line-height: 1.5;
color: #f0f0f0;
}
.card-container {
max-width: 600px;
background-color: #2c2c2c;
margin: 5% auto;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}
.front-field {
font-size: 1.2em;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="card-container">
<!-- Cloze 填空题的前面部分 -->
<div class="front-field">
{{cloze:Text}}
</div>
</div>
</body>
</html>
反面：
<!-- back template -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Anki Cloze Template (Back)</title>
<link rel="stylesheet" href="_vscodeAnkiPlugin.css" />
<style>
body {
margin: 0;
padding: 0;
background-color: #323232;
font-family: "Helvetica", "Arial", sans-serif;
line-height: 1.5;
color: #f0f0f0;
}
.card-container {
max-width: 600px;
background-color: #2c2c2c;
margin: 5% auto;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}
.front-field {
font-size: 1.2em;
margin-bottom: 20px;
}
hr {
border: none;
border-top: 2px solid #555;
margin: 20px 0;
}
</style>
</head>
<body>
<div class="card-container">
<!-- Cloze 填空题的答案显示部分 -->
<div class="front-field">
{{cloze:Text}}
</div>
<hr>
<!-- 如有额外说明，可添加在此处 -->
<!-- <div class="example-field">这里是额外说明</div> -->
</div>
</body>
</html>
浙公网安备 33010602011771号