Anki | 为随机渐变色卡片模板添加纹理并重新配色

2021-08-21

1012字

做猫贵在折腾

Anki

原模板

Anki模板：设计界黑马——渐变色，修改过程中非常感谢模板原作者的帮助

示例图片中所用的牌组：新标准日本语 · 初级 (假名到释义) 教材原版发音

修改部分

在模板头部部分添加纹理图片，并修改卡片底色，使卡片更具质感

在原模板的基础上，为卡片重新配色，正面卡片随机显示七种配色

修改卡片字体为开源霞鹜文楷体（注：IOS系统无法使用，PC使用需下载安装字体）

下载方式

ANKI美化模板-渐变色并加入纹理-20210820.rar 提取码：x7a5

进一步自定义指北：

修改图片纹理：

下载喜欢的纹理图片，并重命名，在文件名前加入下划线。如page修改为_page。
找到Anki的媒体库，地址一般为\\我的电脑\\Documents\\Anki\\用户1\\collection.media，放入之前下载的纹理图片。
打开Anki，点开模板牌组，选择浏览-卡片，打开卡片样式编辑器，在正面模板一栏中找到document.getElementById("HeaderColor").style.background =color+ ", url(_type.png)"，修改url(_type.png)为新下载的纹理图片名。
在样式栏中找到卡片头部样式部分，修改background-image:一行，同样修改url(_type.png)为新下载的纹理图片名。

修改卡片颜色

卡片正面控制颜色的部分如下，修改括号中的颜色代码即可改变卡片颜色

		case 0:
        color = "linear-gradient(to right bottom, #f3f9f1, #f0f9f6, #f1f8f9, #f5f7f8, #f6f6f6)";//如果x==0,则使用这个颜色(茶白)
        break;
    case 1:
        color = "linear-gradient(to right bottom, #a1afc9, #b9c0d4, #cfd1df, #e3e3ea, #f6f6f6)";//如果x==1,则使用这个颜色(蓝灰)

卡片背面与修改图片纹理方式类似，修改样式中的background-image: 一行中的颜色代码

将模板套用到其他牌组中

这里主要会碰到的问题是不同卡片对于字段的命名不同。比较简单的卡片可以使用Anki自身的“改变卡片模板”功能，将卡片字段进行逐一对应，或是浏览卡片样式，修改正面/背面的卡片字段为自己卡片的相应字段。如果卡片本身就设计得比较复杂，读一下模板中的涉及到卡片样式的段落，挑选想要的复制到原卡片中，再进行适配调整可能是比较好的方式。

修改过程中参考的网站

CSS混合模式学习

透明素材纹理库

配色网站：